[教學] Hello World! Cordova!

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

上一篇介紹了如何安裝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專案就沒有問題了。