Bölüm 3 (FRAMEWORKLER) Ders 1: NativeScript
NativeScript
Şekil 21: NativeScript’in resmi logosu
Telerik firması tarafından geliştirilen javascript kullanarak Android, iOS ve Windows Universal platformları için native uygulamalar yazılmasını sağlayan frameworktür.
NativeScript uygulamaları, Javascript veya TypeScript gibi platformdan bağımsız dillerde geliştirilmiştir. NativeScript, AngularJS çerçevesi için tam destek sağlar. NativeScript platformu ile hazırlanan mobil uygulamalar, Xcode veya Android Studio’da düzenlenebildikleri gibi platform API’lerine tam erişim sağalayabilir. Geliştiriciler, uygulamalarına başka katmanlar oluşturmadan Cocoapods, Android Arsenal, Maven ve npm.js gibi kaynaklardan üçüncü taraf kütüphaneleri de dahil edebilirler.
Şekil 22:NativeScript çalışma mimarisi [1]
Sadece Javascript kodları yazarak yerel (native) mobil uygulamalar geliştirile biliniyor. Üstelik yazılan uygulamaları sadece Android ortamında değil, aynı zamanda iOS ve Windows Universal ortamlarında da çalıştırabiliyoruz. Yani tek kodla farklı platform için de uygulama yazılmış oluyor.
NativeScript gereksinimlerini yüklemek ve Windows’ta NativeScript uygulamaları oluşturmaya ve çalıştırmaya başlamak için adım adım kurulum aşaması:
NOT : Windows sistemlerinde, Android uygulamaları geliştirmek için yalnızca NativeScript CLI kullanabilirsiniz. Bunun nedeni, NativeScript CLI’nın, yalnızca macOS işletim sisteminde bulunan iOS uygulamalarını oluşturmak için Xcode kullanmasıdır. Windows’ta iOS uygulamaları oluşturmakla ilgileniyorsanız, NativeScript Sidekick’i denemek isteyebilirsiniz. NativeScript Sidekick, bulutta iOS ve Android sürümleri gerçekleştiren, bu sistem gereksinimlerini tamamlama gereksinimini ortadan kaldıran ve Windows’ta iOS için oluşturmanıza izin veren bir hizmet de dahil olmak üzere NativeScript uygulamaları için güçlü araçlar sunar.
NOT 2: Kurulum için Windows 7 Service Pack 1 veya üstü işletim sistemine sahip olmanız gerekmektedir.
Kurulum adımları [2]
NativeScript’i Windows makinenize ayarlamak için aşağıdaki adımları izleyin:
- Gereksinimlerin kurulumunu ve yapılandırmasını kolaylaştırmak için Chocolatey’i ( https://chocolatey.org/install ) kurun.
-
- Komut istemini Yönetici olarak çalıştırın.
- Aşağıdaki betiği kopyalayıp komut istemine yapıştırın, kurulum gerçekleşecektir.
@powershell -NoProfile -ExecutionPolicy unrestricted -Command “iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
Şekil 23: Chocolatey komut satırında kurulumu
- Google Chrome’u yükleyin (NativeScript uygulamalarında hata ayıklamak için gereklidir). Komut isteminde aşağıdaki komutu çalıştırın:
choco install googlechrome -y
Şekil 24: Komut satırında Google Chrome kurulumu
- Node.js LTS’yi yükleyin
- Komut isteminde aşağıdaki komutu çalıştırın.
choco install nodejs-lts –y
- JDK 8’i ayarlayın
- Komut isteminde aşağıdaki komutu çalıştırın.
- choco install adoptopenjdk –version 8.192
- Android SDK’yı yükleyin.
- Komut isteminde aşağıdaki komutu çalıştırın.
choco install android-sdk -y
Komut istemini yeniden başlatın.
Şekil 27: Android SDK Kurulumu
6.Android SDK Platformu 28, Android SDK Oluşturma Araçları 28.0.3 veya sonraki sürümler, Android Destek Deposu, Google Deposu ve ihtiyaç duyabileceğiniz diğer tüm SDK’lar için tüm paketleri yükleyin. Alternatif olarak, gerekli tüm paketleri kuracak olan aşağıdaki komutu kullanabilirsiniz.
“%ANDROID_HOME%\tools\bin\sdkmanager” “emulator” “platform-tools” “platforms;android-28” “build-tools;28.0.3” “extras;android;m2repository” “extras;google;m2repository”
7.Android sanal aygıtlarını (AVD’ler) yükleyin. Bunu yapmanın birden fazla yolu var, o yüzden sadece birini seçin:
- Yönetici olarak Komut İstemi’nde aşağıdaki komutu uygulayın:
@powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(‘https://nativescript.org/setup/win-avd‘))”
- Android Studio’yu kullanın ve Android sanal cihazlarını (AVD’ler) oradan yükleyin :
- Komut isteminde Yönetici olarak aşağıdaki komutu çalıştırarak Android Studio’yu yükleyin:
choco install androidstudio -y
Şekil 28: Android Studio Kurulumu
8.NativeScript CLI’yı yükleyin. Aşağıdaki komutu çalıştırın.
npm i -g nativescript
Şekil 29: NativeScript kurulumu
- Sisteminizin doğru yapılandırılıp yapılandırılmadığını kontrol etmek için aşağıdaki komutu çalıştırın.
tns doctor
“Hiçbir sorun tespit edilemedi” seçeneğini görürseniz artık kodlamaya başlayabilirsiniz.
Eğer herhangi bir hata mesajı alırsanız “tns doctor” komutu yardımı ile eksik kalan yeri yapılandırabilirsiniz.
Proje oluşturma:
NativeScript’te, NativeScript CLI’yi kullanarak uygulamalar oluşturup çalıştırınız. Kurulumdan sonra, NativeScript CLI, terminalinizde veya komut isteminizde komut olarak bulunur; tns, Telerik Native Script ‘in kısaltılmasıdır.
Terminal veya komut isteminizi açın ve yeni bir NativeScript uygulaması oluşturmak için aşağıdaki komutu çalıştırın.
tns create HelloWorld –template tns-template-blank
Artık bir uygulama oluşturduğuna göre, yeni uygulamayı nasıl çalıştırılacağını ve bir cihazda nasıl çalıştığını görelim.
Cihazınıza NativeScript Playground ve NativeScript Privew uygulamalarını kurduktan sonra QR kodunu tara seçeneğine dokunun ve terminalinizde veya komut isteminizde görünen QR kodunu tarayın.
Şekil 33: Telefonda QR code tarama
Uygulamaya basit bir resim ekleyelim; böylece livesync’in nasıl çalıştığını görebilirsiniz. Uygulamanızın app/main-page.xml ya da (C:\Users\user\HelloWorld\app\app-root.xml) dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:
<Page loaded=”pageLoaded”>
<ActionBar title=”My App” class=”action-bar”></ActionBar>
<Image src=”https://user-images.githubusercontent.com/544280/42960643-66d498ac-8b5a-11e8-8946-7224eefea6a5.jpg”></Image>
</Page>
Emülatör yeni görüntüyü yenilemeli ve görüntülenmelidir:
Sonra, uygulamanın app/app.css dosyasını açın ve aşağıdaki kodu dosyanın altına yapıştırın.
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360); }
}
Image {
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Emülatör yenilendiğinde çılgınca dönen bir elma görünmeli:
Şekil 35: Güncellenmiş myApp çıktısı
[1] NativeScript’in resmi dokümantasyonundan çevrilmiştir.
[2] https://docs.nativescript.org sitesinden istifade edilmiştir. 25.01.2019
Bu ve devam edecek anlatımların tamamı ve sınavlar
alt domaininde yayındadır. Tezimi paylaşıma açıyorum. Alın teridir, lütfen paylaşırken kaynak belirtmeyi unutmayın.
