PhoneGap/Cordova ile Mobil Uygulama Geliştirmeye Girişi (Getting Starting Mobile Application Development with PhoneGap/Cordova)

1. PhoneGap/Cordova ile Mobil
Uygulama Geliştirmeye Giriş
Egemen Mede / Yazılım Takım Lideri
Tarih: 29 Mayıs 2015

2. Ajanda
• Mobil Uygulama Geliştirme Çeşitleri Nelerdir?
• Cross Platform Geliştirme Yaklaşımları Nelerdir?
• Cordova nasıl ortaya çıktı? İsmi PhoneGap mi? Cordova mı?
• Hangi Platformlara Uygulama Geliştirilebilir?
• Hangi IDE'ler ile uygulama geliştirebilirim?
• Hangi API’leri destekler?
• Cordova'nın Artıları – Eksileri
• Cordova Uygulama Dizin Yapısı ve Mimarisi
• Cordova ve CLI
• Örnek bir Cordova Projesinin İrdelenmesi
• Cordova ile Mobil Geliştirme için Performans İpuçları

3. Mobil Uygulama Geliştirme Çeşitleri Nelerdir?

4. Mobil Uygulama Geliştirme Çeşitleri
Nelerdir?

5. Mobil Uygulama Geliştirme Çeşitleri
Nelerdir?
MOBİL WEB
- Gerçek anlamda cihaza özel uygulamalar değillerdir.
- Cihaz üzerindeki bir web tarayıcısı üzerinden çalışırlar.
- Bu sebeple çevirimdışı çalışma özelliğine sahip değildir.
- Aynı zamanda cihaz üzerinde bir uygulama olarak yer
almazlar.

6. Mobil Uygulama Geliştirme Çeşitleri
Nelerdir?
NATIVE
- Mobil uygulamalar içerisindeki “En iyi performans” en
belirgin özelliğidir.
- Uygulama cihaz apisi ile birebir ilişki içerisindedir.
- Bu nedenle uygulama içerisindeki animasyonlar, sayfa
geçişleri, yüklenme süreleri, grafik performansı gibi
temel pek çok işlevde web ve hibrit uygulamalara göre
çok daha hızlıdır.
- Bunun yanında cihazın tüm donanımsal özelliklerine
tam hakimiyeti söz konusudur ve işletim sisteminin
kullanıcı arayüzünü aynen kullanabilirler.

7. Mobil Uygulama Geliştirme Çeşitleri
Nelerdir?
HİBRİT
- Native ve web uygulamaları arasında tam bir geçiş
formudur.
- Web uygulamaları gibi bir url üzerinden değil, cihaz
üzerinde çalışır.
- Bu yönüyle native uygulamalara daha yakın olmakla
birlikte uygulama, bir native taşıyıcı üzerinde çalışır ve
bu taşıyıcı üzerinden cihaz apisi ile konuşur. Bu sebeple
native uygulamalara göre daha yavaştır.
- Ancak uygulamaların kullandığı teknolojiler geliştikçe
performans konusundaki farklar giderek azalıyor.

8. Büyük Şirketlerin Mobil Çözümlere Bakışı
Nasıl?
HTML5 hakkında ne söylüyorlar?

9. – “I think the biggest mistake that we made, as a company, is betting too much on
HTML5 as opposed to native… Because it just wasn’t there…” (Facebook,
September 2012) (Bizim şirket olarak en büyük hatamız HTML5'e nativeden çok
daha fazla yatırım yapmamız oldu. Çünkü o seviyede değil..)
– “Hybrid mobile apps are the future of app development” (Nick Heath in CIO
Insight, February 2013) (Uygulama geliştirmenin geleceği hibrit mobil
uygulamalardır.)
– “Mobile apps will soon be dead.” (Brian Kennish, former Google engineer, May
2011) (Mobil Uygulamalar yakında ölecek!)
– “All the problems [of mobile web] can be solved if Apple, Google, Microsoft and
the rest will just stop shutting out HTML5″ (Dan Rowinski at Mozilla, November
2012) (Eğer Apple, Google, Microsoft mobil web'i dışlamaz ise mobil web'in bütün
sorunları çözülebilir.)
– “HTML 5 is the way almost all applications will be built, including for phones.”
(Eric Schmidt, February 2011) (HTML5 ile telefonlar dahil tüm uygulamaları
yazabiliriz.)
Mobil çözümler hakkında herkesin farklı bir fikri var!..

10. Büyük markaların yaptıklarından birkaç
örnek..
- Facebook native uygulaması web teknolojileri ile yeniden
yazıldı.
- Linkedin mobil uygulaması HTML5 uygulamasından native'e
çevrildi.
- Twitter başından beri native kullanıyor.
- Instagram native kullanıyor.
- Bloomberg native uygulamasını kaldırarak, HTML5
uygulamasına çevirdi.
- ESPN bütün mobil uygulamalarını native olarak yazıyor. Çünkü
bunu iyi bir kullanıcı deneyimi sunmak için gerekli görüyor.

11. Mark Zuckerberg: “-We burned Two
years Betting on Mobile Web Vs. App”

12. The Making of Fastbook: An HTML5 Love Story

13. Analizler neler söylüyor?
Gartner, Inc. said that hybrid apps, which offer a balance
between HTML5-based web apps and native apps, will be used
in more than 50 percent of mobile apps by 2016. (April 16, 2013)
Gartner 2016 yılında çıkacak olan mobil uygulamaların %50’ den
fazlasının Hibrit uygulamalardan oluşacağını söylüyor..

14. Analizler neler söylüyor?

15. Cross Platform Geliştirme Yaklaşımları
Nelerdir?

16. Cross Platform Geliştirme Yaklaşımları
Nelerdir?
JavaScript Frameworks
Tarayıcı uyumluluğuna sahip, dokunmatik ara yüzler
oluşturabileceğiniz fonksiyonlar sunar.
Örnek: jQuery Mobile, Sencha Touch vs..

17. Cross Platform Geliştirme Yaklaşımları
Nelerdir?
App Factories (Uygulama Fabrikaları)
"Create your own app" – Kendi uygulamanı kendin yarat
tarzındaki ürünlerdir. Görsel tasarım araçları ile mobil uygulama
geliştirmeyi sağlarlar.
Örnek: AppMkr, Wix Mobile, Mobile Nation HQ vs..

18. Cross Platform Geliştirme Yaklaşımları
Nelerdir?
Web to native wrappers (Web’ten yerli uygulama oluşturma)
Web uygulamalarının HTML, CSS ve Javascript’ten oluşan web
kodunun paketlenebilir bir yerli uygulama haline getirilerek
kullanılmasını sağlar.
Örnek: PhoneGap, Cordova vs..

19. Cross Platform Geliştirme Yaklaşımları
Nelerdir?
Runtimes (Çalışma zamanı uygulamaları)
Örnek: J2ME, Adobe Air, Unity, Titanium Appcelarator, Xamarin
vs..

20. Cross Platform Geliştirme Yaklaşımları
Nelerdir?
Source code translators (Kaynak kod çeviricileri)
Bu çözümde kaynak kodun bytecode, yerel dil veya direkt olarak
makine düzeyi koduna çevrilmesi ile hazırlanır.
Örnek: MoSync, Marmalade vs..

21. Cordova nasıl ortaya çıktı? İsmi PhoneGap
mi? Cordova mı?

22. Cordova nasıl ortaya çıktı? İsmi PhoneGap
mi? Cordova mı?
- Nitobi
- iPhoneDevCamp
(Doğumu)(2008)
- Web 2.0 Expo LaunchPad
(2009) – (OpenSource MIT)
- Adobe (2011)
- Apache Yazılım Vakfı

23. Hangi Platformlara Uygulama Geliştirilebilir?

24. Hangi Platformlara Uygulama Geliştirilebilir?
HEPSİNE!
..
- Amazon FireOS
- Android
- Blackberry
- FirefoxOS
- iOS
- Ubuntu OS
- Windows Phone 8 ve 8.1
- Windows 8.0 ve 8.1
- Tizen

25. Hangi IDE'ler ile uygulama geliştirebilirim?

26. Hangi IDE'ler ile uygulama geliştirebilirim?
İSTEDİĞİNİZ
IDE İLE!
- Bracket
- WebStorm
- Dreamweaver
- Eclipse
- XCode
- NetBeans
- SublimeText
- Visual Studio
- Atom Vs..

27. Hangi API’leri destekler?

28. Hangi API’leri destekler?
Battery Status
Camera
Console
Contacts
Device
Device Motion
(Accelerometer)
Device Orientation (Compass)
Dialogs
FileSystem
File Transfer
Geolocation
Globalization
InAppBrowser
Media

29. Cordova'nın Artıları – Eksileri

30. Cordova'nın Artıları – Eksileri
ARTILA
R
1. Web Geliştiricilerinin kısa sürede mobil
uygulama geliştirmeye başlamasını sağlar. Bu
yönüyle öğrenim süresi kısadır ve eğitim maliyetini
en aza indirir.
2. Tek bir kod tabanı kullanarak birden fazla mobil
platforma uygulama geliştirebilirsiniz. Bu yönüyle
kaynak maliyetini minimuma indirir.
3. Çoklu platformlara destek için çok daha düşük
bakım maliyeti gerektirir.

31. Cordova'nın Artıları – Eksileri
EKSİLE
R
1. Native UI desteği olmadığından dolayı kullanıcı
deneyimi ve görünüm için ekstra çaba sarf edilmelidir.
(Not: Aslında bu bir eksi de değildir!..)
2. Native her zaman nativedir!.. Dolayısıyla ne kadar
performans artırımı yapılsa da işlevsellik konusunda
her zaman native'in gerisinde kalacaktır. Önemli olan
aradaki farkın çok olmadığı uygulamalar
geliştirebilmektir.
3. Kurumsal hizmet verilen PhoneGap Enterprise ya da
IBM Worklight gibi araçları kullanmak, zaman
içerisinde önemli maliyetler getirebilir.

32. Cordova'nın Artıları – Eksileri
CORDOVA
KULLANMAYIN!- Yüksek işlemci ve ram gerektiren
uygulama hazırlamak istiyorsanız (oyun
gibi) kullanmayın.
- Mobil cihazlardaki yeni donanım ürünleri
için bir an önce uygulama geliştirmek
istiyorsanız kullanmayın.
- Eğer kullanıcılara doğru mobil
deneyimleri yaşatamayacaksanız,
kullanıcının mobil UX deneyimine saygı
duyun kullanmayın.
- Mobilin kendi dinamikleri olduğunu kabul
etmeden, web developer bakış açısı ile
mobil yazacaksanız kullanmayın.

33. Cordova'nın Artıları – Eksileri
CORDOVA KULLANIN!
- Uygulamanızı Cross Platform olarak marketlere çıkarmak konusunda aceleniz varsa
kullanın.
- Kurumunuz bünyesindeki web geliştiricilerini mobile developer olarak kullanın.
- Uygulama marketlerine uygulama yüklemeniz gereklilikse kullanın.
- Cross Platform için düşük bir bütçeye sahipseniz kullanın.
- Cross Platform olmasa bile geliştirmek istediğiniz herhangi bir mobil platforma hızlıca
uygulama geliştirmek istiyorsanız kullanın.

34. Cordova Uygulama Dizin Yapısı ve Mimarisi

35. Cordova Uygulama Dizin Yapısı ve Mimarisi

36. Cordova Uygulama Dizin Yapısı ve Mimarisi

37. Cordova Uygulama Dizin Yapısı ve Mimarisi

38. Cordova Uygulama Dizin Yapısı ve Mimarisi

39. Cordova Uygulama Dizin Yapısı ve Mimarisi
“www” Klasörü
Projenin .html, .css, .js gibi dosyalarından oluşan web
bileşenlerini içeren klasördür.

40. Cordova Uygulama Dizin Yapısı ve Mimarisi
”platforms” Klasörü
Projeniz için bir platform eklediğinizde, bu platforma ait
native öğeler kendi platform ismiyle birlikte bu klasör
içerisinde oluşturulur.

41. Cordova Uygulama Dizin Yapısı ve Mimarisi
“plugins” Klasörü
Cordova projesinin içerisine eklediğiniz tüm pluginler
bu klasör içerisinde bulundurulur. Ayrıca projenize
eklediğiniz platformlara ait pluginlerin tutulduğu json
dosyaları yer alır.

42. Cordova Uygulama Dizin Yapısı ve Mimarisi
“merges” Klasörü
Cordova, pek çok mobil platform için uygulama
geliştirme yapılabilen bir araç. Eğer tüm işlemlerinizi
CLI ile yapıyor ve birden fazla platform için aynı anda
geliştirme yapıyorsanız “merges” klasörü büyük bir
önem arz ediyor.

43. Cordova Uygulama Dizin Yapısı ve Mimarisi
“hooks” Klasörü
ve
“config.xml” dosyası

44. Cordova ve CLI

45. Cordova ve CLI
Cordova CLI Nedir?
CLI (Cordova Command-line Interface – Cordova Komut
Satırı arayüzü), herhangi bir IDE yardımına ihtiyaç
duymaksızın yalnızca kod satırını kullanarak proje
oluşturulmasını, güncellenmesini, plugin
ekleme/çıkarma işlemlerinin yapılmasını, yeni
platformların eklenmesini ve daha pek çok işlevi tek bir
merkezden yönetilmesini sağlar.

46. Cordova ve CLI
CLI ne zaman kullanılmaya başlandı?
Cordova 2.7’den itibaren kullanılmasına izin verilmiş
olsa da asıl olarak Cordova 3.0 ile birlikte kullanılmaya
başlamıştır. Bu sebepten dolayı PhoneGap ve Cordova
kütüphanesinin indirilebilir halleri en son 2.9.1 sürüme
kadar devam ettirilmiştir. Cordova 3.0 ile birlikte bu
işlem tamamen CLI aracılığı ile yapılmaya başlanmıştır.

47. Örnek bir Cordova Projesinin İrdelenmesi

48. Örnek bir Cordova Projesinin İrdelenmesi

49. Cordova ile Mobil Geliştirme için Performans
İpuçları

50. - Mümkün olduğunca kütüphane değil, pure JavaScript kullanın. Kütüphaneler ve pure JavaScript
arasındaki farklılıkları gösteren pek çok teste internet üzerinden kolayca ulaşabilirsiniz.
- Eğer bir zorunluluk değilse, özellikle Mobil Web uygulamaları için geliştirilmiş olan JQuery Mobile gibi
kütüphaneleri kullanmayın. Kullanacaksanız da kod tarafında mümkün olduğu kadar optimize ederek
kullanın.
- Eğer gelişmiş bir JavaScript frameworkü kullanmıyorsanız FastClick.js’i tüm projelerinizdeki standart
kütüphane haline getirin!
- Uygulama içerisinde kullandığınız kütüphanelerin yalnızca minified sürümlerini kullanın. Yoksa, siz
minified yapın!
- Eğer gelişmiş bir JavaScript frameworkü kullanmıyorsanız uygulamanızın iş birimi ve sunum
bölümlerini mustache.js gibi şablon sistemleriyle mutlaka ayırın.
Cordova ile Mobil Geliştirme için Performans
İpuçları

51. - Eğer orta ve büyük ölçekli bir uygulama geliştirecekseniz Angular, Ember, Knockout gibi gelişmiş
JavaScript frameworklerinden birini kullanın.
- Uygulamanızdaki her sayfanın JS ve CSS dosyaları ayrı olsun. Tek bir JS ya da CSS dosyası yaparak
bunları tüm sayfalarda çağırmayı denemeyin!
- Cordova bir HTML5 kütüphanesidir. Dolayısıyla uygulamalarınızda mutlaka normalize.css gibi HTML5
Reset CSS kullanın.
- Projeniz içerisinde kullanmadığınız izin ve pluginleri mutlaka kaldırın.
- Uygulamalarınızdaki request/istek miktarını düşürmek için CSS Sprite tekniğini kullanın.
- Uygulamalarınızın içerisinde çeşitli küçük görseller için Font Awesome gibi ikon-font sistemlerini
kullanın. (http://fontawesome.io/)
Cordova ile Mobil Geliştirme için Performans
İpuçları

52. - Büyük verileri tek sayfa içerisinde yüklemeyin!
- Animasyon veya yoğun grafik kullanan uygulamalar için hibrit kullanmayın!
- Ağır kütüphaneler, uygulama çatıları (Framework) veya pluginler kullanmayın!
- Ionic gibi UI bileşenler sunan ve alt yapısında full stack desteği olan UI'ları tercih edin!
- Uygulamanızı yüksek ve düşük performanslı cihazlarda mutlaka test edin!
- Geliştirme ve test süreçleriniz de Google Chrome Canary geliştirici aracını mutlaka kullanın!
- LocalStorage'i mutlaka kullanın! (Servis çağrılarınızı ve internet bağımlılığınızı azaltır)
Cordova ile Mobil Geliştirme için Performans
İpuçları

53. TEŞEKKÜRLER