2017年5月12日 星期五

Cordova 初探筆記

-----------------------------------------------------------
0) 準備/前提
-----------------------------------------------------------
1. 你已經安裝好各平台"自身"的開發環境了

    MEMO: Android: https://cordova.apache.org/docs/en/latest/guide/platforms/android/
          iOS: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/
          ...

    建議: Andriod Studio 安裝全部預設元件,並也用預設的路徑...參見 B) 的第 6 項 MEMO

2. 設置相關的環境變數,或之後檢查再設置...參見 B) 的第 6 項

-----------------------------------------------------------
A) 安裝 node.js(含npm), cordova
-----------------------------------------------------------
1. 安裝 node.js
    來源: http://nodejs.org/

    NOTE: 下面功能必須安裝
        [] Node.js runtime
        [] npm package manager
        [] Add to PATH


2. 驗證 node 安裝
    開啟命令提示字元,輸入 node,是否有執行並回應新行,顯示提示號 '>'
        C:\>node
    提示號 '>' 下輸入 1+2 ,檢查是否有回應 3 的答案
        C:\>node
        >1+2

    NOTE: node.js 是利用 google chrome v8 引擎執行, 如果出現 Windows 安全性警示,
          按下解除封鎖按鈕


3. 驗證 npm 安裝
    開啟命令提示字元,輸入 npm,是有否顯示 usage 訊息
        C:\>npm

4. 安裝 cordova
    開啟命令提示字元,輸入
        C:\>npm install -g cordova

    NOTE: 必須要有網路連線 npm 會下載安裝包
    NOTE: 建議全域安裝 '-g'


5. 驗證 cordova 安裝
    開啟命令提示字元,輸入 cordova,是否有顯示 synopsis 訊息
        C:\>cordova

6. (非必要) 更新 cordova
    開啟命令提示字元,輸入
        目前版本 (本地)
            C:\>cordova -v
        查最後版本 (網路)
            C:\>npm info cordova version
        升級
            C:\>npm update -g cordova  (沒法更新 7.0.0 -> 7.0.1?)
            或
            C:\>npm install -g cordova

    MEMO: 唯有更新 cordova 後,'platform update' 才能不指定版號更新,
          參見 C) 第 5 項


-----------------------------------------------------------
B) 建立新 cordova 專案
-----------------------------------------------------------
1. (非必要,只是多專案時都可以在一個父目錄下) 建立一個工作目錄 'work'

2. 在此工作目錄下開啟命令提示字元 (或開啟後進入此工作目錄)
    C:\work>

    NOTE: 以後全都要在命令提示模式下操作

3. 假設:專案目錄 myapp,反向域樣式識別碼 aaa.bbb.ccc.MyApp,應用程式的顯示標題 MyApp

    命令提示字元下執行
    C:\work>cordova create myapp com.mycompany.myteam.myapp MyApp

    MEMO: cordova create <PATH> [ID [NAME [CONFIG]]] [options]

    P.S. cordova 將在 C:\work\myapp 下生成專案檔案


4. 進入 C:\work\myapp 目錄下
    C:\work>cd C:\work\myapp
    C:\work\myapp>

    *** NOTE: 專案目錄建立後,以後所有 cordova 命令全都在專案目錄 (C:\work\myapp)
              下操作


5. 加入目標平台 android, ios ...
    c:\work\myapp>cordova platform add android ios

    NOTE: 你必須先安裝好該平台的開發環境 (browser 除外),否則會提示警告,並且之
          後跑執行(run)/建構(build)會失敗


    MEMO: cordova platform <command> [options]
    MEMO: cordova 7.0 之後,
'platform add' 自動加 '--save' 選項,參見下
          面 D) 的 NOTE 2,3

6. (非必要,但建議) 檢查是否滿足平台的開發環境需求
    c:\work\myapp>cordova requirements --verbose

    NOTE: 環境變數可能(*)須要手動設置...
          Android platform:
            JAVA_HOME
                ...
            ANDROID_HOME
                如果安裝在
                    C:\Program Files\Android\Android Studio
                    C:\Users\MyName\AppData\Local\Android\sdk
                則執行(臨時)
                    c:\work\myapp>set ANDROID_HOME=C:\Users\MyName\AppData\Local\Android\sdk
                或新增環境變數(永久)
                    控制台->進階系統設定->環境變數->系統變數, 新增...
            PATH
                (我沒做) 建議新增 C:\Users\MyName\AppData\Local\Android\sdk\platform-tools;C:\Users\MyName\AppData\Local\Android\sdk\tools;C:\Users\MyName\AppData\Local\Android\sdk\tools\bin

            Gradle 執行路徑可能(*)需要新增到 PATH 變數 (我沒做)

    MEMO: 經驗上這邊常常會檢查出錯 (這表示稍後建構應用程式也會失敗),錯誤的原因
          requirements 指令已經列出,如果是環境變數沒設置很容易解決,而正確設置還
          出錯是常常在網路社群 (like StackOverflow...) 被詢問的,如 Gradle 找不到
          最多人問...

          我發現終究原因是平台的 SDK/Tools 頻繁改版,但 SDK/Tools 與 Cordova
          platform 開發的人員是不同的一群人,Cordova platform 開發也會改版,並依據
          當前的 SDK/Tools 測試發行(*),唯沒法呼應全部玩家的環境及手上 SDK/Tools 的
          版本,所以建議一開始各抓最新版 (平台的 SDK 日期不要比 Cordova 新) 設置好
          如果測過,謹慎更新 SDK(*) 或 Cordova,再發生 requirements 有錯誤時,無法
          解決則最終就是回歸上次 ok 的版本..."_"


          如下有一個案例,更新 Android SDK Tools 後,Cordova 報 Gradle 找不到        
          因 Gradle 搬家了:
          C:\Users\MyName\AppData\Local\Android\sdk\tool
          到:
          C:\Program Files\Android\Android Studio\plugins\android\lib\templates\gradle\wrapper
          ...
          http://stackoverflow.com/questions/42613882/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo

          (*)建議: 安裝 SDK/Tools 時預設元件不要核銷,Cordova platform 有時(**)
                   會用到...
                   並用預設的路徑,Cordova 優先會去那邊找...就可不用設置環境變數


          (**)P.S. 如我有一次更新 android platform 後,出現 cmd: Command failed with
                   exit code 1 Error output: 'avdmanager'....錯誤,研究發現這是新版
                   android platform 改用此 cmd tool (來自 android sdk tools) 來判定
                   android target,但我 ANDROID_HOME 下是沒這東西的,後重新安
                   Android Studio 時懷疑可能是我之前省硬碟空間沒裝虛擬機器選項?


-----------------------------------------------------------
C) 編輯 cordova 專案
-----------------------------------------------------------
1. 撰寫你的 html5 程式碼位於
    C:\work\myapp\www\

    NOTE: 此 www 目錄會在執行/建構時複製至目標平臺的子目錄中,如 platforms/ios/www 或
          platforms/android/assets/www,請編輯此處 www 目錄中的檔案,而不是位於平臺的
          子目錄下的檔案


2. (非必要) 如果需要安裝外掛
    c:\work\myapp>cordova plugin add cordova-plugin-inappbrowser
    c:\work\myapp>cordova plugin add cordova-plugin-camera
    ...etc

3. 執行
    c:\work\myapp>cordova run android

   構建指定平台
    c:\work\myapp>cordova build android

   或構建全部
    c:\work\myapp>cordova build

   或發行(簽署)
    c:\work\myapp>cordova run android --release -- --keystore=../my_release_key.keystore --storePassword=my_password --alias=my_alias_name --password=my_password

    c:\work\myapp>cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

    NOTE: 當使用上述 CLI(Command Line Interface) 去執行/建構應用程式 (或外掛重新安裝)
          ,專案目錄下 /platforms/ 裡面的某些檔案會被 CLI 覆蓋,所以除非知道哪些不會有影

          (如: platforms\android\src\com\ 下加入自己的 android java 程式...),不
          應該對裡面的文件做編輯修改

    MEMO: 簽署: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#signing-an-app

4. (非必要) 除錯
    MEMO: 除錯: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#debugging

5. (非必要) 更新
    cordova 本身
        更新參考 A) 的第 6 項

    查各平台最後版本 (網路)
        npm info cordova-android version
        npm info cordova-ios version
        ...etc

    專案目前安裝平台及版本
        cordova platform ls

    更新至最後(固定標記)版本
        cordova platform update android
        ...etc

    NOTE: 各 cordova 版本發行時會固定標記(pinned)一個預設平台版本號
          (available platforms), platform update/add 只會更新到/加入該版,除非指
          定版號(如下),或先更新 cordova


    更新至指定版本
        cordova platform update android@5.4.3
        ...etc

    NOTE: 可以任意指定網路上有的版本

    各外掛最後版本
        npm info cordova-plugin-inappbrowser version
        npm info cordova-plugin-whitelist version
        ...etc

    專案目前安裝外掛及版本
        cordova plugin ls

    更新至最後(固定標記)版本
        cordova plugin update cordova-plugin-inappbrowser (中文版文件你弄錯了吧?)
        或
        cordova plugin remove cordova-plugin-inappbrowser
        cordova plugin add cordova-plugin-inappbrowser
        ...etc


    更新至指定版本
        cordova plugin remove cordova-plugin-inappbrowser
        cordova plugin add cordova-plugin-inappbrowser@1.2.3
        ...etc

    安裝 cordova-check-plugins 可一次更新專案裡全部外掛 (https://github.com/dpa99c/cordova-check-plugins)
        npm install -g cordova-check-plugins

7. (非必要) 修改專案設置
    編輯下面文件
    c:\work\myapp\config.xml

-----------------------------------------------------------
D) 其他命令 (全都在 C:\work\myapp 下操作)
-----------------------------------------------------------
    cordova platform remove ios
    cordova plugin remove cordova-plugin-camera --save
    cordova emulate android

    NOTE: 如果移除平台 (platform remove), platforms/xx 將被刪除,所以任何你在裡面
          作的異動會消失!

    NOTE: When adding/removing plugins or platforms, use the '--save' flag to

          add/remove them to config.xml.

          Existing projects can use 'cordova plugin save' and 'cordova platform
          save' commands to save all previously installed plugins and platforms
          into your project's config.xml.

          Platforms and plugins will be autorestored when cordova prepare is run.


    NOTE: After Cordova 7.0 it will automatically save that platform or plugin to
          your config.xml and package.json. The --save flag is no longer required to
          save. Use --nosave to prevent saving.

    MEMO: 更多: https://cordova.apache.org/docs/en/latest/reference/cordova-cli/

-----------------------------------------------------------
E) 參考
-----------------------------------------------------------
https://cordova.apache.org/docs/en/latest/guide/cli/
https://cordova.apache.org/docs/en/latest/

2015年8月11日 星期二

(再度) 如何在 Synology NAS 設置 GIT 伺服器 (新版)

2013 年曾發表兩篇文章, 是多年前的老機器 DS107 的紀錄, 這台機器的 DSM 已經停止更新, 當時他是無法透過 DSM 安裝 GIT 套件, 所以只能手動(ipkg)安裝, 最近購入 DS214 發現新的 DSM 上已經有套件可以直接安裝, 如果你的 DSM 有支援線上安裝 GIT Server 可參考本文...

===================================================

NOTE: 這是我的私人記錄, 不是教學!

環境:

1. Synology DS214Play+ DSM 5.2-5592 版
2. 有實體 IP 11.22.33.44 (此為亂寫)

How to setup a GIT Server on a Synology NAS
-------------------------------------------
 
1. 先啟動 SSH 功能
   DSM-> 控制台 -> 進階模式 -> 終端機 & SNMP -> [v] 啟動 SSH 功能

   P.S. 安全起見建議你自訂連接埠!

2. 安裝 Git Server 套件
   DSM-> 套件中心 -> 收尋 "git" -> 找到 [Git Server] -> 點 [安裝套件]

   P.S. 要等待一下下安裝完成...

3. 啟動 Git Server 套件
   DSM -> 套件中心 -> 已安裝 -> 找到 [Git Server], 點選 -> 點 [動作] -> 啟動

4. 建立 git 庫(repository) 的位置, 假定 "git-repo"
   DSM -> 控制台 -> 共用資料夾 -> [新增] -> 名稱 "git-repo"

   P.S. 以上名稱可以自訂.

5. 建立 git server 使用者, 假定 "git.user", "blabla"...
   DSM -> 控制台 -> 使用者帳號 -> [新增] -> 名稱 "git.user", 密碼 "xxx" ->
   指定群組, 勾 "Users" (*) -> 在 "指派共用資料夾權限" 頁面, 在 "git-repo" 的 "可讀寫"
   打勾

   P.S. (*)可以把全部使用 git server 的使用者, 放在一個專用的群組.
   P.S. 以上名稱可以自訂.

6. 設置 Git Server 使用者
   DSM -> 主選單 -> Git Server -> "git.user" 的 "允許存取" 打勾

7. 建立 git 庫(repository), 假定 "test"

   [方法1] Only for Windows (or Mac?)

      前提:
        1. NAS 能位於 PC 相同的區域網域(**), PC 能連線 NAS 為網路磁碟(或資料夾)

           P.S: (**)實際上我的 NAS 都是放在區(內)網 192.168.0.x, 由 router 映射一個
                外部 ip:port 給 NAS 需要開放的服務, like
                11.22.33.44:1234 -> 192.168.0.x:22 (your SSH port in NAS)

        2. PC 有安裝 TortoiseGit, 或其他 Git clients.

      步驟:
        1. 啟動 NAS 的 Windows 檔案服務
              DSM -> 控制台 -> 檔案服務 -> [Windows 檔案服務] -> 啟動, 注意下面有寫 PC
              檔案總管如何存取...預設為 \\Diskstation

        2. PC -> 檔案總管 -> 選單, 連線網路磁碟機 -> 指定磁碟機代號, 資料夾輸入
           \\Diskstation\git-repo -> 輸入 DSM 的(管理員或 git.user)的登入名字與密碼

           或

           PC -> 檔案總管 -> 頁籤, 電腦 -> 滑鼠在 [網路位置] 上按右鍵選單 -> 新增一個網路
           位置 ->選擇自訂網路位置 -> 輸入 \\RICHSTATION\git-repo -> ...

        3. 如果你已經是 TortoiseGit 的能力者, 剩下就簡單並直覺了...
              a) 在 NAS 上新建 GIT 專案庫:
                 直接打開網路資料夾 git-repo -> 裡面新建一個資料夾 "test" ->
                 滑鼠在 "test" 資料夾上按右鍵選單 -> Git Create repository here... ->
                 勾 'Make It Bare' (***) -> OK.

         P.S: (***)這裡還蠻重要的, 因為是遠端庫, 不在庫目錄上直接工作, 不勾會導致每次本
                地 push 遠端時都發一個警告...

              b) 轉移既有(或備份)的 GIT 專案庫到 NAS:
                 不用多說了把既有的 GIT 專案庫(bared)複製到網路資料夾 git-repo 裡面!

   [方法2] SSH 登入 NAS

      步驟:
        1. PC 執行 SSH client(!), Host Name: 11.22.33.44, Port: 22 (或自訂過)
            P.S. (!) 我是用 PuTTY

        2. Login as: admin
            Password: (NAS 網頁管理頁面(admin)用的密碼)

        NOTE: 這裡登入名字建議不要用 'root', root 登入後若不切換帳號, 可能會導致後面建
                  test 資料夾權限只限 root 用戶可存取, 此時還要用 chmod 修改...
        NOTE: 如果密碼沒錯卻拒絕登入, 可以檢查:
 
                1. ip:port 是否正確, 路由 ip(router):port -> NAS:port 都正確? 
                2. 是否被 router(firewall) 封鎖 IP or port? 
                3. 是否被 NAS 封鎖 IP or port?
                4. NAS 的 SSH 服務已經已啟動?

        3. 接下來操作 shell commands
      Diskstation> cd /volume1/git-repo/
      Diskstation> pwd 

            (確認一下目前目錄為上面嗎)
            /volume1/git-repo
      Diskstation> mkdir test

            (建立新的資料夾擺放 test 專案的 Git 庫)
      Diskstation> ls -l
            (確認一下目錄的權限)
      ...
      drwxrwxrwx  7 admin users  4096 Aug 12 15:26 test
       ^^^^^^^^^          ^^^^^ 

       123456789 
       -> 123:admin 可讀寫執行, 456:users 可寫執行, 789:其他人也可
      NOTE: 權限不對, 會導致 git.user 在本地無法存取 /volume1/git-repo/test, 此時可
                用 chmod 修改, 或直接換用 git.user 身份建立資料夾... 
                參見 如何在 (老) Synology NAS 設置 GIT 伺服器 (2/2)

      Diskstation> cd test
      Diskstation> pwd

            (確認一下目前目錄為上面嗎)
            /volume1/git-repo/test
      Diskstation> git --bare init

            (建立初始 git 空庫)
            Initialized empty Git repository in /volume1/git-repo/test/


8. Clone Git 庫
   以步驟 7 的 test Git 庫, 其遠端的存取位置(URL)為

   ssh://git.user@11.22.33.44:22/volume1/git-repo/test

   NOTE:  1. git.user 為步驟 5 的建立的 git 使用者名字. 請替換為你的名字.
   NOTE:  2. :22 為預設 SSH 連接埠, 或是你有自訂其他的數值...

   操作 Git client 的 clone, 連線後會問 git.user 的密碼, 輸入後, 如正確無誤, 就開始複製
   檔案到本地, Git 的使用方法此處不多說了...

參考: Synology Git 套件說明

Q1: 每次本地操作 remote git 時都會出現 "Could not chdir to home directory /var/services/homes/git.user: No such file or directory"?

A1: 這是因為 DSM 操作新增 git.user 時並沒有建立其家目錄, 這只是警告不妨礙 Git 操作, 如果不愛, 可以用 SSH 登入 NAS, 操作 shell 指令方式, 重新指定 git.user 的家目錄, 參見
如何在 (老) Synology NAS 設置 GIT 伺服器 (2/2) 中, 步驟 15 有說明修改(改家目錄, shell 應該不用改).

2015年6月25日 星期四

Sublime Text and Uncrustify

I like to use Uncrustify to format the source codes and the Sublime Text to edit codes.. 

After discover packages in packagecontrol.io I can't find a plug-in that uses Uncrustify in Sublime Text *_*

The are some C/C++ formatter/beautifier for Sublime Text. But they aren't my favor Uncrustify!!

So I wrote myself....Everyone who likes Uncrustify and Sublime Text, Now I present to you the...... Sublime-Uncrustify ^_^