Mobil Web Uygulamaları Geliştirme: Ne Zaman, Neden ve Nasıl

Yayınlanan: 2022-03-11

Gezegende 5,1 milyarı cep telefonu olan 6,8 milyar insan var. Ve bugün, bu cihazların giderek artan bir yüzdesi akıllı telefonlardır. Yakın tarihli bir Pew Araştırma Merkezi Araştırmasına göre, akıllı telefonlarından İnternet'e erişen kullanıcı sayısı ve mobil uygulamaları indiren ve kullanan kullanıcı sayısı son 5 yılda iki katından fazla arttı. Telefonlarında İnternet veya e-posta kullananların üçte birinden fazlası, öncelikle el cihazları aracılığıyla çevrimiçi oluyor.

Gerçekten de, mobil bilgi işlem giderek yaygınlaşıyor… ve bu harika.

Tabii ki, olmadığı zamanlar hariç.

Bir mobil cihaz kullanıcısı olarak, kötü tasarlanmış bir mobil web uygulaması veya hatta yerel bir uygulama kadar sinir bozucu ve parmakla gezinmesi zor olan çok az şey vardır.

Ve bir mobil uygulama geliştiricisi olarak, her biri kendi sinir bozucu özellikleri olan mümkün olduğunca geniş bir mobil istemci yelpazesini desteklemeye çalışmak kadar yoğun rahatsız edici çok az şey olabilir. Bir mobil web, yerel veya hibrit uygulama geliştirmeyi seçseniz de, birden fazla mobil tarayıcıyı, daha egzotik cihazları destekleme arayışı ve çeşitli platformlarla başa çıkma arayışı gerçekten de yürek burkan bir deneyim olabilir.

Bu mobil web uygulaması geliştirme eğitimi, farklı tarayıcılarda ve platformlarda gezinmenize yardımcı olmayı amaçlamaktadır.

Bir mobil cihaz kullanıcısı olarak, kötü tasarlanmış bir mobil web veya yerel uygulama kadar sinir bozucu ve parmakla gezinmesi zor olan çok az şey vardır. Ve bir mobil uygulama geliştiricisi olarak, her biri kendi sinir bozucu özellikleri olan mümkün olduğunca geniş bir mobil istemci yelpazesini desteklemeye çalışmak kadar yoğun rahatsız edici çok az şey olabilir.

Elbette bugün her geliştiricinin mobil istemcileri destekleme konusunda endişelenmesi gerekmiyor. Ancak, mobil cihazların ve uygulamaların giderek her yerde bulunan doğası, bugün mobil istemcileri desteklemesi gerekmeyenlerin, çok da uzak olmayan bir gelecekte buna ihtiyaç duyacaklarından çok daha fazlasını önermektedir. Dolayısıyla, henüz mobil uygulama geliştirmeyi düşünmüyorsanız, muhtemelen öyle yapmalısınız.

Mobil Web Uygulaması ve Yerel Uygulama ve Karma Uygulama karşılaştırması

Çoğu teknoloji seçiminde olduğu gibi, geliştirilecek mobil uygulama türü söz konusu olduğunda, herkese uyan tek bir cevap yoktur. Göz önünde bulundurulması gereken çok sayıda web uygulaması en iyi uygulaması vardır ve bunların tümü teknik değildir. Hedef kitleniz kim? Bir mobil web'i mi yoksa yerel bir uygulamayı mı tercih etme olasılıkları daha yüksek? Yerel ve karma uygulamalar arasındaki fark nedir? Hangi geliştirme kaynaklarına sahipsiniz ve en çok hangi mobil teknolojilere aşinalar? Ürününüz için öngördüğünüz lisanslama ve satış modeli nedir?

Genel olarak konuşursak (her zaman istisnalar olsa da), mobil web uygulaması yolu, özellikle amaç çok çeşitli cihazları desteklemek olduğunda, yerel mobil uygulama yolundan daha hızlı ve daha ucuzdur. Tersine, mobil cihaza özgü, uygulamanız için gerekli olan, ancak yalnızca yerel bir uygulama aracılığıyla erişilebilen (bu nedenle mobil web uygulaması seçimini gereksiz hale getiren) (hareket sensörü vb.) sizin için başlangıç).

Eski web uygulamaları ve yerel uygulamalar sorusunun ötesinde, gereksinimlerinize ve kaynak kısıtlamalarınıza bağlı olarak hibrit bir mobil uygulama sizin için doğru cevap olabilir. Yerel uygulamalar gibi hibrit uygulamalar, cihazın kendisinde çalışır (bir tarayıcının içinde değil), ancak web teknolojileri (HTML5, CSS ve JavaScript) ile yazılır ve genellikle bir hibrit uygulama çerçevesi tarafından desteklenir. Daha spesifik olarak, karma uygulamalar yerel bir kapsayıcı içinde çalışır ve HTML'yi oluşturmak ve JavaScript'i yerel olarak işlemek için cihazın tarayıcı motorundan (ancak tarayıcıdan değil) yararlanır. Web'den yerele soyutlama katmanı, ivmeölçer, kamera ve yerel depolama gibi mobil web uygulamalarında erişilemeyen cihaz özelliklerine erişim sağlar.

Ancak tercihiniz ne olursa olsun – ister mobil web uygulaması, ister yerel veya karma uygulama olsun – varsayımlarınızı yeterince araştırmaya ve doğrulamaya dikkat edin. Örnek olarak, bu mobil web uygulaması geliştirme öğreticisinin amaçları doğrultusunda, ürünlerinizi satmak için e-ticaret için yerel bir mobil uygulama geliştirmeye karar vermiş olabilirsiniz. Ancak Hubspot'a göre, akıllı telefon kullanıcılarının %73'ü alışveriş yapmak için yerel uygulamalardan daha fazla mobil web kullandığını söylüyor… Yani bu durumda, yanlış ata bahse girmiş olabilirsiniz.

Ancak, yaptığınız seçim ne olursa olsun - ister mobil web, ister yerel veya hibrit uygulama olsun - varsayımlarınızı yeterince araştırmak ve doğrulamak için dikkatli olun.

Ve sonra, elbette, zaman ve bütçeyle ilgili pratik hususlar var. En sevdiğim sözlerden birinin dediği gibi, “daha ​​hızlı, daha iyi, daha ucuz… ikisinden birini seçin” . Web uygulaması geliştirmede pazara sunma süresi ve maliyet kısıtlamaları büyük önem taşırken, süreçte kaliteden çok fazla ödün vermemek çok önemlidir. İlk deneyimi kötü olan bir kullanıcının güvenini yeniden kazanmak oldukça zordur.

Gerçekten de, mobil web, yerel ve hibrit uygulamaların tümü, her biri kendi benzersiz yararları ve zorlukları olan kökten farklı canavarlardır. Bu mobil web geliştirme öğreticisi, özellikle son derece işlevsel, sezgisel ve kullanımı kolay mobil web uygulamalarının geliştirilmesinde kullanılacak metodolojilere ve araçlara ve kaçınılması gereken tuzaklara odaklanır.

Bir mobil web uygulamasının nasıl geliştirileceğini belirlemede kritik bir en iyi uygulama, müşterinizi tanımaktır.

Mobil Web Uygulaması Geliştirme Detaylı Planlama Gerektirir

Sizin (veya müşterinizin) gereksinimlerini belirlemek, mobil veya başka şekilde uygulama geliştirmede en önemli en iyi uygulamalardan biridir. Mobil web uygulamanızda ulaşılabilir olup olmadıklarını belirlemek için hedeflenen yetenekleri dikkatlice araştırın. Web tabanlı arayüzü ve destekleyici altyapıyı tasarlamak için zaman ve kaynaklara zaten yatırım yapmışken, bir veya daha fazla temel istemci işlevinizin desteklenmediğini anlamak oldukça sinir bozucu ve verimsizdir.

Mobil web uygulaması geliştiricilerine yeni başlayanlar için bir başka yaygın kazanım, bir masaüstü tarayıcısı için web tabanlı kodun bir mobil tarayıcıda "olduğu gibi" çalışacağını varsaymaktır. Değil. Mutlaka farklılıklar vardır ve eğer bunların farkında değilseniz sizi kesinlikle ısırabilirler. Örneğin HTML5 <video> etiketinin otomatik oynatma işlevi mobil tarayıcılarda çalışmaz. Benzer şekilde, günümüzde çoğu mobil tarayıcıda CSS transition ve opacity özellikleri desteklenmemektedir (veya en azından tutarlı bir şekilde desteklenmemektedir). Ayrıca, çoğu mobil cihazda desteklenmeyen Adobe Flash gerektiren SoundCloud müzik akışı API'si gibi bir mobil platformda bazı web API yöntemleriyle ilgili sorunlar yaşarsınız.

Mobil web uygulaması geliştiricisine yeni başlayanlar için yaygın bir sorun, bir masaüstü tarayıcısı için web tabanlı kodun bir mobil tarayıcıda "olduğu gibi" çalışacağını söylemektir.

Mobil web uygulaması geliştirmede özellikle karmaşık bir faktör, mobil cihazların kullanım ömrünün masaüstü ekranlardan çok daha kısa olma eğiliminde olmasıdır (ABD'de bir cep telefonunun ortalama ömrü yaklaşık 21 aydır). Yeni mobil cihazların ve teknolojilerin sürekli olarak piyasaya sürülmesiyle birlikte bu daha kısa cihaz ömrü, hedeflenen cihazların sürekli değişen bir manzarasını sağlar. Bir tarayıcıda çalışmak, sizi bir dizi cihaza özgü sorundan koruyarak bu sorunu biraz hafifletse de, yine de birçok farklı ekran çözünürlüğünü destekleyen (yatay ve dikey yönler için uygun şekilde ayarlamanın yanı sıra) tarayıcı tabanlı bir görünüm tasarlamanız gerekecektir. ).

Apple'ın Retina Ekranlarını (insan gözünün tipik bir görüntüleme mesafesinde tek tek pikselleri ayırt edemeyecek kadar yüksek piksel yoğunluğuna sahip sıvı kristal ekranlar) desteklemesi de düşünülmelidir. iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini ve iPad Air dahil olmak üzere birçok Apple ürünü Retina ekranlar sunar. Özellikle bir mobil web uygulaması için, bir Retina ekranın düşük çözünürlüklü görüntülerin (genellikle mobil cihazlara sunulur) bulanık görünmesini ve pikselleşmenin oluşabileceğini bilmek önemlidir. Bu durumlarda en iyi uygulama geliştirme çözümü, sunucunun, isteğin bir Retina cihazından geldiğini algılamasını sağlamak ve ardından istemciye daha yüksek çözünürlüklü alternatif bir görüntü sağlamaktır.

Harika HTML5 öğelerinden bazılarını kullanmak istiyorsanız, aradığınız işlevselliğin, müşterilerinizin muhtemelen kullanacağı cihaz ortamında desteklendiğini önceden doğrulamayı unutmayın. Örneğin, iOS 6 ve sonraki sürümlerde, kameraya yalnızca yerel uygulamalar aracılığıyla erişilebildiğinden, gezgin getUserMedia işlevi için destek yoktur. Belirli cihazlarda ve tarayıcılarda nelerin desteklendiğini kontrol etmek için iki harika kaynak caniuse.com ve html5test.com'dur.

Aradığınız işlevin, müşterilerinizin muhtemelen kullanacağı cihaz ortamında desteklendiğini önceden doğrulamayı unutmayın.

CSS3 medya sorguları, her cihaz için özelleştirilmiş içerik sağlamanıza da yardımcı olabilir. Piksel yoğunluğu, ekran çözünürlüğü ve yön gibi farklı cihaz özelliklerini yakalamak için bazı örnek kodlar:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Mobil Web Uygulamanızı Performans için Optimize Etme

"OMG, bu şey çok yavaş!" Bir mobil web uygulaması geliştiricisi olarak, bunlar muhtemelen kullanıcılarınızdan birinden duymak isteyeceğiniz son sözlerdir. Bu nedenle, kullanıcının bekleme süresini azaltmak için her bir baytı ve sunucu aktarımını nasıl azaltacağınızı ve optimize edeceğinizi dikkatlice düşünmelisiniz. Aktarımların her zaman bir WiFi ağı üzerinden yapılmasını beklemek gerçekçi değildir ve mobil web kullanıcılarının %60'ının bir sitenin cep telefonlarına 3 saniye veya daha kısa sürede yüklenmesini beklediklerini (kaynak) söylediğini bilmelisiniz. Benzer şekilde Google, fazladan her beş saniyelik yükleme süresi için trafiğin %20 düştüğünü buldu (ve arama motorlarının sayfa kalite puanı hesaplamalarının bir parçası olarak yükleme sürelerine baktığını da belirtmekte fayda var).

Mobil web kullanıcılarının %60'ı, bir sitenin cep telefonlarına 3 saniye veya daha kısa sürede yüklenmesini beklediklerini söylüyor.

Bu mobil web uygulaması geliştirme eğitiminin bir parçası olarak, mobil web uygulamalarınızın performansını optimize etmenize ve gecikmeyi en aza indirmenize yardımcı olabilecek birkaç ipucu:

  • Görüntü Optimizasyonu. Görüntü yükleme süresinin, mobil cihazlarda sayfa yüklenmesini etkileyen en büyük performans sorunlarından biri olduğu iyi bilinmektedir. smushit.com gibi çevrimiçi görüntü iyileştiricilerin kullanılması bu sorunun ele alınmasında yardımcı olabilir.
  • Kod sıkıştırma. Sahip olduğunuz kod miktarına bağlı olarak JavaScript ve CSS dosyalarınızı sıkıştırmanın performans üzerinde önemli bir etkisi olabilir.
  • Veritabanı sorguları.
    • Bazı mobil cihaz tarayıcıları, masaüstü tarayıcıların yaptığı kadar çok tanımlama bilgisi kabul etmez, bu da normalden daha fazla sorgu yürütme ihtiyacına neden olabilir. Bu nedenle, sunucu tarafında önbelleğe alma, mobil web uygulaması istemcilerini desteklerken özellikle önemlidir.
    • Aksi takdirde sitenizin ve sunucunuzun güvenliğini tehlikeye atabilecek SQL sorgu enjeksiyonunu engellemek için uygun filtreleri kullanmayı unutmayın.
  • İçerik dağıtım ağları (CDN). Çok sayıda video, resim, ses dosyası veya diğer medya türlerini sağlamayı planlıyorsanız, bir CDN kullanmanız şiddetle tavsiye edilir. Daha yaygın ticari CDN'lerden bazıları Amazon S3, Microsoft Windows Azure ve MaxCDN'dir. CDN kullanmanın avantajları çoktur ve şunları içerir:
    • Geliştirilmiş indirme performansı. Bir CDN'nin kaynaklarından yararlanmak, yükü dağıtmanıza, bant genişliğinden tasarruf etmenize ve performansı artırmanıza olanak tanır. Daha iyi CDN'ler daha yüksek kullanılabilirlik, daha düşük ağ gecikmesi ve daha düşük paket kaybı sunar. Ayrıca, birçok CDN, küresel olarak dağıtılmış bir veri merkezi seçimi sağlayarak indirmelerin kullanıcının konumuna daha yakın bir sunucudan gerçekleşmesini sağlar (bu, daha az ağ atlama ve daha hızlı indirme ile sonuçlanır).
    • Daha fazla eşzamanlı indirme. Tarayıcılar genellikle eşzamanlı bağlantı sayısını tek bir etki alanıyla sınırlandırır, bundan sonra önceki indirmelerden biri tamamlanana kadar ek indirmeler engellenir. Aynı siteden birçok büyük dosya indirirken bu sınırı sıklıkla görebilirsiniz. Her ek CDN (farklı bir etki alanında), ek eşzamanlı indirmelere izin verir.
    • Gelişmiş analitik. Birçok ticari CDN, kendi web sitesi analizlerinizi destekleyebilecek ve daha iyi video görüntüleme ve indirme miktarları sunabilecek kullanım raporları sağlar. Örneğin GTmetrix, sitenize yüklenen kaynakları izlemek ve optimize etmek için mükemmel bir web sitesi raporlama aracına sahiptir.

Mobil Web Uygulaması Geliştirme Araçları

"Doğru iş için doğru araçlar" , diğer alanlarda olduğu kadar yazılım geliştirmede de geçerli olan eski bir özdeyiştir. Bu eğitim, mobil web uygulaması geliştirme için daha popüler ve yaygın olarak kullanılan araçlardan bazılarını sağlar ve bunlara giriş sağlar, ancak mobil web uygulamanızı geliştirmek için "doğru" olan başka araçların da olabileceğini unutmayın. gereksinimleriniz ve mevcut kaynaklarınız.

Doğru JavaScript Mobil Web Uygulaması Çerçevesini Seçme

Mobil web uygulaması geliştirme, tarayıcılar arası uyumluluk ve mobil tarayıcılarda tutarsız HTML ve CSS gibi aynı ortak zorlukların çoğunu yaratma eğiliminde olduğundan, bu sorunları ele almak için özel olarak tasarlanmış çerçeveler (HTML5 ve CSS3'e dayalı) geliştirilmiştir ve çok çeşitli akıllı telefon ve tabletlerde mümkün olduğunca kusursuz çalışmak. Bu mobil web uygulaması çerçevelerinin çoğu hafiftir, bu da sitenizin görünümünden ve verdiği histen ödün vermeden mobil web'de hızlı gezinmeyi kolaylaştırmaya yardımcı olur.

Görüşümüzü mobil ortamın ötesine taşıyan, bahsetmeye değer tek bir popüler JavaScript çerçevesi varsa o da jQuery'dir. Masaüstü sürümüne aşinaysanız, mobil web uygulamanız için jQuery Mobile'ı denemenizi öneririm. Anlamsal işaretlemeyi hareket dostu bir biçime dönüştüren ve dokunmatik ekranlarda işlemleri kolaylaştıran bir widget kitaplığına sahiptir. En son sürüm, kullanıcı arayüzünüzü gerçekten iyileştirebilecek birçok grafik öğeyle bir yumruk oluşturan gerçekten hafif bir kod tabanından oluşur.

Diğer bir alternatif olan Sencha Touch da hızla pazar payı kazanıyor. Genel olarak mükemmel performans sunar ve büyük ölçüde yerel gibi görünen ve hissettiren bir mobil web kullanıcı arabirimi oluşturmaya yardımcı olur. Tam özellikli widget kitaplığı, Sencha'nın ExtJS JavaScript kitaplığına dayanmaktadır.

jQuery Mobile ve Sencha Touch'ı karşılaştırırken göz önünde bulundurulması gereken bazı önemli farklılıklar şunlardır:

  • Bak ve hisset. Genel olarak konuşursak, bir Sencha Touch uygulamasının görünümü ve hissi, bir jQuery mobil uygulamasınınkinden daha net ve üstündür, ancak bu tür tepkilerin oldukça öznel olma eğiliminde olduğunu unutmamak önemlidir.
  • genişletilebilirlik jQuery Mobile çok sayıda 3. taraf uzantısı sunar ve doğası gereği oldukça genişletilebilir olacak şekilde tasarlanmıştır, oysa Sencha Touch şu anda çok daha fazla "kapalı" bir çerçevedir.
  • Cihaz desteği. jQuery Mobile şu anda Sencha Touch'tan daha büyük bir cihaz kesitini hedefliyor.
  • HTML "vs." JavaScript. jQuery büyük ölçüde HTML merkezlidir (yani, JavaScript'te mevcut HTML'yi genişletme ve değiştirme), oysa Sencha Touch kodlaması tamamen JavaScript tabanlıdır. (Bu, teknoloji seçimlerinizi yaparken göz önünde bulundurmanız gereken geliştirme ekibinizin beceri setinin bir örneğidir.)
  • Dış bağımlılıklar. jQuery mobile, DOM manipülasyonu için jQuery ve jQuery UI gerektirir, oysa Sencha Touch'ın harici bağımlılığı yoktur.
  • Öğrenme eğrisi. Çoğu geliştirici, jQuery ile hızlanma süresinin Sencha Touch'ınkinden daha az olduğunu düşünüyor, belki de standart jQuery kitaplıklarına zaten aşina olan web geliştiricilerinin büyük bir yüzdesi tarafından destekleniyor.

Duyarlı Çerçeveler ve Mobil Web Uygulamaları

Son yıllarda, şu anda en popüler olan Bootstrap ve Foundation olmak üzere artan sayıda duyarlı çerçeve ortaya çıkmaya başladı. Kısacası, duyarlı çerçeveler, en yaygın düzenleri ve kullanıcı arabirimi paradigmalarını yeniden kullanılabilir, performansı optimize edilmiş bir çerçeveye dahil ederek web tabanlı duyarlı UI tasarımını ve uygulamasını basitleştirir ve düzenler. Çoğunlukla CSS ve JavaScript'e dayanan bu çerçevelerin çoğu açık kaynaklıdır, ücretsiz olarak indirilebilir ve kolayca özelleştirilebilir. Çok özel gereksinimleriniz yoksa, bu çerçevelerden birinin kullanılması, mobil web uygulamanızı tasarlama ve uygulama çabasını azaltacaktır.

Önde gelen iki seçenek olan Bootstrap ve Foundation incelenirken, dikkate alınması gereken önemli farklılıklardan bazıları şunlardır:

  • Hedeflenen platformlar. Bootstrap mobil, tablet ve masaüstü cihazları desteklerken, öncelikle masaüstü kullanımına yöneliktir. Foundation ise temelde tüm ekran boyutları ve türleri için tasarlanmıştır.
  • Tarayıcı Uyumluluğu. Bootstrap, IE7 veya üstü ile uyumluyken, Foundation yalnızca IE9 veya üstü ile uyumludur.
  • Düzenlerin ve bileşenlerin çeşitliliği. Bootstrap, Foundation tarafından sunulandan çok daha büyük bir UI öğeleri koleksiyonuna sahiptir.
  • Otomatik yeniden boyutlandırma. Foundation ile ızgara, mevcut tarayıcı yüksekliğine ve genişliğine göre küçülür ve uzar, oysa Bootstrap yalnızca standart bir ekran boyutu kümesine dayalı olarak önceden tanımlanmış bir ızgara boyutu kümesini destekler.

Mobil Web Uygulamalarında Hata Ayıklama ve Test Etme

Mobil web uygulamalarının hatalarını ayıklamak, özellikle de test etmek için farklı cihazlar aramanız veya hedeflenen istemci platformlarının (genellikle kusurlu) bir öykünmesi için SDK'lar yüklemeniz gerekiyorsa, zor ve biraz sinir bozucu olabilir.

Bu bağlamda, mobil web geliştirmenin (yerel uygulama geliştirmeyle karşılaştırıldığında) açık bir avantajı, uygulamanızda hata ayıklamak için standart tarayıcı tabanlı geliştirici araçlarını kullanabilmenizdir. Uzaktan hata ayıklama konusundaki kişisel tercihime dayanarak, bu uygulama geliştirme eğitiminde önerdiğim, DevTools'lu Chrome'dur. Diğer standart seçenekler arasında Firebug'lu Firefox veya Opera'nın Dragonfly araçları bulunur.

Web uygulamalarının nasıl geliştirileceğini öğrenirken Chrome'a ​​ve DevTools'a bakın.

DevTools ile Chrome'u tercih etmemin nedenlerinden bazıları şunlardır:

  • Chrome'un DevTools'unda mobil emülatör. Bu, mobil web uygulamalarında hata ayıklamak için Chrome'u seçmek için belki de tek başına yeterli nedendir. Temel özellikler arasında dokunma olaylarının öykünmesi, kullanıcı aracısı kimlik sahtekarlığı, ağ bant genişliği kısıtlaması, coğrafi konum geçersiz kılmaları, cihaz yönlendirme geçersiz kılmaları ve CSS Ortam Türü Öykünmesi yer alır.
  • Etkileşimli düzenleyici. JavaScript veya CSS'yi anında düzenleme yeteneği.
  • Üstün JavaScript hata ayıklayıcı. DOM kesme noktalarına izin verir ve JavaScript kod yürütme sürenizin profilini çıkarma yeteneği sağlar.
  • Yerleşik JSON ve XML görüntüleyiciler. Sunucu yanıtlarını incelemek için herhangi bir eklenti ihtiyacını ortadan kaldırır.
  • Doğrudan USB üzerinden Android Hata Ayıklama Köprüsü (ADB) protokolü desteği. Uzaktan hata ayıklama oturumunun kolayca başlatılmasını kolaylaştırır. (Burada, Chrome'da uzaktan hata ayıklamanın nasıl başlatılacağına ilişkin Google tarafından hazırlanan iyi bir eğitim verilmiştir.)
  • Kaynakların dinamik denetimi. IndexedDB veya Web SQL veritabanları, yerel ve oturum depolama, tanımlama bilgileri ve Uygulama Önbelleği kaynakları dahil olmak üzere uygulamanızın yerel veri kaynaklarını incelemenize olanak tanır. Ayrıca, görseller, yazı tipleri ve stil sayfaları dahil olmak üzere uygulamanızın görsel kaynaklarını da hızla inceleyebilirsiniz.

Web uygulamanızın düzenini ve çapraz tarama uyumluluğunu test etmek için BrowserStack gibi bazı yararlı çevrimiçi araçları da kullanabilirsiniz. Uygulamanızın URL'sini girin, tarayıcıyı, sürümü ve işletim sistemini seçin ve sitenizin o ortamda öykünülmüş görünümünü (ve yükleme hızını) elde edin. Bu amaçlar için başka bir yararlı araç CrossBrowserTesting'dir.

Sarmak

Pazardaki ve günümüzde kullanımda olan mobil cihazların sayısının, çeşitliliğinin ve karmaşıklığının devam eden hızlı genişlemesiyle, etkili, kullanıcı dostu, yüksek performanslı mobil uygulamalara duyulan ihtiyacın önemli ölçüde artması muhtemeldir. Bu uygulamaları akıllıca ve verimli bir şekilde geliştirebilmek bu nedenle büyük önem taşımaya devam edecektir.

Mobil cihazlar için web, yerel ve hibrit mobil uygulama seçenekleri arasında seçim yaparken birçok faktör göz önünde bulundurulmalıdır. Her birinin kendi avantajları vardır, ancak mobil web uygulamaları genellikle en verimli geliştirme (ve dolayısıyla pazara sunma süresi) seçeneğinizi temsil eder. Bu yolda ilerlemeyi seçerseniz, umarım bu mobil web uygulaması geliştirme eğitimi, hedefinize daha doğrudan ve daha başarılı bir şekilde ulaşmanıza yardımcı olur.

İlgili: Uygulamanızı Karlı Hale Getirin—Mobil Analizden Yararlanın