NativeScript - สถาปัตยกรรม

NativeScript เป็นเฟรมเวิร์กขั้นสูงในการสร้างแอปพลิเคชันมือถือ มันซ่อนความซับซ้อนของการสร้างแอปพลิเคชันมือถือและเปิดเผย API ที่ค่อนข้างเรียบง่ายเพื่อสร้างแอปพลิเคชันมือถือที่ได้รับการปรับให้เหมาะสมและทันสมัย NativeScript ช่วยให้แม้แต่นักพัฒนาระดับเริ่มต้นสามารถสร้างแอปพลิเคชันมือถือทั้งใน Android และ iOS ได้อย่างง่ายดาย

ให้เราเข้าใจสถาปัตยกรรมของกรอบงาน NativeScript ในบทนี้

บทนำ

แนวคิดหลักของกรอบงาน NativeScript คือการช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันมือถือสไตล์ไฮบริด แอปพลิเคชันไฮบริดใช้ API เบราว์เซอร์เฉพาะแพลตฟอร์มเพื่อโฮสต์เว็บแอปพลิเคชันภายในแอปพลิเคชันมือถือปกติและให้ระบบเข้าถึงแอปพลิเคชันผ่าน JavaScript API

NativeScript ลงทุนอย่างมากในไฟล์ JavaScript languageเพื่อมอบกรอบการทำงานที่มีประสิทธิภาพสำหรับนักพัฒนา ตั้งแต่JavaScriptเป็นมาตรฐานโดยพฤตินัยสำหรับการเขียนโปรแกรมฝั่งไคลเอ็นต์ (การพัฒนาเว็บ) และนักพัฒนาทุกคนตระหนักดีถึงภาษา JavaScript ซึ่งจะช่วยให้นักพัฒนาเข้าสู่กรอบงาน NativeScript ได้อย่างง่ายดาย ในระดับต่ำ NativeScript จะเปิดเผย API ดั้งเดิมผ่านชุดปลั๊กอิน JavaScript ที่เรียกว่าNative plugins.

NativeScript สร้างขึ้นบนรากฐานของปลั๊กอินพื้นเมืองและให้ระดับสูงจำนวนมากและง่ายต่อการใช้งานจาวาสคริปต์โมดูล แต่ละโมดูลทำหน้าที่เฉพาะเช่นการเข้าถึงกล้องการออกแบบหน้าจอ ฯลฯ โมดูลทั้งหมดเหล่านี้สามารถรวมกันได้หลายวิธีเพื่อออกแบบแอปพลิเคชันมือถือที่ซับซ้อน

แผนภาพด้านล่างแสดงภาพรวมระดับสูงของกรอบงาน NativeScript -

NativeScript Application - กรอบงาน NativeScript ช่วยให้นักพัฒนาสามารถใช้แอปพลิเคชันสไตล์ Angular หรือแอปพลิเคชัน Vue Style

JavaScript Modules - กรอบงาน NativeScript มีชุดโมดูล JavaScript ที่หลากหลายซึ่งจัดหมวดหมู่อย่างชัดเจนเป็นโมดูล UI, โมดูลแอปพลิเคชัน, โมดูลหลักและอื่น ๆ โมดูลทั้งหมดสามารถเข้าถึงได้โดยแอปพลิเคชันตลอดเวลาเพื่อเขียนแอปพลิเคชันที่ซับซ้อนในระดับใดก็ได้

JavaScript plugins- กรอบงาน NativeScript มีปลั๊กอิน JavaScript จำนวนมากเพื่อเข้าถึงฟังก์ชันที่เกี่ยวข้องกับแพลตฟอร์ม โมดูลใช้ปลั๊กอิน JavaScript เพื่อจัดเตรียมฟังก์ชันการทำงานเฉพาะแพลตฟอร์ม

Native plugins- ปลั๊กอินเนทีฟถูกเขียนด้วยภาษาเฉพาะของแพลตฟอร์มเพื่อห่อหุ้มการทำงานของระบบซึ่งจะใช้ต่อไปโดยปลั๊กอิน JavaScript

Platform API - API จัดทำโดยผู้ขายแพลตฟอร์ม

ในระยะสั้นแอปพลิเคชัน NativeScript ถูกเขียนและจัดระเบียบโดยใช้โมดูล โมดูลถูกเขียนด้วย JavaScript บริสุทธิ์และโมดูลจะเข้าถึงฟังก์ชันการทำงานที่เกี่ยวข้องกับแพลตฟอร์ม (เมื่อใดก็ตามที่จำเป็น) ผ่านปลั๊กอินและสุดท้ายปลั๊กอินจะเชื่อมโยงแพลตฟอร์ม API และ JavaScript API

เวิร์กโฟลว์ของแอปพลิเคชัน NativeScript

ดังที่เราได้เรียนรู้ไปก่อนหน้านี้แอปพลิเคชัน NativeScript ประกอบด้วยโมดูล แต่ละโมดูลเปิดใช้งานคุณลักษณะเฉพาะ โมดูลที่สำคัญสองประเภทในการบูตแอปพลิเคชัน NativeScript มีดังนี้ -

• โมดูลรูท

• โมดูลหน้า

โมดูลรูทและเพจสามารถแบ่งประเภทเป็นโมดูลแอ็พพลิเคชัน โมดูลแอ็พพลิเคชันเป็นจุดเริ่มต้นของแอ็พพลิเคชัน NativeScript มันบูตหน้าเว็บช่วยให้นักพัฒนาสร้างอินเทอร์เฟซผู้ใช้ของเพจและในที่สุดก็อนุญาตให้เรียกใช้ตรรกะทางธุรกิจของเพจ โมดูลแอปพลิเคชันประกอบด้วยสามรายการด้านล่าง -

• การออกแบบส่วนติดต่อผู้ใช้ที่เข้ารหัสใน XML (เช่น page.xml / page.component.html)

• สไตล์ที่เข้ารหัสใน CSS (เช่น page.css / page.component.css)

• ตรรกะทางธุรกิจจริงของโมดูลใน JavaScript (เช่น page.js / page.component.ts)

NativeScript มีส่วนประกอบ UI จำนวนมาก (ภายใต้โมดูล UI) เพื่อออกแบบหน้าแอปพลิเคชัน ส่วนประกอบ 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 เพื่อเขียนโค้ดการทำงานจริงของเพจ

โมดูลรูท

NativeScript จัดการอินเทอร์เฟซผู้ใช้และการโต้ตอบกับผู้ใช้ผ่านคอนเทนเนอร์ UI คอนเทนเนอร์ UI ทุกตัวควรมีโมดูลรูทและคอนเทนเนอร์ UI จะจัดการ UI แอปพลิเคชัน NativeScript มีคอนเทนเนอร์ UI สองประเภท -

Application Container- ทุกแอปพลิเคชัน NativeScript ควรมีที่เก็บแอปพลิเคชันเดียวและจะตั้งค่าโดยใช้วิธีการ application.run () เริ่มต้น UI ของแอปพลิเคชัน

Model View Container- NativeScript จัดการกล่องโต้ตอบ Modal โดยใช้ model view container แอปพลิเคชัน NativeScript สามารถมีคอนเทนเนอร์มุมมองแบบจำลองจำนวนเท่าใดก็ได้

ทุกโมดูลรูทควรมีส่วนประกอบ UI เพียงรายการเดียวเป็นเนื้อหา ในทางกลับกันคอมโพเนนต์ UI สามารถมีส่วนประกอบ UI อื่น ๆ เป็นลูก ๆ ได้ NativeScript มีองค์ประกอบ UI มากมายเช่น TabView, ScrollView และอื่น ๆ พร้อมคุณสมบัติลูก เราสามารถใช้สิ่งเหล่านี้เป็นองค์ประกอบ UI รูท ข้อยกเว้นประการหนึ่งคือFrameซึ่งไม่มีตัวเลือกลูก แต่สามารถใช้เป็นองค์ประกอบหลักได้ Frame มีตัวเลือกในการโหลด Page Modules และตัวเลือกเพื่อนำทางไปยังโมดูลเพจอื่น ๆด้วย

โมดูลหน้า

ใน NativeScript แต่ละและทุกหน้าเป็นพื้นหน้าโมดูล โมดูลเพจได้รับการออกแบบโดยใช้ชุดส่วนประกอบ UI ที่มีให้โดย NativeScript โมดูลของเพจถูกโหลดเข้าสู่แอปพลิเคชันผ่านคอมโพเนนต์Frame (โดยใช้แอ็ตทริบิวต์ defaultPage หรือใช้วิธีการnav ()) ซึ่งจะโหลดโดยใช้Root Modulesซึ่งจะโหลดอีกครั้งโดยใช้ application.run () ในขณะที่แอปพลิเคชันเริ่มทำงาน

ขั้นตอนการทำงานของแอปพลิเคชันสามารถแสดงได้ดังแผนภาพด้านล่าง -

แผนภาพด้านบนอธิบายโดยละเอียดตามขั้นตอนต่อไปนี้ -

• NativeScript Application เริ่มต้นและเรียกใช้เมธอด application.run ()

• application.run () โหลดโมดูลราก

• Root Moduleได้รับการออกแบบโดยใช้ส่วนประกอบ UI ใด ๆ ตามที่ระบุไว้ด้านล่าง -

  • Frame

  • TabView

  • SideDrawer

  • มุมมองเค้าโครงใด ๆ

• ส่วนประกอบเฟรมโหลดเพจที่ระบุ (โมดูลเพจ) และได้รับการแสดงผล UI ส่วนประกอบอื่น ๆ จะแสดงผลตามที่ระบุไว้ในรากโมดูล ส่วนประกอบ UI อื่น ๆ ยังมีตัวเลือกในการโหลดPage Modulesเป็นเนื้อหาหลัก

เวิร์กโฟลว์ของแอปพลิเคชัน NativeScript ที่ใช้ Angular

ดังที่เราได้เรียนรู้ไปก่อนหน้านี้กรอบงาน NativeScript มีวิธีการที่หลากหลายเพื่อรองรับนักพัฒนาประเภทต่างๆ วิธีการที่รองรับโดย NativeScript มีดังต่อไปนี้ -

• NativeScript Core - แนวคิดพื้นฐานหรือหลักของ NativeScript Framework

• Angular + NativeScript - วิธีการเชิงมุม

• Vuejs + NativeScript - วิธีการตาม Vue.js

ให้เราเรียนรู้ว่า Angular framework รวมอยู่ในกรอบงาน NativeScript อย่างไร

ขั้นตอนที่ 1

NativeScript จัดเตรียมอ็อบเจ็กต์ (platformNativeScriptDynamic) เพื่อบูตแอปพลิเคชัน Angular platformNativeScriptDynamic มีเมธอด bootstrapModule ซึ่งใช้เพื่อเริ่มต้นแอปพลิเคชัน

ไวยากรณ์ในการบูตแอปพลิเคชันโดยใช้ Angular framework มีดังนี้ -

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

ที่นี่

AppModule คือโมดูลรูทของเรา

ขั้นตอนที่ 2

การใช้งานอย่างง่าย (ด้านล่างรหัสที่ระบุ) ของโมดูลแอป

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หมายถึงการออกแบบส่วนประกอบ

app.component.html

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

ที่นี่

page-router-outlet เป็นสถานที่ที่แนบแอปพลิเคชัน Angular

โดยสรุป Angular framework ประกอบด้วยโมดูลที่คล้ายกับ NativeScript framework ที่มีความแตกต่างเล็กน้อย แต่ละโมดูลใน Angular จะมีส่วนประกอบ Angular และไฟล์ติดตั้งเราเตอร์ (page-Routing.mocdule.ts) เราเตอร์ถูกตั้งค่าต่อโมดูลและดูแลการนำทาง ส่วนประกอบเชิงมุมเป็นแอนะล็อกกับเพจในแกน NativeSctipt

แต่ละองค์ประกอบจะมีการออกแบบ UI (page.component.html) สไตล์ชีต (page.component.css) และไฟล์โค้ด JavaScript / TypeScript (page.component.ts)