آموزش برنامه Angular در NativeScript

3 سال پیش

آموزش برنامه Angular در NativeScript

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش برنامه Angular در NativeScript خواهیم پرداخت.

ایجاد برنامه

بیایید بیاموزیم که چگونه با استفاده از NativeScript CLI ، tns یک برنامه ساده ایجاد کنیم. tns یک دستور ایجاد می کند تا برای ایجاد یک پروژه جدید در NativeScript استفاده شود.

نحو اصلی برای ایجاد یک برنامه جدید به شرح زیر است:

tns create <projectname> --template <template_name>

جایی که،

Projectname نام پروژه است.
template_name الگوی پروژه است. NativeScript الگوی راه اندازی زیادی را برای ایجاد انواع مختلف برنامه فراهم می کند. از الگوی مبتنی بر زاویه استفاده کنید.

اجازه دهید یک فهرست جدید به نام NativeScriptSamples ایجاد کنیم تا در برنامه جدید خود کار کنیم. اکنون ، ترمینال جدیدی را باز کنید و سپس به فهرست ما بروید و دستور زیر را تایپ کنید –

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

جایی که، tns-template-blank-ng به یک برنامه تلفن همراه خالی مبتنی بر AngularJS اشاره دارد.

خروجی

..... 
..... 
..... 
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

اکنون اولین برنامه تلفن همراه ما، BlankNgApp ایجاد شده است.

ساختار برنامه

اجازه دهید با تجزیه و تحلیل اولین برنامه BlankNgApp در این فصل ، ساختار برنامه NativeScript را درک کنیم. برنامه NativeScript در چندین بخش سازمان یافته است و آنها به شرح زیر است:

بخش پیکربندی
ماژول های گره
منابع اندروید
منابع iOS
کد منبع برنامه

ساختار کلی برنامه به شرح زیر است –

│ 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

بگذارید هر بخش از برنامه را بفهمیم و اینکه چگونه به ما در ایجاد برنامه کمک می کند.

بخش پیکربندی

تمام پرونده های موجود در ریشه برنامه، پرونده های پیکربندی هستند. قالب پرونده های پیکربندی در قالب JSON است ، که به توسعه دهنده کمک می کند تا جزئیات پیکربندی را به راحتی درک کند. برنامه NativeScript برای بدست آوردن کلیه اطلاعات پیکربندی موجود، به این پرونده ها متکی است. اجازه دهید تمام پرونده های پیکربندی موجود در این بخش را مرور کنیم.

pack.json

پرونده های pack.json هویت (شناسه) برنامه و کلیه ماژول هایی را که برنامه برای عملکرد مناسب به آن بستگی دارد، تنظیم می کند. در زیر بسته json شامل –

{ 
   "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" 
}

اینجا،

هویت برنامه (nativescript / id) – شناسه برنامه را به صورت org.nativescript.BlankNgApp تنظیم می کند. این شناسه برای انتشار برنامه ما در Play Store یا iTunes استفاده می شود. این شناسه شناسه برنامه یا نام بسته ما خواهد بود.
وابستگی ها (dependencies) – همه ماژول های گره وابسته ما را مشخص می کند. از آنجا که پیاده سازی پیش فرض NativeScript به Angular Framework بستگی دارد ، ماژول های Angular نیز شامل می شوند.
وابستگی های توسعه – تمام ابزاری را که برنامه به آنها بستگی دارد مشخص می کند. از آنجا که ما در حال توسعه برنامه خود در TypeScript هستیم ، این برنامه به عنوان یکی از ماژول های وابسته شامل typescript است.
angular.json – اطلاعات پیکربندی چارچوب زاویه ای.
nsconfig.json – اطلاعات پیکربندی چارچوب NativeScript.
tsconfig.json، tsfmt.json & tsconfig.tns.json – اطلاعات پیکربندی زبان TypeScript
webpack.config.js – پیکربندی WebPack که در JavaScript نوشته شده است.

ماژول های گره

از آنجا که پروژه NativeScript پروژه مبتنی بر گره است ، تمام وابستگی های خود را در پوشه node_modules ذخیره می کند. ما می توانیم از npm (npm install) یا tns برای بارگیری و نصب تمام وابستگی برنامه ها به node_moduels استفاده کنیم.

کد منبع اندروید

NativeScript به طور خودکار کد منبع android را تولید کرده و آن را در پوشه App_Resources \ Android قرار دهید. برای ایجاد برنامه اندروید با استفاده از Android SDK استفاده خواهد شد

کد منبع iOS

NativeScript کد منبع iOS را به صورت خودکار تولید کرده و آن را در پوشه App_Resources \ iOS قرار دهید. برای ایجاد برنامه iOS با استفاده از iOS SDK و XCode استفاده خواهد شد

کد منبع برنامه

کد واقعی برنامه در پوشه src قرار گرفته است. برنامه ما دارای پرونده های زیر در پوشه 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

بگذارید هدف همه پرونده ها و نحوه سازماندهی آنها را در این بخش بفهمیم –

مرحله ۱

main.ts – نقطه ورود برنامه.

// 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);

در اینجا ، ما AppModule را به عنوان ماژول راه انداز برنامه تنظیم کرده ایم.

مرحله ۲

app.css – سبک اصلی برنامه همانطور که در زیر نشان داده شده است –

@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. */

اینجا،

app.css صفحه سبک اصلی و قالب های رنگی قهوه ای قالب چارچوب NativeScript را وارد می کند.

مرحله ۳

app \ app.module.ts – ماژول ریشه برنامه.

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 { }

اینجا،

AppModule بر اساس NgModule ایجاد شده و اجزا و ماژول های برنامه را تنظیم می کند. این دو ماژول NativeScriptModule و AppRoutingModule و یک جز component ، AppComponent را وارد می کند. همچنین AppComponent را به عنوان م rootلفه اصلی برنامه تنظیم کرده است.

مرحله ۴

app.component.ts – جز ریشه ای برنامه.

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

اینجا،

AppComponent الگو و سبک مولفه را تنظیم می کند. الگو با استفاده از مولفه های UI NativeScript در HMTL ساده طراحی شده است.

مرحله ۵

app-routing.module.ts – ماژول مسیریابی برای 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 { }

اینجا،

AppRoutingModule از NativeScriptRouterModule استفاده می کند و مسیرهای AppModule را تعیین می کند. در اصل مسیر خالی را به / خانه و نقاط / خانه را به HomeModule هدایت می کند.

مرحله ۶

app \ home \ home.module.ts – ماژول جدیدی را به نام 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 { }

اینجا،

HomeModule دو ماژول وارد می کند ، HomeRoutingModule و NativeScriptCommonModule و یک جز Home HomeComponent

مرحله ۷

app \ home \ home.component.ts – م Homeلفه Home را تعریف می کند و به عنوان صفحه اصلی برنامه استفاده می شود.

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. 
   } 
}

اینجا،

HomeComponent الگو و انتخاب کننده م,لفه خانه را تنظیم می کند.

مرحله ۸

app \ home \ home-routing.module.ts – ماژول مسیریابی برای HomeModule و برای تعریف مسیریابی برای ماژول خانه استفاده می شود.

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 { }

اینجا،

HomeRoutingModule مسیر خالی را روی HomeComponent تنظیم کنید.

مرحله ۹

app.component.html و home.component.html – از آنها برای طراحی UI برنامه با استفاده از م Nلفه های UI NativeScript استفاده می شود.

برنامه خود را اجرا کنید

اگر می خواهید برنامه خود را بدون استفاده از هیچ دستگاهی اجرا کنید ، دستور زیر را تایپ کنید –

tns preview

پس از اجرای این دستور ، کد QR برای اسکن و اتصال با دستگاه شما تولید می شود.

خروجی

کد QR

اکنون کد QR تولید شده و در مرحله بعدی به PlayGround متصل شوید.

NativeScript PlayGround

برنامه NativeScript PlayGround را در تلفن همراه iOS یا Android خود باز کنید و سپس گزینه Scan QR code را انتخاب کنید. دوربین را باز می کند کد QR نمایش داده شده روی کنسول را متمرکز کنید. با این کار QR Code اسکن می شود. اسکن کد QR باعث ایجاد برنامه می شود و سپس برنامه را با دستگاه همگام سازی می کنیم ، در زیر آورده شده است –

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 
               ۰٫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] 
   + ۱۵ 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.

خروجی

پس از اسکن، باید BlankNgApp خود را بر روی دستگاه خود مشاهده کنید. در زیر نشان داده شده است –

BlankNgApp

برنامه خود را روی دستگاه اجرا کنید

اگر می خواهید دستگاه متصل را در برنامه خود jsj کنید، می توانید آن را با استفاده از نحو زیر تأیید کنید –

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

پس از آن، می توانید برنامه خود را با استفاده از دستور زیر اجرا کنید –

tns run

از دستور بالا برای ساخت برنامه های شما به صورت محلی و نصب بر روی دستگاه های Andriod یا iOS استفاده می شود.

tns run android

برای دستگاه iOS ، می توانید دستور زیر را دنبال کنید –

tns run ios

با این کار برنامه در دستگاه Android / iOS اولیه می شود. ما در فصل های آینده با جزئیات بیشتری در مورد این بحث خواهیم کرد.

LiveSync

NativeScript همگام سازی زمان واقعی تغییرات برنامه با برنامه پیش نمایش را فراهم می کند. اجازه دهید ما پروژه را با استفاده از ویرایشگر مورد علاقه خود باز کنیم (کد ویژوال استودیو گزینه ایده آل برای تجسم بهتر است). اجازه دهید برخی از تغییرات را در کد خود اضافه کنیم و ببینیم که چگونه در LiveSync تشخیص داده می شود.

اکنون پرونده app.css را باز کنید و دارای محتوای زیر است –

@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. */

در اینجا، بیانیه واردات طرح رنگ برنامه ما را نشان می دهد. اجازه دهید طرح رنگ آبی را به رنگ قهوه ای تغییر دهید که در زیر مشخص شده است –

@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. */

برنامه موجود در دستگاه ما تازه می شود و باید یک ActionBar رنگ قهوه ای مانند تصویر زیر مشاهده کنید –

خروجی

در زیر صفحه اصلی BlankNgApp – تم قهوه ای وجود دارد.

Brown Theme

منبع.

لیست جلسات قبل آموزش NativeScript

برچسب ها : آموزش NativeScript آموزش برنامه نویسی موبایل

نویسنده مطلب erfan molaei

آموزش برنامه Angular در NativeScript

آموزش برنامه Angular در NativeScript

ایجاد برنامه

خروجی

ساختار برنامه

بخش پیکربندی

pack.json

ماژول های گره

کد منبع اندروید

کد منبع iOS

کد منبع برنامه

مرحله ۱

مرحله ۲

مرحله ۳

مرحله ۴

مرحله ۵

مرحله ۶

مرحله ۷

مرحله ۸

مرحله ۹

برنامه خود را اجرا کنید

خروجی

کد QR

NativeScript PlayGround

خروجی

LiveSync

خروجی

لیست جلسات قبل آموزش NativeScript

دیدگاه شما

بدون دیدگاه

آموزش برنامه Angular در NativeScript

ایجاد برنامه

خروجی

ساختار برنامه

بخش پیکربندی

pack.json

ماژول های گره

کد منبع اندروید

کد منبع iOS

کد منبع برنامه

مرحله ۱

مرحله ۲

مرحله ۳

مرحله ۴

مرحله ۵

مرحله ۶

مرحله ۷

مرحله ۸

مرحله ۹

برنامه خود را اجرا کنید

خروجی

کد QR

NativeScript PlayGround

خروجی

LiveSync

خروجی

لیست جلسات قبل آموزش NativeScript

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه