Ionic

  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   #ebbcad Base (rgb)   Rgb(235,188,173) Contrast   #ffffff Contra

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 chrome'unuza ekle

    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 olursak :      → Kullanıcının e-mail adresiyle

   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 yine

   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 module.ts , page.html , page.scss ,page.spec.ts  ve page.ts içeriklerini oluştur