Cordova ile Uygulama Prototipi Oluşturma
18 Haziran 2017 
Önceki yazımızda Framework 7 ile basit bir uygulama oluşturmuştuk. Şimdi ise uygulamamızı film listesi görüntüleyecek şekilde değiştirelim.
Statik uygulama tasarımı ve Media List View elemanının kullanımı
Verileri uzak sunucudan alıp basmak yerine öncelikle arayüzün nasıl olacağına karar verelim. Filmin posteri, başlığı, oyuncuları, puanı ve kısa özeti gibi bilgilerin listemizde yer alması gerekiyor. Bunun için F7’deki Media List View elemanını kullanabiliriz. Media ListView en basit haliyle aşağıdaki halde bulunur:
<div class="content-block-title">Filmler</div>
<div class="list-block media-list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><img src="http://netflixroulette.net/api/posters/880640.jpg" width="80"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Pulp Fiction</div>
<div class="item-after">Puan: 4.1</div>
</div>
<div class="item-subtitle">John Travolta, Samuel L. Jackson, Uma Thurman</div>
<div class="item-text">Weaving together three stories featuring a burger-loving hit man...</div>
</div>
</a>
</li>
...
</ul>
</div>
Media ListView elemanlarını teker teker anlatmayacağım zira kod kendini açıklayan nitelikte bulunuyor. Şimdi üstteki kod bloğunu <div class="page-content"> içerisine ekleyelim ve “Giriş Ekranı” yazan navbar içeriğini “Quentin Tarantino Filmleri” olacak şekilde değiştirelim. index div elemanımız aşağıdaki şekilde olacaktır:
...
<div data-page="index" class="page page-on-center">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Quentin Tarantino Filmleri</div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">Filmler</div>
<div class="list-block media-list">
<ul>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><img src="http://netflixroulette.net/api/posters/880640.jpg" width="80"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Pulp Fiction</div>
<div class="item-after">Puan: 4.1</div>
</div>
<div class="item-subtitle">John Travolta, Samuel L. Jackson, Uma Thurman</div>
<div class="item-text">Weaving together three stories featuring a burger-loving hit man...</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
...
Tarayıcıdan index.html’i açıp baktığımızda filmin resminin yüklenmemiş olduğunu görüyoruz. F12‘ye basarak hatanın ne olduğuna bakalım:
CSP (Content Security Policy) ile ilgili bir hata olduğunu ve netflixroulette domain’inden görsel çekemeyeceğini söylüyor. Hemen img-src 'self' elemanının yanına http://netflixroulette.net/api/posters/ linkini ekleyerek CSP meta tag’imizi aşağıdaki şekilde değiştirelim:
<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' http://netflixroulette.net/api/posters/ data: content:;">
Şimdi image bilgisi başarılı bir şekilde uygulamamıza gelmiş durumda olacaktır:
Liste elemanına bastığımızda bir aksiyon alamıyoruz çünkü henüz bir detay sayfası oluşturmadık. Şimdi detay sayfamızı oluşturalım.
Sayfa geçişlerinin sağlanması
Sayfa geçişleri için ben F7’de varsayılan olarak gelen Ajax Pages mantığını kullanıyorum. Her sayfa div’i normal bir web projesindeki gibi ayrı dosyalarda tutuluyor ve istendiğinde Ajax isteği ile yükleniyor. Bu şekilde dosya organizasyonu kolay oluyor ve bakım maliyetleri azalıyor.
Şimdi filmlerimizin detayının tutulması için www dizininde movie_detail.html adında yeni bir sayfa oluşturalım. Bu dosya içerisinde <html> ve <body> etiketlerinin bulunması yerine sadece ilgili sayfa div’inin yer almasını sağlayalım. Bu sayede sadece ilgili DOM içeriği Ajax isteği ile uygulamamız içine basılmış olacak. Dosya içeriğini aşağıdaki şekilde oluşturalım:
<div data-page="movie_detail" class="page page-on-center">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="index.html" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
<div class="center">Pulp Fiction</div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">Detay</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content">
<div class="item-media"><img src="http://netflixroulette.net/api/posters/880640.jpg" width="80"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Pulp Fiction</div>
<div class="item-after">Puan: 4.1</div>
</div>
<div class="item-subtitle">Süre: 154 dk</div>
<div class="item-subtitle">Yönetmen: Quentin Tarantino</div>
<div class="item-subtitle">Kategori: Oscar-ödüllü Filmler</div>
<div class="item-subtitle">Oyuncular: John Travolta, Samuel L. Jackson, Uma Thurman</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
Özet: Weaving together three stories featuring a burger-loving hit man, his philosophical partner and a washed-up boxer, Quentin Tarantino influenced a generation of filmmakers with this crime caper's stylized, over-the-top violence and dark comic spirit.
</div>
</div>
</div>
İki sayfayı birbirine bağlamak için index.html’deki class="item-link item-content" olan <a> elemanının href değerini movie_detail.html olacak şekilde değiştirelim:
<a href="movie_detail.html" class="item-link item-content">
Şimdi test ettiğimizde aşağıdaki gibi bir ekranla karşılaşacağız:
Sayfa içeriği geliyor ama istediğimiz stiller yüklenmemiş durumda. Yani sayfa AJAX isteğiyle doldurmak yerine direkt olarak diğer sayfayı çağırıyor. JavaScript tarafında F7 ile ilgili uygulama parametrelerini tanımlayalım.
JavaScript tarafında Framework7 değişkenlerinin tanımlanması
Cordova’nın bizim için oluşturduğu js/index.js dosyasının içini tamamen silelim ve aşağıdaki şekilde değiştirelim:
var myApp = new Framework7({
material: true,
pushState:true
});
var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
Kaydedip index.html’i açıp filme tıkladığımızda Chrome bize üstteki şekilde CORS hatası verecektir. Chrome, güvenlik nedenlerinden dolayı dosya sisteminden AJAX isteklerinin yapılmasını engellemektedir. Bunun için projemizi bir sunucuya atarak çalıştırmamız gerekiyor. lite-server adındaki npm paketi işimizi görecektir.
Lite-Server
Aşağıdaki komut ile lite-server kurulumunu yapalım:
npm install -g lite-server
Kurulum bittikten sonra aşağıdaki komutla lite-server’ın dosyalarımızı sunucu üzerinden sunmasını sağlayalım:
lite-server
Uygulamamızda artık 2 sayfa arasında geçiş sağlamış bulunuyoruz. Sonraki yazımızda film verilerini uzak sunucudan çekerek görüntüleme ve templating işlemlerine değineceğiz. Sağlıcakla kalın.
