2019年2月11日 星期一

Cordova開發小筆記

這幾天開始研究Cordova後,便想稍微紀錄一下我自己嘗試成功的一些資訊,一方面供參考,一方面稍加整理過的資訊,自己未來如果有機會要回頭看也比較方便。(另外其實也是想把某些網站從書籤中清掉xd)

正文開始:

*為何選擇Cordova?

之前我用Html5 + Firebase的技術參與過朋友的專案,算是個資淺的網頁工程師,但有在考慮用網頁技術寫app,所以最初是看了一篇:
The Step-by-Step Guide to Publishing a HTML5 Mobile Application on App Stores

這篇文章主要是在簡介網頁app、混合app以及原生app的差異,並推薦ionic作為開發環。就我粗略的理解,ionic=Angular JS + Cordova。

經過一些調查,加上我之前是跟朋友用Typescript+Scss為基底自行開發的框架作專案,就架構上沒有用其他JS的框架,我打算作的開發也不難,所以現階段我也不想再多去了解Angular JS,就針對Cordova開始進行調查了,而後發現其實我要的打包網站成行動app及一些用JS操控手機的API,其實正好就是Cordova本身作的事情,所以我就開始準備Cordova的開發環境。

*Cordova開發環境建立

網路上文章滿多的,看了看,我覺得最好讀的是這篇:
使用Cordova将您的前端JavaScript应用打包成手机原生应用

基本上照著這篇作到底就可以了,不過這篇沒有提到的是需要安裝JDK等開發環境,因此在依樣畫葫蘆的過程中會遇到不如預期的反應,這時我翻到了
Android Studio Project detected in Cordova project

用該文的提到的

your code...
int x = foo();  /* This is a comment  This is not code
  Continuation of comment */
int y = bar();
dsasdsa

$ cordova requirements

便可找出哪些東西是沒安裝的,就照上面提示的順序去抓,不過Android SDK的部分,其實是要去抓Google的Android Studio,安裝好之後用它的SDK Manager去抓,細節是怎樣我忘了,但是重點就是說缺的一些安裝環境要從這一線開始著手比較順利,這邊搞一搞,印象中requiments中的Gradle也會順便抓到的樣子,剩下的就是看缺啥就補而已。

這個過程似乎會有環境變量的問題(網路上很多文章都會提到),那本人有的有設,那有沒有每個安裝的東西都設,好像也沒有(記憶模糊...),總之如果有遇到問題的話,可以參考
windows 下环境变量 path 详解

然後google一下自己的作業系統要怎麼改環境變量應該就可以解決了~

這些問題都解決之後,就繼續照著那篇談打包的文章繼續作下去,最終應該就會產生出一個apk檔了,這個檔案因為用Android Studio的 AVD實在太lag,我就傳到我手機安裝了,那也就順利成功。

PS:建置完畢後,後來還有看到很值得參考的資料,所以也一併附上。
[Cordova Week-1] Hello Cordova!

*Cordova是否支援行動app的廣告?

答案是可以。這個問題本來希望在初探要用什麼技術來打包網頁比較好的階段就想搞清楚,奈何沒有找到很清晰的資訊,有的資料也滿舊的了。關於這個問題,我找到我覺得最棒的資料是
Integrate Google Ads in Apache Cordova Mobile Apps

它推薦一款提供JS的API的plugin來作這件事情,而這個plugin似乎是非常有口碑的,筆者自己上Cordova的官網用關鍵字搜尋相關plugin,還有看到有些plugin其作者聲稱不會蒐集資料之類的或者分潤,結果有人反映實際上不然的情形,於是就決定選用這款Github上星數很多的plugin。

*Cordova的API

在確定了打包與廣告這兩點之後,接著就是開始進入實作的部分了,這部分的重點之一應該是Cordova開給JS以操作手機功能的API有哪些?以及該怎麼用等等。

這部分的文章就是待續囉~因為還在研究中0.0

沒有留言:

張貼留言