Home / Ionic Dersleri / Ionic Kurulumu

Ionic Kurulumu

Bir önceki yazımızda Ionic Nedir yazısıyla Ionic Derslerine giriş yapmıştık. Şimdi Ionic nasıl kurulur buna bir göz atalım.

Ionic Kurulumu için Gerekenler

1- NodeJS : Kurulum için NodeJS kurulumu linkimize bakabilirsiniz.

2- Android SDK: Eğer Android’e yönelik bir uygulama yapacaksanız Android SDK kurmanız gerekli.

3- XCode: Apple ürünlerine yönelik (iOS) bir uygulama için XCode Kurmanız gerekmekte. (Eğer yalnızca Android temelli bir uygulama yapacaksanız buna ihtiyacınız yok.

4- Corvova ve Ionic kurulumu

Corva ve Ionic Kurulumu

Kurulum için command promt’u açın ve aşağıdaki komutu girin.

npm install -g cordova ionic

Ionic Uygulama Oluşturma

Ionic ile uygulama oluşturma esnasında 3 opsiyonunuz bulunmaktadır.

  • Tabs App
  • Blank App
  • Side Menu App

Şimdi yukarıdaki listeye açıklık getirelim

Ionic Tabs App Nedir?

Tabs App, tab yani sekme tabanlı uygulamalar için hazır şablondur. Size birçok fonksiyon hazır olarak gelmektedir. Ionic’in default template’i Ionic Tabs’dır. Eğer bu template’i kullanarak bir uygulama geliştirmek isterseniz aşağıdaki komutu girin.

ionic start algoritmaUzmani tabs

Şimdi oluşturduğumuz uygulamanın dizinine gidelim.

cd algoritmaUzmani

Ionic Uygulamasına Android Platformu Eklemek

Şimdi oluşturduğumuz uygulamaya platform ekleylim. (uygulamanızın bulunduğu dizinde çalıştırdığınızdan emin olun)

ionic platform add android

Eğer yukarıdaki komutta hata alırsanız Android SDK’yı yüklememişsiniz demektir. Google’ın ilgili sitesine giderek Android SDK’yı kurduğunuzdan emin olun.

Ionic Uygulamasının Build Edilmesi

Aşağıdaki komutla uygulamanızı build edebilirsiniz.

ionic build android

Ionic Uygulamasının Çalıştırılması

Uygulamanızın bulunduğu dizinde aşağıdaki komutu çalıştırmanız yeterlidir.

ionic build android

Eğer kurmuş olduğunuz farklı bir emulator yok ise, Android’in default emulator’ü çalıştırılacaktır. Bu oldukça yavaştır. Size tavsiyemiz Genymotion kurmanızdır.

 

Ionic Blank App

Eğer bomboş bir tema istiyorsanız Ionic Blank App oluşturabilirsiniz. Bunun için aşağıdaki komutu girmeniz yeterlidir.

ionic start myApp blank

Şimdi uygulamamızın olduğu dizine gidelim.

cd myApp

Şimdi uygulamamıza Android platform ekleyelim.

ionic platform add android

uygulamamızı çalıştıralım.

ionic run android

Ionic Side Menu App Nedir?

Ionic Side Menu App side menü geliştirmek için dizayn edilmiştir. Diğer uygulamalara kullanılan komutlar aynen geçerlidir. Yalnızca oluşturmak için

C:\Users\Username\Desktop> ionic start myApp sidemenu

komutunu girmelisiniz.

Ionic Uygulamayı Browser’da Açma

Javascript temelli olmasından ötürü Ionicle geliştirilmiş uygulamayı Web browserlarda çalıştırabilirsiniz. Bu size hızdan kazanç sağlayacaktır. Ancak şunu unutmayın, emulatörlerde uygulamanızı çalıştırmayı asla ihmal etmeyin. Uygulamanızın bulunduğu dizinde aşağıdaki komutu çalıştırın.

ionic serve

Bu komutu yazdıktan sonra uygulamanız browserda açılacaktır.

Ionic Proje Dosyası Yapısı

Dosya yapısı aşağıdaki gibidir.

 

Hooks: Process sürecinde tetiklenen scriptlerdir. Genelde Cordova ile ilişkilidirler.

Platforms: Bu klasör altında Android ve iOS klasörleri oluşturulur.

Plugins: Cordova eklentileri burada tutulur.

Resources: İkon, splash screen gibi öğeler burada tutulmaktadır.

scss: Sass dosyaları tutulur. CSS ile geliştirme yapacaksanız ihtiyaç duymazsınız.

www: Projemizin ana klasörüdür. En çok zamanı burada geçireceğinizden emin olabilirsiniz. www içerisinde alt klasörler olarak aşağıdaki klasörler bulunur.

  • css
  • img
  • js
  • libs
  • templates
  • index.html

 

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir