NativeScript - Aplikasi Sudut

Mari kita buat aplikasi tulang telanjang sederhana untuk memahami alur kerja aplikasi NativeScript.

Membuat Aplikasi

Mari kita pelajari cara membuat aplikasi sederhana menggunakan NativeScript CLI, tns. tns menyediakan perintah buat yang digunakan untuk membuat proyek baru di NativeScript.

Sintaks dasar untuk membuat aplikasi baru adalah sebagai berikut -

tns create <projectname> --template <template_name>

Dimana,

  • Projectname adalah Nama proyek.

  • template_nameadalah Template proyek. NativeScript menyediakan banyak template startup untuk membuat berbagai jenis aplikasi. Gunakan template berbasis Angular.

Mari kita buat direktori baru bernama NativeScriptSamples untuk mengerjakan aplikasi baru kita. Sekarang, buka terminal baru lalu pindah ke direktori kami dan ketik perintah di bawah ini -

tns create BlankNgApp --template tns-template-blank-ng

Dimana, tns-template-blank-ng merujuk aplikasi seluler kosong berdasarkan AngularJS.

Keluaran

..... 
..... 
..... 
Project BlankNgApp was successfully created. 
Now you can navigate to your project with $ cd BlankNgApp 
After that you can preview it on device by executing $ tns preview

Sekarang, aplikasi seluler pertama kami, BlankNgApp dibuat.

Struktur Aplikasi

Mari kita pahami struktur aplikasi NativeScript dengan menganalisis aplikasi BlankNgApp pertama kita di bab ini. Aplikasi NativeScript diatur menjadi beberapa bagian dan itu adalah sebagai berikut -

  • Bagian konfigurasi

  • Modul node

  • Sumber Android

  • Sumber iOS

  • Kode sumber aplikasi

Struktur umum aplikasi adalah sebagai berikut -

│ angular.json 
│ LICENSE 
│ nsconfig.json 
│ package-lock.json 
│ package.json 
│ tsconfig.json 
│ tsconfig.tns.json 
│ tsfmt.json 
│ webpack.config.js 
│
├───App_Resources 
│  ├───Android 
│  │ 
│  └───iOS 
│ 
├───hooks 
│ 
├───node_modules 
| 
└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
      │  app-routing.module.ts 
      │  app.component.html 
      │  app.component.ts 
      │  app.module.ts 
      │ 
      └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

Mari kita pahami setiap bagian aplikasi dan bagaimana hal itu membantu kita membuat aplikasi kita.

Bagian konfigurasi

Semua file di root aplikasi adalah file konfigurasi. Format file konfigurasi dalam format JSON, yang membantu pengembang untuk memahami detail konfigurasi dengan mudah. Aplikasi NativeScript mengandalkan file-file ini untuk mendapatkan semua informasi konfigurasi yang tersedia. Mari kita lihat semua file konfigurasi di bagian ini.

package.json

File package.json menetapkan identitas (id) aplikasi dan semua modul tempat aplikasi bergantung untuk bekerja dengan benar. Di bawah ini adalah package.json kami -

{ 
   "nativescript": {
      "id": "org.nativescript.BlankNgApp",
      "tns-android": {
         "version": "6.3.1"
      }, "tns-ios": {
         "version": "6.3.0"
      } 
   }, "description": "NativeScript Application", 
   "license": "SEE LICENSE IN <your-license-filename>", 
   "repository": "<fill-your-repository-here>", 
   "dependencies": { 
      "@angular/animations": "~8.2.0", 
      "@angular/common": "~8.2.0", 
      "@angular/compiler": "~8.2.0", 
      "@angular/core": "~8.2.0", 
      "@angular/forms": "~8.2.0", 
      "@angular/platform-browser": "~8.2.0", 
      "@angular/platform-browser-dynamic": "~8.2.0", 
      "@angular/router": "~8.2.0", 
      "@nativescript/theme": "~2.2.1", 
      "nativescript-angular": "~8.20.3", 
      "reflect-metadata": "~0.1.12", 
      "rxjs": "^6.4.0", 
      "tns-core-modules": "~6.3.0", 
      "zone.js": "~0.9.1" 
   }, 
   "devDependencies": { 
      "@angular/compiler-cli": "~8.2.0", 
      "@ngtools/webpack": "~8.2.0", 
      "nativescript-dev-webpack": "~1.4.0", 
      "typescript": "~3.5.3" 
   }, 
   "gitHead": "fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14", 
   "readme": "NativeScript Application" 
}

Sini,

Identity of the application (nativescript/id)- Menetapkan id aplikasi sebagai org.nativescript.BlankNgApp. Id ini digunakan untuk mempublikasikan aplikasi kita ke Play Store atau iTunes. Id ini akan menjadi Pengenal Aplikasi atau Nama Paket kami.

Dependencies (dependencies)- Menentukan semua modul node dependen kami. Karena, implementasi NativeScript default bergantung pada Angular Framework, modul Angular disertakan.

Development dependencies- Menentukan semua alat yang bergantung pada aplikasi. Karena, kami mengembangkan aplikasi kami di TypeScript, ini menyertakan skrip ketikan sebagai salah satu modul dependen.

angular.json - Informasi konfigurasi kerangka sudut.

nsconfig.json - Informasi konfigurasi kerangka kerja NativeScript.

tsconfig.json, tsfmt.json & tsconfig.tns.json - Informasi konfigurasi bahasa TypeScript

webpack.config.js - Konfigurasi WebPack ditulis dalam JavaScript.

Modul node

Karena proyek NativeScript adalah proyek berbasis node, ia menyimpan semua dependensinya di folder node_modules. Kita dapat menggunakan npm (npm install) atau tns untuk mendownload dan menginstal semua ketergantungan aplikasi ke node_moduels.

Kode sumber Android

NativeScript secara otomatis menghasilkan kode sumber android dan menempatkannya di folder App_Resources \ Android. Ini akan digunakan untuk membuat aplikasi android menggunakan Android SDK

Kode sumber iOS

NativeScript secara otomatis menghasilkan kode sumber iOS dan menempatkannya di folder App_Resources \ iOS. Ini akan digunakan untuk membuat aplikasi iOS menggunakan iOS SDK dan XCode

Kode sumber aplikasi

Kode aplikasi sebenarnya ditempatkan di folder src. Aplikasi kami memiliki file di bawah ini di folder src.

└───src 
   │ app.css 
   │ main.ts 
   │ package.json 
   │ 
   └───app 
   │ app-routing.module.ts 
   │ app.component.html 
   │ app.component.ts 
   │ app.module.ts 
   │ 
   └───home 
         home-routing.module.ts 
         home.component.html 
         home.component.ts 
         home.module.ts

Mari kita pahami tujuan dari semua file dan bagaimana mereka diatur di bagian ini -

Langkah 1

main.ts - Titik masuk aplikasi.

// this import should be first in order to load some required settings (like globals and reflect-metadata) 
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

Di sini, kami telah menetapkan AppModule sebagai modul bootstrap aplikasi.

Langkah 2

app.css - Style sheet utama aplikasi adalah seperti yang ditunjukkan di bawah ini -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

Sini,

app.css mengimpor lembar gaya inti dan lembar gaya tema warna coklat dari kerangka NativeScript.

LANGKAH 3

app \ app.module.ts - Modul root aplikasi.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], 
      imports: [
         NativeScriptModule,
         AppRoutingModule
      ], 
      declarations: [
         AppComponent
      ], schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class AppModule { }

Sini,

AppModule dibuat berdasarkan NgModule dan mengatur komponen dan modul aplikasi. Ini mengimpor dua modul NativeScriptModule dan AppRoutingModule dan sebuah komponen, AppComponent. Ini juga mengatur AppComponent sebagai komponen root aplikasi.

LANGKAH 4

app.component.ts - Komponen root aplikasi.

import { Component } from "@angular/core"; 
@Component(
   { 
      selector: "ns-app", 
      templateUrl: "app.component.html" 
   }
) 
export class AppComponent { }

Sini,

AppComponent menyetel template dan style sheet dari komponen. Template dirancang dalam HMTL biasa menggunakan komponen UI NativeScript.

LANGKAH 5

app-routing.module.ts - Modul perutean untuk AppModule

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: () =>
   import("~/app/home/home.module").then((m) => m.HomeModule) } 
];
@NgModule(
   {
      imports: [NativeScriptRouterModule.forRoot(routes)], 
      exports: [NativeScriptRouterModule] 
   }
)
export class AppRoutingModule { }

Sini,

AppRoutingModule menggunakan NativeScriptRouterModule dan menetapkan rute AppModule. Ini pada dasarnya mengarahkan ulang jalur kosong ke / home dan mengarahkan / home ke HomeModule.

LANGKAH 6

app \ home \ home.module.ts - Mendefinisikan modul baru, HomeModule.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule(
   {
      imports: [
         NativeScriptCommonModule,
         HomeRoutingModule
      ],
      declarations: [
         HomeComponent
      ],
      schemas: [
         NO_ERRORS_SCHEMA
      ]
   }
)
export class HomeModule { }

Sini,

HomeModule mengimpor dua modul, HomeRoutingModule dan NativeScriptCommonModule serta satu komponen HomeComponent

LANGKAH 7

app \ home \ home.component.ts - Mendefinisikan komponen Home dan digunakan sebagai halaman muka aplikasi.

import { Component, OnInit } from "@angular/core";
@Component(
   {
      selector: "Home", templateUrl: "./home.component.html" 
   }
) 
export class HomeComponent implements OnInit { 
   constructor() { 
      // Use the component constructor to inject providers. 
   } 
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
}

Sini,

HomeComponent menyetel template dan pemilih komponen rumah.

LANGKAH 8

app \ home \ home-routing.module.ts - Modul perutean untuk HomeModule dan digunakan untuk menentukan perutean untuk modul rumah.

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
const routes: Routes = [
   { path: "", component: HomeComponent } 
]; 
@NgModule(
   { 
      imports: [NativeScriptRouterModule.forChild(routes)], 
      exports: [NativeScriptRouterModule] 
   }
) 
export class HomeRoutingModule { }

Sini,

HomeRoutingModule menyetel jalur kosong ke HomeComponent.

LANGKAH 9

app.component.html dan home.component.html - Mereka digunakan untuk mendesain UI aplikasi menggunakan komponen UI NativeScript.

Jalankan aplikasi Anda

Jika Anda ingin menjalankan aplikasi Anda tanpa menggunakan perangkat apa pun, ketikkan perintah di bawah ini -

tns preview

Setelah menjalankan perintah ini, ini akan menghasilkan kode QR untuk dipindai dan dihubungkan dengan perangkat Anda.

Keluaran

QRCode

Sekarang kode QR dibuat dan terhubung ke PlayGround di langkah berikutnya.

PlayGround NativeScript

Buka aplikasi NativeScript PlayGround di ponsel iOS atau Android Anda, lalu pilih opsi Pindai kode QR . Ini akan membuka kamera. Fokuskan kode QR yang ditampilkan di konsol. Ini akan memindai Kode QR. Memindai Kode QR akan memicu pembuatan aplikasi dan kemudian menyinkronkan aplikasi ke perangkat seperti yang diberikan di bawah ini -

Copying template files... 
Platform android successfully added. v6.3.1 
Preparing project... 
File change detected. Starting incremental webpack compilation... 
webpack is watching the files… 
Hash: 1f38aaf6fcda4e082b88 
Version: webpack 4.27.1 
Time: 9333ms 
Built at: 01/04/2020 4:22:31 PM
               Asset          Size        Chunks         Chunk Names 
               0.js           8.32 KiB     0     [emitted] 
          bundle.js           22.9 KiB    bundle [emitted] bundle 
       package.json          112 bytes           [emitted] 
         runtime.js             73 KiB   runtime [emitted] runtime 
tns-java-classes.js            0 bytes  [emitted] 
          vendor.js            345 KiB   vendor  [emitted] vendor 
Entrypoint bundle = runtime.js vendor.js bundle.js 
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy 
namespace object 160 bytes {bundle} [built] [./app.css] 1.18 KiB {bundle} [built] [./app/app-routing.module.ts] 688 bytes {bundle} [built] 
[./app/app.component.html] 62 bytes {bundle} [built] 
[./app/app.component.ts] 354 bytes {bundle} [built] 
[./app/app.module.ts] 3.22 KiB {bundle} [built] 
[./app/home/home.module.ts] 710 bytes {0} [built] 
[./main.ts] 1.84 KiB {bundle} [built] 
[@angular/core] external "@angular/core" 42 bytes {bundle} [built] [nativescript-angular/nativescript.module] external "nativescript-
angular/nativescript.module" 42 bytes {bundle} [built] 
[nativescript-angular/platform] external "nativescript-angular/platform" 42 
bytes {bundle} [built] [tns-core-modules/application] external "tns-core-
modules/application" 42 bytes {bundle} [built] 
[tns-core-modules/bundle-entry-points] external "tns-core-modules/bundle-entry-points" 42 
bytes {bundle} [built] 
[tns-core-modules/ui/frame] external "tns-core-
modules/ui/frame" 42 bytes {bundle} [built] 
[tns-core-modules/ui/frame/activity] external "tns-core-
modules/ui/frame/activity" 42 bytes {bundle} [built] 
   + 15 hidden modules Webpack compilation complete. Watching for file changes. 
Webpack build done! 
Project successfully prepared (android) 
Start sending initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-
b02f-3dc6d4ee0e1f). 
Successfully sent initial files for device Bala Honor Holly (ff5e8622-7a01-4f9c-b02f-3dc6d4ee0e1f). 
LOG from device Bala Honor Holly: HMR: Hot Module Replacement Enabled. Waiting for signal. 
LOG from device Bala Honor Holly: Angular is running in the development mode. 
Call enableProdMode() to enable the production mode.

Keluaran

Setelah memindai, Anda akan melihat BlankNgApp di perangkat Anda. Itu ditunjukkan di bawah ini -

Jalankan aplikasi Anda di perangkat

Jika Anda ingin menguji perangkat yang terhubung dalam aplikasi Anda, Anda dapat memverifikasinya menggunakan sintaks di bawah ini -

'tns device <Platform> --available-devices'

Setelah itu, Anda dapat menjalankan aplikasi Anda menggunakan perintah di bawah ini -

tns run

Perintah di atas digunakan untuk membangun aplikasi Anda secara lokal dan menginstal di perangkat Android atau iOS. Jika Anda ingin menjalankan aplikasi Anda di simulator Android, ketikkan perintah di bawah ini -

tns run android

Untuk perangkat iOS, Anda dapat mengikuti perintah di bawah ini -

tns run ios

Ini akan menginisialisasi aplikasi di perangkat Android / iOS. Kami akan membahas ini lebih detail di bab-bab selanjutnya.

LiveSync

NativeScript menyediakan sinkronisasi perubahan waktu nyata dalam aplikasi ke aplikasi pratinjau. Biarkan kami membuka proyek menggunakan editor favorit Anda (Visual Studio Code akan menjadi pilihan ideal untuk visualisasi yang lebih baik). Mari kita tambahkan beberapa perubahan dalam kode kita dan lihat bagaimana itu akan dideteksi di LiveSync.

Sekarang buka file app.css dan itu akan memiliki konten di bawah ini -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/blue.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

Di sini, pernyataan import memberi tahu skema warna aplikasi kita. Mari kita ubah skema warna biru menjadibrown skema warna seperti yang ditentukan di bawah ini -

@import "~@nativescript/theme/css/core.css"; 
@import "~@nativescript/theme/css/brown.css"; 
/* Place any CSS rules you want to apply on both iOS and Android here. 
This is where the vast majority of your CSS code goes. */

Aplikasi di perangkat kami menyegarkan dan Anda akan melihat ActionBar warna coklat seperti yang ditunjukkan di bawah ini -

Keluaran

Di bawah ini adalah Halaman Beranda BlankNgApp - Tema Coklat.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved