phonegap/cordova ile mobil uygulama geliştirmeye giriş

PhoneGap/Cordova ile Mobil Uygulama Geliştirmeye GirişEgemen Mede / Yazılım Takım Lideri

Tarih: 29 Mayıs 2015

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ı

Mobil Uygulama Geliştirme Çeşitleri Nelerdir?

Mobil Uygulama Geliştirme Çeşitleri Nelerdir?

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.

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.

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.

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

– “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!..

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.

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

The Making of Fastbook: An HTML5 Love Story

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..

Analizler neler söylüyor?

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

Cross Platform Geliştirme Yaklaşımları Nelerdir?JavaScript FrameworksTarayıcı uyumluluğuna sahip, dokunmatik ara yüzler oluşturabileceğiniz fonksiyonlar sunar.

Örnek: jQuery Mobile, Sencha Touch vs..

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..

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..

Cross Platform Geliştirme Yaklaşımları Nelerdir?Runtimes (Çalışma zamanı uygulamaları)

Örnek: J2ME, Adobe Air, Unity, Titanium Appcelarator, Xamarin vs..

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..

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

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ı

Hangi Platformlara Uygulama Geliştirilebilir?

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

Hangi IDE'ler ile uygulama geliştirebilirim?

Hangi IDE'ler ile uygulama geliştirebilirim?

İSTEDİĞİNİZIDE İLE!

- Bracket- WebStorm- Dreamweaver- Eclipse- XCode- NetBeans- SublimeText- Visual Studio- Atom Vs..

Hangi API’leri destekler?

Hangi API’leri destekler?

Battery StatusCameraConsoleContactsDeviceDevice Motion (Accelerometer)Device Orientation (Compass)

DialogsFileSystemFile TransferGeolocationGlobalizationInAppBrowserMedia

Cordova'nın Artıları – Eksileri

Cordova'nın Artıları – Eksileri

ARTILAR

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.

Cordova'nın Artıları – Eksileri

EKSİLER

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.

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.

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.

Cordova Uygulama Dizin Yapısı ve Mimarisi

Cordova Uygulama Dizin Yapısı ve Mimarisi

Cordova Uygulama Dizin Yapısı ve Mimarisi

Cordova Uygulama Dizin Yapısı ve Mimarisi

Cordova Uygulama Dizin Yapısı ve Mimarisi

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.

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.

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.

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.

Cordova Uygulama Dizin Yapısı ve Mimarisi

“hooks” Klasörü ve“config.xml” dosyası

Cordova ve CLI

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.

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.

Örnek bir Cordova Projesinin İrdelenmesi

Örnek bir Cordova Projesinin İrdelenmesi

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

- 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ı

- 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ı

- 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ı

TEŞEKKÜRLER