上一篇介紹了如何安裝Cordova,所以這次當然就是非常復古的Hello World!教學,為什麼非常復古呢?因為打從盤古開天以來…..C語言的第一個範例程式就是Hello World,所以導致後面許多語言都以Hello World為開場,既然這是個傳統,我們也來依循傳統簡單的開始我們的Hello World!Cordova!
當我們安裝完Cordova之後,可以輸入以下指令來瞭解Cordova的功能:cordova help
瞭解指令對於後續再操作上會覺得比較得心應手,當然如果你嫌麻煩或覺得英文一堆看不懂,也可以直接開始以下的教學。
首先第一步我們要建立一個Cordova 專案,建立顧名思義就是英文的create,而使用creat這個指令來說也有簡便與完成的寫法,簡便的寫法如下:cordova create project_folder
但是建議初學寫還是用完整的寫法,以免日後發現有漏掉,不知道該如何如何家回去等等,完整的寫法如下:cordova create project_folder app_id app_name
簡單解釋一下,建立一個Cordova專案最重要的當然就是專案名稱project_folder,這樣會替這個專案建立一個專屬的資料夾,而app_id以iOS App為例,通常都是網址,而且還會把網址反過來寫,比方說這個App如果在網路上,網址就是helloworld.nowilldesign.com,但是當我填寫app_id時就會變成com.nowilldesign.helloworld,而app_name就會是 HelloWorld。
我相信看到這邊還是有很多朋友不懂,所以接下來我們就以step by step方式重新寫一次:
第一步:打開終端機terminal,並切換資料夾到你想放置Cordova 專案的資料夾,比方說我想統一將Cordova專案都放在/Users/nowillchang/projects裡,我就在終端機terminal中輸入以下指令
cd /Users/nowillchang/projects
第二步:確定自己在目的地資料夾後,輸入以下指令,建立Cordova專案,app_ID部分記得做更換,若無app_id也可以使用簡便的寫法即可。cordova create HelloWorld helloworld.nowilldesign.com HelloWorld
第三步:開啟Finder切換資料夾到目的地,即可看到新增了一個HelloWorld,內容如下圖。
第四步:打開www資料夾開始編寫你熟悉的html、js、css等內容,由於本次範例為Hello World!Cordova!,所以我只在index.html中第36行輸入“Hello World!Cordova!”。
而index.html為建立Cordova專案時,由Cordova自動產生的測試首頁,你可以直接用瀏覽器打開瀏覽看看畫面。
你可以看到上圖中在Connecting to Device下多了一行Hello World!Cordova!,這就是我剛剛輸入的36行。以step by step方式寫下來感覺步驟好像很多,但是其實最重要的還是第二步的建立專案指令,只要會使用這行指令,對建立Cordova專案就沒有問題了。