Devnot

Cordova ve Framework7 ile SPA

8 Haziran 2017 Mobil 6 yorum

Cordova loves F7
Cordova serimizin önceki yazısında bir Cordova projesinin nasıl oluşturulduğundan bahsetmiştim. Bu yazıda ise Framework7 ile SPA (Single Page Application)’ın nasıl oluşturulacağını inceleyeceğiz. Öncelikle SPA’nı ne olduğuna kısaca bakalım.

SPA (Single Page Application – Tek Sayfalı Uygulama) Nedir?

Tüm içeriğin tek bir temel sayfadan oluştuğu uygulamalara Single Page Application(SPA) diyoruz. Sayfalar arasındaki geçişler, geleneksel web sayfalarındaki gibi veri ile birlikte HTML sayfansının tamamının getirilmesi yerine, aynı sayfa üzerindeki farklı bir alanın görüntülenmesi ve ilgili JSON verisi sunucudan getirilmesi gerçekleştiriliyor. Bu şekilde sunucu daha az yoruluyor, network trafiği düşüyor ve sayfa geçişleri çok daha hızlı oluyor. Aşağıdaki diyagramda bahsettiğim olayı görsel olarak kavrayabilirsiniz:

Geleneksel Uygulamalar vs. SPA

Kendi uygulamamızda da Cordova’nın bizim için oluşturduğu index.html’den başka bir sayfa kullanmayacağız ve verilerin JSON olarak uygulamamıza getirilmesi için AJAX istekleri ile sunucuyla haberleşeceğiz.

Framework7 nedir?

Framework7 logosuFramework7, HTML, CSS ve JavaScript kullanarak kolay ve hızlı bir şekilde iOS ve Android uygulamaları oluşturulmasını sağlayan bir kütüphanedir. Framework7’yi kullanarak tıpkı bir web sayfası hazırlar gibi kolayca native görünümlü Android ve iOS uygulamalar geliştirebiliriz. UI bileşenleri sunar ve bünyesinde gelen Dom7 gibi hafif kütüphanelerle birlikte JQuery gibi üçüncü parti kütüphanelere ihtiyaç duymadan uygulamamızı yalın bir şekilde geliştirebiliriz. Bonus olarak Template7 adında kendi templating engine’i bile var.

Framework7’yi Vladimir adında Rus bir arkadaşımız neredeyse tek başına geliştiriyor. Eğer siz de projeye katkıda bulunmak istiyorsanız GitHub sayfasından pull request’lerinizi gönderebilir veya Patreon‘dan destek olabilirsiniz.

Framework7 ile ilgili ayrıntılı bilgi ve örnekleri framework7.io‘dan inceleyebilirsiniz.

Framework7 ile SPA Geliştirme

Önceki yazıda oluşturduğumuz merhabaDunya uygulamasından ilerleyebiliriz. www/index.html dosyasını dilediğimiz bir editörde açalım. Yorum satırları haricinde en yalın haliyle aşağıdaki gibi bir dosya ile karşılaşacağız:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

meta tag’lerini inceleyelim:

  • Content-Security-Policy: XSS açıklarının engellenmesi için eklenir. Bu sayede belirtilen kaynakların dışındaki harici kaynaklardan JavaScript komutlarının yüklenmesi ve çalıştırılması engellenmiş olur. Ayrıca eval() fonksiyonu gibi tehlikeli fonksiyonlar da engellenmiş olur.
  • format-detection: telephone=no: HTML içerisinde yer alan telefon numaralarının link olarak gösterilmesini engeller.
  • msapplication-tap-highlight: Windows 8 ve üstü cihazlarda yazıların seçilmesini engeller, web’in aksine daha native bir hava katar.
  • viewport: Cihazın ekran çözünürlüğüne bağlı kalmaksızın görsellerin her cihazda aynı büyüklükte görüntülenmesini sağlar.

Not: Alt kısımıda <script> tagleri arasında cordova.js dosyasının bulunduğunu görüyoruz. Bu dosya aslında sistemimizde mevcut değil ve index.html’i tarayıcımızdan çalıştırdığımızda console’da 404 Not Found hatasını görebiliriz. cordova.js dosyası mobil cihazda çalışma zamanı oluşan bir dosya olduğu için 404 hatasını göz ardı edebiliriz.

Bower Kullanarak Framework7 ile İlgili CSS ve JS Dosyalarını Edinme

Dosyaları sistemimize yüklemek için Bower paket yöneticisini kullanabiliriz. Aşağıdaki komut ile bower’ı sistemimize yükleyelim:

npm install -g bower

Daha sonra www dizinine giderek aşağıdaki komut ile Framework7’yi dosya sistemimize indirelim:

bower install framework7

Bower, Framework7 Yükleme

Komutu çalıştırdığımızda www dizini içerisinde bower_components dizini altında framework7 dizinini görmüş olacağız. Şimdi projeyi oluşturduğumuzda gelen div elementlerini silelim ve ilgili CSS ve JS dosyalarının yolunu index.html içerisine ekleyelim:

...
        <link rel="stylesheet" type="text/css" href="bower_components/framework7/dist/css/framework7.material.min.css">
        <link rel="stylesheet" type="text/css" href="bower_components/framework7/dist/css/framework7.material.colors.min.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Merhaba Dünya</title>
    </head>
    <body>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="bower_components/framework7/dist/js/framework7.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Not: Ben burada basitlik olması açısından sadece material tasarım (Android) ile ilgili CSS dosyalarını ekledim. Daha sonra uygulamamızı hem Android hem de iOS görünümü alacak şekilde yapılandıracağız.

index.html dosyamızı tarayıcımızda açalım. div elemanlarını sildiğimiz için cordova logosu ve yazılar kalkmış ve gri gradient’li bir ekran bizi karşılamış görünüyor. css/index.css dosyasının içindeki elemanları tamamen temizleyelim ve tertemiz bir sayfa ile uygulamıza başlangıç yapalım.

Uygulamaya İçerik Ekleme

Framework 7 ile ilgili HTML tag’lerini ekleyip Navbar ve içerik ekleyelim:

...
    <body>
        <div class="statusbar-overlay"></div>
        <div class="views">
            <div class="view view-main" data-page="index">
                <div class="pages">
                    <div data-page="index" class="page page-on-center">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="center">Giriş Ekranı</div>
                            </div>
                        </div>
                        <div class="page-content">
                            <div class="content-block-title">Hoşgeldiniz</div>
                            <div class="content-block">
                                <p>Burada harika şeyler olacak. Beklemede kalın...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="bower_components/framework7/dist/js/framework7.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
...

Şimdi uygulamamızın en önemli elemanları, en üst div elemanından başlayarak aşağıya doğru açıklayalım:

  • statusbar-overlay: Uygulamamızın ekranının, mobil cihazdaki şarj, saat gibi bilgilerin bulunduğu durum çubuğunun hemen altından başlayabilmesi için gerekli alandır.
  • views: Uygulamamızın ayar, navigasyon ve geçmişi ile ilgili bilgilerinin bulunduğu ayrı bir görsel parçasıdır. İçerdiği her view birbirinden bağımsız bir şekilde farklı bir görsel dizilime sahip olabilir. Çoklu view elemanları genellikle tab-bar uygulamalarında bulunur. Çoğu uygulamada genellikle 1 adet views elemanı bulunur ve view-main elemanını içerir.
  • data-page: ilgili sayfanın benzersiz bir adını belirtir. Her sayfanın kendine özgü bir adı vardır ve sayfanın getirilmesi bu ada göre yapılır.
  • pages: Sayfaları barındıran elemandır. Bütün sayfa geçişleri bu eleman içerisinde yapılır. Eğer bir navbar oluşturacaksak türünü buradaki gibi navbar-fixed şeklinde belirtmeliyiz.
  • page: Sayfa ile bilgileri tutar. Sayfanın adı data-page özelliği ile belirtilmelidir.
  • navbar: Navbar elemanı ile ilgli özellikleri tutar.
  • navbar-inner: Navbar’ın iç elemanlarını barındırır.
  • center: ilgili yazının navbar’ın hangi kısmında olacağını belirler. Android’te varsayılan olarak en solda yer alır.
  • page-content: ListView, form elemanları vb. görsel elemanlar bu eleman içerisine konulmalıdır.
  • content-block-title: İçerik başlığını belirler.
  • content-block: İçeriğin barındığı yerdir. Yazı, buton vb. gibi bütün görsel elemanlar yer alabilir.

Giriş Ekranı clipped

Temel olarak Framework7 ile basit bir ekran oluşturduk. Cordova yazı serisinde yeni yazılarım ilerleyen günlerde Devnot’ta yayınlanmaya devam edecek. Takipte kalın.



Related Posts



6 Comments

  1. emre
    15 Haziran 2017 at 07:34

    Merhaba, Türkçe kaynağın sınırlı oldu şu zamanda gerçekten çok akıcı ve açıklayıcı bir anlatım olmuş. Merak diğer yazılarınızı bekliyoruz. Teşekkürler

    1. Zafer Ayan
      18 Haziran 2017 at 17:41

      Rica ederim, beğenmenize sevindim çünkü çok teknik olduğunu düşünmüştüm. Teşekkür ederim.

  2. Kübra
    18 Mayıs 2018 at 13:52

    Öncelikle böyle bir seriyi türkçe bir kaynak olarak bizlere kazandırdığınız için teşekkürler. Yazdıklarınızı harfiyen uyguladım ancak “bower install framework7″ bölümüne geldiğimde “bower ENOGIT git is not installed or not in the PATH” hatası alıyorum. Git yüklememiştim kendi sitesinden onu da indirdim ama hata düzelmedi. Ne yapmalıyım?

    1. Zafer Ayan
      20 Mayıs 2018 at 10:24

      Merhaba,

      CMD, Git’i hala sisteminizde görmüyor. İlk kurulumdan sonra CMD hala açık ise hemen algılamayabiliyor. CMD’yi kapatıp tekrar açıp deneyin. Problem gitmiş olacaktır. Problem hala çözülmedi ise Git’i Ortam değişkenlerine ekleyin:
      set PATH=%PATH%;C:\Program Files\Git\bin; .

      Teşekkürler,

  3. Emre Taner
    12 Kasım 2018 at 00:04

    Merhaba yazıdakileri yaptım fakat son da beklemede kalın ekranında arka plan beyaz ve yazılar siyah.
    Cssin içindekileri temizledim.

    Navbar vs çıkmıyor dümdüz beyaz arka plana siyah renkle yazılmış yazımız var.Nerede yanlış yaptım?

    Kodlar

    ”

    Merhaba Dünya

    Giriş Ekranı

    Hoşgeldiniz

    Burada harika şeyler olacak. Beklemede kalın…

    “

    1. Zafer Ayan
      15 Kasım 2018 at 21:37

      Merhaba, CSS dosyası doğru eklenmemiş olabilir. Framework 7 versiyonunu da kontrol etmek gereklidir. Yazıdaki GIF’te Framework7’nin 1.6 versiyonunun kurulduğu görülüyor (http://devnot.com/wp-content/uploads/2017/05/Bower-install-Optimized.gif). Siz de 1.6 versiyonunu indirmek için bower install framework7#1.6.0 komutunu çalıştırabilirsiniz.

?
© 2014 Devnot