三十天全端學習(Javascript、Python、MongoDB)---第五天：環境篇---建置cordova與第一個Onsen UI---web app

第五天：環境篇---建置cordova與第一個Onsen UI---web app

今天帶大家建立一個使用Onsen UI框架的web app，首先需要進行一些前置作業：

1. 下載並安裝node.js
2. 透過node.js的指令npm安裝cordova進行打包

---

前提概要

在前面的篇幅中，已經介紹Atom、Python3、NotePad++、Chrome的使用方式。

---

本文概要

三個重點：

1. 安裝node.js
2. 透過node.js指令安裝cordova並實踐第一個cordova app
3. 透過node.js指令安裝onsenUI的js lib(套件庫)並實踐第一個onsenUI web app

---

正文開始

第一步:安裝node.js

進入node.js官網下載並安裝。

進入CMD執行指令 npm -v 確認是否"安裝完成"及"版本號碼"。

第二步：建立第一個cordova web app

建立一個自己的資料夾，這邊資料夾名稱為ecg_ui(讀者可以自行取名)，接著開啟CMD依序輸入建置指令。

由cordova官方快速開始文件 依序輸入指令開始建置

在cmd模式下輸入以下指令，開始第一個cordova app：

$ npm install -g cordova

$ cordova create MyApp

$ cd MyApp    

輸入 cd M按下鍵盤tab可以快速填字 完成 cd MyApp

$ cordova platform add browser

$ cordova run browser

將顯示出web app的網址，此步驟完成，通常會自動跳出顯示第一個cordova web，如果沒有，請自行貼上如下圖網址。

第一個cordova web app完成

以上步驟為"第三方打包"的操作。

第三步：建立第一個Onsen UI---web app 之 前置作業(安裝套件庫)

藉由第二步了解cordova運行的流程後，即可透過"相同流程"與"不同指令"建立其他應用程式。

熟悉架構目錄

紅色號球1：ecg_ui為一開始自訂的專案資料夾。
紅色號球2：MyApp為透過cordova create指令建立的專案資料夾。
紅色號球3：www為app建置資料夾，所有的編輯與更動都在這個資料夾進行。
注意:所有操作都要在www資料夾下，透過cordova指令，會將www資料夾自動幫我們打包成第三方的app(web app,android app,ios app)的配置設定。

www資料夾下建立第一個Onsen UI

請先在MyApp資料夾下開啟CMD

透過npm 安裝Onsen UI的套件庫

$ npm install onsenui --save

到node_modules資料夾下找到onsenui


複製並貼到www資料夾下

在Atom資料夾樹查看，onsen資料夾已經加入了

第四步：第一個Onsen UI---web app

讀者可以參考官方文件中的使用說明，基本上都是全英文說明，對於英文不熟的朋友，可以透過google大神的翻譯，了解中文大意，而最好的方式是中英文交雜閱讀，大略讀過中文翻譯，再用英文快速理解文意。黑修斯作法是直接讀英文，除非太多生字才透過google翻譯理解文意。

1. Onsen UI 官方文件

官方線上互動教學---Playground 簡單使用說明

進入Playground後，點擊按鈕，可以"查看"各種"架構"與onsen ui綁定的範例程式。
原先onsen ui 1.0的版本只相容於angular.js，到onsen ui 2.0 改用JavaScript來撰寫，完成與更多不同的框架搭配的可能性。

選擇第一個JS範例，這邊使用原生javaScript是因為所有的javaScript套件庫都是基於javaScript產生的，也就是說市面上的angular.js、vue.js...等.js套件都是javaScript寫出來的，因此很多人說!!你最應該學好的其中一種程式語言叫做javaScript。


進入範例後，如下圖示有三個視窗(HTML、JS、即時框架顯示)：

2.本機端ATOM編輯器的框架綁定：

由於在"Playground”中已經先將框架綁定好，方便使用者線上操作，但是現在需要在本機端的Atom編輯器中綁定，才能在本機端執行。
另外，也可以參考官方文件綁定參考Bindings
這邊帶大家操作一次

將範例程式複製下來到atom中的index.html。
紅色框中，目前是透過網路的方式綁定，我們要改成本地端的方式。

使用preview HTML瀏覽(preview HTML 為Atom套件，需安裝)

右手邊將會出現瀏覽視窗，即時顯示我們更改的程式碼。

將路徑改為本地端(若沒有onsenui資料夾，請參考本文 第三步)

原本的程式碼：

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>

要更改為如下：

<link rel="stylesheet" href="onsenui/css/onsenui.css">
<link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
<script src="onsenui/js/onsenui.min.js"></script>
<script src="js/jquery/dist/jquery.min.js"></script>

要特別注意第四個jquery，需要到https://unpkg.com/jquery/dist/jquery.min.js，下載至www資料夾中的js資料夾中，才能引入使用。

下面將帶大家操作一次，將jquery下載至www資料夾中的js資料夾中：

下載完成，會在atom資料夾結構樹中看到jquery.min.js，最後修改路徑引入即可。

更改路徑即可。

圖中路徑更改如下：

  <script src="js/jquery.min.js"></script>

本地端加載完成的結果，請按下click me!

會跳出如下視窗的alert特效

第五步：打包成web app(不熟悉請再參考第一步)

在MyApp路徑下開啟cmd


執行cordova命令：
建置指令

$ cordova build   

執行指令

$ cordova run browser  

最後如下圖：

最後會看到如Atom瀏覽器上的結果：

---

小結

前面一周都還是在開發工具建置與環境建置，思索了很久要如何呈現文章與30天的流程，最終決定先帶大家走個一整個系統架構，讓大家心中有一張地圖，再慢慢探索其中奧妙，所謂的見林再見樹，請大家繼續期待日後的文章。
IT邦版本連結
全文是黑修斯參加IT邦鐵人賽所撰寫之文章，於IT邦鐵人賽完賽後，將所有文章重新發布在自本人部落格上。
轉貼本文時，需註明來自黑修斯隨手札記原創作者 hughes chen（黑修斯），及附上原文連結，同時 禁止修改，禁止商業使用