NativeScript 環境のインストールとはじめてのプロジェクト実行
3 likes2,697 views
The document discusses the NativeScript framework for developing cross-platform mobile applications, detailing its installation requirements for Android and iOS. It provides a step-by-step guide for setting up the development environment, creating a basic app, and mentions various development tools available. The summary emphasizes NativeScript's capabilities with Angular, TypeScript, and JavaScript, while noting that it does not align well with traditional web development practices.
NativeScript 環境のインストールとはじめてのプロジェクト実行
- 3. What’s NativeScript Native code compile
- 5. Target device requirements •Android API Level 17+ •iOS 9+ •The latest official version of NativeScript
- 6. Install : 2 type build environment. NativeScript Core NativeScript with Angular
- 7. Install : NativeScript Core • Node.js • Java 8 SDK • Android SDK • Android Emulator • Google Chrome
- 8. Instllation 1/3 Step 1: Install Node.js (LTS) Step 2: Install the NativeScript CLI npm install -g nativescript tns Verify the installation was successful by running tns command. verify the installation was successful by running tns
- 9. Instllation 2/3 - Windows Step 3: Install iOS and Android requirements Window (use cmd.exe and admin privilege) @powershell -NoProfile -ExecutionPolicy Bypass - Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript. org/setup/win'))"
- 10. Instllation 2/3 - macOS Step 3: Install iOS and Android requirements macOS (use sudo) ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"
- 11. Instllation 3/3 tns doctor You can see the following message if you succeed. “No issues were detected” Step 4: Verify the setup
- 12. Unfortunately, you will not success this install work. Maybe, probably.
- 13. My recommendation You should choose Advanced setup if you are real man. • You must always fight using administrator privileage. • Do not use Powershell never.
- 14. Create first app with NativeScript Core
- 15. Create your first NativeScript App tns create HelloWorld --template nativescript-template-tutorial Step 1: Create app project. Step 2: Execute the following the command. cd HelloWorld tns run android
- 16. Unfortunately, you will not succeed run your first app like a your first l♡ve. Maybe, probably. You will see the following message: “Cannot find connected devices.”
- 17. Other disasters that attack you
- 18. Demo Create and launch My fist NativeScript App
- 19. Structure of basic app project Global style for app. Start module for app. UI code for main-page.xml. Markup (XML) for UI page. Detailed dependency of app. Node module,including nativescript modules. Settings for each mobile platforms. Visual resource for each mobile platforms.
- 20. Incompatible with Web development Markup <Page> <StackLayout> <Label id="Label1" text="This is Label!" /> <Button text="This is Button!" tap="buttonTap" /> </StackLayout> </Page> var view = require("ui/core/view"); function buttonTap(args) { count++; var parent = args.object.parent; var lbl = view.getViewById(parent, "Label1"); lbl.text = "You tapped " + count + " times!"; } exports.buttonTap = buttonTap; Code
- 22. NativeScript Sidekick Companion tool for NativeScript development. • Create project • JavaScript, TypeScript,Angular • Some app type templates • Build project (Local/Cloud) • Manage Plugin • Run on the device/emulator.
- 23. NativeScript PlayGrand On the fly test environment for NativeScript • Coding with an editor on the Web browser. • Show the preview to mobile device with QR code. • Need a dedicated mobile application.
- 24. Visual Studio & Visual Studio Code plugins • Create project • JavaScript, TypeScript,Angular • Some app type templates • Build project (Local/Cloud) • Manage Plugin • Run on the device/emulator. • Debug feature • Coding helping feature
- 25. Summary • NativeScript can develop cross platform mobile app with Angular.js + TypeScript or JavaScript. • The development method is not very compatible with web development. • Abundant tools and learning contents are prepared.
- 26. Finally
- 27. Reference • Native mobile apps with Angular, TypeScript, JavaScript – NativeScript • Play and Try NativeScript on Your Device – {N} Playground • The total package for truly native mobile development