2019年8月27日 星期二

在Android Studio開啟Cordova專案

使用cordova建立專案
通常都是透過指令直接操作
但也會有必須要使用Android Studio執行的狀況
以下是在Android Studio內執行Cordova 專案的流程

1.選擇import project(Gradle,Eclips)
2.選擇目錄:選取Cordova專案下的platform/android
  注意不要選取整個codova專案
3.出現錯誤 The minSdk version should not be declared in the android manifest file
  解法
  移除 android/CordovaLib/AndroidManifest.xml與
  android/app/src/main/AndroidManifest.xml內的
  <uses-sdk android:targetSdkVersion="28" android:minSdkVersion="19" />
4.重新執行File/Sync Project with Gradle 即可 執行

2019年8月21日 星期三

Summer's Rain

連續兩個多禮拜的雨
這個夏天 雨也下的夠久的了

退伍後到台北工作 即使沒帶多少行李
還是會把吉他帶在身邊
即使在辭掉工作回高雄一段時間
再回到台北 還是會把吉他帶著

曾有一小段時間在師大對面的樂器行學琴
下班後就從五股背著吉他騎車到和平東路

第一次去 老師 問我想彈什麼樣的音樂
我就把這張CD拿出來
這是我最喜歡的樂團吉他手
我想要這個~

2019年8月16日 星期五

vue-cli環境變數使用

vue-cli在執行許多的程式會需要在不同的情況(model)下
用到不同的環境變數
1.因此預設會有這3種mode
  development|test|production
2.不同mode使用的環境變數 會以下列檔名儲存
.env              # 任何mode都會載入的變數
.env.local        # 任何mode都會載入的變數,只限開發者自己使用的變數,檔案不進git
.env.[mode]       # 指定mode會載入的變數
.env.[mode].local # 指定mode會載入的變數,只限開發者自己使用的變數,檔案不進git
3.env檔案內 變數的設定方式
  以key=value方式寫
  如果是要讓client端可以拿去使用的變數名稱
  必須以VUE_APP_開頭命名
  否則都只有在node環境下才讀得到變數值
4.client端應用
  例 public/index.html本身就是一個樣板
  可用樣板語言,就可以拿client端可用的環境變數來做判斷
  使用或顯示
5.環境變數除了寫在特定的env檔案內以外
  也可以寫在vue.config.js設定檔內

2019年8月14日 星期三

vue-cli 3 webpack設定yaml讀取

目前已經將原本在框架下使用json設定檔案都改成yaml檔案
畢竟yml的結構比json要好上很多
在後端的nodejs上透過js-yaml即可讀取
前端上vue要使用
則需要透過webpack的js-yaml-loader的設定支援讀取
使用上可以很簡單的用
import data from 'js-yaml-loader!./conf/apis.yml'
這樣免設定的方式執行 但還是不太建議直接這樣用

如果是要設定到webpack的config上
使用vue-cli 3 會發現已經完全看不到webpack的設定
所有的設定已經都包裹在整個架構內
如果需要調整或增加webpack設定
可以在根目錄下建立vue.config.js檔案
用來覆寫或增加上定內容

參考vue-cli設定
https://cli.vuejs.org/guide/webpack.html#simple-configuration

以下sample code範例為
修改連線port 並加入yaml loader

module.exports = {
  devServer: {
    port: 1234
  },
  chainWebpack: config => {
    config.module
      .rule('yaml')
      .test(/\.ya?ml$/)
      .use('js-yaml-loader')
      .loader('js-yaml-loader')
      .end()
  }
}

2019年7月29日 星期一

nodejs 使用mocha+supertest做api測試

因為是使用mocha做單元測試
是可以把測試api 與測試function的部分
一起執行
幾個地方注意
1.當需要在執行API測試前後做一些資料處理
  例如塞入token 這部分都會是放在
  beforeEach與afterEach內執行
2.預期會是在執行beforeEach後才會去執行it測試
  但當beforeEach需要執行非同步的功能
  需帶入done callback 當作在執行完成時
  往下執行的通知點
3.beforeEach內要執行async method
  若直接用async/await執行會有問題時
  改用promise方式執行 可以解決
4.API測試 若回傳為json物件
  可以透過res.body拿到 object型態的資料
  若透過res.text 拿到的資料類型會是text 需要自己轉成物件
5.API測試 若回傳為text
  透過res.text 拿到取得的資料,若去拿res.body會是個空物件{}

使用參考
https://github.com/visionmedia/supertest
sample Code

describe('測試 sample 目錄', () => {
  beforeEach((done) => {
    // 測試前需要執行的工作
    runServer().then(response => {
      server = response.server
      api = supertest(server)
      done()
    })
  })
  afterEach((done) => {
    // 測試結束前需要執行的工作
    server.close()
    done()
  })
  it('sample/text 測試', (done) => {
    api.get('/sample/text')
      .expect('Content-Type', /text/)
      .expect(200)
      .end((err, response) => {
        if (err) return done(err)
        console.log('response text====')
        console.log(typeof response.text)
        console.log(response.body)
        done()
      })
  })
  it('sample/json 測試', (done) => {
    api.get('/sample/json')
      .expect('Content-Type', /json/)
      .expect(200)
      .end((err, response) => {
        if (err) return done(err)
        console.log('response json====')
        console.log(response.body)
        done()
      })
  })
})