NativeScript 簡介

跨平台手機 App 開發

為什麼選擇NativeScript

行動裝置主要 OS 的兩大陣營：Android 跟 iOS，是每次要做跟 App 有關的東西時，都會需要考慮到這件事，僅專注在一個平臺並不是一種選擇，所以開發時，製作出來的 App 需要支持跨平臺和設備。

今天，我們在編寫一套目標是面向多個平臺的App，已有多個選擇。本篇提到的 NativeScript是其中的一個選擇，但也不是唯一的一個。在此之前我就已經知道其他像PhoneGap，Xamarin，React Native。這些框架中的每一個都能支持同時部署到Android和iOS中。但是我是行動端開發的一個初學者，而且我至少知道用HTML，JavaScript，和CSS構建簡單的Web App，因此我採用 NativeScript 來寫一個手機 App，並且練習部署到真實的 iOS 手機裝置上。

NativeScript 的編寫方式

當你寫nativescript應用程序，你的程式碼有3個部分：JavaScript，XML和CSS。JavaScript組件運行業務邏輯、訪問數據或控制應用程序的流程。XML部分定義了用戶界面（UI），CSS用於樣式化UI，非常類似於HTML應用程序。

Nativescript的應用程序結構和程式碼類似於HTML應用程序，但僅止於此。Nativescript在跨平臺的移動應用程序的世界是獨特的，因為它允許你寫你的UI（XML）程式碼一次。在運行時，UI 程式碼在應用程序中呈現原生UI元素。例如，在iOS UI元素呈現為iOS原生按鈕、下拉菜單、列表等。同樣地，Android UI元素呈現為原生Android組件。

Nativescript的另一個獨特的特點是，你可以訪問原生API。

安裝方式

iOS 依賴項要注要要先去 Appstore 安裝 xcode，如果在 Mac Full install 遇到如下的錯誤訊息時：

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
Xcode is not installed or not configured properly. Download, install, set it up and run this script again.

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

利用此指令解決問題。完成安裝後，接著再利用 npm 安裝 nativescript

> npm i -g nativescript

完成安裝後，可以執行 tns — version 指令檢查確保 nativescript 有成功安裝。

> tns --version
5.0.24

指令介紹

在終端機輸入 nativescript 或 tsc 有一樣的功用， tns 是 nativescript 的 shorthand

如果我們要進行系統檢查可以使用 tns doctor 會檢查你的系統環境，找出任何安裝 nativescript 遇到的問題。在完成所有安裝後，可利用此指令進行檢查安裝是否有正確。

nativescript 指令操作

> tns <command>

常見的 command 有 tns create 、tns install 、tns run 等等。

開發中簡單測試

可以運用這樣的指令來幫助你運用 hot reload 來一邊開發，一邊看實際的運作情況：

>tns build iOS --bundle --hmr

Provisioning for iOS

可以參考以下外部的文章，配置好 Apple store 等必要的資訊以利後續的上架。

Create a Development Provisioning Profile - NativeScript Docs

How to test your NativeScript App on a real iOS device | Tips | NativeScript NL