Ionic 4 ve Angular ile Mobil Uygulama Geliştirmek

Hibrit mobil uygulamalar çoğu zaman küçük çaplı projelerde kurtarıcı olmuştur. Son zamanlarda popülerliğinin de artmasıyla native uygulamaları aratmayacak performansta uygulamalar geliştirebiliyorsunuz. En büyük avantajı, kodunuzu bir kere yazıp ios android platformlarına uygulamanızı dağıtıyor olmanız. Hibrit uygulama geliştirmek için birçok alternatif bulunuyor. Angular deneyimim olduğu için ionic kullanarak bir uygulama geliştirmeye karar verdim ve geliştirirken çok zevk aldım. Bu yazıda Ionic 4 Angular ile uygulama nasıl geliştirilir onu anlatacağım.

Ionic CLI Yükleyin

Herşeyden önce makinenizde npm ve nodejs kurulu olduğunu varsayıyorum.

npm ve nodejs olduğunu kontrol etmek için aşağıdaki komut satırını çalıştırın.

node --version
npm --version

Geliştirim için editör olarak ben VS Code kullanıyorum ve tavsiye de ederim. Gerçekten çok işe yarayan eklentileri mevcut ve oldukça hafif bir uygulama.

npm kullanarak ionic komut satırı arayüzünü indirelim.

npm install -g ionic

windows kullanıyorsanız cmd’yi yönetici kullanıcısı ile MAC/Linux kullanıyorsanız sudo kullanarak çalıştırın

Yükleme tamamlandıktan sonra artık ionic projesini oluşturmaya hazırsınız.

Ionic Projesi Oluşturun

Bundan sonraki işlemlerin çoğunu Ionic CLI kullanarak yapacağız. Ionic 4 ile beraber Ionic CLI tamamen Angular CLI tabanlı oldu. Eğer daha önce Angular CLI kullandıysanız çok zorluk çekmeden alışacağınızı tahmin ediyorum.

Ionic projesi oluştururken halihazırda olan başlangıç projelerinden birini seçerek veya tamamen temiz bir başlangıç yapabilirsiniz. Halihazırda tab ve menü görünümlü olarak başlama seçeneği mevcut. Bu anlatımda menü görünümlü olanı kullanalım.

ionic start ionicTutorial sidemenu --type=angular

- -type parametresini angular vermek Ionic 4 kullanarak geliştireceğimizi belirtmek için önemli. ionicTutorial projenin adı olacak siz istediğiniz bir isim verebilirsiniz. sidemenu ise başlangıç şablonunu belirtmektedir.

Yükleme sırasında “Install the free Ionic Pro SDK and connect your app?” sorusu gelecektir. Ionic Pro SDK kullanmak istemediğim için ben hayır (n) cevabını veriyorum. Siz evet(y) diyebilirsiniz. Ionic Pro kullanırsanız bulut ortamında uygulamayı derleme, yayınlama, izleme gibi özelliklerden faydalanabilirsiniz. https://ionicframework.com/docs/pro/

Uygulama ionicTutorial isimli klasörün altına oluşturuldu. Klasörü kullanıdığınız ide ile açın.

Uygulamayı Tarayıcıda Görüntüleyin

Buraya kadar herhangi bir hata almadıysanız artık aşağıdaki komut satırı ile uygulamayı tarayıcıda görüntülemeye hazırsınız.

ionic serve

Bu komutu, uygulamanın olduğu klasörün içinde çalıştırmanız gerekiyor. cd ./ionicTutorial

Ionic 4 Side Menu Başlangıç

Uygulamayı artık tarayıcıda görüntüleyebiliyoruz. Geliştirim yapmak için tüm ortam hazır.

Ionic CLI Projesi Klasör Yapısı

Ionic 4 Klasör Yapısı

Bu yapıya aslında Angular CLI ile proje geliştirenler hakimdir. Bizi ilgilendiren kısımların en tepesinde src/ klasörü var. Onun altındaki app/ klasörü uygulama kodunu içeriyor. assets/ klasörüne resimlerinizi, font dosyalarınızı koyabiliyorsunuz. Index.html dosyası bulunuyor. Ayrıca bazı ayarları içeren dosyaları içeriyor. Bizim daha çok vakit geçireceğimiz kısım app/ klasörü olduğu için diğerlerinden bu yazıda bahsetmeyeceğim.

app/ klasörü içerisindeki app.module.ts dosyasındaki modül bizim ana modülümüz. Herşey oradan başlayacak. main.ts dosyasında aşağıdaki satır ilk bu modülün yükleneceğini söylüyor bize.

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

app/ klasörü içerisindeki app.component.ts ise AppModule modülünün açıp diğer sayfaları bunun içine yerleştireceği bileşen. Bunu ise app.module.ts içinde aşağıdaki satırdan anlıyoruz.

...
bootstrap: [AppComponent]
...

app/ klasörü içinde home/ ve list/ isimli iki klasör daha bulunuyor. Bu klasörlerin herbirinde bir sayfa ve bir modül mevcut. Lazy loading kullanabilmek için Ionic CLI ile oluşturduğunuz herbir sayfa bir modül ile beraber gelir.

app-routing.module.ts dosyasında uygulamanın routing tanımlaması mevcut. Burada home ve list bileşenleri loadChildren kullanarak yüklenir. Bu şekilde kullandığınızda ilgili modül ve ona ait bileşenler, çağırıldıklarında yüklenirler ve bu sayede uygulamanın ilk yüklenmesi hızlanmaktadır.

REST Servis İle List Sayfasını Doldurun

Birçok mobil uygulamada veriyi REST servisler ile getiririz. Bu uygulamada da REST servisi kullanarak list sayfamızdaki listeyi dolduralım. Bunun için https://jsonplaceholder.typicode.com/ adresindeki posts verisini kullanalım.

Öncelikle post isimli bir servis oluşturalım.

ionic g service services/post

Yukarıdaki Ionic CLI komutu app/services/ klasörü altına post.service.ts ve bunun testi olan post.service.spec.ts isimli dosyaları oluşturur. Oluşan bu servisi kullanabilmek için AppModule modülüne provider olarak eklememiz gerekiyor.

PostService servisine getList isimli bir method tanımlayalım ve bu method ile veriyi getirelim.

Servis içerisindeki environment.apiUrl sabiti /src/environments/environment.ts TypeScript dosyasında tanımlanıyor. Bu uygulama için apiUrl değerimiz https://jsonplaceholder.typicode.com/. Angular uygulamalarında iki farklı environment bulunuyor. İlki geliştirim aşamasında kullanabileceğiniz /src/environments/environment.ts diğeri ise uygulamayı derlerken — prod (Ionic uyglamasını derlemek konusunda buradaki dokümandan faydalanabilirsiniz.) parametresi verdiğinizde kullanılan /src/environments/environment.prod.ts. Bu iki dosyayı uygulama çapında kullanacağınız sabitleri tutmak için kullanabilirsiniz.

getList methodunun Observable<Array<Post>> döndürdüğünü görüyorsunuz. Buradaki Post, models/post.model.ts içinde tanımlı olan model sınıfı. models/ klasörü CLI tarafından oluşturulan bir klasör değil bu klasörü tüm modelleri bir arada tutmak için projelerde genelde ben src/app/models/ dizininde oluşturuyorum.

Artık servis sayfada kullanılmaya hazır. list/list.page.ts dosyasındaki ListPage bileşeni içindeki items dizisini servisten gelen veri ile dolduralım.

PostService servisini ListPage sayfamıza inject ettikten sonra getList methodunu çağırabiliriz. Gelen veriyi items değişkenine bağladıktan sonra artık sayfada veriyi gösterebiliriz.

Sayfada veriyi göstermek için diziyi *ngFor ile dönerek listede title değişkenini gösterebiliriz.

Yeni Bir Sayfa Oluşturun

Yeni bir sayfa oluşturmak için aşağıdaki Ionic CLI komutunu kullanın.

ionic g page detail

Yeni oluşturduğumuz bu sayfada list.component.ts içinde bulunan liste öğelerinden birine tıklayınca onun detayını gösterelim. Böylece ionic uygulamasında angular ile query params nasıl kullanılır onu görmüş oluruz. Böylece angularda iki sayfa arasında veriyi nasıl taşırım sorusunu da cevaplamış oluruz.

Yukarıdaki komutu çalıştırdıktan sonra app/detail klasörünün ve altındaki bileşenlerin oluştuğunu göreceksiniz. Ayrıca app-routing.module.ts içerisine de detail sayfasının routing olarak eklendiğini göreceksiniz. İşte bunları kolayca yapabilmek için Ionic CLI / Angular CLI kullanıyoruz.

Biz burada ek olarak path: detail/:id parametresini ekliyoruz ki hangi öğenin detay sayfasını göstereceğimize buna göre karar verelim. Detay sayfasına gitmek için öncelikle list sayfasına yönlendirme butonu ekleyelim.

Bunun için goToDetail methodu ekledik ve parametre olarak Post tipinde bir değişken almasını sağladık. Burada Ionic NavController kullanıyorum çünkü açacağım sayfada geri butonu çıksın istiyorum. NavController yerine Angular Router da kullanabilirdik fakat onunla yönlendirme yaparsanız geri butonu otomatik çıkmıyor sizin yönetmeniz gerekiyor. goToDetail methodunu sayfadaki bir buton ile çağırdığımızda bu sayfadaki işimiz bitiyor.

Bir sonraki aşamada yönleneceğimiz detay sayfasını dolduralım.

Bu sayfada da yine PostService servisini kullanacağımız için constructor’a inject ediyoruz. Ayrıca gönderdiğimiz id parametresini alabilmek için ActivatedRoute sağlayıcısını da inject ediyoruz. Aldığımız id parametresini PostService servisine yeni yazdığımız getById methoduna göndererek ilgili post nesnesini getirelim.

Getirdiğimiz post nesnesini item değişkenine bağlayalım ve daha sonra sayfada gösterelim.

Liste ve detay sayfaları

Sonuç olarak Angular ve Ionic kullanarak bir hibrit uygulama oluşturduk. Neredeyse tüm uygulamalarınızda kullanacağız temel bileşenlerden bahsetmiş olduk. Tüm detaylarına girmek yazıyı uzatacağından temel seviyede tutmak istedim. Vakit buldukça çeşitlendirmeye çalışacağım.

Uygulamanın tamamını https://github.com/gokhancelik/ionic-tutorial reposundan indirebilirsiniz.

Bir sonraki yazımda da AppStore ve Google Play’a uygulamanın nasıl yükleneceğini anlatacağım.