NativeScript - Hızlı Kılavuz

Genel olarak, bir mobil uygulama geliştirmek karmaşık ve zorlu bir iştir. Bir mobil uygulama geliştirmek için birçok çerçeve mevcuttur. Android, Java diline dayalı yerel bir çerçeve sağlar ve iOS, Objective-C / Shift diline dayalı yerel bir çerçeve sağlar. Bununla birlikte, her iki işletim sistemini de destekleyen bir uygulama geliştirmek için, iki farklı çerçeve kullanarak iki farklı dilde kodlamamız gerekir.

Bu karmaşıklığın üstesinden gelmek için mobil çerçeveler bu özelliği destekler. Çapraz platform veya hibrit çerçeve kullanmanın arkasındaki ana neden, tek bir kod tabanını sürdürmenin daha kolay olmasıdır. Popüler çerçevelerden bazıları NativeScript, Apache Cordova, Xamarin vb.

JavaScript Çerçevelerine Genel Bakış

JavaScript, çok paradigmalı bir dildir. Fonksiyonel programlamayı, nesne yönelimli ve prototip tabanlı programlamayı destekler. JavaScript başlangıçta istemci tarafı için kullanıldı. Günümüzde JavaScript, sunucu tarafı programlama dili olarak da kullanılmaktadır. JavaScript çerçeveleri, JavaScript ile çalışmayı daha kolay ve sorunsuz hale getiren bir araç türüdür.

Bu çerçeveyi kullanarak, programcılar uygulamayı kolayca yanıt veren bir cihaz olarak kodlayabilir. Duyarlılık, bu çerçevenin çok popüler hale gelmesinin arkasındaki nedenlerden biridir.

Popüler JS çerçevelerinden bazılarına bir göz atalım -

Açısal

En güçlü, verimli ve açık kaynaklı JavaScript çerçevelerinden biri Angular'dır. Mobil ve masaüstü uygulamaları oluşturabiliriz. Google bu çerçeveyi kullanır. Tek Sayfalı Uygulama (SPA) geliştirmek için kullanılır.

Vue.js

VueJS, etkileşimli web arayüzleri geliştirmek için kullanılan aşamalı bir JavaScript çerçevesidir. Web geliştirmeyi basitleştirmek için kullanılan ünlü çerçevelerden biridir. Herhangi bir sorun olmadan ön uç geliştirme için büyük projelere kolayca entegre edilebilir. İkili entegrasyon modu, üst düzey SPA veya Tek Sayfa Uygulama oluşturulması için en çekici özelliklerden biridir.

Tepki

ReactJS, yeniden kullanılabilir UI bileşenleri oluşturmak için kullanılan JavaScript kitaplığıdır. Facebook tarafından geliştirilmiştir. Şu anda en popüler JavaScript kitaplıklarından biridir ve arkasında güçlü bir temele ve büyük bir topluluğa sahiptir.

Node.js

Node.js, sunucu tarafı ve ağ uygulamaları geliştirmek için açık kaynaklı, platformlar arası bir çalışma zamanı ortamıdır. Google Chrome'un JavaScript Motoru (V8 Motoru) üzerine inşa edilmiştir. Node.js uygulamaları JavaScript'te yazılmıştır ve OS X, Microsoft Windows ve Linux üzerinde çalıştırılabilir. Web uygulamalarının geliştirilmesini basitleştiren çeşitli JavaScript modüllerinden oluşan zengin bir kitaplık sağlar.

NativeScript'e Genel Bakış

NativeScript, yerel iOS ve android mobil uygulamaları oluşturmak için kullanılan açık kaynaklı bir çerçevedir. JIT tarafından derlenmiş bir çerçevedir. NativeScript kodu JS sanal makinede çalışır. Hem Android hem de iOS platformları için V8 motor çalışma zamanını kullanır. NativeScript, geliştirme için XML, JS ve CSS kullanır. PlayGround olarak bilinen bir WebIDE'ye sahiptir. Bu PlayGround, kolay çalışma arayüzünü, projeleri yönetmesi kolay, çalışırken yeniden yüklemeyi ve cihazlarda hata ayıklamayı destekler.

NativeScript, geliştiricilerin yerel, platformlar arası uygulamaları hızlı ve verimli bir şekilde oluşturmalarına ve geliştirme, test etme ve eğitim maliyetlerinden tasarruf etmelerine olanak tanır. Bu nedenle, Yerel uygulamalar daha iyi ve kullanımı daha kolay hale getirmek için yıllarca zengin ve güçlü olmaya devam edecek.

Özellikleri

NativeScript, canlı topluluk desteğine sahiptir. NativeScript'in aşağıda listelenen bazı göze çarpan özellikleri -

Extensible
Sıcak Modül Değişimi
Kurulumu kolay
Zengin animasyonlar, grafikler, çizelgeler ve listeler oluşturabiliriz
Geliştiriciler herhangi bir görünümü bir uygulamanın kökü olarak kullanabilir
Tembel kodlama

Faydaları

NativeScript, küçük veya büyük ölçekli şirketlerin platformlar arası mobil uygulamalar oluşturmasına yardımcı olur. Bazı temel faydalar şunlardır:

Geliştiriciler mevcut araçları ve kodu yeniden kullanabilir
Yeni sürümleri değiştirmek, sorun gidermek ve güncellemek kolaydır
Geliştirme deneyimi iyidir, bu nedenle yeni araçlar öğrenmek için zaman harcamak zorunda değiliz
Cordova eklentilerini öğrenme ihtiyacını ortadan kaldıran JavaScript'ten platforma özel API'ler
Farklı oturum açma sağlayıcılarıyla kimlik doğrulamayı kolaylaştırın

Bu bölüm, makinenize NativeScript'in nasıl yükleneceğini açıklamaktadır.

Önkoşullar

Kuruluma geçmeden önce aşağıdaki ön koşullara ihtiyacımız var -

Node.js
Android
iOS

Node.js'yi doğrulayın

Node.js , Google Chrome'un dahili JavaScript motoru v8 üzerine inşa edilmiş bir JavaScript çalışma zamanı motorudur. NativeScript, başlangıç şablonu uygulaması oluşturmak, uygulamayı derlemek vb. Gibi çeşitli amaçlar için Node.js'yi yoğun bir şekilde kullanır . Makinenizde Node.js bulunması zorunludur .

Umarım makinenize Node.js yüklediniz. Yüklü değilse, bağlantıyı ziyaret edin,https://nodejs.org/ ve en son LTS paketini indirin ve kurun.

Node.js'nin düzgün şekilde kurulup kurulmadığını doğrulamak için terminalinize aşağıdaki komutu yazın -

node --version

Sürümü görebiliyordunuz. Şu an itibariyle, düğümün mevcut kararlı "LTS" sürümü 12.14.0'dır.

CLI kurulumu

NativeScript CLI, terminal / komut satırı tabanlı bir uygulamadır ve NativeScript uygulaması oluşturmanıza ve geliştirmenize olanak tanır. Node.js paket yöneticisi npm, makinenize NativeScript CLI'yi yüklemek için kullanılır.

NativeScript CLI'yi yüklemek için aşağıdaki komutu kullanın -

npm install -g nativescript

Bu komutu yürüttükten sonra aşağıdaki çıktıyı görebilirdik -

setupcli

Sistemimize en son NativeScript CLI, tns'yi kurduk. Şimdi, terminalinize aşağıdaki komutu yazın -

tns

Bu, hızlı başlangıç kılavuzunu listeleyecektir. Aşağıdaki çıktıyı görebilirsiniz -

Cli

Herhangi bir ek kurulum gerektirmeden bile uygulama oluşturmak ve geliştirmek için tns kullanabiliriz. Ancak uygulamayı gerçek cihazda devreye alamadık. Bunun yerine uygulamayı NativeScript PlayGround iOS / Android uygulamasını kullanarak çalıştırabiliriz . İlerleyen bölümlerde kontrol edeceğiz.

NativeScript oyun alanı Uygulamasını yükleme

İOS Uygulama mağazanıza veya Google Play Store'a gidin ve NativeScript Playground uygulamasını arayın. Uygulama arama sonucunda listelendiğinde, yükleme seçeneğine tıklayın. NativeScript Playground uygulamasını cihazımıza yükleyecektir .

NativeScript Playground uygulaması, uygulamayı gerçek cihazda veya öykünücüsünde dağıtmadan uygulamalarınızı Android veya iOS cihazda test etmek için yardımcı olacaktır. Bu, uygulamayı geliştirme süresini ve mobil uygulamamızın geliştirilmesine hızlı bir başlangıç yapmanın kolay yolunu azaltacaktır.

Android ve iOS kurulumu

Bu bölümde, sistemi emülatörde veya gerçek cihazda iOS ve Android uygulamaları oluşturup çalıştıracak şekilde nasıl kuracağımızı öğrenelim.

Adım 1: Windows bağımlılığı

Windows komut isteminizde aşağıdaki komutu yürütün ve yönetici olarak çalıştırın -

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex 
((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

Bu komuttan sonra, Scripts indirilir ve ardından bağımlılıkları yükler ve yapılandırır.

2.Adım: macOS bağımlılığı

MacOS'a yüklemek için Xcode'un yüklü olup olmadığından emin olmalısınız. Xcode, NativeScript için zorunludur. Xcode kurulu değilse, aşağıdaki bağlantıyı ziyaret edinhttps://developer.apple.com/xcode/ve indirin; sonra kurun.

Şimdi terminalinizde aşağıdaki komutu yürütün -

sudo ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

Yukarıdaki komutu çalıştırdıktan sonra, komut dosyası hem iOS hem de Android geliştirme için bağımlılıkları yükleyecektir. Tamamlandığında, terminalinizi kapatın ve yeniden başlatın.

3. Adım: Android bağımlılığı

Umarım aşağıdaki ön koşulları yapılandırmışsınızdır -

JDK 8 veya üstü
Android SDK
Android Destek Deposu
Google Deposu
Android SDK Derleme araçları 28.0.3 veya üzeri
Android Studio

Yukarıdaki ön koşullar yapılandırılmamışsa, aşağıdaki bağlantıyı ziyaret edin https://developer.android.com/studio/kurun ve kurun. Son olarak, ortam değişkenlerinize JAVA_HOME ve ANDROID_HOME ekleyin.

4. Adım: Bağımlılıkları doğrulayın

Şimdi her şey yapıldı. Aşağıdaki komutu kullanarak bağımlılığı doğrulayabilirsiniz -

tns doctor

Bu, tüm bağımlılığı doğrulayacak ve sonucu aşağıdaki gibi özetleyecektir -

√ Getting environment information 
No issues were detected. 
√ Your ANDROID_HOME environment variable is set and points to correct directory. 
√ Your adb from the Android SDK is correctly installed. 
√ The Android SDK is installed. 
√ A compatible Android SDK for compilation is found. 
√ Javac is installed and is configured properly. 
√ The Java Development Kit (JDK) is installed and is configured properly. 
√ Local builds for iOS can be executed only on a macOS system. 
   To build for iOS on a different operating system, you can use the
   NativeScript cloud infrastructure. 
√ Getting NativeScript components versions information... 
√ Component nativescript has 6.3.0 version and is up to date. 
√ Component tns-core-modules has 6.3.2 version and is up to date. 
√ Component tns-android has 6.3.1 version and is up to date. 
√ Component tns-ios has 6.3.0 version and is up to date.

Herhangi bir sorun bulursanız, uygulamayı geliştirmeye devam etmeden önce lütfen sorunları düzeltin.

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 uygulama 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. Karma 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 diyagram, 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üller, 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 herhangi bir zamanda erişilebilir.

JavaScript plugins- NativeScript çerçevesi, platformla ilgili işlevselliğe erişmek için geniş bir JavaScript eklentisi 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 (örneğin 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 aracılığıyla 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 olmalıdır 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 Root Modules 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 farklarla NativeScript çerçevesine benzer modüllerden oluşur. Angular'daki her modül bir Angular bileşenine ve bir yönlendirici kurulum dosyasına (page-routing.mocdule.ts) sahip olacaktır. Yönlendirici modül başına ayarlanır ve navigasyonla ilgilenir. Açısal bileşenler, NativeSctipt çekirdeğindeki sayfalara benzerdir.

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.

NativeScript uygulamasının iş akışını anlamak için basit bir çıplak kemik uygulaması oluşturalım.

Uygulamayı Oluşturma

NativeScript CLI, tns kullanarak basit bir uygulamanın nasıl oluşturulacağını öğrenelim. tns, NativeScript'te yeni bir proje oluşturmak için kullanılacak bir komut oluşturma komutu sağlar.

Yeni bir uygulama oluşturmak için temel sözdizimi aşağıdaki gibidir -

tns create <projectname> --template <template_name>

Nerede,

Projectname projenin Adıdır.
template_nameProje şablonudur. NativeScript, farklı uygulama türleri oluşturmak için çok sayıda başlangıç şablonu sağlar. Açısal tabanlı şablon kullanın.

Yeni uygulamamız üzerinde çalışmak için NativeScriptSamples adında yeni bir dizin oluşturalım. Şimdi, yeni bir terminal açın, ardından dizinimize gidin ve aşağıdaki komutu yazın -

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

Nerede, tns-template-blank-ng AngularJS'ye dayalı boş bir mobil uygulamayı ifade eder.

Çıktı

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

Şimdi ilk mobil uygulamamız BlankNgApp oluşturuldu.

Başvurunun Yapısı

Bu bölümdeki ilk uygulamamız BlankNgApp'ı analiz ederek NativeScript uygulamasının yapısını anlayalım. NativeScript uygulaması birden çok bölüm halinde düzenlenmiştir ve bunlar aşağıdaki gibidir -

Yapılandırma bölümü
Düğüm modülleri
Android kaynakları
iOS Kaynakları
Uygulama kaynak kodu

Uygulamanın genel yapısı aşağıdaki gibidir -

│ 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

Uygulamanın her bir bölümünü ve uygulamamızı oluşturmamıza nasıl yardımcı olduğunu anlayalım.

Yapılandırma bölümü

Uygulamanın kök dizinindeki tüm dosyalar yapılandırma dosyalarıdır. Yapılandırma dosyalarının biçimi, geliştiricinin yapılandırma ayrıntılarını kolayca anlamasına yardımcı olan JSON biçimindedir. NativeScript uygulaması, mevcut tüm yapılandırma bilgilerini almak için bu dosyalara güvenir. Bu bölümdeki tüm yapılandırma dosyalarını inceleyelim.

package.json

package.json dosyaları, uygulamanın kimliğini (id) ve düzgün çalışması için uygulamanın bağlı olduğu tüm modülleri ayarlar. Paketimiz aşağıdadır.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" 
}

Buraya,

Identity of the application (nativescript/id)- Uygulamanın kimliğini org.nativescript.BlankNgApp olarak ayarlar. Bu kimlik, uygulamamızı Play Store veya iTunes'da yayınlamak için kullanılır. Bu kimlik, Uygulama Tanımlayıcımız veya Paket Adımız olacaktır.

Dependencies (dependencies)- Tüm bağımlı düğüm modüllerimizi belirtir. Varsayılan NativeScript uygulaması Angular Framework'e bağlı olduğundan, Angular modülleri dahildir.

Development dependencies- Uygulamanın bağlı olduğu tüm araçları belirtir. Uygulamamızı TypeScript'te geliştirdiğimiz için bağımlı modüllerden biri olarak typcript içerir.

angular.json - Açısal çerçeve yapılandırma bilgileri.

nsconfig.json - NativeScript çerçeve yapılandırma bilgileri.

tsconfig.json, tsfmt.json & tsconfig.tns.json - TypeScript dili yapılandırma bilgileri

webpack.config.js - JavaScript ile yazılmış WebPack yapılandırması.

Düğüm modülleri

NativeScript projesi düğüm tabanlı bir proje olduğu için tüm bağımlılıklarını node_modules klasöründe depolar. Tüm uygulama bağımlılığını node_moduels'e indirmek ve kurmak için npm (npm install) veya tns kullanabiliriz.

Android kaynak kodu

NativeScript, android kaynak kodunu otomatik olarak oluşturur ve App_Resources \ Android klasörüne yerleştirir. Android SDK kullanarak android uygulaması oluşturmak için kullanılacaktır.

iOS kaynak kodu

NativeScript, iOS kaynak kodunu otomatik olarak oluşturur ve App_Resources \ iOS klasörüne yerleştirir. İOS SDK ve XCode kullanarak iOS uygulaması oluşturmak için kullanılacaktır.

Uygulama kaynak kodu

Gerçek uygulama kodu src klasörüne yerleştirilir. Uygulamamız src klasöründe aşağıdaki dosyalara sahiptir.

└───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

Bu bölümde tüm dosyaların amacını ve nasıl düzenlendiğini anlayalım -

Aşama 1

main.ts - Uygulamanın giriş noktası.

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

Burada, AppModule'u uygulamanın önyükleme modülü olarak ayarladık.

Adım 2

app.css - Uygulamanın ana stil sayfası aşağıda gösterildiği gibidir -

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

Buraya,

app.css, NativeScript çerçevesinin çekirdek stil sayfasını ve kahverengi renk temaları stil sayfasını içe aktarır.

Aşama 3

app \ app.module.ts - Uygulamanın kök modülü.

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

Buraya,

AppModule, NgModule temel alınarak oluşturulur ve uygulamanın bileşenlerini ve modüllerini ayarlar. NativeScriptModule ve AppRoutingModule olmak üzere iki modül ve AppComponent adlı bir bileşeni içe aktarır. Ayrıca, AppComponent'i uygulamanın kök bileşeni olarak ayarlar.

4. adım

app.component.ts - Uygulamanın kök bileşeni.

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

Buraya,

AppComponent, bileşenin şablonunu ve stil sayfasını ayarlar. Şablon, NativeScript UI bileşenleri kullanılarak düz HMTL ile tasarlanmıştır.

Adım 5

app-routing.module.ts - AppModule için yönlendirme modülü

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

Buraya,

AppRoutingModule, NativeScriptRouterModule'u kullanır ve AppModule'ün yollarını ayarlar. Temel olarak boş yolu / home'a yönlendirir ve / home'u HomeModule'a yönlendirir.

6. Adım

app \ home \ home.module.ts - Yeni bir modül, HomeModule tanımlar.

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

Buraya,

HomeModule iki modülü içe aktarır, HomeRoutingModule ve NativeScriptCommonModule ve bir bileşen HomeComponent

7. Adım

app \ home \ home.component.ts - Giriş bileşenini tanımlar ve uygulamanın ana sayfası olarak kullanılır.

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

Buraya,

HomeComponent, ev bileşeninin şablonunu ve seçicisini ayarlar.

8. Adım

app \ home \ home-routing.module.ts - HomeModule için yönlendirme modülü ve ev modülü için yönlendirmeyi tanımlamak için kullanılır.

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

Buraya,

HomeRoutingModule, HomeComponent için boş yolu ayarlar.

9. Adım

app.component.html ve home.component.html - NativeScript UI bileşenlerini kullanarak uygulamanın UI'sını tasarlamak için kullanılırlar.

Uygulamanızı çalıştırın

Uygulamanızı herhangi bir cihaz kullanmadan çalıştırmak istiyorsanız, aşağıdaki komutu yazın -

tns preview

Bu komutu çalıştırdıktan sonra, bu, cihazınızı taramak ve ona bağlanmak için QR kodu oluşturacaktır.

Çıktı

QRCode

Şimdi QR kodu oluşturulur ve sonraki adımda PlayGround'a bağlanır.

NativeScript PlayGround

İOS veya Android mobil cihazınızda NativeScript PlayGround uygulamasını açın ve ardından QR kodunu tara seçeneğini seçin. Kamerayı açacak. Konsolda görüntülenen QR kodunu odaklayın. Bu, QR Kodunu tarayacaktır. QR Kodunun taranması, uygulama yapısını tetikleyecek ve ardından uygulamayı aşağıda belirtildiği gibi cihazla senkronize edecektir -

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.

Çıktı

Taradıktan sonra, cihazınızda BlankNgApp'ınızı görmelisiniz. Aşağıda gösterilmiştir -

Uygulamanızı cihazda çalıştırın

Bağlı cihazı uygulamanızda test etmek istiyorsanız, aşağıdaki sözdizimini kullanarak doğrulayabilirsiniz -

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

Bundan sonra, aşağıdaki komutu kullanarak uygulamanızı çalıştırabilirsiniz -

tns run

Yukarıdaki komut, uygulamalarınızı yerel olarak oluşturmak ve Andriod veya iOS cihazlarına yüklemek için kullanılır. Uygulamanızı bir Android simülatörde çalıştırmak istiyorsanız, aşağıdaki komutu yazın -

tns run android

İOS cihazı için aşağıdaki komutu takip edebilirsiniz -

tns run ios

Bu, uygulamayı bir Android / iOS cihazında başlatacaktır. Bunu ilerleyen bölümlerde daha ayrıntılı olarak tartışacağız.

LiveSync

NativeScript, uygulamadaki değişikliklerin önizleme uygulamasına gerçek zamanlı olarak eşitlenmesini sağlar. En sevdiğiniz düzenleyicilerden herhangi birini kullanarak projeyi açalım (Visual Studio Code daha iyi görselleştirme için ideal seçim olacaktır). Kodumuza bazı değişiklikler ekleyelim ve bunun LiveSync'de nasıl tespit edileceğini görelim.

Şimdi app.css dosyasını açın ve aşağıdaki içeriğe sahip olacaktır -

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

Burada import ifadesi, uygulamamızın renk şemasını anlatır. Mavi renk şemasını şu şekilde değiştirelim:brown aşağıda belirtildiği gibi renk şeması -

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

Cihazımızdaki uygulama yenilenir ve aşağıda gösterildiği gibi kahverengi renkli bir ActionBar görmeniz gerekir -

Çıktı

Aşağıda BlankNgApp Ana Sayfası - Kahverengi Tema bulunmaktadır.

NativeScript, karmaşık Tab tabanlı uygulamalara basit, boş ama tamamen işlevsel bir uygulama oluşturmak için birçok hazır şablon sağlar.

Şablon kullanma

Daha önce öğrenildiği gibi, yeni uygulama kullanılarak oluşturulabilir create tns komutunun alt komutu.

tns create <app-name> --template <tns-template-name>

Buraya,

tns-template-name şablonun adıdır.

Tek sayfalı ve JavaScript kullanarak herhangi bir özel stil içermeyen bir şablon oluşturmak istiyorsanız, aşağıdaki komutu kullanın -

tns create <app-name> --template tns-template-blank

Yukarıdaki aynı şablon, aşağıdaki gibi TypeScript kullanılarak oluşturulabilir -

tns create <app-name> --template tns-template-blank-ts

Gezinme Şablonu

Gezinme şablonu, orta ila karmaşık uygulama oluşturmak için kullanılır. Önceden yapılandırılmış olarak gelirSideDrawer birkaç sayfalı bileşen. SideDrawerbileşeni, gezinme kullanıcı arayüzü veya ortak ayarlar için gizli bir görünüm içerir. Navigasyon tabanlı uygulama oluşturmak için aşağıdaki komutu kullanın -

tns create <app-name> --template tns-template-drawer-navigation

Sekme Gezinme Şablonu

Sekme gezinme şablonu, sekme tabanlı uygulama oluşturmak için kullanılır. Önceden yapılandırılmış olarak gelirTabViewbirkaç sayfalı bileşen. Sekme tabanlı uygulama oluşturmak için aşağıdaki komutu kullanın -

tns create <app-name> --template tns-template-tab-navigation

Ana Ayrıntı Şablonu

Ana Detay şablonu, listedeki her öğe için detay sayfası ile birlikte liste bazlı uygulama oluşturmak için kullanılır.

tns create <app-name> --template tns-template-master-detail

Özel Şablon

Basit özelleştirilmiş şablon oluşturmak için boş şablonları klonlamamız gerekir. Zaten bildiğiniz gibi, NativeScript JavaScript, TypeScript, Angular ve Vue.js şablonlarını destekler, böylece herhangi bir dili seçebilir ve kendi özel dilinizi oluşturabilirsiniz.

Örneğin, aşağıdaki komutu kullanarak git deposundan basit ve özelleştirilmiş şablonu klonlayın -

git clone https://github.com/NativeScript/template-blank-ts.git

Şimdi, herhangi bir değişikliği yapabilmeniz ve android / iOS cihazınızı çalıştırabilmeniz için mobil uygulama yapısı oluşturacaktır. Bu yapı, kılavuzlar listesine dayanmaktadır. Kuralları kısaca görelim.

Yapısı

Özelleştirilmiş şablonunuz aşağıdaki gereksinimleri karşılamalıdır -

Kodunuzu uygulama kök klasörünüzün içine yerleştirmeyin.
Ayrı bir klasör oluşturun ve içine özellik alanı ekleyin.
Özellik alanına Sayfa, Görünüm modelleri ve hizmet yerleştirilmelidir. Bu, düzgün ve temiz kod oluşturmaya yardımcı olur.
Sayfa klasörü oluşturun ve .ts, .xml, .scss / css vb . Dosyaların içine yerleştirin.

package.json

Package.json dosyasını uygulama şablonunuzun kök klasörüne yerleştirin. Şu biçimi kullanarak name özelliği için bir değer sağlayın -

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

Version özelliği için bir değer atayın. Aşağıda tanımlanmıştır -

"version": "3.2.1",

Uygulamanıza birincil giriş noktasını belirterek ana mülk için bir değer atayın. Aşağıda tanımlanmıştır -

"main": "app.js",

Android özelliği için bir değer atayın. Aşağıda tanımlanmıştır -

"android": { 
   "v8Flags": "--expose_gc" 
},

Depo özelliği kodunuzun içinde aşağıdaki gibi belirtilmelidir -

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

Tarzı

Aşağıdaki sözdizimini kullanarak uygulama şablonunuzdaki stilleri ve temaları içe aktarın -

@import '~nativescript-theme-core/scss/light';

Aşağıdaki kodu kullanarak özel arka plan rengi de atayabiliriz -

/* Colors */ 
$background: #fff; 
$primary: lighten(#000, 13%);

NativeScript, geniş bir kullanıcı arabirimi bileşenleri kümesi sağlar ve bunlara "gereçler" denir. Her pencere öğesi özel bir görev yapar ve bir dizi yöntemle birlikte gelir. NativeScript widget'larını bu bölümde ayrıntılı olarak anlayalım.

Buton

Düğme, dokunma olayı eylemini yürütmek için bir bileşendir. Bir kullanıcı düğmeye dokunduğunda, ilgili eylemleri gerçekleştirir. Aşağıda tanımlanmıştır -

<Button text="Click here!" tap="onTap"></Button>

Düğmeyi aşağıdaki gibi BlankNgApp'ımıza ekleyelim -

Aşama 1

Aç src\app\home\home.component.html. Bu, ana bileşenimizin UI tasarım sayfasıdır.

Adım 2

İçine bir düğme ekleyin GirdLayoutbileşen. Kodun tamamı aşağıdaki gibidir -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!"></button> 
</GridLayout>

Çıktı

Düğmenin çıktısı aşağıdadır -

Aşama 3

Düğmeyi CSS kullanarak aşağıda belirtildiği gibi biçimlendirebiliriz -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout> 
   <button text="Click Here!" class="-primary"></button> 
</GridLayout>

Burada, -primary sınıfı birincil düğmeyi temsil etmek için kullanılır.

Çıktı

Aşağıda şu çıktı ButtonPrimary -

4. adım

NativeScript, düğmede özel simgeler sağlamak için biçimlendirilmiş seçenek sunar. Örnek kod aşağıdaki gibidir -

<GridLayout> 
   <Button class="-primary"> 
      <FormattedString> 
         <Span text="&#xf099;" class="fa"></Span> 
         <Span text=" Button.-primary with icon"></Span> 
      </FormattedString> 
   </Button> 
</GridLayout>
.fa {
   font-family: "FontAwesome", "fontawesome-webfont";
}

Buraya,

& # xf099, FontAwesome fontundaki simgenin konumunu belirtir. En son Font Awesome yazı tipini indirin ve fontawesome-webfont.ttf dosyasını src \ fonts klasörüne yerleştirin.

Çıktı

Aşağıda şu çıktı ButtonPrimary -

Adım 5

Yuvarlatılmış düğme aşağıdaki sözdizimi kullanılarak oluşturulabilir -

<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"></Button>

Çıktı

ButtonPrimary çıktısı aşağıdadır -

Etiket

Etiket bileşeni , statik metni görüntülemek için kullanılır. Ana sayfayı aşağıdaki gibi değiştirin -

<GridLayout> 
   <Label text="NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript." textWrap="true">
   </Label> 
</GridLayout>

Burada textWrap, etiket ekran genişliğini aşarsa etiket içeriğini sarar.

Çıktı

Etiketin çıktısı aşağıdadır -

Metin alanı

TextField bileşeni , kullanıcıdan bilgi almak için kullanılır. Ana sayfamızı aşağıda belirtildiği gibi değiştirelim -

<GridLayout> 
   <TextField hint="Username" 
      color="lightblue" 
      backgroundColor="lightyellow" 
      height="75px">
   </TextField> 
</GridLayout>

Buraya,

renk, metin rengini temsil eder
backgroundColor, metin kutusunun arka planını temsil eder
yükseklik, metin kutusunun yüksekliğini temsil eder

Çıktı

Metin Alanının çıktısı aşağıdadır -

Metin görünümü

TextView Bileşeni , kullanıcıdan çok satırlı metin içeriği almak için kullanılır. Ana sayfamızı aşağıda belirtildiği gibi değiştirelim -

<GridLayout> 
   <TextView loaded="onTextViewLoaded" hint="Enter text" returnKeyType="done" autocorrect="false" maxLength="100"> 
   </TextView> 
</GridLayout>

Burada maxLength, TextView tarafından kabul edilen maksimum uzunluğu temsil eder .

Çıktı

TextView çıktısı aşağıdadır -

Arama çubuğu

Bu bileşen, herhangi bir sorguyu aramak veya herhangi bir talep göndermek için kullanılır. Aşağıda tanımlanmıştır -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..."></SearchBar> 
<StackLayout>

Stiller uygulayabiliriz -

<StackLayout> 
   <SearchBar id="bar" hint="click here to search ..." color="green" backgroundColor="green"></SearchBar> 
</StackLayout>

Aşağıda SearchBarStyle çıktısı verilmiştir -

Değiştirmek

Anahtar, seçenekler arasında seçim yapmak için geçişe dayanır. Varsayılan durum yanlıştır. Aşağıda tanımlanmıştır -

<StackLayout> 
   <Switch checked="false" loaded="onSwitchLoaded"></Switch> 
</StackLayout>

Yukarıdaki programın çıktısı aşağıda gösterilmiştir -

kaydırıcı

Kaydırıcı, sayısal bir aralık seçmek için kayan bir bileşendir. Aşağıda tanımlanmıştır -

<Slider value="30" minValue="0" maxValue="50" loaded="onSliderLoaded"></Slider>

Yukarıdaki programın çıktısı aşağıda verilmiştir -

İlerleme

İlerleme pencere öğesi, bir işlemdeki ilerlemeyi gösterir. Mevcut ilerleme çubuk olarak gösterilir. Aşağıda tanımlanmıştır -

<StackLayout verticalAlign="center" height="50"> 
   <Progress value="90" maxValue="100" backgroundColor="red" color="green" row="0"></Progress>
</StackLayout>

İlerleme widget'ının çıktısı aşağıdadır -

Aktivite Göstergesi

ActivityIndicator, devam etmekte olan bir görevi gösterir. Aşağıda tanımlanmıştır -

<StackLayout verticalAlign="center" height="50"> 
   <ActivityIndicator busy="true" color="red" width="50" 
   height="50"></ActivityIndicator> 
</StackLayout>

ActivityIndicator için çıktı aşağıdadır -

Resim

Resim widget'ı, bir resmi görüntülemek için kullanılır. 'ImageSource' url'si kullanılarak yüklenebilir. Aşağıda tanımlanmıştır -

<StackLayout class="m-15" backgroundColor="lightgray">
   <Image src="~/images/logo.png" stretch="aspectFill"></Image> 
</StackLayout>

Image Widget için çıktı aşağıda gösterildiği gibidir -

Web Görünümü

WebView, web sayfalarını gösterir. Web sayfaları URL kullanılarak yüklenebilir. Aşağıda tanımlanmıştır -

<WebView row="1" loaded="onWebViewLoaded" id="myWebView" src="http://www.google.com"></WebView>

Yukarıdaki kodun çıktısı aşağıda gösterildiği gibidir -

DatePicker

DatePicker bileşeni, tarih seçmek için kullanılır. Aşağıda tanımlanmıştır -

<StackLayout class="m-15" backgroundColor="lightgray"> 
   <DatePicker year="1980" month="4" day="20" verticalAlignment="center"></DatePicker> 
</StackLayout>

DatePicker bileşeninin çıktısı aşağıda gösterildiği gibidir -

Zaman Seçici

Zamanı seçmek için TimePicker bileşeni kullanılır. Aşağıda tanımlanmıştır -

<StackLayout class="m-15" backgroundColor="lightgray"> 
<TimePicker hour="9" 
   minute="25" 
   maxHour="23" 
   maxMinute="59" 
   minuteInterval="5"> 
</TimePicker> 
</StackLayout>

TimePicker bileşeninin çıktısı aşağıdadır -

NativeScript, yalnızca UI pencere bileşeni bileşenini yerleştirmek amacıyla konteyner bileşeni koleksiyonu sağlar. Mizanpaj kapları ana bileşen olarak hareket eder ve bir veya daha fazla alt bileşene sahip olabilir. Bir yerleşim kabının tüm alt bileşenleri, ana yerleşim kabı tarafından sağlanan tekniğe dayalı olarak düzenlenebilir.

NativeScript, altı düzen kabını destekler ve bunlar aşağıdaki gibidir -

Mutlak düzen kapsayıcı
Dock düzeni kapsayıcısı
Izgara düzeni kapsayıcısı
Yığın düzeni kapsayıcısı
Düzenleme kapsayıcısını sar
FlexBox düzen konteyneri

Bu bölümde tüm yerleşim kabı kavramlarını ayrıntılı olarak öğrenelim.

Mutlak Düzen

AbsoluteLayoutkonteyner, NativeScript'teki en basit düzen konteyneridir. AbsoluteLayout, alt öğeleri üzerinde herhangi bir kısıtlama uygulamaz ve çocuklarını, başlangıç noktası olarak sol üst köşeye sahip 2 boyutlu koordinat sistemi kullanarak içine yerleştirir.

AbsoluteLayout onları konumlandırmak için çocuklarının dört özelliğini kullanır ve bunlar aşağıdaki gibidir:

top - Aşağıya doğru y yönünde hareket eden çocuğun yerleşimini tanımlar.

left - X yönünde yana doğru hareket eden çocuğun yerleşimini tanımlar.

width - Çocuğun genişliğini tanımlar.

height - Çocuğun boyunu tanımlar.

Uygulamamızın ana sayfasına aşağıdaki gibi AbsoluteLayout kapsayıcısı ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

Çıktı

AbsoluteLayout'un çıktısı aşağıda verildiği gibidir -

DockLayout

Docklayoutkonteyner bileşeni, çocuklarının içine kenetlenmesini sağlar. Kabın her bir tarafı (üst, alt, sol, sağ) bir alt bileşeni yerleştirebilir. DockLayout kapsayıcısı, alt öğelerini doğru şekilde yerleştirmek için dock özelliğini kullanır.

Dock özelliğinin olası değerleri aşağıdaki gibidir -

top - Düzen konteyneri, alt bileşeni üst köşeye yerleştirir.

bottom - Düzen konteyneri, alt bileşeni alt köşeye yerleştirir.

left - Düzen konteyneri, alt bileşeni sol köşeye yerleştirir.

right - Düzen konteyneri, alt bileşeni sağ köşeye yerleştirir.

Varsayılan olarak, DockLayoutkapsayıcı son alt bileşenini yerleştirir. StretchLastChild özelliğini sıfır olarak ayarlayarak geçersiz kılabilir.

Ekleyelim DockLayout uygulamamızın ana sayfasındaki konteyner aşağıdaki gibidir -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

Çıktı

DockLayout için çıktı aşağıdadır -

GridLayout

GridLayout konteyner bileşeni, karmaşık düzen konteynerlerinden biridir ve alt öğeleri, satırlar ve sütunlarla birlikte tablo biçiminde düzenler. Varsayılan olarak, bir satırı ve bir sütunu vardır. Aşağıdaki özelliklere sahiptir -

columns- ile ayrılmış her bir sütunun varsayılan genişliğini temsil etmek için kullanılır. Olası değerler sayı, * ve otomatik anahtar sözcüktür.

Nerede,

sayı, mutlak bir sütun genişliğini belirtir.
diğer sütunlara göre bir sütunun genişliğini gösterir. Sütun genişliğinin diğer sütuna göre kaç kez olması gerektiğini belirtmek için önünde sayı olabilir. Örneğin, 2 *, sütunun en küçük sütunun genişliğinin 2 katı olması gerektiğini belirtir.
auto, sütunun genişliğini en geniş alt öğesi kadar geniş gösterir.

Örneğin, *, 2 *, iki sütun anlamına gelir ve ikincisi, ilk sütunun iki katı büyüklükte olacaktır.

rows -, ile ayrılmış her satırın varsayılan yüksekliğini temsil etmek için kullanılır. Değer gösterimi sütunlara benzer.

GridLayout, alt öğelerinin aşağıda belirtilen özelliklerini onları yerleştirmek için kullanır -

row - Satır numarası

sütun - Sütun numarası

rowSpan - alt içeriğin bir düzen içinde yayıldığı toplam satır sayısı.

colSpan - alt içeriğin bir düzen içinde yayıldığı toplam sütun sayısı.

Uygulamamızın ana sayfasına aşağıdaki gibi GridLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

Çıktı

GridLayout için çıktı aşağıdadır -

StackLayout

StackLayout, alt öğelerini yatay veya dikey olarak tek boyutlu bir çizgide düzenler. Yerleşim seçenekleri kullanılarak yerleşimdeki alana göre boyutlandırılabilir. Yön, yatay veya dikey belirtmek için kullanılabilen yönlendirme özelliğine sahiptir.

Uygulamamızın ana sayfasına aşağıdaki gibi StackLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

Çıktı

StackLayout için çıktı aşağıda gösterildiği gibidir -

WrapLayout

WrapLayout, içeriği yeni satırlara veya sütunlara kaydırmak için kullanılır.

Aşağıdaki üç özelliğe sahiptir -

orientation - yatay veya dikey olarak görüntüleme.

itemWidth - her çocuk için düzen genişliği.

itemHeight - her çocuk için yerleşim yüksekliği.

Aşağıdaki gibi uygulamamızın ana sayfasına WrapLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

Çıktı

Flexbox Düzeni

FlexboxLayout kapsayıcı bileşeni, gelişmiş düzen kapsayıcılarından biridir. Basit düzeni çok karmaşık ve karmaşık düzenlere dönüştürme seçeneği sunar. CSS Flexbox'a dayanmaktadır.

FlexboxLayout bileşeninin birçok özelliği vardır ve bunlar aşağıdaki gibidir -

flexDirection

Alt bileşenlerin düzenlendiği yönü temsil eder. FlexDirection'ın olası değerleri aşağıdaki gibidir -

row - Alt bileşenler yan yana düzenlenmiştir.

row-reverse - Alt bileşenler yan yana ancak ters yönde düzenlenmiştir.

column - Alt bileşenler birbirinin altına yerleştirilmiştir.

column-reverse - Alt bileşenler birbirinin altında ancak ters yönde düzenlenmiştir.

Uygulamamızın ana sayfasına aşağıdaki gibi FlexLayout konteyneri ekleyelim -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

FlexLayout - Row - çıktısı aşağıdadır

Şimdi flexDirection değerini satırdan satır tersine değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

Aşağıda Flex Layout - Satır Tersi - çıktısı verilmiştir.

FlexDirection değerini satır tersinden sütuna değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

FlexLayout - Column çıktısı aşağıda verilmiştir -

FlexDirection değerini sütundan sütun tersine değiştirelim ve düzeni nasıl etkilediğini kontrol edelim.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Çıktı

Aşağıda FlexLayout - Sütun Tersinin çıktısı verilmiştir -

flexWrap

FlexDirection tarafından ayarlanan yönde kaydırarak alt bileşenlerin tek bir satırda / sütunda mı yoksa birden çok satıra mı akacağını temsil eder.

Olası değerler aşağıdaki gibidir -

wrap - Verilen yönde boşluk yoksa alt bileşenleri sarar (flexDirection).

wrap-reverse - Parçanın ters yönde akması dışında sarmayla aynı.

FlexWrap özelliğini ekleyelim ve ardından değerini wrap olarak ayarlayalım. Ayrıca aşağıda belirtildiği gibi üç çocuk daha ekleyin -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Çıktı

FlexWrap için çıktı aşağıdadır -

JustifyContent

Alt bileşenlerin birbirine ve genel yapıya göre nasıl düzenlendiğini temsil eder. Aşağıda belirtildiği gibi üç özelliği vardır -

flex-end - Alt bileşeni bitiş çizgisine doğru paketler.

space-between - Eşit olarak aynı hizada dağıtarak alt bileşeni paketler.

space-around - Aradaki boşluğa benzer, tek farkı, alt bileşeni satır içinde ve etraflarında eşit boşluk olarak dağıtarak paketlemesidir.

JustifyContent'i de ekleyelim ve nasıl davrandığını kontrol edelim -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Çıktı

Aşağıda Flex Layout - JustifyContent çıktısı verilmiştir -

FlexLayout konteyneri, alt öğelerinin sırayı ve küçültme yeteneğini belirtmesi için iki özellik daha sağlar. Bunlar aşağıdaki gibidir -

order - FlexLayout kapsayıcısının alt öğelerinin işleneceği sırayı belirler.

flexShrink - Çocukların 0. seviyeye küçülme yeteneğini belirler.

Gezinme, kullanıcıların istedikleri ekrana hızlıca kaydırmalarını veya bir uygulamada gezinmelerini veya belirli bir eylemi gerçekleştirmelerini sağlar. Gezinme bileşeni, daha karmaşık kalıplar için basit düğme tıklamaları kullanarak gezinme uygulamanıza yardımcı olur.

Gezinme, NativeScript'in çekirdek ve açısal sürümü arasında büyük ölçüde farklılık gösterir. Çekirdek çerçeve gezintisi gezinme sürecinin temelini oluştururken, NativeScript'in Angular modeli temel gezinme kavramını benimser ve onu Angular çerçeveyle uyumlu hale getirmek için genişletir.

Bu bölümde hem temel navigasyon konseptini hem de navigasyonun açısal benimsenmesini görelim.

Temel Kavramlar

Bu bölümde temel NativeScript'te gezinmenin nasıl çalıştığını anlayalım.

NativeScript'te gezinme, aşağıda belirtildiği gibi uygulandığı yöne göre dört farklı kategoriye ayrılmıştır -

İleri navigasyon
Geriye doğru gezinme
Yanal navigasyon
Alt gezinme

İleri Navigasyon

İleri Gezinme , kullanıcıları bir sonraki hiyerarşi düzeyindeki ekrana yönlendirmeyi ifade eder. İki NativeScript bileşenine dayanır,Frame ve Page.

Frame

Çerçeve, gezinme için kök düzeyinde bileşendir. Görünür bir kap değildir, ancak sayfalar arasındaki geçişler için bir kap görevi görür.

Basit bir örnek aşağıdaki gibidir -

<Frame id="featured" defaultPage="featured-page" />

Buraya,

Çerçeve, öne çıkan sayfa sayfa bileşenine gider (veya yükler) ve onu oluşturur.

Page

Sayfa, Çerçeve bileşeninin yanındadır ve UI bileşeni için bir kap görevi görür. Basit bir örnek aşağıda tanımlanmıştır -

<Page loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <AbsoluteLayout> 
      <Label text="Label"/< 
      <Button text="navigate('another-page')" tap="onTap"/> 
   </AbsoluteLayout> 
</Page>

Buraya,

Başlangıçta Sayfa, ekranın tüm UI bileşenini yükler ve onu oluşturur.
Kullanıcı düğmeyi tıkladığında, kullanıcıyı şuraya yönlendirecektir: another-page sayfa.

Geri Gezinme

Geriye doğru gezinme yöntemi, bir uygulama içinde veya farklı uygulamalar arasında ekranlar arasında geriye doğru hareket sağlar. İleri navigasyonun ters yönüdür. Önceki sayfaya geri dönmek için basit goBack () yöntemi kullanılır.

Aşağıda tanımlanmıştır -

<Page class="page" loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Back" tap="goBack"/> 
   </StackLayout> 
</Page>

Buraya,

goBack() yöntem kullanıcı düğmeye dokunduğunda tetiklenecektir. goBack() varsa, kullanıcıları önceki sayfaya götürür.

Yanal Navigasyon

Yanal gezinme, aynı hiyerarşi düzeylerindeki ekranlar arasında gezinmeyi ifade eder. Göbek desenine dayanmaktadır. BottomNavigation, Tabs, TabView, SideDrawer ve Modal View gibi belirli gezinme bileşenleri aracılığıyla etkinleştirilir.

Basit bir örnek aşağıdaki gibi tanımlanmıştır -

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd"> 
   <ActionBar title="Hub" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" /> 
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
   </StackLayout> 
</Page>

Buraya,

navigateToFeatured işlevi, kullanıcıyı öne çıkan sayfaya götürmek için navigate () yöntemini kullanır.
Benzer şekilde, navigateToSearch işlevi kullanıcıyı arama sayfasına yönlendirecektir.

Hub sayfasına, sayfa ekranında bulunan gezinme yöntemi kullanılarak da ulaşılabilir ve biri goBack () yöntemi kullanılarak hub sayfasından çıkarılabilir.

Basit bir örnek aşağıdaki gibidir -

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

Altta ve Sekmede Gezinme

Mobil uygulamalarda en yaygın gezinme stili sekme tabanlı gezinmedir. Sekmede Gezinme, ekranın altında veya başlığın altında üstte düzenlenmiştir. TabView ve BottomNavigation bileşeni kullanılarak elde edilir .

Açısal tabanlı gezinme

NativeScript, açısal yönlendirme konseptine uyum sağlamak için gezinme konseptini genişletir. NativeScript, Angular RouterModule'ü genişleterek NativeScriptRouterModule adlı yeni bir modül sağlar.

NativeScript açısal gezinme kavramı aşağıdaki gibi bölümlere ayrılabilir -

sayfa yönlendirici çıkış etiketi
nsRouterLink çekici
RouterExtension sınıfı
Özel Yönlendirici Yeniden Kullanım Stratejisi

Bu bölümde yukarıdaki tüm açısal gezinmeyi öğrenelim.

Sayfa Yönlendirici Çıkışı

Daha önce öğrendiği gibi, sayfa yönlendirici çıkışı, Angular'ın yönlendirici çıkışının yerini almıştır. page-router-outlet, Nativescript çekirdek gezinme çerçevesinin Çerçeve ve Sayfa stratejisini tamamlar. Her bir sayfa yönlendirici çıkışı yeni bir Çerçeve bileşeni oluşturur ve çıkıştaki her yapılandırılmış bileşen Sayfa bileşeni kullanılarak sarılır. Ardından, başka bir sayfaya / rotaya gitmek için yerel gezinme yöntemi kullanılır.

Yönlendirici Bağlantısı (nsRouterLink)

nsRouterLink, Angular's RouterLink'in yerini almıştır. UI bileşeninin rotayı kullanarak başka bir sayfaya bağlanmasını sağlar. nsRouterLink ayrıca aşağıda iki seçenek sunar -

pageTransition- Sayfa geçiş animasyonunu ayarlamak için kullanılır. true, varsayılan geçişi etkinleştirir. false, geçişi devre dışı bırakır. Kayma, solma, vb. Gibi belirli değerler belirli geçişi ayarlar.

clearHistory - true, nsRouterLink'in gezinme geçmişini temizler.

Basit bir örnek kod aşağıdaki gibidir -

<Button text="Go to Home" [nsRouterLink]="['/home']" 
   pageTransition="slide" clearHistory="true"></Button>

Yönlendirici Uzantısı

NativeScript, RouterExtensions sınıfını sağlar ve çekirdek NativeScript'in gezinme işlevini ortaya çıkarır.

RouterExtensions tarafından sunulan yöntemler aşağıdaki gibidir -

navigate
navigateByUrl
back
canGoBack
backToPreviousPage
canGoBackToPreviousPage

RouterExtensions kullanan basit bir örnek kod aşağıdaki gibidir -

import { RouterExtensions } from "nativescript-angular/router"; 
@Component({ 
   // ... 
}) 
export class HomeComponent { 
   constructor(private routerExtensions: RouterExtensions) { } 
}

Özel Rota Yeniden Kullanım Stratejisi

NativeScript, bir mobil uygulamanın mimarisine uyum sağlamak için özel bir yol yeniden kullanım stratejisi (RouterReuseStrategy) kullanır. Bir mobil uygulama, bir web uygulamasına kıyasla belirli yönlerden farklılık gösterir.

Örneğin, bir web uygulamasında kullanıcı sayfadan uzaklaştığında ve kullanıcı sayfaya gittiğinde sayfayı yeniden oluşturduğunda sayfa yok edilebilir. Ancak mobil uygulamada sayfa korunacak ve yeniden kullanılacaktır. Yönlendirme konsepti tasarlanırken bu kavramlar dikkate alınır.

Rotalar

NativeScript Angular uygulamasında basit bir yönlendirme modülü aşağıdaki gibi olacaktır -

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
import { SearchComponent } from "./search.component"; 
const routes: Routes = [ 
   { path: "", redirectTo: "/home", pathMatch: "full" }, 
   { path: "home", component: HomeComponent }, 
   { path: "search", component: SearchComponent }, 
];
@NgModule({ 
   imports: [NativeScriptRouterModule.forRoot(routes)], 
   exports: [NativeScriptRouterModule] 
}) 
export class AppRoutingModule { }

Buraya,

Yönlendirme modülü, çok az istisna dışında Angular sürümüne çok benzer. Gerçekte, NativeScript, Angular çerçevesine benzer bir şekilde ortaya koyarak temel gezinme stratejisini kullanır.

Her GUI uygulamasında, olaylar, kullanıcı etkileşimini sağlamada çok önemli bir rol oynar. Kullanıcı uygulamayla her etkileşimde bulunduğunda, bir olay tetiklenir ve karşılık gelen bir eylem yürütülür.

Örneğin, kullanıcı bir uygulamanın oturum açma sayfasındaki Oturum Aç düğmesine tıkladığında, oturum açma işlemini tetikler.

Olaylar iki aktör içerir -

Event sender - gerçek olayı ortaya çıkaran nesne.
Event listener - belirli bir olayı dinleyen ve daha sonra bir olay tetiklendiğinde yürütülen işlev.

Gözlemlenebilir Sınıf

Olayları işlemek için önceden tanımlanmış bir sınıftır. Aşağıda tanımlanmıştır -

const Observable = require("tns-core-modules/data/observable").Observable;

NativeScript'te hemen hemen her nesne Observable sınıfından türetilir ve bu nedenle her nesne olayları destekler.

Etkinlik İşleyici

Bu bölümde bir nesnenin nasıl oluşturulacağını ve nesneye bir olay dinleyicisinin nasıl ekleneceğini anlayalım.

Aşama 1

Aşağıda belirtildiği gibi bir olay oluşturmak için kullanılan bir düğme oluşturun -

const Button = require("tns-core-modules/ui/button").Button; 
const testButton = new Button();

Adım 2

Ardından, aşağıda belirtildiği gibi düğmeye metin ekleyin -

testButton.text = "Click";

Aşama 3

Aşağıda belirtildiği gibi onTap bir işlev oluşturun -

let onTap = function(args) {
   console.log("you clicked!"); 
};

4. adım

Şimdi, aşağıda belirtildiği gibi onTap işlevine dokunma olayını ekleyin -

testButton.on("tap", onTap, this);

Bir olay dinleyicisi eklemenin alternatif bir yolu aşağıdaki gibidir -

testButton.addEventListener("tap", onTap, this);

Adım 5

Etkinlik eklemenin alternatif bir yolu, aşağıda belirtildiği gibi kullanıcı arayüzünün kendisidir -

<Button text="click" (tap)="onTap($event)"></Button>

Buraya,

$ olay, EventData türündedir. EventData iki özellik içerir ve bunlar aşağıdaki gibidir -

Object- Bir olayı ortaya çıkarmak için kullanılan gözlemlenebilir örnek. Bu senaryoda Button nesnesidir.

EventName- Etkinlik adıdır. Bu senaryoda, dokunma olayıdır.

6. Adım

Son olarak, bir olay dinleyicisi herhangi bir zamanda aşağıda belirtildiği gibi çıkarılabilir / çıkarılabilir -

testButton.off(Button.onTap);

Ayrıca aşağıda gösterildiği gibi başka bir biçim de kullanabilirsiniz -

testButton.removeEventListener(Button.onTap);

BlankNgApp'ı Değiştirme

NativeScript'teki olayları daha iyi anlamak için BlankNgApp uygulamasını değiştirelim.

Aşama 1

Ev bileşeninin kullanıcı arayüzünü açın, src/app/home/home.component.html ve aşağıdaki kodu ekleyin -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<StackLayout> 
   <Button text='Fire an event' class="-primary" color='gray' (tap)='onButtonTap($event)'></Button>
</StackLayout>

Buraya,

dokunma olaydır ve Düğme olay oluşturucudur.
onButtonTap olay dinleyicisidir.

Adım 2

Ev bileşeninin kodunu açın, ‘src/app/home/home.component.ts’ ve aşağıdaki kodu güncelleyin -

import { Component, OnInit } from "@angular/core"; 
import { EventData } from "tns-core-modules/data/observable"; 
import { Button } from "tns-core-modules/ui/button" 
@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. 
   } 
   onButtonTap(args: EventData): void { 
      console.log(args.eventName); 
      const button = <Button>args.object; 
      console.log(button.text); 
   } 
}

Buraya,

Yeni olay dinleyicisi eklendi, onButtonTap.
Etkinlik adını yazdırın, dokunun ve düğme metni, Konsolda bir etkinlik tetikleyin.

Aşama 3

Uygulamayı çalıştırın ve düğmeye dokunun. Konsolda aşağıdaki satırı yazdırır.

LOG from device <device name>: tap 
LOG from device <device name>: Fire an event

Veri bağlama, NativeScript tarafından desteklenen gelişmiş kavramlardan biridir. NativeScript, Angular veri bağlama konseptini olabildiğince yakından takip eder. Veri bağlama, UI bileşeninin herhangi bir programlama çabası olmadan uygulama veri modelinin geçerli değerini göstermesini / güncellemesini sağlar.

NativeScript, iki tür veri bağlamayı destekler. Bunlar aşağıdaki gibidir -

One-Way data binding - Model her değiştirildiğinde kullanıcı arayüzünü güncelleyin.

Two-Way data binding- Kullanıcı arayüzünü ve modeli senkronize edin. Model her güncellendiğinde, kullanıcı arayüzü otomatik olarak güncellenir ve ayrıca kullanıcı arayüzü kullanıcıdan veri aldığında (UI güncellenir), model güncellenir.

Bu bölümde her iki kavramı da öğrenelim.

Tek Yönlü Veri Bağlama

NativeScript, bir UI bileşeninde tek yönlü veri bağlamayı etkinleştirmek için basit bir seçenek sağlar. Tek yönlü veri bağlamayı etkinleştirmek için, hedef kullanıcı arayüzünün özelliğine köşeli parantez ekleyin ve ardından ona gerekli modelin özelliğini atayın.

Örneğin, bir Etiket bileşeninin metin içeriğini güncellemek için kullanıcı arayüzü kodunu aşağıdaki gibi değiştirmeniz yeterlidir -

<Label [text]='this.model.prop' />

Buraya,

this.model.prop modelin özelliğini ifade eder, this.model.

Tek yönlü veri bağlamayı anlamak için BlankNgApp'ımızı değiştirelim.

Aşama 1

Aşağıdaki gibi yeni bir model ekleyin, Kullanıcı (src / model / user.ts) -

export class User { 
   name: string 
}

Adım 2

Bileşenimizin kullanıcı arayüzünü açın, src/app/home/home.component.html ve kodu aşağıdaki gibi güncelleyin -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto"> 
   <Button text="Click here to greet" class="-primary" color='gray' 
      (tap)='onButtonTap($event)' row='1' column='0'>
   </Button> 
   <Label [text]='this.user.name' row='2' column='0' 
      height="50px" textAlignment='center' style='font-size: 16px; 
      font-weight: bold; margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Buraya,

Etiketin metni, kullanıcı modelinin özellik adına ayarlanır.
Düğmeye dokunma olayı, onButtonTap yöntemine eklenir.

Aşama 3

Ev bileşeninin açık kodu, src/app/home/home.component.ts ve kodu aşağıdaki gibi güncelleyin -

import { Component, OnInit } from "@angular/core"; 
import { User } from "../../model/user" 
@Component({
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   public user: User; 
   constructor() {
      // Use the component constructor to inject providers. 
      this.user = new User(); 
      this.user.name = "User1"; 
   }
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData) { 
      this.user.name = 'User2'; 
   } 
}

Buraya,

kullanıcı modeli içe aktarıldı
Kullanıcı nesnesi, bileşenin yapıcısında oluşturulur
onButtonTap olayı uygulandı. OnButtonTap uygulaması, Kullanıcı nesnesini günceller ve özelliğin adını Kullanıcı2 olarak ayarlar

4. adım

Uygulamayı derleyin ve çalıştırın ve modeli değiştirmek için düğmeye tıklayın; otomatik olarak Label Metin.

Başvurunun ilk ve son hali aşağıdaki gibidir -

Başlangıç hali

Tek Yönlü Veri Bağlama İlk Durumu aşağıda gösterilmiştir -

Son Durum

Tek Yönlü Veri Bağlama Son Durumu aşağıda gösterilmiştir -

İki yönlü Veri Bağlama

NativeScript ayrıca gelişmiş işlevsellik için iki yönlü veri bağlama sağlar. Model verilerini kullanıcı arayüzüne bağlar ve ayrıca kullanıcı arayüzünde güncellenen verileri modele bağlar.

İki yönlü veri bağlama yapmak için ngModel özelliğini kullanın ve ardından aşağıdaki gibi [] ve () ile çevreleyin -

<TextField [(ngModel)] = 'this.user.name'></TextField>

İki yönlü veri bağlamayı daha iyi anlamak için BlankNgApp uygulamasını değiştirelim.

Aşama 1

NativeScriptFormsModule'ü HomeModule'a (src/app/home/home.module.ts) aşağıda belirtildiği gibi -

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"; 
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({ 
   imports: [ 
      NativeScriptCommonModule, 
      HomeRoutingModule, 
      NativeScriptFormsModule 
   ], 
   declarations: [ 
      HomeComponent 
   ], 
   schemas: [ 
      NO_ERRORS_SCHEMA 
   ]
}) 
export class HomeModule { }

Buraya,

NativeScriptFormsModule, iki yönlü veri bağlamayı etkinleştirir. Aksi takdirde, iki yönlü veri bağlama beklendiği gibi çalışmayacaktır.

Adım 2

Giriş bileşeninin kullanıcı arayüzünü aşağıda verildiği gibi değiştirin -

<ActionBar> <Label text="Home"></Label></ActionBar> 
<GridLayout columns="*" rows="auto, auto"> 
   <TextField hint="Username" row='0' column='0' color="gray" 
      backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
   </TextField> 
   <Label [text]='this.user.name' row='1' column='0' height="50px" 
      textAlignment='center' style='font-size: 16px; font-weight: bold; 
      margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Buraya,

Etiket bileşeninin metin özelliği, tek yönlü veri bağlamayla ayarlanır. Model kullanıcısı güncellenirse, metin özelliği otomatik olarak güncellenir.

TextField bileşeni ngModel'i this.user.name olarak ayarlar. Model kullanıcısı güncellenirse, metin özelliği otomatik olarak güncellenir. Aynı zamanda, kullanıcı TextField'ın değerini değiştirirse, model de güncellenir. Model güncellenirse, Label'ın metin özelliği değişikliklerini de tetikleyecektir. Dolayısıyla, kullanıcı verileri değiştirirse, Label'ın metin özelliğinde gösterilecektir.

Aşama 3

Uygulamayı çalıştırın ve metin kutusunun değerini değiştirmeyi deneyin.

Başvurunun ilk ve son durumu aşağıda belirtildiği gibi benzer olacaktır -

Başlangıç hali

İki yönlü veri bağlama - Başlangıç durumu aşağıda verilmiştir -

Son Durum

İki yönlü veri bağlama - Son durum aşağıda gösterilmiştir -

Bir NativeScript Modülü , tek kitaplık olarak paketlenmiş bir dizi ilgili işlevselliği içerir. NativeScript framework tarafından sağlanan modülleri öğrenelim.

NativeScript çerçevesinin temel işlevlerini içerir. Bu bölümdeki temel modülleri anlayalım.

Uygulama

Uygulama, mobil uygulamanın platforma özel uygulamasını içerir. Basit çekirdek modül aşağıda tanımlanmıştır -

const applicationModule = require("tns-core-modules/application");

Konsol

Konsol modülü mesaj günlüğü için kullanılır. Aşağıdaki yöntemlere sahiptir -

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

uygulama ayarları

uygulama ayarları modülü, uygulama ayarlarını yönetme yöntemini içerir. Bu modülü eklemek için aşağıdaki kodu eklememiz gerekiyor -

const appSettings = require("tns-core-modules/application-settings");

Uygulama ayarında bulunan birkaç yöntem aşağıdaki gibidir -

setBoolean (key: string, value: boolean) - boole nesnesini ayarlar
setNumber (key: string, value: number) - sayı nesnesini ayarlar
setString (key: string, value: string) - dizge nesnesini ayarlar
getAllKeys () - Saklanan tüm anahtarları içerir
hasKey (key: string) - bir anahtarın mevcut olup olmadığını kontrol edin
temizle - saklanan değerleri temizler
kaldır - anahtara dayalı herhangi bir girişi kaldırın.

Uygulama ayarını kullanan basit bir örnek aşağıdaki gibidir -

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

Bu modül kullanım için kullanılır httpistek ve yanıt. Bu modülü uygulamanıza eklemek için aşağıdaki kodu ekleyin -

const httpModule = require("tns-core-modules/http");

Aşağıdaki yöntemleri kullanarak veri gönderebiliriz -

getString- URL'den dizgi olarak veri istemek ve indirmek için kullanılır. Aşağıda tanımlanmıştır -

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON- JSON'dan verilere erişmek için kullanılır. Aşağıda tanımlanmıştır -

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage- içeriği belirtilen URL'den indirir ve ImageSource nesnesini döndürür. Aşağıda tanımlanmıştır -

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile - İki bağımsız değişken URL'si ve dosya yolu vardır.

URL - verileri indirir.
File path- URL verilerini dosyaya kaydedin. Aşağıda tanımlanmıştır -

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request- Seçenekler argümanı var. Seçenekleri istemek ve HttpResponse nesnesini döndürmek için kullanılır. Aşağıda tanımlanmıştır -

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

Görüntü kaynağı

görüntü-kaynak modülü görüntüyü kaydetmek için kullanılır. Bu modülü aşağıdaki ifadeyi kullanarak ekleyebiliriz -

const imageSourceModule = require("tns-core-modules/image-source");

Kaynaktan görüntüleri yüklemek istiyorsanız, aşağıdaki kodu kullanın -

const imgFromResources = imageSourceModule.fromResource("icon");

Yerel dosyadan resim eklemek için aşağıdaki komutu kullanın -

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

Görüntüyü dosya yoluna kaydetmek için aşağıdaki komutu kullanın -

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

Zamanlayıcı

Bu modül, belirli zaman aralıklarında kod çalıştırmak için kullanılır. Bunu eklemek için kullanmamız gerekiyorrequire -

const timerModule = require("tns-core-modules/timer");

İki yönteme dayanmaktadır -

setTimeout- Yürütmeyi geciktirmek için kullanılır. Milisaniye olarak temsil edilir.

setInterval - Belirli aralıklarla yinelemeyi uygulamak için kullanılır.

İzleme

Bu modül, hata ayıklama için kullanışlıdır. Günlük bilgilerini verir. Bu modül şu şekilde temsil edilebilir:

const traceModule = require("tns-core-modules/trace");

Uygulamanızda etkinleştirmek istiyorsanız, aşağıdaki komutu kullanın -

traceModule.enable();

ui / resim önbelleği

görüntü önbellek modülü, görüntü indirme isteklerini işlemek ve indirilen görüntüleri önbelleğe almak için kullanılır. Bu modül aşağıda gösterildiği gibi temsil edilebilir -

const Cache = require("tns-core-modules/ui/image-cache").Cache;

bağlantı

Bu modül, bağlı ağın bağlantı bilgilerini almak için kullanılır. Şu şekilde temsil edilebilir -

const connectivityModule = require("tns-core-modules/connectivity");

İşlevsellik Modülleri

İşlevsellik modülleri, sisteme / platforma özgü birçok modül içerir. Önemli modüllerden bazıları aşağıdaki gibidir -

platform- Cihazınızla ilgili bilgileri görüntülemek için kullanılır. Aşağıdaki şekilde tanımlanabilir -

const platformModule = require("tns-core-modules/platform");

fps-meter- Saniyede kare yakalamak için kullanılır. Aşağıdaki şekilde tanımlanabilir -

const fpsMeter = require("tns-core-modules/fps-meter");

file-system- Cihazınızın dosya sistemiyle çalışmak için kullanılır. Aşağıda tanımlanmıştır -

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures - UI hareketleriyle çalışmak için kullanılır.

UI modülü

UI modülü, UI bileşenini ve ilgili işlevselliğini içerir. Önemli UI modüllerinden bazıları aşağıdaki gibidir -

frame
page
color
text/formatted-string
xml
styling
animation

Npm paketi yerel işlevsellik eklemek için kullanılır. Bu paketi kullanarak herhangi bir eklentiyi kurabilir veya arayabilir veya silebiliriz. Bu bölüm eklentileri ayrıntılı olarak açıklamaktadır.

Komutlar

add - Eklenti kurmak için kullanılır.

update - Belirtilen eklentiyi günceller ve bağımlılıklarını değiştirir.

remove - Eklentiyi kaldırır.

build - iOS veya android projeleri için eklenti oluşturmak için kullanılır.

create - Projeniz için bir eklenti oluşturur.

Eklenti Ekleniyor

Aşağıdaki sözdizimi yeni bir eklenti eklemek için kullanılır -

tns plugin add <plugin-name>

Örneğin, nativescript-barkod tarayıcı eklemek istiyorsanız, aşağıdaki kodu kullanabilirsiniz -

tns plugin add nativescript-barcodescanner

Şu yanıtı görebilirsiniz -

+ [email protected] 
added 1 package from 1 contributor and audited 11704 packages in 8.76s

Yukarıdaki eklentiyi eklemek için npm modülünü de kullanabilirsiniz -

npm install nativescript-barcodescanner

Şimdi, NativeScript CLI eklentiyi npm'den indirir ve node_modules klasörünüzün içine ekler.

Eklentiyi doğrudan sitenize eklemek istiyorsanız package.json ve tüm bağımlılık sorunlarını çözerseniz, önceki komut yerine aşağıdaki komutu kullanabilirsiniz -

npm i nativescript-barcodescanner

Geliştirme sırasında bir geliştirici bağımlılığı yüklemek istiyorsanız, aşağıdaki kodu kullanın -

npm i tns-platform-declarations --save-dev

Buraya,

tns-platform-declarations, geliştirme işlemi sırasında yalnızca intelliSense için gerekli olan bir geliştirici bağımlılığıdır.

Eklentileri İçe Aktarma

Şimdi kurduk nativescript-barcodescanner plugin. Aşağıdaki komutu kullanarak projenizin içine ekleyelim -

const maps = require("nativescript-barcodescanner"); 
maps.requestPermissions();

Eklentileri Güncelleme

Bu yöntem, belirli bir eklentiyi güncellemek için kullanılır, böylece önceki eklentiyi kaldırır ve yeni sürümü yükler ve bağımlılıklarını değiştirir. Aşağıda tanımlanmıştır -

tns plugin update <Plugin name version>

Eklentinin Kaldırılması

Eklentiyi kaldırmak istiyorsanız, gerekmiyorsa, aşağıdaki sözdizimini kullanabilirsiniz -

tns plugin remove <plugin-name>

Örneğin, yukarıda yüklü olan nativescript-google-maps-sdk dosyasını kaldırmak istiyorsanız, aşağıdaki komutu kullanın -

tns plugin remove nativescript-barcodescanner

Şu yanıtı görebilirsiniz -

Successfully removed plugin nativescript-barcodescanner

Eklenti Oluşturma

Eklentinin platformlar / android'de bulunan Android'e özgü proje dosyalarını oluşturmak için kullanılır. Aşağıdaki komutu kullanarak nativescript-barcodescanner pugin'i oluşturalım -

tns plugin build nativescript-barcodescanner

Eklenti Oluşturma

NativeScript eklentileri basit JavaScript modülleridir. Uygulamanızın src \ package.json dosyasında tanımlanır. Bu modül, NativeScript eklenti geliştirme için yeni bir proje oluşturmak için kullanılır. Aşağıda tanımlanmıştır -

tns plugin create <Plugin Repository Name> [--path <Directory>]

Bu bölüm, JavaScript kullanarak Yerel API'lere erişmeye genel bakışı açıklamaktadır.

Marshalling

NativeScript Runtime, hem android hem de iOS platformları için örtük tür dönüşümü sağlar. Bu kavram, marşallama olarak bilinir. Örneğin, NativeScript-iOS paltform, JavaScript ve Objective-C veri türlerini benzer şekilde örtük olarak dönüştürebilir, Java / Kotlin kolayca JavaScript proje türleri ve değerleriyle eşleştirilebilir. Sıralamanın her bir tipte nasıl yapılacağını tek tek kısaca anlayalım.

Sayısal Değerler

İOS ve android sayısal veri türlerini JavaScript numaralarına kolayca dönüştürebiliriz. İOS için JavaScript'e basit sayısal dönüştürme aşağıda tanımlanmıştır -

console.log(`max(7,9) = ${max(7,9)}`);

Buraya,

Yerel max () işlevi JavaScript numarasına dönüştürülür.

Android Ortamı

Java, byte, short, int, float, double ve long gibi farklı sayısal türleri destekler. JavaScript'in yalnızca sayı türü vardır.

Aşağıda gösterilen basit bir Java sınıfını düşünün -

class Demo extends java.lang.Object {
   public int maxMethod(int a,int b) {
      if(a>b) {
         return a;
      } else {
         return b;
      }
   }
}

Buraya,

Yukarıdaki kod iki tamsayı argümanı içerir. Yukarıdaki kod nesnesini aşağıda gösterildiği gibi JavaScript kullanarak çağırabiliriz -

//Create an instance for Demo class 
var obj = new Demo(); 

//implicit integer conversion for calling the above method 
obj.maxMethod(7,9);

Teller

Android dizeleri java.lang.string'de tanımlanmıştır ve iOS dizeleri NSSring'de tanımlanmıştır. Her iki platformda da marşallamanın nasıl yapılacağını görelim.

Android

Dizeler değişmezdir, ancak Dize arabellekleri değiştirilebilir dizeleri destekler.

Aşağıdaki kod, basit eşleme için bir örnektir -

//Create android label widget 
var label = new android.widget.Label(); 

//Create JavaScript string 
var str = "Label1";  

//Convert JavaScript string into java label.setText(str); 
// text is converted to java.lang.String

Boolean sınıfı java.lang.Boolean'da tanımlanmıştır. Bu sınıf, bir nesneye bir boole değeri sarar. Boolean'ı String'e ve tersini kolayca dönüştürebiliriz. Basit örnek aşağıda verildiği gibi tanımlanmıştır -

//create java string 
let data = new java.lang.String('NativeScript'); 

//map java String to JavaScript string, 
let result = data.startsWith('N'); 

//return result 
console.log(result);// true

iOS ortamı

NSString sınıfı değişmezdir, ancak alt sınıfı NSMutableString değişmezdir. Bu sınıf, dizelerle çalışmak için bir yöntem koleksiyonu içerir. Aşağıdaki gibi beyan edilir -

class NSString : NSObject

Aşağıda gösterildiği gibi basit bir amaç-c beyanını düşünün -

NSString *str = @"nativescript"; 
//convert the string to uppercase
NSString *str1; 
str1 = [str uppercaseString]; 
NSLog(@"Uppercase String : %@\n", str1 );

NSStrings, JavaScript dizelerine kolayca eşlenebilir.

Dizi

Bu bölüm dizilerde nasıl sıralama yapılacağını açıklar. Önce iOS ortamına bir örnek verelim.

Dizi Bildirimi

class NSArray : NSObject

Buraya,

NSArray, dizi adı verilen nesnelerin sıralı koleksiyonunu yönetmek için kullanılır. Statik dizi oluşturmak için kullanılır. Alt sınıfıNSMutableArray dinamik diziler oluşturmak için kullanılır.

NSArray nesnelerinin aşağıda gösterildiği gibi dizi değişmezleri kullanılarak oluşturulabileceğini düşünün -

let array: NSArray = ["React","Vue","TypeScript"]

Şimdi, bu diziyi aşağıda gösterildiği gibi JavaScript ile eşleştirebiliriz -

//create native array 
let nsArr = NSArray.arrayWithArray("React","Vue","TypeScript"]); 

//create simple javascript array 
let jsArr = ["Hello,World","NativeScript"]; 

//Now compare the two arrays, 
let compare = nsArr.isEqual(jsArr); 
console.log(comapre);

Bu, çıktıyı yanlış olarak döndürecektir.

Android dizi bildirimi

Java dizileri, java.util.Arrays. Bu sınıf, dizileri işlemek için çeşitli yöntemler içerir. Aşağıda bir örnek gösterilmiştir -

//javascript array 
let data = [12,45,23,56,34,78,50]; 

//create java array 
let result = ns.example.Math.maxElement(data);
console.log(result);

Sınıflar ve Nesneler

Sınıflar ve Nesneler, Nesne Yönelimli Programlamanın temel kavramlarıdır. Sınıf, kullanıcı tanımlı bir prototiptir. Nesne, bir sınıf örneğidir. Sınıf, bir türdeki tüm nesnelerde ortak olan özellikler veya yöntemler kümesini temsil eder. Her iki mobil geliştirme ortamı için yerel sınıfları ve nesneleri anlayalım.

Android Ortamı

Java ve Kotlin sınıfları, tam paket adıyla gösterilen benzersiz tanımlayıcılara sahiptir.

Örneğin,

android.view.View- Ekran düzeni ve kullanıcı ile etkileşim için temel bir kullanıcı arayüzü sınıfıdır. Bu sınıfa aşağıda gösterildiği gibi JavaScript'te erişebiliriz -

const View = android.view.View;

İlk olarak, aşağıdaki ifadeyi kullanarak sınıfı içe aktarıyoruz -

import android.view.View;

Ardından, aşağıda verildiği gibi bir sınıf oluşturun -

public class MyClass {
   public static void staticMethod(context) {
      //create view instance
      android.view.View myview = new android.view.View(context);
   }
}

Yukarıdaki aynı sınıfta, aşağıdaki kodu kullanarak JavaScript işlevine erişebiliriz -

const myview = new android.view.View(context);

Benzer şekilde, java.lang paketleri içindeki arayüzlere, sabitlere ve numaralandırmalara erişebiliriz.

iOS Ortamı

Objective-C sınıfları @interface ve @implementation olmak üzere iki bölümde tanımlanır. Sınıf tanımı anahtar kelimeyle başlar@interface ardından interface(class)isim. Objective-C'de, tüm sınıflar NSObject adı verilen temel sınıftan türetilir.

Tüm Objective-C sınıflarının üst sınıfıdır. Simple Circle sınıfı aşağıda gösterildiği gibi tanımlanır -

@interface Circle:NSObject {
   //Instance variable
   int radius;
}
@end

Aşağıda gösterildiği gibi bir yöntemi olan bir sınıfı düşünün -

@interface MyClass : NSObject 
+ (void)baseStaticMethod; 
@end

Bu sınıf, aşağıdaki kod kullanılarak javascript'e dönüştürülebilir -

function MyClass() { /* native call */ }; 
Object.setPrototypeOf(MyClass, NSObject); 
BaseClass.baseStaticMethod = function () { /* native call */ };

JavaScript instanceofişleci, bir nesnenin belirli bir sınıftan miras alıp almadığını doğrulamak için kullanılır. Bu şu şekilde tanımlanabilir -

var obj = MyClass.alloc().init(); // object creation 
console.log(obj instanceof NSObject); //return true

Buraya,

Objective-C örnekleri, ayırma, init veya yeni yöntemler kullanılarak oluşturulur. Yukarıdaki örnekte, aşağıdaki gibi yeni yöntemi kullanarak kolayca nesne başlatma oluşturabiliriz -

var obj = MyClass.new();

Benzer şekilde, statik yöntemlere ve özelliklere erişebilirsiniz.

Uygulamanızı oluşturun ve yayınlayın, Android uygulamanızı tüm kullanıcılar için kullanılabilir hale getirir. Google Play, sağlam bir yayın platformudur. Android uygulamalarınızı tüm dünyadaki tüm kullanıcılara yayınlamanıza ve dağıtmanıza yardımcı olur. Bu bölüm, Native uygulamanızı Google Play'de nasıl yayınlayacağınızı açıklar.

NativeScript Sidekick

SideKick bir GUI istemcisidir ve her tür işletim sistemini destekler. NativeScript CLI sürecini basitleştirir ve mobil uygulama oluşturmaya yardımcı olur.

Uygulamanızı Sidekick'ten Google Play Console'a yayınlayın

Sidekick'i indirmek ve kurmak işletim sisteminize bağlıdır. Uygulamanızı Sidekick'te çalıştırmak için aşağıdaki adımları izleyin.

Step 1: Launch Sidekick

Sidekick'i başlatalım. Aşağıdaki resme benzer görünüyor -

Step 2: Build your device

Şimdi, uygulamanızı cihazınızdan açın ve araç çubuğundan inşa seçeneğini seçin ve Android'i seçin. Aşağıdaki resme benzer bir yanıt alacaksınız -

Step 3: Properties

Özellikler sekmesini tıklayın ve android yapılandırmanızı ekleyin. Ekran aşağıdakine benzer görünüyor -

Step 4: Plugins

Sidekick, uygulamanız için hangi eklentilere bağlı olduğunuzu bulmanıza yardımcı olur. Eklentiler sekmesine tıklayın ve aşağıdakileri listeleyecektir -

Step 5: Android Certificates

Android'den dişli çark simgesine tıklayın ve göz at seçeneğini seçin, ardından dosya sisteminizde depolanan bir sertifika seçin. Aşağıda gösterilmiştir -

Bunu seçtikten sonra iletişim kutusunu kapatın.

Step 6: Build your application

Son olarak, derleme türünden yerel derleme seçeneğini tıklayın ve yapılandırmadan sürüm seçeneğini seçin. Bundan sonra uygulamanızı oluşturun.

Step 7: Application package

Derleme tamamlandığında bir yol oluşturacak ve apkdosya. Uygulama paketinin konumunu kaydedin. Bu apk dosyası, onu Google Play mağazasına yüklemek için kullanılır.

Step 8: Publish in Google Play

Araç çubuğundan yayınlama seçeneğini seçin ve Google Play'i seçin. Ardından, Google Play Store için Android Sertifikalarını Yönet iletişim kutusunu ekleyin. Aşağıda gösterilmiştir -

Bundan sonra, Derleme türünü seçin ve Hizmet Hesabı JSON anahtarını sağlayın, ardından Alfa, Beta veya Üretim izlerini seçin, son olarak yüklemeyi tıklayın.

Uygulamanızı Google Play'de yayınlayın

Uygulamanızı Google Play konsolunda yayınlamak için aşağıdaki ön koşulları karşılamanız gerekir.

Önkoşullar

Google Play'de kayıtlı olmalısınız
Geçerli bir Google Play kendinden imzalı kod imzalama kimliğiniz var

Uygulamanızı yayınlama prosedürü

Aşağıdaki adımlar, uygulamanızı Google Play mağazasında nasıl yayınlayacağınızı anlamanıza yardımcı olur.

Step 1: Login Google Play console

Google Play konsolunu açın ve hesabınızla giriş yapın.

Step 2: Create an app

Tüm uygulamalar sekmesine gidin ve Uygulama Oluştur'u tıklayın ve yeni bir uygulama oluşturun. Şimdi, varsayılan dili ekleyin, uygulama başlığı nihayet daha ileri gitmek için devam et'i tıklayın.

Step 3: Fill required fields

Mağaza girişi sekmesine gidin ve gerekli alanları doldurun, ardından gerekli varlıkları tamamlayın ve tüm değişiklikleri kaydedin.

Step 4: Price and distribution

Fiyatlandırma ve dağıtım sekmesine gidin, tüm ayarları tamamlayın ve tüm değişiklikleri kaydedin.

Step 5: Release your app

Uygulama sürümleri sekmesini seçin ve Alfa, Beta'yı seçin. Uygulamanızı test etmek için kullanılır. Ve Üretim parçalarını seçin. Uygulamanızı Google Play'de yayınlamak için kullanılır. Son olarak uygulama paketini (apk) ekleyin.

Step 6: Review your app

Bu senin son adımın. İncelemede, herhangi bir sorun olup olmadığını kontrol edin. Sorun yoksa, uygulamanızı yayınlamak için kullanıma sunmayı onaylayın.

Bu bölüm, Native uygulamanızı App Store'da nasıl yayınlayacağınızı açıklar. Uygulamanızı yayınlamak için aşağıdaki adımları izleyin.

Önkoşullar

Bunu gerçekleştirmek için aşağıdaki ön koşullara ihtiyacınız vardır -

Dağıtım sertifikası
Dağıtım sağlama profili
İOS Geliştirme merkezinde kayıtlı paket kimliği
İTunes Connect'te uygulama kaydı

Uygulamanızı yayınlama adımları

Aşağıda, uygulamanızı yayınlama adımları verilmiştir -

Adım 1: NativeScript Sidekick'i açın

NativeScript Sidekick'i başlatın ve uygulamanızı Sidekick'te açın.

2. Adım: Yayınlamayı seçin

Araç çubuğuna gidin ve araç çubuğundan yayınlama seçeneğini seçin . Aşağıda gösterilmiştir -

Şimdi, Apple App Store seçeneğini seçin. Aşağıdaki resme benzer görünüyor -

3. Adım: iOS sağlama ve sertifikalarını yönetin

Apple App Store dişli çark simgesini tıklayın ve göz at seçeneğini seçin ve ayrıntıları ekleyin.

4. Adım: Uygulamanızı oluşturun

Ardından, inşa seçeneğini tıklayın ve uygulamanızı oluşturun ve işlemin tamamlanmasını bekleyin.

5. Adım: Kimlik bilgilerini sağlayın

Bu senin son adımın. Hesabınızda Apple Kullanıcı Adı ve Parolasını belirtin ve yükle'ye tıklayın ve onay mesajını kontrol edin. Uygulamanızı incelenmek üzere göndermek istiyorsanız, iTunes Connect'e gidin ve gönderin.

Test, bir uygulamanın geliştirme yaşam döngüsünde çok önemli bir aşamadır. Bir uygulama kalitesi sağlar. Dikkatli planlama ve yürütme gerektirir. Aynı zamanda geliştirmenin en çok zaman alan aşamasıdır. NativeScript çerçevesi, bir uygulamanın otomatik olarak test edilmesi için kapsamlı bir destek sağlar.

Test Türleri

Genel olarak, bir uygulamayı test etmek için üç tür test süreci mevcuttur. Bunlar aşağıdaki gibidir -

Birim Testi

Birim testi, bir uygulamayı test etmek için en kolay yöntemdir. Bir kod parçasının (genel olarak bir işlev) veya bir sınıfın yönteminin doğruluğunu sağlamaya dayanır. Ancak gerçek ortamı ve sonrasını yansıtmaz. Böcekleri bulmak için en az seçenek budur.

Genel olarak, NativeScript Jasmine, Mocha ile Chai ve QUnit birim test çerçevelerini kullanır.

Bunu gerçekleştirmek için önce aşağıdaki komutu kullanarak projenizde yapılandırmanız gerekir -

tns test init

Şimdi, şu yanıtı alıyorsunuz -

? Select testing framework: (Use arrow keys) 
> jasmine 
   mocha 
   qunit

Şimdi seçin jasmine çerçeve ve ekranınız buna benzer -

? Select testing framework: jasmine 
+ [email protected] 
added 90 packages from 432 contributors and audited 11944 packages in 8.753s 

+ [email protected] 
added 2 packages from 1 contributor and audited 11946 packages in 7.299s 

> [email protected] postinstall 
/Users/workspace/NativeScript/NativeApp/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript standard library! 
The project needs your help! Please consider supporting of core-js on Open 
Collective or Patreon:

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) is looking for a 
good job -) 
npm WARN [email protected] requires a peer of webpack@^2.0.0 
|| ^3.0.0 but none is installed. You must install peer dependencies yourself. 

+ [email protected] 
added 19 packages from 52 contributors and audited 12012 packages in 9.368s 

+ [email protected] 
added 2 packages from 35 contributors and audited 12014 packages in 6.925s 

+ [email protected] 
updated 1 package and audited 12014 packages in 7.328s 
+ @types/[email protected] 

> [email protected] postinstall /Users/deiva/workspace/NativeScript/NativeApp/node_modules/nativescript-unit
-test-runner 

> node postinstall.js 
+ [email protected] 

added 1 package from 1 contributor and audited 12032 packages in 7.14s 
Successfully installed plugin nativescript-unit-test-runner. 

Example test file created in src/tests 
Run your tests using the "$ tns test <platform>" command.

Şimdi, test dosyası src \ testing \ example.ts içinde oluşturulur.

Testlerinizi Oluşturun

Aşağıda gösterildiği gibi example.ts dosyasının içine basit bir test ekleyelim -

describe("NativeApp test:", function() { 
   it("Check counter.", function() { 
      expect(mainViewModel.createViewModel().counter).toEqual(10); 
   }); 
   it("Check message.", function () { 
      expect(mainViewModel.createViewModel().message).toBe("10 taps left"); 
   }); 
});

Buraya,

İlk olarak, sayacın 10'a eşit olup olmadığını kontrol edin ve mesajın 10 tıklama kaldığını kontrol edin.

Testi bir sonraki adımda çalıştıralım.

Testlerinizi Çalıştırın

Şimdi, testi aşağıdaki komutu kullanarak android veya iOS bağlantılı cihazda çalıştırın -

tns test android

Bu, aşağıdaki durumu döndürecektir -

? To continue, choose one of the following options: (Use arrow keys) 
> Configure for Cloud Builds 
   Configure for Local Builds 
   Configure for Both Local and Cloud Builds 
   Skip Step and Configure Manually

Ardından aşağıdaki seçeneği seçin -

? To continue, choose one of the following options: Configure for Local Builds 
Running the setup script to try and automatically configure your environment. 
These scripts require sudo permissions 
.....

Test paketinizi android simülatörde çalıştırmak için aşağıdaki komutu çalıştırın -

tns test android --emulator

Artık karma sunucusu, projenizi derlemeleri hazırlar ve dağıtır.

Uçtan Uca (E2E) Testi

Birim testleri küçük, basit ve hızlı bir süreçken, E2E test aşaması uygulamadaki akışları kapsayan birden çok bileşen dahil edilir ve birlikte çalışır. Bu, birim ve entegrasyon testleri ile başarılamadı.

NativeScript Appiumeklenti, E2E otomasyon testini gerçekleştirmek için kullanılır. Appium, mobil uygulama için açık kaynaklı bir test çerçevesidir. Bu çerçeveyi projenize eklemek için, XCode'un en son sürümüne veya 25.3.0'ın üzerinde Android SDK'ya sahip olmanız gerekir.

Appium'u yükleyin

Npm modülünü kullanarak Appium'u global olarak kuralım -

npm install -g appium

Şimdi, şu yanıtı görebilirsiniz -

npm install -g appium 
/Users/.npm-global/bin/authorize-ios -> 
/Users/.npm-global/lib/node_modules/ appium/node_modules/.bin/authorize-ios 

> [email protected] install 
/Users/.npm-global/lib/node_modules/ appium/node_modules/appium-windows-driver

> node install-npm.js 
Not installing WinAppDriver since did not detect a Windows system 

> [email protected] postinstall /Users/.npm-
global/lib/node_modules/appium/node_modules/core-js 

> node -e "try{require('./postinstall')}catch(e){}" 
Thank you for using core-js ( https://github.com/zloirock/core-js ) for 
polyfilling JavaScript 
standard library! 
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 
Also, the author of core-js ( https://github.com/zloirock ) 
is looking for a good job -) 

> [email protected] postinstall/Users/.npm-
global/lib/node_modules/appium/node_modules 
/appium-chromedriver 

> node install-npm.js 
............................................ 
............................................. 
+ [email protected] 
added 671 packages from 487 contributors in 28.889s

Eklenti Ekle

Ekleyelim nativescript-dev-appium aşağıdaki komutu kullanarak projenize devDependency olarak eklenti -

$ npm install -D nativescript-dev-appium

Bunu yaptıktan sonra, seçin mocha çerçeve ve buna benzer bir yanıt alacaksınız -

> node ./postinstall.js 
? What kind of project do you use
? javascript ? Which testing framework do you prefer? mocha 
+ [email protected]

Artık dosyalar proje klasörünüzde saklanıyor.

Cihazınızı oluşturun

Aşağıdaki komutu kullanarak android cihaz oluşturalım -

tns build android

Yukarıdaki komut, hedeflenen yetenekleri belirtmelidir testleri çalıştıracaktır. İOS cihazınız varsa, kullanarak inşa edebilirsiniziOS cihaz.

Testi Çalıştır

Şimdi cihazı yapılandırdık. Testimizi aşağıdaki komutu kullanarak çalıştıralım -

npm run e2e -- --runType <capability-name>

Buraya,

yetenek-adı uygulamanızın içinde tanımlanır e2e/config/appium.capabilities.json.

Çıktı

NativeScript - Sonuç

NativeScript, web geliştiricilerinin fazladan çaba harcamadan uygulamalarını tamamen çok kolay bir şekilde test etmeleri için harika bir mobil uygulamadır. Geliştiriciler, kısa sürede sorunsuz bir şekilde harika görünen ve başarılı bir uygulama geliştirebilirler.