大家好，我是範俊，UNSV英語學習頻道（www.unsv.com）創辦人。
最近經常有人問我，為什麼你一個搞英語的還能帶徒弟學編程做app？答案很簡單！因為程序語言都是英文設計的。如果你有個好的英文基礎，學各種編程都會比較容易一些。而你學編程，做app的過程中，將會大量接觸英文技術參考文檔，這反過來又會促進英語水平的提升。如果你想獲取關於英語與編程相結合的學習方法，文章最後有我的微信二維碼，歡迎添加諮詢。
今天，我將帶領大家迎來激動人心的時刻——在自己的手機上安裝一個自己親自開發的手機app。這是一個真正意義上的手機app！
第一步：準備所需設備與下載安裝軟體
你需要準備的設備有：
Windows電腦或Mac電腦（Windows電腦只能開發安卓手機app，Mac電腦可以同時開發蘋果和安卓手機app）。
一臺安卓手機，要求進入開發者模式。如果你不知道如何進入，請瀏覽以下網址文章。
https://jingyan.baidu.com/article/ca00d56c2dcd5de99eebcfc2.html
確保能用的安卓手機數據線
你需要下載安裝的軟體有：
下載須知：作業系統分為Windows和MacOS，以及32位和64位。下載下面的軟體時，一定要看清軟體適合的版本，不要下錯了。
NodeJS ： 請訪問以下網址（NodeJS官網）下載安裝適合你的電腦的版本。
https://nodejs.org/en/download/
Java SE SDK：請訪問以下網址（Java官網）下載 JDK 1.8。注意只能下載安裝這個版本。
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Android Studio：請訪問以下網址（Google官網）下載安裝最新版本。
https://developer.android.google.cn/studio#downloads
Gradle：請訪問以下網址（Gradle官網）下載最新版本。這個軟體沒有安裝程序，只有.zip壓縮包，直接解壓就等於安裝了。
https://gradle.org/releases/
請收藏van allen站長web編程與app開發教學網站
https://myapp.comshare.cn
第二步：部署Cordova開發環境
在進行這一步之前，請務必確保上面提到的4個軟體都已經下載安裝完成。
Windows電腦，請點擊開始 -> 運行 -> 輸入 cmd，打開命令提示符。
Mac電腦，請點擊 LaunchPad -> 其它 -> 終端，打開命令提示符。
不論Windows命令提示符還是Mac終端，以下統統稱為命令提示符。以下提到的任何要求輸入的命令，必須一字不差。否則出錯。
Windows 命令提示符輸入：
npm install -g cordova
Mac命令提示符輸入：
sudo npm install -g cordova
Mac命令提示符，npm前面加上sudo是指使用管理員權限運行npm。如果不加sudo，安裝將因沒有權限而失敗。使用sudo運行命令時，系統可能會要求輸入管理員密碼。
命令開始執行後，將自動從遠程下載安裝Cordova所需文件，整個過程一般5-10分鐘可以完成。如果網絡連接條件不好，時間可能更長，請保持耐心等待。Cordova如果成功安裝，你將看到以下信息：
有時，可能會因為網絡條件不好，等待超過20分鐘，依然沒有出現成功安裝提示信息。這時你可以先把命令提示符窗口關閉中止安裝，然後再打開。再次執行上面的安裝命令。
第二步：創建app
Windows系統輸入以下命令：
cordova create myfirstapp com.unsv.myfirstapp "My First App"
Mac系統輸入以下命令：
sudo cordova create myfirstapp com.unsv.myfirstapp "My First App"
可以看到，Mac系統下輸入的命令和Windows系統下幾乎一樣。差別就是Mac系統下的命令行前面多個sudo。
在後文中，在命令提示符裡執行cordova命令，如果不做特別說明，Mac系統一律額外加上 sudo。這點一定不要忘記！請反覆讀三遍提醒自己！
第一次執行Cordova命令時，系統會問以下問題：
May Cordova anonymous report usage statistics to improve the tool over time? (Y/N)
你看，這個系統提示就是一個英文學習機會！使用 May 發起的客氣的詢問請求。 就是：我可以怎麼怎麼樣嗎？這裡 anonymous 是匿名的意思，report是報告的意思，usage 是使用的意思，statistics 是數據統計的意思，improve 提升的意思。全句的意思就是：Cordova是否可以匿名發送使用統計數據以不斷改進這個工具？
同意輸入Y，拒絕輸入N。無論你同意與否，皆不影響命令執行。如果同意，請輸入Y，然後敲回車，讓命令可以繼續進行。
出現 Creating a new cordova project. 提示，表明命令執行成功！
沒有出現上述執行結果，則代表命令執行出錯。請認真仔細核對上面的命令，看看自己是否存在以下問題：
1、字母是否輸入錯誤？
2、是否在哪個地方漏掉空格或雙引號？
3、雙引號確認是英文的雙引號（""）嗎？不能是中文雙引號（「」）哦！
4、提示 Path already exists and is not empty.? ，這代表項目文件夾已經存在，請換個別的文件夾名。文件夾名不要使用中文！
cordova create myfirstapp com.unsv.myfirstapp "My First App" 這個指令是什麼意思呢？我來詳細解釋解釋吧。它的意思是：通過cordova，創建（create）一個新的app項目，項目文件夾myfirstapp，包名 com.unsv.myfirstapp，app在手機桌面顯示的名稱是My First App。
第三步：為app添加運行平臺
當你通過cordova創建一個app項目，你只是創建了一個空的項目框架。要想讓這個app能在安卓或蘋果手機運行，你還需要為這個app項目添加安卓或蘋果手機運行平臺。
首先，請輸入以下指令：
cd myfirstapp
確保正確執行 cd myfirstapp 指令非常重要！它是後續操作成功的基礎。它的意思是進入剛剛所創建的app項目所在的文件夾，即myfirstapp。Windows系統下，這個文件夾一般在 C:\Users\電腦用戶名\myfirstapp。Mac系統下，這個文件夾一般在 /Users/電腦用戶名/myfirstapp。
Windows系統下，指令成功執行後的樣子：
Mac系統下，指令成功執行後的樣子：
接下來，為app添加安卓運行平臺。請輸入以下命令：
cordova platform add android
如果執行這個命令出錯，請注意檢查是否以下問題：
1、Mac系統用戶是不是要在cordova前加sudo。
2、你是不是 android 錯誤輸入成 andriod，這是初學者很容易輸入錯誤的地方。
3、你是否正確執行了前面的 cd myfirstapp 命令？現在的工作文件夾是否是 myfirstapp ？
Windows系統下命令成功執行，應該會顯示下面的信息。
Mac系統下命令成功執行，應該會顯示下面的信息。
再下步，為app添加蘋果運行平臺，請輸入以下命令
cordova platform add ios
（Mac系統用戶請不要忘記加sudo）
命令成功執行結果與上述添加安卓運行平臺類似。
為app添加 android 和 ios 平臺（platform）支持後，它將來就可以同時在蘋果和安卓手機裡運行。
第四步：創建app編譯支持環境變量
現在，請輸入以下指令，編譯app輸出 android 版本。
cordova build android
這時你可能會遭遇這樣的錯誤：Failed to find 'ANDROID_HOME' environment variable. Failed to find 'android' command in your 'PATH'. 它的意思是找不到 ANDROID_HOME 環境變量，然後 PATH 環境變量裡沒有 android 這樣的命令。
出現這個錯誤的原因是你的電腦沒有建立下面幾個系統環境變量。
1、JAVA_HOME：這個系統環境變量值應該是第一步中Java SE SDK安裝的文件夾位置。
2、ANDROID_HOME：這個系統環境變量值應該是第一步中Android Studio安裝時，存儲Android SDK的位置。
3、PATH：這個系統環境變量，系統會默認創建好，但它裡面應該追加 JAVA_HOME以及ANDROID_HOME對應文件夾下的幾個子文件夾位置。
你可能對環境變量是什麼很陌生。我就拿大學老師上課點名這件事來打個通俗的比方吧。我們假設這個老師很嚴謹，每天都會點名，而且每次點名都必須精確到這個學生所在的省市縣村最後再名字。比如有個學生叫周杰倫。他可能會這樣點名：臺灣省臺北市當歸縣周家村周杰倫。但是這個老師除了嚴謹還特別講究效率。他也覺得每天這樣點名效率太低了。於是他弄了個筆記本，把自己喜歡點到的幾個學生的省市縣村+名字登記下來，其中包括周杰倫。從此以後，當他點名周杰倫，他就直接點周杰倫三個字，而不把前面的省市縣村念出來。雖然沒有念出來，但這個老師還是會翻開筆記本，以確保周杰倫在這個本子裡。
現在，我們再來看環境變量（筆記本）是什麼。它是為了方便系統（老師）調用（點名）各種程序（學生）而創建的。如果沒有環境變量（筆記本），系統要調用一個程序（點名），需要指定程序的完整路徑（省市縣村）。但有了環境變量，系統調用這個程序時，只需指定程序名稱，而不必指定程序路徑。因為程序路徑已經在環境變量裡指定了。系統會自動從環境變量裡指定的路徑裡找到這個程序名稱。
添加JAVA_HOME系統環境變量
在Windows系統下，添加系統環境變量 JAVA_HOME 的方法：滑鼠右鍵點擊 我的電腦 → 屬性 → 高級系統設置 → 環境變量。環境變量分用戶環境變量和系統環境變量。系統環境變量所有用戶可用，用戶環境變量只有當前登錄用戶可用。我們要建的JAVA_HOME是系統環境變量。在系統變量區，點擊新建按鈕，變量名輸入 JAVA_HOME，變量值輸入 JDK 安裝的位置，它通常是位於 C:\Program Files\Java 下的一個以 jdk+版本號 打頭的文件夾。成功添加效果如下圖：
在Mac系統下，添加環境變量JAVA_HOME的方法：
1、命令提示符輸入 sudo vi ~/.bash_profile 這個命令的含義是使用文本編輯器vi，編輯當前用戶根目錄下的配置文件 .bash_profile。一定要加sudo，否則你可能沒有保存配置文件權限。
2、打開 vi 編輯器之後，準備輸入文本內容。vi 編輯器很有意思，你不能直接就輸入，需要先按鍵盤 esc 鍵，再按 i 鍵，看到 vi 編輯器左下角 顯示 --insert--，才代表你現在可以用鍵盤輸入文本了。請輸入以下文本：
export JAVA_HOME="$(/usr/libexec/java_home)"
3、輸入完畢，想要保存退出怎麼辦？vi編輯器繼續有意思，你得這樣操作：先按鍵盤 esc 鍵，再按 : 鍵，這時你會看到編輯器左下角出現一個冒號，然後你可以接著這個冒號的後面輸入指令 wq，然後按回車。wq是什麼意思呢？w = write，q = quit，所以 wq 就是保存退出指令。
添加 ANDROID_HOME 系統環境變量
運行 Android Studio，在起始畫面右下角有個 configure 標籤，點擊它，選擇 SDK Manager。
因為 Android Studio 默認只安裝最新版的 SDK，但 Cordova 還需要其它低版本的SDK，這樣開發出來的app，才能在更多舊手機裡運行。進入SDK Manager之後，可以把 版本號大於等於7的 SDK全部選上。然後點擊確定，等待下載完成。
安裝好全部 Android SDK 之後，我們需要在系統環境變量裡添加 ANDROID_HOME 和 ANDROID_SDK_ROOT 兩項。ANDROID_HOME 的值可以在上述 SDK Manager 中找到。如下圖紅色位置。
在 Windows 系統中，它通常類似下面這種文件路徑：
C:\Users\Administrator\AppData\Local\Android\Sdk
在Mac系統中，它通常類似下面這種文件路徑：
/Users/YourUsername/Library/Android/sdk
ANDROID_HOME 和 ANDROID_SDK_ROOT 環境變量值應該設置為相同。同時，我們還需將三個變量路徑值，依次添加到系統環境變量 PATH 裡。這三個環境變量值分別是：
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
請注意！千萬不要覆蓋環境變量 PATH 裡原有的值。你只能將新值追加到 PATH 裡。因為 PATH 是系統變量，是給很多程序共用的，如果你覆蓋它原有的值，你的系統可能會崩潰。
Windows系統下，JAVA_HOME 環境變量添加效果如下：
Windows系統下，將%ANDROID_HOME%\platform-tools，%ANDROID_HOME%\tools，%ANDROID_HOME%\tools\bin 添加到 PATH 環境變量效果如下：
Mac系統下，Android Studio 安裝完成後，我們需要創建一個名為 ANDROID_SDK_ROOT 的環境變量。添加方法與上述Mac系統添加 JAVA_HOME 環境變量一樣。執行命令 vi ~/.bash_profile，先按esc，再按 i，添加下面一行代碼：
export ANDROID_SDK_ROOT=$ANDROID_HOME
添加完成之後，先按 esc，再按 : 然後輸入wq 保存退出。
在系統環境變量PATH中添加 Gradle 解壓路徑
除了設置 Java SE SDK 和 Android SDK 環境變量，我們還需要將第一步下載解壓的 gradle 文件夾路徑添加到系統變量 PATH 裡面。否則，你在編程app時將會遇到下面這種錯誤。
出錯的原因是：Cordova 編譯輸出app安裝包需要 Gradle 的支持。雖然你已經在第一步下載解壓了Gradle，但系統並不知道如何找到。需要你手動將Gradle的解壓文件夾位置寫入系統環境變量PATH中系統才能找到。
Windows 系統下，把解壓縮後的文件夾（gradle-4.10.3）拷貝到 C:\Program Files 目錄下，然後再將 C:\Program Files\gradle-4.10.3\bin 加入到系統環境變量 PATH。
Mac系統下，把解壓縮後的文件夾（gradle-4.10.3）拷貝到 /Library 下面。然後再使用 sudo vi ~/.bash_profile 將 /Library/gradle-4.10.3/bin 加入到系統環境變量 PATH。最後 .base_profile 文件的內容如下：
第五步：準備重啟電腦
Windows系統下，為了讓環境變量修改生效，需要重啟電腦。
Mac系統下，為了讓環境變量修改生效，你需要先在命令提示符裡執行一行命令：source ~/.bash_profile 。隨後重啟電腦。
第六步：再次編譯app
到此，我們已為安卓運行平臺添加了全部的 SDK 支持，環境變量也都生效。這時，再輸入命令 cordova build android 你應該可以看看編譯通過的提示。Mac系統不要忘了加 sudo。編譯成功的樣子如下圖所示。
都裝好了，相關環境變量也設置好了。接下來，你可以轉到命令提示符窗口，輸入 cordova build android 看看能不能編譯通過。
----
但如果你是比較舊的電腦，也有可能出現以下編譯錯誤。如果你沒有出現錯誤，那恭喜你！請跳過以下關於出錯的解決方案。
常見出錯：Error occured during initializing of VM. Could not reserve enough space for 2097152KB object heap.
分析解決：這是告訴你，你的電腦內存空間不足以再分配2G出來給虛擬機使用。解決方案：增加電腦的內存，或者新建一個系統環境變量，將虛擬機分配內存從2G變成512兆。新建系統環境變量名：_JAVA_OPTIONS，變量值：-Xmx512M。記得環境變量要重啟電腦才會生效！！！
第七步：讓app在安卓手機運行
最後，編譯終於通過，來到最激動人心的時刻！
請拿出你的安卓手機，逐一檢查以下事項：
1、確定開發者模式已經打開。
2、鎖屏：關閉。
3、USB調試模式：打開。
4、連接USB總是彈出提示：關閉。
5、監控ADB安裝應用：關閉。
6、通過USB驗證應用：關閉。7、選擇USB配置：多媒體傳輸（傳輸文件）。
8、允許通過USB安裝應用：打開
最後，插上數據線，連接電腦。
最後，請打開命令提示符，輸入以下指令：
cordova run android
不要眨眼，這是見證奇蹟的時刻 ！！！
當這個指令執行完成之後，你今天創建的app將會安裝到手機裡並打開運行。下面是一些學員成功安裝app的樣子。看到嗎？桌面上那個叫做 My First App的傢伙。
第八步：讓app在蘋果手機上運行
上面說的是安卓手機，那如果想讓app在蘋果手機上運行怎麼辦？
由於蘋果iOS系統不像Android完全開源，你不能通過Windows作業系統來生成蘋果手機app。Windows系統只能生成安卓手機app。
如果想讓生成的app在蘋果手機上安裝運行，那你需要一臺Mac電腦，MacBook或Macintosh都可以，然後在Mac裡安裝Xcode。Xcode可以在蘋果應用市場找到。當你安裝完成Xcode後，可以通過下面的教程，讓app在蘋果的虛擬iPhone或iPhone真機裡運行。
如果你的電腦裡了已經成功安裝好了Xcode，那恭喜了，你即將實現第一個app在蘋果手機運行！
首先，命令提示符輸入：
sudo cordova build ios
請等待1-2分鐘，等待命令執行完成。如果 build 成功，屏幕將會顯示 build successed。
接下來，我們將通過Xcode打開My First App這個項目。但在此之前，你需要將項目文件夾 myfirstapp 及其所有子文件的讀寫權限賦給 everyone。也許，你甚至找不到 myfirstapp 這個文件夾。其實很容易找到：先打開 Finder（訪達），然後在屏幕頂部菜單裡找到【前往】項，點擊選擇【個人】，這時，myfirstapp應該會出現在窗口。具體操作指導，請看我傳到騰訊的視頻教程。
騰訊視頻：通過Xcode打開你的第一個ios版的app項目！
通過上面的視頻教程，你應該已經實現了在虛擬iPhone手機裡運行app的目標。但想在iPhone真機裡運行該怎麼做？
首先，你當然需要將你的iPhone通過數據線連接電腦。然後等待1-2分鐘，給Xcode足夠的時間，識別出你的手機。隨後，點擊下圖右上角區域 iPhone XR 標籤處，這時系統會彈出一個列表，讓你選擇想在哪種機型運行app。如果你的手機被Xcode成功識別，你的真機機型圖標將會顯示在機型列表最頂端。點擊你的真機圖標，然後再點擊黑色三角形，準備讓app在你的機裡運行。
你通過iPhone真機運行可能會遇到一些錯誤！各種錯誤對應解決方案如下：
錯誤情形：Signing for "My First App" requires a development team. Select a development team in the Signing & Capabilities editor.
這個錯誤的意思是說：給My First App這個項目籤名需要設置 development team（開發團隊）。這個問題怎麼解決呢？出錯信息裡其實已經提供了方案：請到 Signing & Capabilities（籤名與能力）編輯區選擇 development team. 你根據這個提示，進入 Signing & Capabilities，應該能看到下面這個畫面。
你也許會疑惑：什麼開發團隊？我就是個個人，哪來的開發團隊？別急，蘋果允許使用你的Apple ID註冊一個Personal Team，即只有你一個人的開發團隊。你可以使用這個Personal Team為你開發的 app 籤名，在本機上運行。請點擊上圖 Add Account 按鈕，然後將自己的蘋果ID設置為個人開發團隊（Personal Team）帳號。完成操作後，重新點擊運行。
錯誤情形：Failed to register bundle identifier.
這個錯誤意思是說：註冊app包名（標識符）失敗。為什麼會出現這個錯誤呢？因為我讓所有學員都使用了 com.unsv.myfirstapp 作為第一個app項目的包名。如果有學員成功在iPhone手機上安裝運行了這個app，那麼 com.unsv.myfirstapp 就不能再作為包名（bundle identifier）被別的開發者使用了。怎麼辦呢？非常容易解決！請看上圖。你只須將包名從 com.unsv.myfirstapp 改為其它保證不會重名的就行。比如 com.unsv.myfirstapp101，com.unsv.myfirstapp233 等等。改完之後 ，請點擊上圖中的 Try Again 按鈕，看看你新改的包名能不能被接受。
錯誤情形：Could not launch "My First App".
能看到這個錯誤，那恭喜你了！你的app已經通過真機運行編譯與安裝階段。不信，你打開自己的iPhone桌面看看，是不是已經有一個名為 My First App的圖標躺在那裡了？那這個錯誤彈出是什麼意思呢？因為Xcode原本不僅要把app安裝在你的手機裡，還會自動讓它從手機裡打開運行。但由於iPhone手機的安全限制，它沒有允許Xcode自動運行這個app！上面的錯誤信息裡也提供了解決方案：打開你的手機，進入設置 → 通用 → 設備管理，然後選擇信任你的開發者證書。大功告成！
【站長後記】雖然這個app只是個空殼，只有一個初始頁面，但如果你願意，無論你有沒有編程基礎，你都能學會web編程與app開發，讓app實現你的各種需求。如果想拜我為師學習這個技術，歡迎添加我的微信。