Ionic

 Merhabalar  Bu hafta oluşturduğumuz bir uygulamaya fab-icon 'u nasıl eklenir ona bakacağız.  Geçen haftalarda oluşturduğumuz Cafe uygulamamız üzerinden göstermeye çalışalım.Bu uygulamamızda cafe hakkında genel bilgi veren bir sayfamız olsun içinde fotoğrafı , hakkında kısa bilgi  ve sosyal medya hesaplarına ulaşabilmek için bir tane de fab iconumuz olsun . 🔹En başta sayfamızı oluşturarak başlayalım.      ionic g page puga sayfa ismimi, tanıtacağım cafe ismi olarak belirledim. Böylece sayfam oluşmuş oldu. puga.page.html uzantılı sayfama gidip içeriğimi hazırlamaya başlıyorum. İçeriğimi ion-content taglarının arasına yazıyorum öncelikle bir resim görünsün altında da bilgiler verilsin istiyorum . Resmi uygulamanın tanıması için    src→assets klasörünün içerisine taşıyorum. 🔹Resmimizi tanımlayalım <img src= "/src/assets/icecekResimleri/e427d7c9262063a424d0b89f2b36eb1c_1446286155.jpg" >  Resmin ardından cafe...

  Merhabalar   Uygulamamızı geliştirirken daha öncesinde gördüğümüz gibi buton ya da arka plan rengi değiştirmek istediğimizde karşımıza 9 renk seçeneği geliyordu (Primary,Secondary,Tertiary,Success,Warning,Danger,Dark,Medium,Light). Bunlardan hariç bir renk seçmek istesek o zaman ne yapacağız?   Bu hafta uygulamalarımızda kullanmak için istediğimiz rengi oluşturup bunu uygulamada nasıl kullandığımızı göreceğiz.   Renk Özellikleri  Her rengin aşağıda sıralanan özellikleri vardır: ⭐base        :baz alınan renk(ana rengimiz) ⭐contrast  : base rengin tersi (genelde beyaz renk olarak alınıyor.) ⭐shade      :base rengin bir ton koyusu ⭐tint          :base rengin bir açık tonu   Rengimizi tanımlarken hex değerinden hariç bir de rgb değerini tanımlıyoruz.Bunun nedeni tüm browser'ların hex değerini tanıyamama sorunsalıdır.   örnek olarak gösterecek olursak: Base ...

Merhabalar Bu hafta geliştirmekte olduğumuz uygulamamıza biraz daha eklentiler yapıp geliştirelim diye düşünüyorum. Uygulamamızda içecekler sayfasında seçtiğimiz herhangi bir içeceği sepete eklemesini sağlamak için 'Add' butonu eklemiştik. Kullanıcıya bu siparişin sepete eklenip eklenmediğini bildirmek için bir geri bildirim sağlayabiliriz. Bunun için butona 'Toast component' ekleyebiliriz. Toast component ne diye açıklamak gerekirse: Toast Component  Kullanıldığı uygulamada, uygulamanın üzerinde görünen ince bir bildirimdir. Kullanıcıya kısa bir mesaj göstermek için kullanılır.Genellikle yaptığı işlemlerinin olup olmadığına dair kullanıcıya geri bildirim olarak gönderilir. Bu mesaj toast bileşeninin içerisinde tanımladığın konuma göre görünür. Bu konumlar 'top', 'bottom' veya 'middle' olabilir. 4 tane metodu 14 tane de özelliği (properties) vardır. Methodlar:  dismiss()         → toast mesajı gösterildikten sonra yok olmasını sağlar.  ...

 Merhabalar  Geçen hafta uygulamamız için bir login sayfası nasıl oluşturulur incelemiştik . Bu hafta butonlara bastığımızda sayfa yönlendirmesini nasıl yapabiliriz bunu üzerine biraz konuşacağız.    Sayfaların yönlendirilmesi için gerekli içerikler app-routing.module.ts dosyasında tanımlanır. Burada , sayfalara ulaşmak için kullancak url tanımlamaları yapılır. path: 'yemekler' , loadChildren: './yemekler/yemekler.module#YemeklerPageModule'    Burada  'loadChildren' özelliğiyle yemekler dosyasının içerisine git sayfanın görünmesi için gerekli olan componentı yükle anlamına getiriyor. Path ile de navigasyon işlemi yaparken url olarak kullanılacak isimi tanımlıyoruz.   Yukarıdaki kod parçacığı normalde CLI dan sayfa oluşturduğumuzda ( ionic g page sayfaAdı  kodunu yazdığımızda) kendiliğinden app-routing.module.ts sayfasında oluşuyor.   Chrome için ekleyebileceğiniz yönlendirme haritasını gösteren ' Augury '  eklentisini...

    Merhabalar     Bugün hep birlikte ,yaptığımız uygulama için bir 'Login' (giriş) sayfası oluşturalım istiyorum. Çoğu mobil uygulamada olduğu gibi bir uygulamanın giriş sayfasının olması Kullanıcı tarafından bakıldığında , üyelerin o uygulamayı daha çok benimsemesini ; Uygulama aracılığıyla kullanıcılara hizmet sunan birimler için de daha çok güvenliği sağlıyor gibi geliyor bana.   Bir login sayfasında neler olduğunu düşünecek olursak : e-mail ile giriş imkanı sağlayan uygulamalar için *e-mail alanı ya da telefon ya da kullanıcı adıyla giriş sağlayanlar için de ilgili text'i girebileceğimiz bir alan  ve kullanıcının daha önceden belirlediği sisteme giriş için gerekli olan *şifre. Ayrıca giriş yapmak için girdiğimiz bilgileri doğrulamak üzere bilgileri uygulamanın ilgili kontrol birimine gönderen  * button bileşenimiz bulunuyor.    Arayüzü basit olmasına karşın gayet önemli bir sayfadır.     Tasarımı hakkında konuşacak olurs...

   Merhabalar    Geçen hafta uygulamamızın içecekler sayfasına resimleri nasıl yerleştireceğimize bakmıştık. Ionic uygulamalarında görünüş için en çok kullanılan component'lardan biri olan ion-card ları kullanarak resimlerimizi yerleştirdik. Bu hafta yerleştirdiğimiz içecek resimlerine tıkladığımızda karşımıza çıkacak olan sayfanın tasarımı ile biraz uğraşalım istiyorum.    Bazı  cafelere gittiğimizde içecek istediğimizde bize 'küçük' , 'orta' ve 'büyük ' seçeneklerini sunup bunların arsından bir seçim yapmamızı isterler. Bunun için bizim uygulamamızda da bu seçimi yapması için bir içerik oluşturabiliriz . Bunun için checklist kullanabileceğimizi düşünüyorum.   Uygulamamızın tasarımına geçecek olursak , yine tasarım için en kullanışlı olan ion-cardları kullanabiliriz diye düşünüyorum. Yeni sayfamızı visual studio code'da oluşturuyoruz.( ionic g page secondPage diyerek adı secondPage olan sayfayı oluşturmuş oldum.). Bir ionic card'ın içine yi...

   Merhabalar    Geçen hafta uygulamamızda sidemenü için birkaç sayfa eklemiştik. Sayfalara uygun icon'larımızı seçtik ve sidemenüdeki görünümüne bakmıştık. Bu hafta sayfaları yönlendirmeyi ele alacağız.Öncelikle sayfa oluştururken komut satırında yazabildiğimiz bir kod ile daha kısa yoldan ve içerisindeki içeriklerle birlikte oluşturabiliriz.    Bilgisayarda cmd yi açmadan , visual studio code'un kendi cmd'sini kullanabiliriz.Bunu açmak için de sol üst köşedeki " View " den ' Terminal ' seçeneğini tıklıyoruz ve artık cmd de yazacağımız kodları burada yazmaya başlayabiliriz.    Yeni bir sayfa oluşturmak istiyorsak uzun versiyon olarak:        ionic generate page pageName    Ya da daha kısası            ionic g page pageName     yazabiliriz.Böylece projenizin olduğu klasördeki app'in içine pageName olarak adlandırdığınız bir klasör oluşturup içerisinde modul...

  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 am...

  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.    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...

       Günümüzde cep telefonu kullanımının ne kadar yaygın olduğunu ve her an yanımızda  olduğunu düşünürsek , uygulama geliştiriciler için üzerine gidilen bir alan olarak mobil uygulama  geliştirme karşımıza çıkıyor. Neredeyse her firmanın web uygulamasından hariç bir de mobil  alanında bir uygulama oluşturmasından bu alanın ne kadar tercih edilir ve gerekli olduğunu görüyoruz.        Bu alan karşımıza iki seçeneği sunuyor:               *HYBRİT               *NATİVE                Biz bu yazımızda Hybrit ile uygulama geliştirme üzerine gideceğiz.                Hybrit uygulama ve native uygulamaların avantaj ve dezavantajları bulunmakta .Bunun için hangi uygulama geliştirme daha iyi diye değil de benim uygulamam için hangisi daha uygun diye düşünmemiz gerekiyor....