NativeScript ve Angular 2 ile IOS ve Android için Mobile Uygulamalar.

Daha önce PhoneGap ve ionic ile çalıştığımda ilk başlarda “Javascript ile mobile uygulama geliştirme” fikri çok hoşuma gitmişti. Üstelik HTML ve CSS ile farklı farklı ekranlar/çözünürlükleri için UI yönetmek güzel bir fikir ve 3 aşağı 5 yukarı aynı code-base ile hem Andorid hem IOS için “hem de javascript ile” uygulama gelişitirebilme imkanı çok “etkileyici” bir seçenek olarak gözükmüştü.

Gelin görünki işler hiçte bu minval de ilerlemedi, PhonaGap/Cordava, Ionic ve genel olarak Javascript ile hybrid uygulama gelistirme süreci beraberinde bir çok sorunuda birlikte getirdi. Başta native API lara ulaşma zorunluluğu ve uygulamalar içindeki video/camera gibi yoğun CPU/RAM kullanımı gerektiren işlemler ve genel olarak uygulama büyüdükçe ciddi sıkıntılara neden olan performans sorunları son çalıştığımız projede bizi tekrar Native (Swift, Java/C++) olarak geliştirmeye itti.

Andorid için Java IOS için Swift/Objective-C öğrenmek istemeyen yada istesede vakti olmayan bir çok geliştirici için Hybrid uygulama geliştirme fikri(Javascript ile) hala taze ve her geçen gün yeni alternatifler çıkmakta. Bir diğer taraftanda Xamarin gibi başarılı diğer alternatiflerde var. Ama neticede Javasript gelişitiricisi için yeni bir alternatif olan NativeScript açıkcası baya iddealı.

Son bir iki aydır, özellikle Ionic ve NativeScript ile ilgili (en yeni sürümleri) bir çok olumlu yazı görüş okudum/duydum. Özellikle, NativeScript in %100 “truly native” sloganı dikkatimi çekti ve bende bir yazı ile bu platformu denemek ve tanımak isedim.  Bu yazıda (belki birden fazla yazı olur) elimden geldiğince NativeScripti tanımaya ve görüşlerimi paylaşmaya çalışacağım. Özellikle UI performansı ve Angular 2 ile olan entegrasyonunu merak ettiğim için biraz angular dan da bahsetmiş olacağız.

NativeScript Nedir?

Kendi sitesindeki, kendi tanımlariyla(ilk kısmı) başlayacak olursak;

NativeScript is a free and open source framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine —no WebViews — resulting in native-like performance and UX.

Yukarıdaki tanımın ilk başlarına bakınca, Uygulamamızı, Javascript/TypeScript  ve CSS ile yazabileceğimiz başka bir hybrid mobile framework diye düşünebiliriz. Ama tanım devam ettikçe, benimde ilgilimi asıl çeken nokta olan “NativeScript renders UIs with the native platform’s rendering engine” kısmı ile karşılaşıyoruz.

Kısacası, uygulamamız UI elementleri için PhoneGap/Cordava yada Ionic gibi web view kullanmıyor direkt olarak işletim sistemi ile gelen (ios yada android) “rendering engine” i kullanıyor. Yani UI elementlerimiz Native olarak render edilmekteler. Yine, nativescriptin bir başka iddealı yanı da ;

NativeScript provides more than 90% code sharing and reuse. All the native APIs are available out of the box, no need for Java or Objective-C/Swift knowledge.

Sadece UI rendering de değil platformun diğer Native API larınada %100 “Javascript” ile erişim sağlaması. Ayrıca farklı iki platform arasında %90 a varan bir kod paylaşımıda vaad ediyor. (uygulamanın çok büyük bir bölümünü Android için ayrı IOS için ayrı kod yazmak yerine yazdığınız kodu iki platform içinde kullanabiliyorsunuz).  Tekrar etmek gerekirse, Javascript ile Objective-c/Swift bilmeden yada Andorid için Java bilmeden kod yazarak uygulamanızı “Native” olarak geliştirmenize imkan veriyor.

Bu arada, başka bir güzelliğide; hali hazırda ki Andorid ve IOS kütüphanelerinizi yada diğer third party native kütüphaneleri(Java yada Objective-C/Swift ile yazılanlar gibi)  her hangi bir ekstra işlem olmadan rahatlıkla kullanmanıza imkan vermesi. Diğer özelliklerine ve yeteneklerinin tam listesine bu adresten bakabilirsiniz.

Eğer .NET geliştiricisiyseniz muhtemelen Telerik firmasını duymuşssunuzdur, NativeScript bu firmanın bir ürünü. Framework ün kendisi tamamen ücretsiz , telerik firması ise bir çok hizmet ve özellikle UI tarafında bir çok ücretli/ücretsiz widget/plugin sunmakta.

Bu linkten bazılarına bakabilirsiniz. NativeScript ile uygulama geliştirmek için her hangi bir şey satın almak zorunda değilsiniz sadece hayatınızı kolaylaştıracak bir çok eklenti/kütüphaneyi bu şekilde temin edebilirsiniz onu belirtmek istedim.

Tabi bizim açımızdan ayrıca önemli olan bir nokta ise, Angular 2 ile olan entegrasyonu. NativeScript , Angular a bağımlı değil tabiki ama Angular 2 yi kullanarak NativeScript uygulamarızımı alışık olduğunuz bildiginiz bir framework birlikte geliştirmek ciddi bir avantaj. Şimdi sözü daha fazla uzatmadan kurulum ve cok uzamaz ise ornek uygulamamıza geçelim.(yada ornegi bir sonraki yaziya birakalim)

NativeScript Geliştirme ortamı / Kurulum

İlk olarak Node.js in sisteminizde kurulu olması lazım. Böylece NativeScript CLI ı npm üzerinden indirebileceğiz. Node.js kurulu değilse, https://nodejs.org/en/ adresinden indirip kurabilirsiniz. Node.js kurulduktan sonra, npm ile NativeScript CLI ı indirerek devam edelim. Komut satırından;

npm install -g nativescript

komutu ile NativeScript CLI ı indirmeye başlıyoruz. Kurulum eğer daha önce mobile uygulama geliştirmediyseniz biraz kafanızı karıştırabilir. İlk olarak CLI ın kendisini yüklenecek,

Install NativeScript CLI

İndirme işlemi bir noktaya gelidiğinde, (CLI kuruldupunda)  platformu kurmaya başlayacaktır;

ınstall android sdk and javac

Gördüğünüz gibi bazı hatalar ve uyarılarla karşılaştım, sebebi ilgili SDK lerin benim makinamda yüklü olmayışı (Android SDK gibi) ve java nın sistemim de düzgün bir şekilde konfigüre edilmeyişi. Eğer sizin makinanızda bu sorunlar yoksa bu hataların/uyarıların çoğunu almayacaksınız.

Bu noktada, CLI bize bu eksiklikleri gidermek için setup script i çalıştırmayı teklif edecek, y(es) diyerek setup scriptin çalışmasını sağlıyoruz. Yeni bir terminal otomatik oalrak açılacak ve aşağıdakine benzer bir görüntü ile ilgili dosyaları kurup ayarlarını yapacaktır CLI.

coco chorme sdk ınstall

Setup script işini bitirdikten sonra, sizden herhangi bir tuşa basıp işlemi bitirmenizi isteyecektir. “pres any key to continue ” gibi bir mesaj gördüğünüzde her hangi bir tuşa basıp setup script in kapanmasını sağlayabilirsiniz. diğer terminal ekranında, CLI setup işlemin bittiğini fark edip size bir kaç soru daha sorup (hepsine yes diyerek geçelim) kurulumu tamamlaycaktır.

Bu noktada özellikle windows için açık olan bütün terminalleri kapatın ve bir tane yeniden açın. Yeni açtığımız terminalde, kurulumu doğrulamak için aşağıdaki komut ile bir dene yapabilirsiniz;

tns

test tns

yukarıdaki ekran görüntüsünü alıyorsanız, NativeScript CLI ve ilgili paketler başarıyla kurulmuş demektir. Bu noktadan sonra,  bir kontrol daha yapmamız gerekmekte. NativeScript in bize sunduğu en önemli avantaj olan “Native API Access” ve “Native Platform Build” yeteneklerinin (özellikle windows için) düzgün bir şekilde kurulup kurulmadığını kontrol edelim.

Komut satırından aşağıdaki komutu çalıştırıp  devam edelim;

tns doctor

tns doctor

Eğer yukarıdaki görüntüyü elde edemediyseniz bu adresdeki ilgili adımları takip ederek sorunu çözebilirsiniz. Sorun genelde(windows için), JAVA_HOME yada ANDROID_HOME değişkenlerinin düzgün set edilememisinden kaynaklanıyordur. Eski usul set etmeyide deneyebilirsiniz. Enviroment Variables ekranında aşağıdaki gibi set edilip edilmediğinden emin olun.

Javahome

Daha önce hiç mobile uygulama geliştirme sürecinde bulunmadıysanız kurulum süreci biraz zor ve karışık görünmüştür. Ama kurulumumuz sonunda tamamlandı. Genel olarak hem NativeScript hemde ilgili mobile platformun kurulumuyla ilgili bir coksey indirmek zorunda kaldik.

İlk Projemizin Oluşturulması

İlk olarak projemizi tutacağımız klasör içinde komut satırından “tns” yi kullanarak yeni bir proje oluşturalım. Ben, takibi kolay olsun diye,  D:/NativeScript/ altında oluşturacağım,

tns create nativescript-demo --ng

yukarıdaki komut ile boş bir NativeScript projesi oluşturduk. Boş derken projeye başlamamız için gerekli tüm ihtiyaçlarımızı barındıran ama henüz hiç bir şey yapmayan bir proje. –ng eki ile NativeScript i Angular 2 ile kullanacağımızı belirtmiş olduk.

create project natyivescript  created

Projemiz başarıyla oluşturulduktan sonra, tercih ettiğiniz kod editöründe projemizi açıp klasör ve dosya yapımıza bakarak başlayalım;

proje yapısı

Şimdilik en önemli iki kısım app ve platform  klasörleriyle başlayalım. App klasörü tahmin edeceğiniz gibi uygulamızın kodlarını tutacak.(Biz, projemizi angular 2 ile oluşturdugumuz için, Typescipt ile yazacağımız biraz özelleştirilmiş bir angular 2 uygulaması aslında).  app klasörünün altında şimdilik tek bir klasörümüz mevcut “\app\App_Resources” klasörü oda kendi içinde Android ve IOS olarak ikiye ayrılmış durumda. Bu klasöre tekrar döneceğiz. Şimdi app klasörü altındaki diğer dosyalara bakalım.

Şuan için hepi topu 4 dosyamız var. Dikkat ettiyseniz klasik bir Angular 2 uygulamasından farksız.

  1. main.ts  – Uygulamamızın boot edileceği dosyamız. Başka bir değişle, tıpkı klasik angular 2 web uygulamamız gibi, uygulamamızın başlangıç noktası olarak Angular 2 nin bootstrap metodunu çağırdığımız nokta.
  2. app.component.ts – Ana componentimiz. Angular 2 component mimari ile geliştirildiği çin uygulamamızı componentlere ayırdığımız bir mimariye sahip Ana componentimiz yada namı diğer root component de en üst seviye componentimiz.
  3. app.css ve package.json

Platform klasörümüzü daha iyi anlayabilmek için, uygulamamızın bu haliyle nasıl göründüğüne bakarak devam edelim. Bunun için geliştirdiğimiz uygulamaya ilgili platfromu dahil etmek yeterli olacaktır. Ana dizinde komut satırından aşağıdaki komut ile android i projemize ekleyelim.

 tns platform add android

platform klasörümüzün altına Android platformun eklendiğini göreceksiniz. NativeScript bir yönüyle Universal bir platform yani hem MAC hem Windows 10 hende IOS ve Android için uygulama yazabileceğimiz bir platform bu nedenle projemize dahil etmek istediğimiz platformu – bizim örneğimiz de android – bu komutla eklmiş olduk.

Sonrasinda uygulamamızı çalıştıralım ve “emulator” üzerinde “sanal android cihazı” nasıl gözüküyor bakalım;

tns run android --emulator

İlk defa çalıştırdığımız için emulator ün başlaması biraz zaman alacaktır. Emülatörümüz çalıştığında uygulamamızın görüntüsü ;

startin emulator

Bu arada,

tns run android --emulator

komutunu –emulator olmadan kullanırsanız, usb den bağladığınız android cihazınıda kullanabilirisiniz.

Bir diğer güzel eklentide “livereload” özelliği. Emulatoru Ctrl+C ile durdurup aşağıdaki haliyle yeninden başlatalım;

tns livesync android --emulator --watch

Böylece, projemizde yaptığımız tüm değişiklikleri otomatik olarak uygulamamıza yansıtmış olacağız. Şimdi emulator açıkken app.component.ts içinde yeni bir button daha ekleyip jayıt edin,

  <Button text="Yeni Button" (tap)="onTap()"></Button>

livesync ve –watch ile çalıştırıdığımız için uygulamamız emulator de güncellenecektir.

emulator watch

Eğer emulator açılıyor ama uygulamanız yüklenmiyorsa, muhtemelen (windows için) , emulator e ayrılmış RAM yetersiz geliyordur. BU ram oranını artırmak ve dğer bütün emulator ayarlarını yapmak için aşağıdaki yolu takip ederek

C:\Program Files (x86)\Android\android-sdk

ADV(Android Devie Manager) i açın ve  çalıştırmak istediğiniz emulatorun RAM oranını artırın. Ayrıca, çalıştırmak istediğiniz emulatoru bu ekrandan start butonu ile çalıştırıp hazır halde tutun ve tns ile uygulamanızı yeniden çalıştırın

tns livesync android --emulator --watch

Böylece uygulamanız hem daha hızlı yüklenecek hemde RAM sorunu çözülmüş olacaktır.

emulator ayar

Bu yazıda, NativeScript i kurduk, ilk projemizi oluşturduk ve emulator üzerinden uygulamamızı çalışır hale getirdik. Başka bir değişle geliştirme ortamımızı tam teşekkül hazırlamış olduk.  Yazıyı daha fazla uzatmamak adına, örnek uygulamamızı diğer yazıya bırakalım.

Sonrasında da değerlendirme yazısı ile seriyi bitirelim inş.

Kolay Gelsin

1 thought on “NativeScript ve Angular 2 ile IOS ve Android için Mobile Uygulamalar.

  1. Bende nezamandır NativeScript te bakmak istiyordum bu yazı için teşekkürler. Devamını bekliyorum.

    Windows için IOS emulator kullanamıyoruz bildiğim kadarıyla, bir de Android emulator bende biraz farklı gözüktü çalışırkende Xamarin le alakalı bazı paketleri gördümç NativeScript in xamarinle bir ilişkisi var mı?

Leave a Reply

Your email address will not be published. Required fields are marked *