[教學] Hello World! Cordova!

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

About Nowill Chang

從踏入網路世界的第一天開始就不斷熱衷研究網站的各種事宜,目的是讓台灣人製作的網站也可以追上國際設計潮流。目前是品禾全端網路工作室實習掃地僧,企圖用最少的資源創造最新的網路公司營運模式。公司的理念是“開發更有價值的跨平台網站與網路應用程式”,Line帳號:nowill,歡迎閒聊泡茶喝咖啡。
    Blogger Comment

0 位過客留言,我也要留言:

張貼留言