Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

NativeScript 環境のインストールとはじめてのプロジェクト実行

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 28 Publicité

NativeScript 環境のインストールとはじめてのプロジェクト実行

Télécharger pour lire hors ligne

第21回 html5j-Web プラットフォーム部勉強会の登壇で使用したスライドです。
実際のセッション動画か以下でご覧いただけます。
https://youtu.be/ZYll0qKOrBg?t=1h53m22s

第21回 html5j-Web プラットフォーム部勉強会の登壇で使用したスライドです。
実際のセッション動画か以下でご覧いただけます。
https://youtu.be/ZYll0qKOrBg?t=1h53m22s

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à NativeScript 環境のインストールとはじめてのプロジェクト実行 (20)

Publicité

Plus par Osamu Monoe (20)

Plus récents (20)

Publicité

NativeScript 環境のインストールとはじめてのプロジェクト実行

  1. 1. html5-Web プラットフォーム部 ものえおさむ
  2. 2. 今日は NativeScript の話です。 Introduce of
  3. 3. What’s NativeScript Native code compile
  4. 4. How NativeScript Works
  5. 5. Target device requirements •Android API Level 17+ •iOS 9+ •The latest official version of NativeScript
  6. 6. Install : 2 type build environment. NativeScript Core NativeScript with Angular
  7. 7. Install : NativeScript Core • Node.js • Java 8 SDK • Android SDK • Android Emulator • Google Chrome
  8. 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. 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. 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. 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. 12. Unfortunately, you will not success this install work. Maybe, probably.
  13. 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. 14. Create first app with NativeScript Core
  15. 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. 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. 17. Other disasters that attack you
  18. 18. Demo Create and launch My fist NativeScript App
  19. 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. 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
  21. 21. Helper tools for NativeScript
  22. 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. 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. 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. 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. 26. Finally
  27. 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

×