Mobil Uygulama Geliştirme Eğitimi #1 Temel Ionic

Merhabalar, Mobil Uygulama Geliştirme Eğitimi derslerinin ilkinde ionic ile ilgili temel yapılardan bahsedeceğiz ve bir kaç komut öğreneceğiz. Eğer dosyaları indirmek için buraya geldiyseniz en altta.

İlk olarak Ionic ile proje oluşturmayı bilmemiz gerekiyor – Eğer hiç bir fikriniz yoksa tanıtım yazısına ve eğitim videosuna buradan ulaşabilirsiniz. –

Terminal ekranına pek alışık olmayabilirsiniz fakat bu sizi korkutmasın yavaş yavaş kullanmaya alışacaksınız. Öncelikle proje oluşturmak için CMD ya da Terminal’i açmamız gerekiyor.

Açıldığında sizin hangi klasörde olduğunuz bilinmeyebilir bunun için Windows kullanan arkadaşlar

dir

MacOs ya da Linux kullanan arkadaşlar

ls

komutuyla bulundukları dizinle neler var görebilirler. Ben masaüstünde bir proje oluşturmak istiyorum bu yüzden cd komutu ile masaüstüne gelmem gerekiyor.

cd desktop

(desktop yazmamın sebebi listelendiğinde öyle gözüküyor olması sizde masaüstü olarakta çıkabilir.)

Artık ionic ile proje oluşturma kıvamına geldiysek başlayalım, proje oluşturmak için ionic başlangıçta bize 3 seçenek sunuyor. Bunlar;

Ionic Başlangıç Uygulama Seçenekleri

  1. Blank ( Boş bir Ionic Projesi )
  2. Tabs ( Tablar ile çalışan bir Ionic Projesi )
  3. Sidemenu ( Açılır menü ile çalışan bir Ionic Projesi )

Hangisi ile başlamak istiyorsak şu şekilde yazabiliriz;

ionic start denemeUygulamaAdi sidemenu

Uygulama adını istediğiniz gibi değiştirebilirsiniz. Uygulamamız masaüstüne oluştuktan sonra terminalde cd Uygulamanızınİsmi şeklinde yazmanız gerekiyorki projenin olduğu dizine ulaşabilelim.

Henüz daha platform eklemedik. Platform olarak iOS, Android, Windows Phone gibi yapılar ekleyebiliriz. Platform eklemek için alt satırdaki kodu kullanabiliriz.

ionic platform add android

Platform ekleme işlemimizde başarılı.Şimdi de içerideki klasörlerden bahsedelim.

Ionic Klasörler

Mobil Uygulama Geliştirme Eğitimi #1

Hooks, node_modules kısmını geçiyorum.

Platforms: Eklediğiniz platformları listeler. Android, Ios

Plugins: 3.Parti eklediğiniz cordova eklentileri burada listelenir (cihazın konumuna erişebilme, kamera görüntüsü alabilme vs.vs)

Resources: Uygulamanızın iconu ve açılırken gözükeceği ekran görselleri bulunur. Android ve Ios için farklı çözünürlükte klasörlenmiştir.

SCSS: SASS yazacak olursanız bu kısımda yazabilirsiniz içinde temel ionic’in atadığı bir sass dosyası vardır.

WWW: Bizim en çok kullanacağımız klasördür. CSS Dosyalarımız, resimlerimiz, javascript ve html dosyalarımızın bulunduğu kısımdır.

Javascript içinde;

App.JS

Bizim uygulamamızın URL yapısını açıldığında neler olacağını gibi temel yapıları tuttuğumuz dosyamız. Biz genelde burada platformu tutarız controller ile app.js arasındaki bağlantıları hallederiz ve bu kısımda uygulama açıldığında neler olacağını yazarız.

Controller.JS

App.JS’te oluşturduğumuz url yapılarında kullanacağımız controller’ları oluşturuyoruz-Bu kavramlara çok uzaksanız AngularJS Eğitimi Derslerinde fikir sahibi olabilirsiniz-

Controller kısmında atıyorum giriş sayfamız var giriş yap butonuna tıklandığında girilen bilgileri alma belli bir yere gönderme ve gelen cevaba göre işlem yapma şeklinde bir sistem düşünebiliriz.

Buraya kadar her şey güzelse şimdi uygulamamızı tarayıcıda göstermek istiyoruz nasıl olduğuna bakalım yine terminal ekranında;

ionic serve

Komutunu görebiliriz. Android ve iOS platformları için tek pencerede ayrı ayrı görmek isterseniz;

ionic serve –lab

şeklinde kullanabilirsiniz.

Bu dersimizden bu kadar videoyu aşağıya ekliyorum. Diğer derslerde görüşmek üzere Youtube kanalıma abone olmayı unutmayın!

Ders 1 dosyalarını indirmek için tıklayın.

Tüm derslerin dosyalarına erişmek için tıklayın.
 

Bir Cevap Yazın