Merhabalar
Geçen haftaki yazımızda mobil uygulamaların çeşitlerinden kısa bir kesit ve ionic hakkında bilgiler vermiştik . Bu hafta bilgisayarımıza kurmamız gereken bileşenleri konuşacağız.
İonic framework'ünü kurmadan önce bilgisayara kurulması gerekenler arasında NodeJs bulunuyor. Peki neden NodeJs'i kurmak zorundayız diye düşünebilirsiniz. Ionic Framework ve bağımlılıkları Node Package Manager (npm) üzerinden indirilebilir , ancak npm'i kullanmak için Node.JS kurulumu yapmamız gerekiyor.
1- Bilgisayara NodeJS kurulumu
NodeJs 'in kendi sayfasından nodejs.org 'dan "Recommended For Most Users" seçeneğini kurdum ben kendi bilgisayarıma. Sayfaya girince bilgisayarınız 64 bitlikse 64 bitlik olan versiyonu size sunuyor.
1- Bilgisayara NodeJS kurulumu
NodeJs 'in kendi sayfasından nodejs.org 'dan "Recommended For Most Users" seçeneğini kurdum ben kendi bilgisayarıma. Sayfaya girince bilgisayarınız 64 bitlikse 64 bitlik olan versiyonu size sunuyor.
Ardından nodeJs 'in bilgisayarınıza kurulup kurulmadığını cmd'yi açıp kontrol edebilirsiniz. Cmd ye aşağıdaki kod satırını yazdığınızda eğer NodeJs yüklenmişse bilgisayarınızda kaçıncı versiyonun yüklü olduğunu gösterecek.
node -v
Burada bende yüklü olan versiyonun 8.12.0 olduğunu söylüyor.
2 - Cordova ve Ionic'in kurulumu
Gerek proje oluştururken gerek projeye component eklerken gerek projeyi derlerken ve çalıştırırken Command Line (komut satırı) kullanıyoruz. Bunun için tekrardan cmd'yi kullanarak cornova ve ionic kurulumunu sürdürüyoruz.Bunun için aşağıdaki kodu yazıp çalıştırıyoruz.
npm install -g cordova ionic
Görseldeki gibi indirme işlemini gerçekleştiriyor.
3 - Ionic için Editor ya da IDE seçimi
Bize ionic kodlarımızı yazmak ve tahminlerle yazımını kolaylaştırmak için ortam saylayan birkaç editör var bunlardan araştırdığıma göre birkaçı şu şekilde:
indirmek istediğimiz IDE/Editör'ü seçip kendi sayfalarından indirebiliriz.
IDE veya Editor kurmadan da cmd üzerinden ionic app oluşturulabilir.
Cmd'de uygulama oluştururken uygulamamızın nerede hangi klasörde olmasınıistediğimizi tanımlıyoruz ilk önce
cd desktop/ionic/apps
komutu ile masaüstündeki ionic klasörümün içindeki apps klasöründe uygulamayı oluşturmasını istedim.Ardından
start ionic Myapp sidemenu
komutunu yazdığımızda adı 'Myapp' olan sidemenü'lü görünüme sahip bir uygulama oluşturmaya çalışır.
Bu kodu yazdığımızda Ionic 3 app oluşturmaya çalıştığımı Ionic 4 'ü denemek isteyip istemediğimi sordu ve (y/n) seçenklerinden birini seçmemi istedi.YES seçeneğini seçtiğimde karşıma bu ekran geldi:
Burada uygulamamızı cordova ile ios ve android native olarak entegre etmek istiyor musunuz diye soru yöneltiyor ve evet diyoruz. Yüklemelerden sonra "Install the free Ionic Pro SDK and connect your app? " sorusunu soruyor ve hayır diyoruz. Ardından uyglamamızı oluşturduğumuz klasöre girip programımızı çalıştırıyoruz.
cd Myapp
ionic serve
(Myapp benim kendi verdiğim uygulamamın adı.)
Projemiz derleniyor ve bir web sayfası şeklinde açılıyor.Bunun iphone cihazda nasıl olduğunu görmek için sayfada sağ tık -> incele den çıkan geliştirici sayfasında toggle device toolbar a tıklayıp (aynı zamanda ctrl+shift+M tuşlarına basınca da oluyor) telefon görünümüne alıp responsive seçeneğini tıklayıp istediğiniz device'daki görüntüsüne bakabilirsiniz.
Bu yazımızda ionic için kurulması gereken component'lar ve nasıl kurulması gerektiği üzerine konuştuk . Bir de küçük bir uygulama geliştirip ionic uygulamalarının cmd ile nasıl yazıldığını inceledik. Gelecek haftaki yazımızda IDE/Editörlerden birini seçip onun üzerinde çalışmalar yapmayı planlıyorum.
Gelecek hafta görüşmek üzere.
Yararlandığım Kaynaklar:
* http://teknolojikbakis.com/ionic-framework-kurulumu/
* https://ionicframework.com/docs/developer-resources/editors_and_ides/
node -v
Burada bende yüklü olan versiyonun 8.12.0 olduğunu söylüyor.
2 - Cordova ve Ionic'in kurulumu
Gerek proje oluştururken gerek projeye component eklerken gerek projeyi derlerken ve çalıştırırken Command Line (komut satırı) kullanıyoruz. Bunun için tekrardan cmd'yi kullanarak cornova ve ionic kurulumunu sürdürüyoruz.Bunun için aşağıdaki kodu yazıp çalıştırıyoruz.
npm install -g cordova ionic
Görseldeki gibi indirme işlemini gerçekleştiriyor.
3 - Ionic için Editor ya da IDE seçimi
Bize ionic kodlarımızı yazmak ve tahminlerle yazımını kolaylaştırmak için ortam saylayan birkaç editör var bunlardan araştırdığıma göre birkaçı şu şekilde:
indirmek istediğimiz IDE/Editör'ü seçip kendi sayfalarından indirebiliriz.
IDE veya Editor kurmadan da cmd üzerinden ionic app oluşturulabilir.
Cmd'de uygulama oluştururken uygulamamızın nerede hangi klasörde olmasınıistediğimizi tanımlıyoruz ilk önce
cd desktop/ionic/apps
komutu ile masaüstündeki ionic klasörümün içindeki apps klasöründe uygulamayı oluşturmasını istedim.Ardından
start ionic Myapp sidemenu
komutunu yazdığımızda adı 'Myapp' olan sidemenü'lü görünüme sahip bir uygulama oluşturmaya çalışır.
Bu kodu yazdığımızda Ionic 3 app oluşturmaya çalıştığımı Ionic 4 'ü denemek isteyip istemediğimi sordu ve (y/n) seçenklerinden birini seçmemi istedi.YES seçeneğini seçtiğimde karşıma bu ekran geldi:
Burada uygulamamızı cordova ile ios ve android native olarak entegre etmek istiyor musunuz diye soru yöneltiyor ve evet diyoruz. Yüklemelerden sonra "Install the free Ionic Pro SDK and connect your app? " sorusunu soruyor ve hayır diyoruz. Ardından uyglamamızı oluşturduğumuz klasöre girip programımızı çalıştırıyoruz.
cd Myapp
ionic serve
(Myapp benim kendi verdiğim uygulamamın adı.)
Projemiz derleniyor ve bir web sayfası şeklinde açılıyor.Bunun iphone cihazda nasıl olduğunu görmek için sayfada sağ tık -> incele den çıkan geliştirici sayfasında toggle device toolbar a tıklayıp (aynı zamanda ctrl+shift+M tuşlarına basınca da oluyor) telefon görünümüne alıp responsive seçeneğini tıklayıp istediğiniz device'daki görüntüsüne bakabilirsiniz.
Uygulamamızın son hali bu şekilde
Bu yazımızda ionic için kurulması gereken component'lar ve nasıl kurulması gerektiği üzerine konuştuk . Bir de küçük bir uygulama geliştirip ionic uygulamalarının cmd ile nasıl yazıldığını inceledik. Gelecek haftaki yazımızda IDE/Editörlerden birini seçip onun üzerinde çalışmalar yapmayı planlıyorum.
Gelecek hafta görüşmek üzere.
Yararlandığım Kaynaklar:
* http://teknolojikbakis.com/ionic-framework-kurulumu/
* https://ionicframework.com/docs/developer-resources/editors_and_ides/
Yorumlar
Yorum Gönder