iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
2
Modern Web

三十天全端學習:透過javascript(Onsen UI)、python(tornado)、非關聯式資料庫(mongoDB)完成全端學習,建置web app、mobile app。系列 第 5

三十天全端學習(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進行打包

前提概要

前面幾天已經帶大家建立最基本的開發工具AtomPython3NotePad++chrome調試


本文概要

三個重點:

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

正文開始

第一步:安裝node.js

進入node.js官網下載並安裝。
https://ithelp.ithome.com.tw/upload/images/20181013/20102269ZRtuL5zYpf.png

進入cmd執行指令 npm -v 確認是否安裝完成版本號
https://ithelp.ithome.com.tw/upload/images/20181013/20102269HxcRU4Z87I.png

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

先建立一個自己的資料夾,這邊資料夾名稱為ecg_ui(讀者可以自行取名),接著開啟cmd輸入命令指令,(這個功能是從套件安裝的)。
https://ithelp.ithome.com.tw/upload/images/20181013/20102269uW3QNPYdz8.png

cordova官方快速開始文件 進行建置
https://ithelp.ithome.com.tw/upload/images/20181013/20102269ar2ZSAo5yN.png

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

$ npm install -g cordova

https://ithelp.ithome.com.tw/upload/images/20181013/20102269h8SjznfPih.png

$ cordova create MyApp

https://ithelp.ithome.com.tw/upload/images/20181013/20102269hRELZt2TR8.png

$ cd MyApp    

輸入 cd M按下鍵盤tab可以快速填字 完成 cd MyApp
https://ithelp.ithome.com.tw/upload/images/20181013/20102269KsbwBnyg2p.png

$ cordova platform add browser

https://ithelp.ithome.com.tw/upload/images/20181013/20102269ghVLux7RDv.png

$ cordova run browser

會顯示出web app的網址,這個步驟做完,通常會自動跳出顯示第一個cordova web,如果沒有,請自行貼上如下圖網址。
https://ithelp.ithome.com.tw/upload/images/20181013/20102269hnzbSPLgP6.png

第一個cordova web app完成
https://ithelp.ithome.com.tw/upload/images/20181013/201022699XblkY4fBX.png

上述的步驟非常重要,這是必須要熟悉的cordova打包操作,日後操作android app或是ios app也是相同的方法,而上述的步驟稱之為第三方打包

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

透過前面的第二步驟,了解cordova的運行流程後,即可透過相同流程不同指令建立其他應用程式。

熟悉架構目錄

https://ithelp.ithome.com.tw/upload/images/20181013/20102269gRZapJLC2W.png

紅色號球1ecg_ui為一開始自訂的專案資料夾。
紅色號球2MyApp為透過cordova create指令建立的專案資料夾。
紅色號球3www為app建置資料夾,所有的編輯與更動都在這個資料夾進行。

注意:所有操作都要在www資料夾下,透過cordova指令,會將www資料夾自動幫我們打包成第三方的app(web app,android app,ios app)的配置設定。

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

請先在MyApp資料夾下開啟CMD
https://ithelp.ithome.com.tw/upload/images/20181013/20102269Vj1eRYbs1N.png

透過npm 安裝Onsen UI的套件庫

$ npm install onsenui --save

https://ithelp.ithome.com.tw/upload/images/20181013/20102269SvxD5iOy24.png

到node_modules資料夾下找到onsenui

複製並貼到www資料夾下

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

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

這邊放上官方的文件連接與簡單的使用說明,注意都是全英文的,不過別怕,你可以使用google大神翻譯,最好的方式是中英文交雜閱讀,先大略讀過一下中文,再用英文會比較好理解,黑修斯是直接看英文,太多生字才會翻中文理解一下,再切回英文。

  1. Onsen UI 官方文件

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

進入Playground後,點擊按鈕,可以查看各種框架onsen ui綁定的範例程式。
這也是為什麼黑修斯推薦大家學習並使用onsen ui,它從第一代是指配合angular.js,到第二代只使用原生JavaScript來建置,以便配合不同的框架,其實是避免被單獨的框架綁架

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

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

本機端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天的流程,最終決定先帶大家走個一整個系統架構,讓大家心中有一張地圖,再慢慢探索其中奧妙,所謂的見林再見樹,請大家繼續期待日後的文章。


上一篇
三十天全端學習(javascript、python、mongoDB)---第四天:Python3的安裝與調試
下一篇
三十天全端學習(javascript、python、mongoDB)---第六天:環境篇---第一個Onsen UI---mobile app
系列文
三十天全端學習:透過javascript(Onsen UI)、python(tornado)、非關聯式資料庫(mongoDB)完成全端學習,建置web app、mobile app。30

1 則留言

0
b0909182697
iT邦新手 5 級 ‧ 2020-06-22 18:06:34

我在執行到cordova run browser時,會有下面這問題

我猜會不會是路徑上的問題呢?

https://ithelp.ithome.com.tw/upload/images/20200622/20123705lOz3P35EEM.png

我要留言

立即登入留言