NativeScript - Mimari

NativeScript, mobil uygulama oluşturmak için gelişmiş bir çerçevedir. Mobil uygulama oluşturmanın karmaşıklığını gizler ve oldukça optimize edilmiş ve gelişmiş mobil uygulama oluşturmak için oldukça basit bir API sunar. NativeScript, giriş seviyesindeki geliştiricilerin bile hem Android hem de iOS'ta mobil uygulamaları kolayca oluşturmasını sağlar.

Bu bölümde NativeScript çerçevesinin mimarisini anlayalım.

Giriş

NativeScript çerçevesinin temel konsepti, geliştiricinin hibrit stil mobil uygulama oluşturmasını sağlamaktır. Hibrit uygulama, bir web uygulamasını normal bir mobil uygulama içinde barındırmak için platforma özgü tarayıcı API'sini kullanır ve JavaScript API aracılığıyla uygulamaya sistem erişimi sağlar.

NativeScript, büyük ölçüde JavaScript languagegeliştiriciler için verimli bir çerçeve sağlamak. Dan beriJavaScriptistemci tarafı programlama (Web geliştirme) için fiili bir standarttır ve her geliştirici JavaScript dilinin farkındadır, geliştiricilerin NativeScript çerçevesine kolayca girmesine yardımcı olur. Düşük düzeyde, NativeScript yerel API'yi, adı verilen bir JavaScript eklentileri koleksiyonu aracılığıyla ortaya çıkarır.Native plugins.

NativeScript, Yerel eklentilerin temelini oluşturur ve birçok yüksek seviye ve kullanımı kolay JavaScript Modülleri sağlar . Her modül, bir kameraya erişme, bir ekran tasarlama vb. Gibi belirli bir işlevi yerine getirir. Tüm bu modüller, karmaşık bir mobil uygulamayı tasarlamak için çeşitli şekillerde birleştirilebilir.

Aşağıdaki şema, NativeScript çerçevesinin üst düzey genel görünümünü göstermektedir -

NativeScript Application - NativeScript çerçevesi, geliştiricinin Angular style uygulamasını veya Vue Style uygulamasını kullanmasına izin verir.

JavaScript Modules - NativeScript çerçevesi, açıkça UI Modülleri, Uygulama Modülleri, Çekirdek Modülleri, vb. Olarak kategorize edilmiş zengin bir JavaScript modülleri seti sağlar. Tüm modüllere, herhangi bir karmaşık uygulama düzeyini yazmak için herhangi bir zamanda uygulama tarafından erişilebilir.

JavaScript plugins- NativeScript çerçevesi, platformla ilgili işlevselliğe erişmek için geniş bir JavaScript eklenti koleksiyonu sağlar. Modüller, platforma özel işlevsellik sağlamak için JavaScript eklentilerini kullanır.

Native plugins- Yerel eklentiler, JavaScript eklentisi tarafından daha sonra kullanılacak olan sistem işlevselliğini sarmak için platforma özel bir dilde yazılmıştır.

Platform API - Platform satıcıları tarafından sağlanan API.

Kısacası, NativeScript uygulaması modüller kullanılarak yazılır ve düzenlenir. Modüller, saf JavaScript ile yazılır ve modüller, eklentiler aracılığıyla platformla ilgili işlevselliğe (ihtiyaç duyulduğunda) erişir ve son olarak, eklentiler, platform API'si ile JavaScript API arasında köprü oluşturur.

Bir NativeScript Uygulamasının İş Akışı

Daha önce öğrendiğimiz gibi, NativeScript uygulaması modüllerden oluşur. Her modül belirli bir özelliği etkinleştirir. Bir NativeScript uygulamasını önyüklemek için iki önemli modül kategorisi aşağıdaki gibidir:

Kök Modüller
Sayfa Modülleri

Kök ve Sayfa modülleri, uygulama modülleri olarak kategorize edilebilir. Uygulama modülü, NativeScript uygulamasının giriş noktasıdır. Bir sayfayı önyükler, geliştiricinin sayfanın kullanıcı arayüzünü oluşturmasını sağlar ve son olarak sayfanın iş mantığının yürütülmesine izin verir. Bir uygulama modülü aşağıdaki üç öğeden oluşur -

XML olarak kodlanmış kullanıcı arayüzü tasarımı (örn. Page.xml / page.component.html)
CSS'de kodlanmış stiller (örn. Page.css / page.component.css)
Modülün JavaScript'teki gerçek iş mantığı (örn. Page.js / page.component.ts)

NativeScript, uygulama sayfasını tasarlamak için birçok UI bileşeni (UI Modülü altında) sağlar. UI Bileşeni, Angular tabanlı uygulamada XML formatında veya HTML formatında temsil edilebilir. Uygulama modülü, sayfayı tasarlamak ve tasarımı ayrı XML, page.xml / page.component.html'de depolamak için UI Bileşenini kullanır . Tasarım, standart CSS kullanılarak şekillendirilebilir.

Uygulama modülleri, tasarımın stilini ayrı CSS'de, page.css / page.component.css'de depolar. Sayfanın işlevselliği, tasarıma ve platform özelliklerine tam erişime sahip olan JavaScript / TypeScript kullanılarak yapılabilir. Uygulama modülü, sayfanın gerçek işlevselliğini kodlamak için ayrı bir dosya olan page.js / page.component.ts kullanır.

Kök Modüller

NativeScript, kullanıcı arabirimini ve kullanıcı etkileşimini UI kapsayıcıları aracılığıyla yönetir. Her UI kapsayıcısının bir Kök Modülü olması gerekir ve bu modül üzerinden UI kapsayıcısı UI'yi yönetir. NativeScript uygulamasının iki tür UI kabı vardır -

Application Container- Her NativeScript uygulamasının bir uygulama konteyneri olması gerekir ve bu, application.run () yöntemi kullanılarak ayarlanacaktır. Uygulamanın kullanıcı arayüzünü başlatır.

Model View Container- NativeScript, model görünümü kabını kullanarak Modal diyalogları yönetir. Bir NativeScript uygulamasında herhangi bir sayıda model görünümü konteyneri olabilir.

Her kök modülün içeriği olarak yalnızca bir UI Bileşeni olmalıdır. UI bileşeni de alt öğesi olarak başka UI bileşenlerine sahip olabilir. NativeScript, alt özellikli TabView, ScrollView, vb. Gibi birçok UI bileşeni sağlar. Bunları root UI bileşeni olarak kullanabiliriz. Bir istisna Çerçeve çocuk seçeneği yok ama kök bileşeni olarak kullanılabilir. Çerçeve, Sayfa Modüllerini yükleme seçenekleri ve diğer sayfa modüllerine de gitme seçenekleri sağlar .

Sayfa Modülleri

NativeScript'te, her sayfa temelde bir Sayfa Modülüdür . Sayfa modülü, NativeScript tarafından sağlanan zengin UI bileşenleri kümesi kullanılarak tasarlanmıştır. Sayfa modülleri uygulamaya Frame bileşeni aracılığıyla yüklenir (defaultPage özniteliği veya navigate () yöntemi kullanılarak), bu da uygulama başlatılırken yine application.run () kullanılarak yüklenen Kök Modülleri kullanılarak yüklenir.

Uygulamanın iş akışı aşağıdaki diyagramdaki gibi gösterilebilir -

Yukarıdaki şema aşağıdaki adımlarda ayrıntılı olarak açıklanmıştır -

NativeScript Uygulaması başlar ve application.run () yöntemini çağırır.
application.run () bir Kök modül yükler .
Kök Modülü , aşağıda belirtildiği gibi UI bileşenlerinden herhangi biri kullanılarak tasarlanmıştır -
- Frame
- TabView
- SideDrawer
- Herhangi Bir Düzen Görünümü
Çerçeve bileşeni, belirtilen sayfayı (Sayfa modülü) yükler ve işlenir. Diğer UI bileşenleri, Kök Modülde belirtildiği gibi oluşturulacaktır . Diğer UI bileşeninin de ana içeriği olarak Sayfa Modüllerini yükleme seçeneği vardır .

Angular tabanlı NativeScript Uygulamasının İş Akışı

Daha önce öğrendiğimiz gibi, NativeScript çerçevesi farklı geliştirici kategorilerini karşılamak için birden fazla metodoloji sağlar. NativeScript tarafından desteklenen metodolojiler aşağıdaki gibidir -

NativeScript Core - NativeScript Framework'ün temel veya temel konsepti
Angular + NativeScript - Açısal tabanlı metodoloji
Vuejs + NativeScript - Vue.js tabanlı metodoloji

Angular çerçevesinin NativeScript çerçevesine nasıl dahil edildiğini öğrenelim.

Aşama 1

NativeScript, Angular uygulamasını önyüklemek için bir nesne (platformNativeScriptDynamic) sağlar. platformNativeScriptDynamic, uygulamayı başlatmak için kullanılan bootstrapModule yöntemine sahiptir.

Angular çerçeveyi kullanarak uygulamayı önyüklemek için sözdizimi aşağıdaki gibidir -

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

Buraya,

AppModule Kök modülümüzdür.

Adım 2

Uygulama modülünün basit bir uygulaması (belirtilen kodun altında).

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

Buraya,

AppModuleAppComponent bileşenini yükleyerek uygulamayı başlatır. Açısal bileşenler sayfalara benzer ve hem tasarım hem de programlama mantığı için kullanılır.

AppComponent (app.component.ts) ve sunum mantığının (app.component.css) basit bir uygulaması aşağıdaki gibidir -

app.component.ts

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

Buraya,

templateUrl , bileşenin tasarımını ifade eder.

app.component.html

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

Buraya,

page-router-outlet Angular uygulamasının eklendiği yerdir.

Özet olarak, Angular çerçeve, küçük farklılıklar ile NativeScript çerçevesine benzer modüllerden oluşur. Angular'daki her modülde bir Angular bileşen ve bir yönlendirici kurulum dosyası (page-routing.mocdule.ts) bulunur. Yönlendirici, modül başına ayarlanır ve navigasyonla ilgilenir. Açısal bileşenler, NativeSctipt çekirdeğindeki sayfaların analoglarıdır.

Her bileşenin bir UI tasarımı (page.component.html), bir stil sayfası (page.component.css) ve bir JavaScript / TypeScript kod dosyası (page.component.ts) olacaktır.