在本章你將開始基礎的東西，包括安裝NativeScript CLI，建立一個新的項目，和建立、運行你的第一個app。 ## **內容列表** * [1.1: 安裝 NativeScript 并配置環境](#1-1) * [1.2: 創建你的app](#12-開始你的app) * [1.3: 增加目標開發平臺](#13-添加目標開發平臺) * [1.4: 運行你的app](#14-運行你的-app) * [1.5: 開發工作流](#15-開發流程) ## **1.1: ** 安裝 NativeScript 并配置環境 {#1-1} NativeScript CLI有一些系統需求，你必須在制作app之前處理完備。在我們開始制作前，請確定你完成了 NativeScript 的安裝指南 * [完成安裝指導](http://docs.nativescript.org/start/quick-setup) ## **[1.2: 開始你的app](http://docs.nativescript.org/tutorial/chapter-1#12-start-your-app)** NativeScript CLI安裝后，就可以開始創建你的app了。通常，你要**使用 **`tns create`** 命令來創建一個空的 NativeScript 應用**。本教程里，我們搭建了一個樣板工程作為“雜貨店”的起點。 ### **練習: 獲取“雜貨店”起點** 切換到你想要保存app代碼的文件夾： > `cd the-folder-you-want-groceries-to-be-in` 然后, 假定你安裝了git, 從github 克隆Groceries repo: > ```git clone``https://github.com/NativeScript/sample-Groceries.git``` 接下來, 進入新克隆的 repo's 文件夾: > `cd sample-Groceries` 最后, 切換到 “start” 分支 便是本教程的起點了: > `git checkout start` **提示: “end” 分支有本教程的最終被狀態。 如果你被卡住了可以隨時跳到這個分支。** ## [**1.3: 添加目標開發平臺**](http://docs.nativescript.org/tutorial/chapter-1#13-add-target-development-platforms) 你的app已經搭建好了，但在你運行它之前，您需要為您打算開發的每個目標平臺初始化一個特定于平臺的本地項目 ### **操作: 添加ios和安卓平臺** 如果你在MAC上, 添加iOS 平臺: > `tns platform add ios` 然后, 用同樣的命令添加安卓平臺: > `tns platform add ios` **注意: 你只有在開發設備上安裝好SDK后才能添加平臺. 如果你運行**`tns platform add`**命令出現錯誤, 請回看開發設備環境配置的部分。 ** ## **[1.4: 運行你的 app](http://docs.nativescript.org/tutorial/chapter-1#14-running-your-app)** 平臺初始化完成，你就可以在真機或虛擬機上運行app了。 ### **操作: 運行app** ios+虛擬機上運行 > `tns run ios --emulator`  安卓+虛擬機上運行 > `tns run android --emulator` **注意：** * 你的開發設備上至少要有一個安卓虛擬設備以使本命令生效。如果出現錯誤，嘗試安裝一個AVD\(安卓虛擬機\)后再次運行此命令。 * 如果你在使用 [Genymotion](https://www.genymotion.com/), 運行你的 Genymotion 虛擬機, 然后運行`tns run android`. 如果一切正常，你可以看到app在虛擬設備上運行了  運行 NativeScript apps 的一些提示： **提示** * 要運行USB連接的安卓或ios設備，使用同樣的run命令但不要 `--emulator` 標簽就可以了，比如： `tns run android` 和 `tns run ios` * `tns device` 命令會列出所有USB連接的ios設備，USB連接的安卓設備，和Genymotion 虛擬設備 ，`tns run能正常運行`. 注意`tns device` 不會列出iOS 設備. ## [**1.5: 開發流程**](http://docs.nativescript.org/tutorial/chapter-1#15-development-workflow) 此時，你已經下載安裝了 NativeScript CLI ，運行app的 iOS 和 Android 條件也齊備。現在你需要一個好的工作流程以使你的更改即時呈現，為此，我們使用 `tns livesync` 命令。 ### 操作**: 你的第一次 NativeScript 更改** 如果你此前的 `tns run ios` 或者 `tns run android` 任務還在運行， 在命令行里使用 `Ctrl+C` 結束它。 如果你使用Mac, 執行以下命令以啟動一個 iOS livesync 監視 : > `tns livesync ios --emulator --watch` 如果你的app運行在安卓虛擬機上, 執行以下命令以啟動一個 android livesync 監視: > `tns livesync android --emulator --watch` 如果你的app運行在USB連接的 Android 設備或 Genymotion 許你設備上, 運行同樣的命令時去掉--emulator 標簽: > `tns livesync android --watch` tns livesync 命令傳送更新后的代碼到你的設備或虛擬機以更新app。 通過添加--watch 標簽,livesync命令額外地監視你NativeScript項目里的文件. 一旦某個文件改變, 該命令檢測到變動, 把變動的代碼更新到你的app。 **提示:** 你可以閱讀 [how NativeScript works](http://developer.telerik.com/featured/nativescript-works/)了解這是如何做到的。 為了看見 livesync生效，我們來對你的app做點小更改。 用你的編輯器打開app的`app/views/login/login.xml` 文件，更改 `<Label text="hello world" />` 為 `<Label text="hello NativeScript" />，`**保存**`app/views/login/login.xml` ，就會看到app重新運行并現實更改后的文本了。 --- 不管你是運行在ios還是安卓上，或者你是使用 `tns livesync` 還是`tns run` ， 當app運行時，NativeScript CLI 都會顯示 `console.log()` 的輸出結果，以及出錯時的堆棧跟蹤報告。所以如果你的app在本教程期間的任何時候崩潰，查看命令行的詳細出錯報告。 ios和android日志可能有點呱噪，你或許不得不滾動鼠標尋找實際的問題在那。比如說，如果我要調用 `foo.bar()` 但 `foo并不存在，下面就是我在ios上得到的信息：` `/app/path/to/file.js:14:8: JS ERROR ReferenceError: Can't find variable: foo 1 0xe3dc0 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)` 下面是安卓日志里同樣的信息： > `E/TNS.Native( 2063): ReferenceError: foo is not defined` > > `E/TNS.Native( 2063): File: "/data/data/org.nativescript.groceries/files/app/./views/login/login.js, line: 13, column: 4` ### **提示：** > 當你要調試一個問題時，你總可以嘗試在你的 JavaScript 代碼里加入 `console.log()語句——就像你在那些基于瀏覽器的應用一樣。` ### 注意： > 在 NativeScript app里，不是所有改動都會動態反應。例如，LiveSync不能修補本地配置文件的變化 \(`Info.plist`,`AndroidManifest.xml，` 等等\)，新插件的安裝，以及任何需要應用完全編譯的任何其他變動。在這些情況下，你可能需要使用 `Ctrl+C` 停止 livesync ，回到應用文件夾使用 `tns run ios或` `tns run android命令。` 別擔心，在教程中要完全編譯的情況出現時，這些說明將被明確列出。 既然你已經創建了app，配置了環境，并在ios和android上安裝了app準備運行，你就準備好了深入研究構建app的文件了