Uygulamamızı geliştirelim -1

   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şturuyor. Sayfalarımızı bu yolla daha sıkıntısız bir şekilde oluşturabiliriz.

   Sayfalarımızı oluşturduktan sonra sayfaya her tıklandığında kendi içeriğine ulaşabilmesi için navigasyon yapma kısmına geçebiliriz. Bunun için  app.componnet.spec.ts kısmına geliyoruz.  

   Aşağıdaki gibi  toEqual() metodunun içine kaç tane sayfamız varsa onu yazacağız ve  menuItems'lara da sayfalarımızı atayacağız.

  expect(menuItems.length).toEqual(4);
    expect(menuItems[0].textContent).toContain('Home');
    expect(menuItems[1].textContent).toContain('Yemekler');
    expect(menuItems[2].textContent).toContain('Icecekler');
    expect(menuItems[3].textContent).toContain('Tatlilar');

   Aynı sayfada menuItem'ları tanıttıktan sonra menuItem'lara url lerini atayacağız.

expect(menuItems.length).toEqual(4);
    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/yemekler');
    expect(menuItems[2].getAttribute('ng-reflect-router-link')).toEqual('/icecekler');    
    expect(menuItems[3].getAttribute('ng-reflect-router-link')).toEqual('/tatlilar');

   Bu işlemleri yaptıktan sonra sayfalarımız yönlendirme özelliklerine sahip olmuş oldu. Şimdi sayfalarımızın içerisini doldurmaya çalışalım.
    İçecekler sayfasının içerisine içecek resimleri ekleyelim. Öncelikle  kullanacağımız resimleri src dosyasının içindeki assets klasörüne atmalıyız.Ben içecekler için bu klasörün içerisine icecekResimleri diye ayrı bir dosya oluşturdum ve içerisine resimleri attım. Daha sonra .page.html uzantılı sayfaya gelerek sayfanın içeriğiyle oynamaya başladım. Bu sayfada ion-toolbar tagının içerisine

    <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
    </ion-buttons>

bu kodu ekleyerek içecekler sayfasına menü simgesini yerleştirmiş oluyoruz. İçeriklerimizi sayfaya yerleştirmek için ionic component'larından  Cards opsiyonunu kullanacağız . Kartlar sayfada önemli içerikleri görüntülemek için kullanılırlar. Sayfada vurgulamak istediğimiz yerleri bir kutucuk içerisine alarak gölgelendirme ile içeriğimizi ön plana çıkarır. Yerleştirmek istediğimiz tüm resimlerimizin birer birer ayrı kutucuklar içerisinde durması daha göze hitap eder diye düşünüyorum.
 
    Sayfamızın içeriğini oluşturmak için <ion-content padding> tagımızı açıyoruz ve sayfamızın içerisinde ne yer almasını istiyorsak hepsini bunun içerisine yazıyoruz.Artık resimlerimizi ekleyebiliriz .  <ion-card> </ion-card> tagımızın içerisine resmimizin src'sini tanımlıyoruz.

<ion-content padding>
  <ion-card>
    <img src="src\assets\icecekResimleri\cappuccino.jpeg" >
    <p style="text-align: center;color: rgba(61, 12, 12, 0.993)">Cappuccino</p>
  </ion-card>
  <ion-card>
    <img src="src\assets\icecekResimleri\Mocha.jpg" >
    <p style="text-align: center;color: rgba(61, 12, 12, 0.993)">Mocha</p>
  </ion-card>
  <ion-card>
    <img src="src\assets\icecekResimleri\sicak-cikolata.jpg" >
    <p style="text-align: center;color: rgba(61, 12, 12, 0.993)">Sıcak Çikolata</p>
  </ion-card>
  <ion-card>
    <img src="src\assets\icecekResimleri\türk kahvesi.jpg" >
    <p style="text-align: center;color: rgba(61, 12, 12, 0.993)">Türk Kahvesi</p>
  </ion-card>
</ion-content>

  Fotoğrafların altına da içecek isimlerini yazıyoruz ve sayfamız resimlerle donatılmış oldu. Şimdi uygulamamızı farklı bir ortamda görelim. İonic'in kendisinin sunduğu lab ortamı bulunmakta .Burada  android ios ve windows  simülatörlerinin üçü de bulunmakta. Oluşturduğumuz uygulamayı tüm platformlarda nasıl göründüğünü eş zamanlı olarak görebiliriz.
   Bunun için visual studio code 'daki terminalimize

      ionic serve --lab 

    yazıyoruz ve karşımıza bir web sayfası açılıyor.

  Uygulamamızın son hali bu şekilde . Gelecek hafta uygulama üzerinde değişiklikler yapmaya devam edeceğiz.
   Hoşçakalın.




   Yararlandığım Kaynaklar:
    https://ionicframework.com/docs/components/#cards
   (ion-card kullanımıyla ilgili daha fazla bilgi almak için)