Ionic Framework Öğreniyoruz

3 dakikada okuyabilirsiniz. • Ionic Framework • 15.01.2018 • 12:27 • 11.075 Okunma

Merhaba değerli arkadaşlar. Mutlu dinamik ve sendromsuz Pazartesiler dilerim 🙂 Haftanız güzel başlasın umarım. Bugün yeni bir karar ile Ionic Framework sıfırdan öğrenmeye karar vermiş bulunuyorum. Bundan tam 1 * 2 yıl önce Ionic Framework’e başlamıştım fakat zaman bulamadığım için bildiklerimi ileriye taşıyamadım.

Biliyorsunuz ben tasarımcıyım. Bir alanda uzman olmak ilk prensibim fakat yaptığım projeleri mobile taşıyamadığım zaman %70 kitleyi kaybetmiş oluyorum. En azından full Ios / Android mobil app developer olmak istemesemde en azından projelerimi api’ye döküp app içerisinde işlem yaptırmayı öğrenmek istiyorum.

Ionic Framework nedir ?

Ionic Framework Hybrit uygulama yazabileceğimiz bir framework diyebiliriz. Html, css, Javascript, Jquery kodlama dilleri ile çalışan uygulamaları kolayca yapabilmemize olanak sağlıyor. Ionic Framework hakkında bütün bilgi, dökümana kendi sitesinden ulaşabilirsiniz. ( Bu detay konulara girmeyeceğim çünkü yeni başlıyorum. Blogumda Ionic hakkında ne öğrendiysem kaleme alıp örnek kodlar ile paylaşacağım ve Türkçe kaynak yapmaya çalışacağım )

Ionic Framework kullanılarak uygulama yazan firmalarda lider konumda markalarda görmek mümkün. Bu nedenle bile geliştirmesi cazip gelebiliyor. Kendini sürekli güncelleyen ve Update yapan bir framework.

Tek kod 3 platform!

App projenizi oluşturup kodlamaya başlıyorsunuz. Tamamladığınızda tek kod ile Android / Ios ve Windows Phone uygulamalarının çıktılarını alıyorsunuz. Bu harika değil mi ? ( Ios için Apple bilgisayar / X Code gerekli ) Bu ibareyi ilk duyduğumda çok şaşırmıştım ve merakım o günden sonra başlamıştı.

Dolu dolu Component

Back end geliştiricileri Componentlere alışıktır. Ionic Framwork’te kendi kütüphanesinde barındırdığı componentler mevcut. Hepsine buradan bakabilirsiniz.

Bilgisayarımıza Ionic Framework nasıl kurabiliriz ?

Fazla lafı uzatmadan kurulum aşamalarından bahsetmek istiyorum.

Node JS bilgisayarımıza buradan indirip kuruyoruz.
Kurulum tamamlandıktan sonra Java Development Kit (JDK) 8 kuruyoruz.
Java JDK kurulumu tamamlandıktan sonra Android Studio kuruyoruz.

Program kurulumları tamamlandıktan hemen sonra bilgisayarımızın arama kutusuna ” cmd ” açıp komut panelini açıyoruz. Hemen aşağıda ki komut ile Cordova Ionic Framework’u bilgisayarımıza kuruyoruz;

npm install -g cordova ionic

Bu işlem bilgisayarınızın işlemci gücü / internet hızınız ile orantılı olarak değişkenlik gösterebilir. Tüm işlemler başarıyla tamamlandığında CMD komutunda SUCCES ibarelerine denk geleceksiniz.

Hemen ilk APP Projemizi oluşturalım

Az önce ki cmd komut panelini kapatıp tekrar sıfırdan açalım ve CMD komut satırında app dizin yolumuzu masaüstüne indirgeyelim. Aşağıdaki kod ile C:// dizini içerisinde app oluşturabilirsiniz ;

cd..

Bu komut sonrası artık işlem dizinimiz C:// …

Ionic Framework bize hali hazırda 3 tip layout sağlıyor.

İçeisinde bizim oluşturacağımız html / css gibi dosyalar olacak ise blank versiyonu kullanabilirsiniz. Sırası ile yukarda görünenlerin cmd komut kodlarını paylaşıyorum ;

ionic start GokhanKara blank

Alt tab menülü bir App oluşturmak istiyorsanız;

ionic start GokhanKara tabs

Soldan açılır menülü bir App oluşturmak istiyorsanız;

ionic start GokhanKara sidemenu

Hazır kodlanmış Ionic App’lerini marketten satın alıp kodları inceleyebilirsiniz.

Şeklinde App oluşturabilirsiniz. Oluşturduktan sonra dosyalarınızı ” \src\pages\ ” yolunda bulabilir ve kodları düzenleyebilirsiniz. Bugün daha fazla kafa karıştırmak istemiyorum. Sadece app oluşturmak konusunda bilgiler paylaşıyorum. Bir sonra ki yazımda ise oluşturduğumuz App’e Android dahil etmeyi ve Build ( Çıktı almak ) işleminden bahsedeceğim.

Umarım çok faydalı bir seri olur, çok heyecanlıyım 🙂 Çünkü Mobil uygulama günümüzün olduğu gibi geleceğin de dijital çağı diyebiliriz

Ionic Framework hakkında öğrendiklerimi live olarak kodlayıp kod blokları ile paylaşacağım. Bu konuda sizlerinde desteklerini bekliyorum. Sizinde kullandığınız kod blokları var ise lütfen bana mail olarak gönderin. Detayları ile açıklayalım ve hep birlikte öğrenelim.

Bu yazımı favorileri listene ekle

Bu yazımda illegal işlem ya da hatalı konulardan bahsettiğimi düşünüyorsanız benimle iletişime geçebilirsiniz