Merhabalar
Bu hafta , geçen hafta oluşturduğumuz ionic uygulamasının içini doldurup kendi uygulamamızı oluşturmaya çalışacağız. Bunun için öncelikle bir editör seçmemiz gerkiyordu ben Visual Studio Code 'u tercih ettim yine siz istediğiniz IDE'yi seçebilirsiniz. İlk Önce Visual Studio Code 'u bilgisayara kurmak ile başlayalım.
Visual Studio Code 'un anasayfasına girip (geçen haftaki yazımda bağlantısı var) indirme işlemine başlıyoruz. Uzantısı .exe olan dosyayı indiriyoruz ve çalıştırmaya başlıyoruz.
Next ile adımları ilerleyerek gidiyoruz. Editörümüzün kullanmak istediğimiz dilini seçip (English malesef Türkçe seçenek yok :/) ilerlediğimizde birkaç adım sonrası programı bilgisayarda nereye kaydetmek istediğimizi seçiyoruz. Sonrasında next -> next ile kurulumumuz tamamlanıyor. İndirme işlemi bittiğinde program açılırken web sayfasından da VS Code'da neler olduğuna size ne gibi kolaylıklar sağladığına dair bilgilendirme amaçlı bir sayfa açılıyor.İsterseniz bu sayfayı inceleyebilirsiniz.
Editörümüzü inceleyecek olursak karşımıza şöyle bir giriş sayfası çıkıyor.(soldaki dosya ionic app'imin dosyası )
Open Folder yazan sekmeden cmd ile oluşturduğumuz uygulamamızın kayıtlı olduğu klasöre girip uygulamamızın dosyasını açıyoruz. src yazan kısımı açtığımızda index.html karşımıza çıkıyor. Bu bizim ana sayfamız. src -> app seçeneğine tıkladığımızda 'home ve list' sayfalarımız karşımıza çıkıyor. Uygulamamıza resimler eklemek istiyorsan src -> app -> assets kısmına resimlerimizi yerleştirebiliriz.
Daha önceden oluşturduğumuz app 'imiz biraz değiştirelim. Bir cafe'nin uygulamasını yaptığımızı ve bu uygulamada cafede ne tür yiyecek içecek ve tatlılar olduğunu gösteren sayfalar olduğunu düşünelim ve bir de giriş sayfası. Bunun için uygulamamızda app klasörümüzün altında app.component.ts dosyasına girelim.
Bu sayfada sidemenude bulunan sayfaları düzenleyeceğiz. public appPages diye bir array oluşturulmuş ,bu arraydeki her bir eleman sidemenü'deki bir sayfayı temsil ediyor. "title" sidemenüde görülecek olan ismi , "url" üstine tıklanınca nereye gideceği , "icon" da title'ların yanında görülecek icon'u söylüyor. İonic de kullanabileceğiniz bir sürü icon var.
Yukarıdaki kodlarda da görüldüğü gibi yeni sayfalarımızı eklemiş olduk(url'lerine şu anlık dokunmadık sadece sidemenüdeki görünümüne bakacağız şimdilik) .Buna bakmak için yine cmd den yardım alacağız. cmd'de uygulamamızın olduğu klasöre girip oradan ionic serve'u çağırmamız lazım bunun için kolay bir yöntem var. Uygulamamızın olduğu klasörü bilgisayarımızda buluyoruz, klasör dizinini gösteren kısma tıklıyoruz(tıklayınca o satır taranacaktır) ve cmd yazıp enter'a tıklıyoruz. Böylece cmd de uygulamamızın olduğu klasöre girmiş oluyoruz . Ardından ionic serve yazarak uygulamamızı web'den görüntüleyebiliriz.
Uygulamamızın şu anlık görünümü bu şekilde oluyor.
Bu hafta bize kod yazımını kolaylaştıracak bir ideyi yüklemeyi , ide hakkında kısa bilgiler ve uygulama için küçük değişiklikler yaptık. Uygulamamız için navigasyon yöntemlerini gelecek hafta inceleyeceğiz.
Hoşçakalın..
Yaralandığım Kaynaklar:
Yorumlar
Yorum Gönder