آموزش معماری NativeScript

آموزش معماری NativeScript

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

NativeScript یک چارچوب پیشرفته برای ایجاد برنامه موبایل است. این مسئله پیچیدگی ایجاد برنامه های تلفن همراه را پنهان می کند و یک API نسبتاً ساده را برای ایجاد یک برنامه کاربردی کاملاً بهینه و پیشرفته در معرض دید کاربران قرار می دهد. NativeScript حتی توسعه دهندگان سطح پایین را قادر می سازد تا به راحتی برنامه های تلفن همراه را در Android و iOS ایجاد کنند.

اجازه دهید معماری  NativeScript را در این فصل درک کنیم.

معرفی

مفهوم اصلی چارچوب NativeScript این است که توسعه دهنده را قادر به ایجاد یک برنامه ترکیبی تلفن همراه به سبک ترکیبی می کند. برنامه ترکیبی از API مخصوص مرورگر پلت فرم برای میزبانی یک برنامه وب در داخل یک برنامه تلفن همراه عادی استفاده می کند و دسترسی سیستم به برنامه را از طریق JavaScript API فراهم می کند.

NativeScript سرمایه گذاری زیادی روی زبان JavaScript انجام می دهد تا چارچوبی کارآمد برای توسعه دهندگان فراهم کند. از آنجا که جاوا اسکریپت بصورت واقعی برای برنامه نویسی سمت مشتری (توسعه وب) استاندارد است و هر توسعه دهنده ای از زبان جاوا اسکریپت کاملاً آگاه است ، به توسعه دهندگان کمک می کند تا به راحتی وارد چارچوب NativeScript شوند. در سطح پایین ، NativeScript API بومی را از طریق مجموعه ای از پلاگین های JavaScript به نام پلاگین های Native در معرض دید قرار می دهد.

NativeScript بر پایه و اساس افزونه های Native ساخته شده است و بسیاری از ماژول های سطح بالا و آسان برای استفاده را فراهم می کند. هر ماژول عملکرد خاصی مانند دسترسی به دوربین ، طراحی صفحه و غیره را انجام می دهد. همه این ماژول ها را می توان به روش های مختلفی ترکیب کرد تا یک برنامه پیچیده موبایل را معماری کند.

نمودار زیر نمای کلی سطح بالای چارچوب NativeScript را نشان می دهد –

برنامه NativeScript – چارچوب NativeScript به توسعه دهنده اجازه می دهد تا یا از برنامه سبک Angular یا برنامه Vue Style استفاده کند.

ماژول های جاوا اسکریپت – چارچوب NativeScript مجموعه ای غنی از ماژول های جاوا اسکریپت را فراهم می کند که به وضوح به عنوان ماژول های UI ، ماژول های برنامه ، ماژول های اصلی و غیره طبقه بندی می شوند. برای نوشتن هر سطح از برنامه های پیچیده ، در هر زمان از طریق برنامه می توان به همه ماژول ها دسترسی داشت.

افزونه های جاوا اسکریپت – چارچوب NativeScript مجموعه بزرگی از افزونه های جاوا اسکریپت را برای دسترسی به قابلیت های مربوط به سیستم عامل فراهم می کند. ماژول ها از افزونه های جاوا اسکریپت برای ارائه قابلیت های خاص پلت فرم استفاده می کنند.

پلاگین های بومی plug پلاگین های بومی به زبان خاص پلتفرم نوشته می شوند تا عملکرد سیستم را که بیشتر توسط پلاگین JavaScript استفاده می شود ، بپوشانید.

Platform API – API ارائه شده توسط فروشندگان پلت فرم.

به طور خلاصه، برنامه NativeScript با استفاده از ماژول ها نوشته و سازماندهی می شود. ماژولها با JavaScript خالص نوشته شده اند و ماژولها از طریق افزونه ها به قابلیتهای مربوط به سیستم عامل (در هر زمان نیاز) دسترسی پیدا می كنند و در آخر ، این پلاگینها از API پلت فرم و JavaScript API می گذرند.

گردش کار یک برنامه NativeScript

همانطور که قبلاً یاد گرفتیم، برنامه NativeScript از ماژول ها تشکیل شده است. هر ماژول ویژگی خاصی را فعال می کند. دو دسته مهم ماژول برای راه اندازی یک برنامه NativeScript به شرح زیر است:

• ماژول های ریشه (Root)
• ماژول های صفحه (Page)

ماژول های Root و Page را می توان به عنوان ماژول های برنامه دسته بندی کرد. ماژول برنامه نقطه ورود برنامه NativeScript است. این یک صفحه را راه اندازی می کند ، توسعه دهنده را قادر می سازد رابط کاربری صفحه را ایجاد کند و در نهایت امکان اجرای منطق تجاری صفحه را فراهم می کند. یک ماژول برنامه شامل سه مورد زیر است –

• طراحی رابط کاربر کد شده در XML (به عنوان مثال page.xml / page.component.html)
• سبک های کد شده در CSS (به عنوان مثال page.css / page.component.css)
• منطق تجاری واقعی ماژول در JavaScript (به عنوان مثال page.js / page.component.ts)

NativeScript بسیاری از مولفه های UI (تحت UU Module) را برای طراحی صفحه برنامه فراهم می کند. کامپوننت UI می تواند در قالب XML یا قالب HTML در برنامه مبتنی بر Angular نمایش داده شود. ماژول برنامه از کامپوننت UI برای طراحی صفحه و ذخیره طرح در XML جداگانه ، page.xml / page.component.html استفاده می کند. طراحی را می توان با استفاده از CSS استاندارد انجام داد.

ماژول های برنامه سبک طراحی را در CSS جداگانه  page.css / page.component.css ذخیره می کنند. عملکرد صفحه را می توان با استفاده از JavaScript / TypeScript انجام داد که دسترسی کاملی به طراحی و همچنین ویژگی های پلت فرم دارد. ماژول برنامه از یک فایل جداگانه ، page.js / page.component.ts برای کدگذاری عملکرد واقعی صفحه استفاده می کند.

ماژول های Root

NativeScript رابط کاربر و تعامل کاربر را از طریق ظروف UI مدیریت می کند. هر کانتینر UI باید یک ماژول Root داشته باشد و کانتینر UI از طریق آن UI را مدیریت کند. برنامه NativeScript دارای دو نوع ظرف UI است –

Application Container – هر برنامه NativeScript باید یک ظرف برنامه داشته باشد و با استفاده از روش () application.run تنظیم می شود. مقدار اولیه UI برنامه را آغاز می کند.

Model View Container –  گفتگوی Modal را با استفاده از ظرف نمای model مدیریت می کند. یک برنامه NativeScript می تواند هر تعداد ظرف نمایش مدل را داشته باشد.

هر ماژول ریشه باید فقط یک جز U UI را به عنوان محتوای خود داشته باشد. مولفه UI به نوبه خود می تواند سایر م Uلفه های UI را نیز به عنوان فرزند خود داشته باشد. NativeScript بسیاری از مولفه های UI مانند TabView ، ScrollView و غیره را با ویژگی فرزند ارائه می دهد. می توانیم از اینها به عنوان مولفه UI ریشه استفاده کنیم. یک استثنا Frame است که گزینه فرزند را ندارد اما می تواند به عنوان جز. ریشه مورد استفاده قرار گیرد. Frame گزینه هایی برای بارگذاری صفحه ماژول ها و گزینه هایی برای حرکت به سایر ماژول های صفحه را نیز فراهم می کند.

ماژول های Page

در NativeScript، هر صفحه اساساً یک صفحه ماژول است. ماژول صفحه با استفاده از مجموعه غنی از اجزای UI ارائه شده توسط NativeScript طراحی شده است. ماژول های صفحه از طریق م componentلفه Frame (با استفاده از ویژگی defaultPage آن یا استفاده از روش navigate ()) در برنامه بارگیری می شوند ، که به نوبه خود با استفاده از Root Modules بارگذاری می شوند ، که مجدداً هنگام شروع برنامه با استفاده از application.run () بارگیری می شوند.

جریان کار برنامه را می توان مانند نمودار زیر نشان داد –

نمودار بالا در مراحل زیر با جزئیات توضیح داده شده است –

برنامه NativeScript شروع به فراخوانی متد () application.run می کند.

()application.run  ماژول Root را بارگیری می کند.

ماژول Root با استفاده از هر یک از مولفه های UI به شرح زیر طراحی شده است –

• Frame
• TabView
• SideDrawer
• Any Layout View

جز  Frame صفحه مشخص شده (ماژول صفحه) را بارگیری کرده و ارائه می شود. سایر مولفه های UI همانطور که در ماژول ریشه مشخص شده است ارائه می شوند. سایر مولفه های UI همچنین گزینه بارگذاری صفحه ماژول ها را به عنوان محتوای اصلی خود دارند.

گردش کار برنامه NativeScript مبتنی بر Angular

همانطور که قبلاً یاد گرفتیم ، چارچوب NativeScript روشهای مختلفی را برای تهیه انواع مختلف توسعه دهندگان فراهم می کند. روش های پشتیبانی شده توسط NativeScript به شرح زیر است –

• NativeScript Core – مفهوم اصلی یا اصلی چارچوب NativeScript
• Angular + NativeScript – روش مبتنی بر Angular
• Vuejs + NativeScript – روش مبتنی بر Vue.js

بیایید بیاموزیم که چارچوب Angular چگونه در چارچوب NativeScript گنجانده شده است.

مرحله ۱

NativeScript یک شی (platformNativeScriptDynamic) برای راه اندازی مجدد برنامه Angular فراهم می کند. platformNativeScriptDynamic دارای روشی به نام bootstrapModule است که برای شروع برنامه استفاده می شود.

نحو برای راه اندازی مجدد برنامه با استفاده از چارچوب Angular به شرح زیر است:

import { platformNativeScriptDynamic } from "nativescript-angular/platform"; 
import { AppModule } from "./app/app.module"; 
platformNativeScriptDynamic().bootstrapModule(AppModule);

اینجا، AppModule ماژول Root ما است.

گام ۲

یک اجرای ساده (زیر کد مشخص شده) از ماژول برنامه.

import { NgModule } 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
      ]
   }
) export class AppModule { }

اینجا،AppModule با دانلود مولفه AppComponent برنامه را شروع می کند. اجزای زاویه ای شبیه صفحات هستند و هم برای طراحی و هم برای منطق برنامه نویسی استفاده می شوند.

یک اجرای ساده از AppComponent (app.component.ts) و منطق ارائه آن (app.component.css) به شرح زیر است –

app.component.ts

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

اینجا، templateUrl به طراحی م componentلفه اشاره دارد.

app.component.html

<page-router-outlet></page-router-outlet>

اینجا، page-router-outlet محلی است که برنامه Angular به آن متصل می شود.

به طور خلاصه، چارچوب Angular از ماژول های مشابه چارچوب NativeScript با تفاوت های جزئی تشکیل شده است. هر ماژول در Angular دارای یک مولفه Angular و یک فایل تنظیم روتر است (page-routing.mocdule.ts). روتر در هر ماژول تنظیم شده است و از ناوبری مراقبت می کند. مولفه های Angular آنالوگ صفحات موجود در هسته NativeSctipt هستند.

هر مولفه دارای یک طراحی UI (page.component.html) ، یک صفحه سبک (page.component.css) و یک پرونده کد JavaScript / TypeScript (page.component.ts) خواهد بود.

منبع.

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

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript