Mengembangkan Aplikasi Web Seluler: Kapan, Mengapa, dan Bagaimana

Ada 6,8 miliar orang di planet ini, 5,1 miliar di antaranya memiliki ponsel. Dan hari ini, persentase yang terus meningkat dari perangkat ini adalah smartphone. Menurut Studi Pusat Penelitian Pew baru-baru ini, jumlah pengguna yang mengakses Internet di ponsel cerdas mereka meningkat lebih dari dua kali lipat dalam 5 tahun terakhir, seperti halnya jumlah pengguna yang mengunduh dan menggunakan aplikasi seluler. Dari mereka yang menggunakan Internet atau email di ponsel mereka, lebih dari sepertiga online terutama melalui perangkat genggam mereka.

Memang, komputasi seluler menjadi semakin ada di mana-mana… dan itu luar biasa.

Kecuali, tentu saja, jika tidak.

Sebagai pengguna perangkat seluler, beberapa hal yang membuat frustrasi dan sulit dinavigasi dengan jari gemuk seperti aplikasi web seluler yang dirancang dengan buruk, atau bahkan aplikasi asli.

Dan sebagai pengembang aplikasi seluler, beberapa hal dapat menjadi sangat menjengkelkan seperti berusaha untuk mendukung sebanyak mungkin klien seluler, yang masing-masing memiliki serangkaian keanehan yang membuat frustrasi. Apakah Anda memilih untuk mengembangkan web seluler, aplikasi asli, atau hibrida, upaya untuk mendukung banyak browser seluler, perangkat yang lebih eksotis, dan menguasai berbagai platform memang bisa menjadi pengalaman yang cukup menguras tenaga.

Tentu saja, tidak setiap pengembang saat ini perlu khawatir tentang mendukung klien seluler. Tetapi sifat perangkat dan aplikasi seluler yang semakin ada di mana-mana sangat menunjukkan bahwa mereka yang tidak perlu mendukung klien seluler saat ini kemungkinan besar akan perlu melakukannya dalam waktu yang tidak terlalu lama. Jadi, jika Anda belum berpikir tentang pengembangan aplikasi seluler, Anda mungkin harus melakukannya.

Aplikasi Web Seluler vs. Aplikasi Asli vs. Aplikasi Hibrida

Seperti halnya sebagian besar pilihan teknologi, tidak ada jawaban yang cocok untuk semua dalam hal jenis aplikasi seluler yang akan dikembangkan. Ada banyak praktik terbaik aplikasi web yang perlu dipertimbangkan, tidak semuanya bersifat teknis. Siapa target audiens Anda? Apakah mereka lebih cenderung memilih web seluler atau aplikasi asli? Apa perbedaan antara aplikasi asli dan hibrida? Sumber daya pengembangan apa yang Anda miliki dan teknologi seluler mana yang paling mereka kenal? Apa model lisensi dan penjualan yang Anda bayangkan untuk produk Anda?

Secara umum (walaupun selalu ada pengecualian), rute aplikasi web seluler lebih cepat dan lebih murah daripada rute aplikasi seluler asli, terutama jika tujuannya adalah untuk mendukung berbagai perangkat. Sebaliknya, mungkin ada kemampuan asli perangkat seluler (seperti sensor gerakan dan sebagainya) yang penting untuk aplikasi Anda, tetapi hanya dapat diakses melalui aplikasi asli (yang karenanya akan membuat pilihan aplikasi web seluler menjadi non- pemula untuk Anda).

Dan di luar pertanyaan aplikasi web lama vs. aplikasi asli, aplikasi seluler hibrida mungkin menjadi jawaban yang tepat untuk Anda, bergantung pada kebutuhan dan kendala sumber daya Anda. Aplikasi hibrid, seperti aplikasi asli, berjalan di perangkat itu sendiri (bukan di dalam browser), tetapi ditulis dengan teknologi web (HTML5, CSS, dan JavaScript) dan biasanya didukung oleh kerangka kerja aplikasi hibrid. Lebih khusus lagi, aplikasi hybrid berjalan di dalam wadah asli, dan memanfaatkan mesin browser perangkat (tetapi bukan browser) untuk merender HTML dan memproses JavaScript secara lokal. Lapisan abstraksi web-ke-asli memungkinkan akses ke kemampuan perangkat yang tidak dapat diakses di aplikasi web seluler, seperti akselerometer, kamera, dan penyimpanan lokal.

Namun pilihan apa pun yang Anda buat – apakah itu aplikasi web seluler, aplikasi asli atau hibrida – berhati-hatilah untuk meneliti dan mengonfirmasi asumsi Anda secara memadai. Sebagai contoh, untuk tujuan tutorial pengembangan aplikasi web seluler ini, Anda mungkin telah memutuskan untuk mengembangkan aplikasi seluler asli untuk e-niaga guna menjual produk Anda. Namun, menurut Hubspot, 73% pengguna ponsel cerdas mengatakan bahwa mereka menggunakan web seluler lebih banyak daripada aplikasi asli untuk berbelanja… Jadi, dalam hal ini, Anda mungkin bertaruh pada kuda yang salah.

Dan kemudian, tentu saja, ada pertimbangan praktis waktu dan anggaran. Seperti salah satu pepatah favorit saya, "lebih cepat, lebih baik, lebih murah ... pilih dua" . Meskipun batasan waktu-ke-pasar dan biaya sangat penting dalam pengembangan aplikasi web, sangat penting untuk tidak terlalu berkompromi pada kualitas dalam prosesnya. Cukup sulit untuk memulihkan kepercayaan dari pengguna yang memiliki pengalaman pertama yang buruk.

Memang, web seluler, aplikasi asli, dan aplikasi hibrida semuanya sangat berbeda, masing-masing dengan serangkaian manfaat dan tantangan uniknya sendiri. Tutorial pengembangan web seluler ini secara khusus berfokus pada metodologi dan alat untuk digunakan, dan perangkap yang harus dihindari, dalam pengembangan aplikasi web seluler yang sangat fungsional, intuitif, dan mudah digunakan.

Pengembangan Aplikasi Web Seluler Memerlukan Perencanaan yang Mendetail

Mengidentifikasi persyaratan Anda (atau pelanggan Anda) adalah salah satu praktik terbaik yang paling penting dalam pengembangan aplikasi, seluler atau lainnya. Teliti dengan cermat kemampuan yang ditargetkan untuk menentukan apakah kemampuan tersebut dapat dicapai di aplikasi web seluler Anda. Ini cukup membuat frustrasi, dan sangat tidak produktif, untuk menyadari bahwa satu atau lebih dari fungsi klien penting Anda tidak didukung, ketika Anda telah menginvestasikan waktu dan sumber daya untuk merancang antarmuka berbasis web dan infrastruktur pendukung.

Gotcha umum lainnya untuk pemula pengembang aplikasi web seluler adalah mengasumsikan bahwa kode berbasis web untuk browser desktop akan berfungsi "sebagaimana adanya" di browser seluler. Bukan. Pasti ada perbedaan dan, jika Anda tidak menyadarinya, mereka pasti bisa menggigit Anda. Fungsi putar otomatis tag HTML5 <video> , misalnya, tidak berfungsi di browser seluler. Demikian pula, properti transition dan opacity CSS tidak didukung (atau setidaknya tidak didukung secara konsisten) di sebagian besar browser seluler saat ini. Anda juga akan mengalami masalah dengan beberapa metode API web pada platform seluler, seperti API streaming musik SoundCloud yang memerlukan Adobe Flash yang tidak didukung di sebagian besar perangkat seluler.

Faktor yang sangat rumit dalam pengembangan aplikasi web seluler adalah bahwa masa pakai perangkat seluler cenderung jauh lebih pendek daripada tampilan desktop (masa pakai rata-rata ponsel di AS adalah sekitar 21 bulan). Masa pakai perangkat yang lebih pendek ini, disertai dengan rilis konstan perangkat seluler dan teknologi baru, menghasilkan lanskap perangkat target yang selalu berubah. Meskipun bekerja di browser agak mengurangi masalah ini dengan melindungi Anda dari sejumlah masalah khusus perangkat, Anda masih perlu mendesain tampilan berbasis browser yang mendukung banyak resolusi layar yang berbeda (serta menyesuaikan dengan tepat untuk orientasi lanskap dan potret ).

Pemikiran juga perlu diberikan untuk mendukung Apple's Retina Displays (layar kristal cair yang memiliki kerapatan piksel cukup tinggi sehingga mata manusia tidak dapat membedakan piksel individu pada jarak pandang biasa). Beberapa produk Apple – termasuk iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini, dan iPad Air – menawarkan layar Retina. Khususnya untuk aplikasi web seluler, penting untuk diperhatikan bahwa layar Retina membuat gambar beresolusi rendah (yang biasanya disajikan ke perangkat seluler) terlihat kabur dan pikselasi dapat terjadi. Solusi pengembangan aplikasi terbaik dalam kasus ini adalah membuat server mengenali bahwa permintaan berasal dari perangkat Retina dan kemudian memberikan gambar resolusi lebih tinggi alternatif kepada klien.

Jika Anda ingin menggunakan beberapa hal keren HTML5, ingatlah untuk memverifikasi terlebih dahulu bahwa fungsi yang Anda cari didukung di seluruh lanskap perangkat yang kemungkinan besar akan digunakan pelanggan Anda. Misalnya, di iOS 6 dan di atasnya, tidak ada dukungan untuk fungsi getUserMedia navigator karena kamera hanya dapat diakses melalui aplikasi asli. Dua sumber daya yang bagus untuk memeriksa apa yang didukung pada perangkat dan browser tertentu adalah caniuse.com dan html5test.com.

Kueri media CSS3 juga dapat membantu Anda menyediakan konten yang disesuaikan untuk setiap perangkat. Berikut beberapa contoh kode untuk menangkap karakteristik perangkat yang berbeda, seperti kerapatan piksel, resolusi layar, dan orientasi:

 /* 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... */ } }

Mengoptimalkan Aplikasi Web Seluler Anda untuk Performa

"OMG, benda ini sangat lambat!" Sebagai pengembang aplikasi web seluler, itu mungkin kata-kata terakhir yang ingin Anda dengar dari salah satu pengguna Anda. Oleh karena itu, Anda harus berpikir hati-hati tentang cara mengurangi dan mengoptimalkan setiap byte dan transfer server untuk mengurangi waktu tunggu pengguna. Tidak realistis untuk mengharapkan bahwa transfer akan selalu dilakukan melalui jaringan WiFi, dan Anda harus tahu bahwa 60% pengguna web seluler mengatakan bahwa mereka mengharapkan situs dimuat di ponsel mereka dalam 3 detik atau kurang (sumber). Demikian pula, Google menemukan bahwa, untuk setiap lima detik tambahan waktu muat, lalu lintas turun 20% (dan juga perlu diperhatikan bahwa mesin pencari melihat waktu muat sebagai bagian dari perhitungan skor kualitas halaman).

Sebagai bagian dari tutorial pengembangan aplikasi web seluler ini, berikut adalah beberapa tip yang dapat membantu mengoptimalkan kinerja aplikasi web seluler Anda dan meminimalkan latensi:

• Optimasi Gambar. Waktu muat gambar terkenal sebagai salah satu masalah kinerja terbesar yang memengaruhi pemuatan halaman di perangkat seluler. Penggunaan pengoptimal gambar online, seperti smushit.com, dapat membantu mengatasi masalah ini.
• Kompresi kode. Mengompresi file JavaScript dan CSS Anda, tergantung pada jumlah kode yang Anda miliki, berpotensi memiliki dampak signifikan pada kinerja.
• Kueri basis data.
  • Beberapa browser perangkat seluler tidak menerima cookie sebanyak browser desktop, yang dapat mengakibatkan kebutuhan untuk mengeksekusi lebih banyak kueri daripada biasanya. Oleh karena itu, caching sisi server sangat penting ketika mendukung klien aplikasi web seluler.
  • Ingatlah untuk menggunakan filter yang sesuai untuk mencegah injeksi kueri SQL yang dapat membahayakan keamanan situs dan server Anda.
• Jaringan pengiriman konten (CDN). Jika Anda berencana untuk menyediakan banyak video, gambar, file audio, atau jenis media lainnya, penggunaan CDN sangat disarankan. Beberapa CDN komersial yang lebih umum termasuk Amazon S3, Microsoft Windows Azure, dan MaxCDN. Keuntungan menggunakan CDN sangat banyak dan termasuk:
  • Peningkatan kinerja unduhan. Memanfaatkan sumber daya CDN memungkinkan Anda mendistribusikan beban, menghemat bandwidth, dan meningkatkan kinerja. CDN yang lebih baik menawarkan ketersediaan yang lebih tinggi, latensi jaringan yang lebih rendah, dan kehilangan paket yang lebih rendah. Selain itu, banyak CDN menyediakan pilihan pusat data yang didistribusikan secara global, memungkinkan unduhan terjadi dari server yang lebih dekat ke lokasi pengguna (menghasilkan lompatan jaringan yang lebih sedikit dan unduhan yang lebih cepat).
  • Lebih banyak unduhan bersamaan. Browser biasanya membatasi jumlah koneksi bersamaan ke satu domain, setelah itu unduhan tambahan diblokir hingga salah satu unduhan sebelumnya selesai. Anda sering dapat melihat batasan ini beraksi saat mengunduh banyak file besar dari situs yang sama. Setiap CDN tambahan (pada domain yang berbeda) memungkinkan untuk unduhan bersamaan tambahan.
  • Analisis yang ditingkatkan. Banyak CDN komersial menyediakan laporan penggunaan yang dapat melengkapi analitik situs web Anda sendiri dan yang mungkin menawarkan kuantifikasi tampilan dan unduhan video yang lebih baik. GTmetrix, misalnya, memiliki alat pelaporan situs web yang sangat baik untuk memantau dan mengoptimalkan sumber yang dimuat di situs Anda.

Alat Pengembangan Aplikasi Web Seluler

“Alat yang tepat untuk pekerjaan yang tepat” adalah pepatah kuno yang berlaku untuk pengembangan perangkat lunak seperti halnya untuk domain lainnya. Tutorial ini memberikan dan memperkenalkan beberapa alat yang lebih populer dan banyak digunakan untuk pengembangan aplikasi web seluler, tetapi ingatlah bahwa mungkin ada alat lain yang "tepat" untuk mengembangkan aplikasi web seluler Anda, tergantung pada kebutuhan Anda dan sumber daya yang tersedia.

Memilih Kerangka Aplikasi Web Seluler JavaScript yang Tepat

Karena pengembangan aplikasi web seluler cenderung menciptakan banyak tantangan umum yang sama – seperti kompatibilitas lintas-browser dan HTML dan CSS yang tidak konsisten di browser seluler – kerangka kerja telah dikembangkan (berdasarkan HTML5 dan CSS3) yang dirancang khusus untuk mengatasi masalah ini dan untuk bekerja semulus mungkin pada beragam ponsel pintar dan tablet. Sebagian besar kerangka kerja aplikasi web seluler ini ringan, yang membantu memfasilitasi penjelajahan web seluler yang cepat tanpa mengorbankan tampilan dan nuansa situs Anda.

Memperluas pandangan kami di luar lanskap seluler, jika ada satu kerangka kerja JavaScript populer yang layak disebut, itu adalah jQuery. Jika Anda terbiasa dengan versi desktop, saya sarankan mencoba jQuery Mobile untuk aplikasi web seluler Anda. Ini memiliki perpustakaan widget yang mengubah markup semantik menjadi format yang ramah gerakan, membuat pengoperasian menjadi mudah di layar sentuh. Versi terbaru terdiri dari basis kode yang sangat ringan yang mengemas banyak elemen grafis yang benar-benar dapat meningkatkan UI Anda.

Alternatif lain, Sencha Touch, juga dengan cepat mendapatkan pangsa pasar. Ini menawarkan kinerja yang sangat baik secara keseluruhan dan membantu menghasilkan antarmuka pengguna web seluler yang sebagian besar terlihat dan terasa seperti yang asli. Pustaka widget berfitur lengkapnya didasarkan pada pustaka JavaScript ExtJS Sencha.

Berikut adalah beberapa perbedaan utama yang perlu dipertimbangkan saat membandingkan jQuery Mobile dan Sencha Touch:

• Lihat dan rasakan. Secara umum, tampilan dan nuansa aplikasi Sencha Touch lebih tajam dan lebih unggul daripada aplikasi seluler jQuery, tetapi penting untuk diingat bahwa reaksi semacam itu cenderung sangat subjektif.
• Kemungkinan diperpanjang. jQuery Mobile menawarkan banyak ekstensi pihak ke-3 dan secara inheren dirancang untuk sangat dapat diperluas, sedangkan Sencha Touch saat ini lebih merupakan kerangka kerja "tertutup".
• Dukungan perangkat. jQuery Mobile saat ini menargetkan perangkat yang lebih besar daripada Sencha Touch.
• HTML "vs." JavaScript. jQuery sebagian besar berpusat pada HTML (yaitu, memperluas dan memanipulasi HTML yang ada dalam JavaScript), sedangkan pengkodean Sencha Touch sepenuhnya berbasis JavaScript. (Ini adalah contoh, kebetulan, dari keahlian tim pengembangan Anda yang penting untuk dipertimbangkan saat membuat pilihan teknologi Anda.)
• Ketergantungan eksternal. jQuery mobile membutuhkan jQuery dan jQuery UI untuk manipulasi DOM, sedangkan Sencha Touch tidak memiliki ketergantungan eksternal.
• kurva belajar. Sebagian besar pengembang menemukan waktu peningkatan dengan jQuery kurang dari Sencha Touch, mungkin didorong oleh persentase besar pengembang web yang sudah akrab dengan perpustakaan jQuery standar.

Kerangka Kerja Responsif dan Aplikasi Web Seluler

Semakin banyak kerangka kerja responsif mulai bermunculan dalam beberapa tahun terakhir, dengan dua yang paling populer saat ini adalah Bootstrap dan Foundation. Singkatnya, kerangka kerja responsif menyederhanakan dan merampingkan desain dan implementasi UI responsif berbasis web, merangkum tata letak paling umum dan paradigma UI ke dalam kerangka kerja yang dapat digunakan kembali dan dioptimalkan kinerja. Sebagian besar didasarkan pada CSS dan JavaScript, banyak dari kerangka kerja ini bersifat open-source, gratis untuk diunduh, dan mudah disesuaikan. Kecuali Anda memiliki serangkaian persyaratan yang sangat aneh, kemungkinan penggunaan salah satu kerangka kerja ini akan mengurangi tingkat upaya untuk merancang dan mengimplementasikan aplikasi web seluler Anda.

Memeriksa dua opsi utama, Bootstrap dan Foundation, beberapa perbedaan utama yang perlu dipertimbangkan meliputi:

• Platform yang ditargetkan. Meskipun Bootstrap mendukung perangkat seluler, tablet, dan desktop, Bootstrap terutama berorientasi pada penggunaan desktop. Foundation, di sisi lain, pada dasarnya dirancang untuk semua ukuran dan jenis layar.
• Kompatibilitas peramban. Bootstrap kompatibel dengan IE7 atau lebih tinggi, sedangkan Foundation hanya kompatibel dengan IE9 atau lebih tinggi.
• Keragaman tata letak dan komponen. Bootstrap memiliki koleksi elemen UI yang jauh lebih besar daripada yang ditawarkan oleh Foundation.
• Mengubah ukuran otomatis. Dengan Foundation, kisi-kisi menyusut dan membentang sesuai dengan tinggi dan lebar browser saat ini, sedangkan Bootstrap hanya mendukung kumpulan ukuran kisi yang telah ditentukan sebelumnya berdasarkan kumpulan ukuran layar standar.

Men-debug dan Menguji Aplikasi Web Seluler

Men-debug aplikasi web seluler bisa jadi rumit dan agak membuat frustrasi, terutama jika Anda perlu mencari perangkat yang berbeda untuk diuji, atau memasang SDK untuk emulasi (biasanya tidak sempurna) dari platform klien yang ditargetkan.

Dalam konteks ini, satu keuntungan jelas dari pengembangan web seluler (dibandingkan dengan pengembangan aplikasi asli) adalah Anda dapat menggunakan alat pengembang berbasis browser standar untuk men-debug aplikasi Anda. Berdasarkan preferensi pribadi saya untuk debugging jarak jauh, yang saya rekomendasikan dalam tutorial pengembangan aplikasi ini adalah Chrome dengan DevTools-nya. Opsi standar lainnya termasuk Firefox dengan Firebug atau alat Dragonfly Opera.

Beberapa alasan saya lebih memilih Chrome dengan DevTools-nya antara lain:

• Emulator seluler di DevTools Chrome. Ini mungkin satu-satunya alasan yang cukup untuk memilih Chrome untuk debugging aplikasi web seluler. Fitur utama termasuk emulasi peristiwa sentuh, spoofing agen pengguna, pembatasan bandwidth jaringan, penggantian geolokasi, penggantian orientasi perangkat, dan Emulasi Jenis Media CSS.
• Editor interaktif. Kemampuan untuk mengedit JavaScript atau CSS on-the-fly.
• Debugger JavaScript unggul. Mengizinkan breakpoint DOM dan menyediakan kemampuan untuk membuat profil waktu eksekusi kode JavaScript Anda.
• Penampil JSON dan XML bawaan. Menghindari kebutuhan plugin apa pun untuk memeriksa respons server.
• Dukungan untuk protokol Android Debug Bridge (ADB) langsung melalui USB. Memfasilitasi instantiasi sesi debugging jarak jauh dengan mudah. (Berikut adalah tutorial bagus dari Google tentang cara memulai debugging jarak jauh di Chrome.)
• Inspeksi sumber daya yang dinamis. Memungkinkan Anda memeriksa sumber data lokal aplikasi Anda, termasuk database IndexedDB atau Web SQL, penyimpanan lokal dan sesi, cookie, dan sumber daya Cache Aplikasi. Anda juga dapat dengan cepat memeriksa sumber daya visual aplikasi Anda, termasuk gambar, font, dan lembar gaya.

Untuk menguji tata letak dan kompatibilitas lintas penjelajahan aplikasi web Anda, Anda juga dapat menggunakan beberapa alat online yang bermanfaat, seperti BrowserStack. Cukup masukkan URL untuk aplikasi Anda, pilih browser, versi, dan sistem operasi, dan Anda akan mendapatkan tampilan yang ditiru (dan kecepatan memuat) situs Anda di lingkungan itu. Alat lain yang berguna untuk tujuan ini adalah CrossBrowserTesting.

Bungkus

Dengan ekspansi pesat yang berkelanjutan dari jumlah, variasi, dan kecanggihan perangkat seluler di pasar dan digunakan saat ini, kebutuhan akan aplikasi seluler yang efektif, ramah pengguna, dan berkinerja tinggi kemungkinan akan meningkat secara substansial. Mampu mengembangkan aplikasi ini secara cerdas dan efisien karena itu akan terus menjadi sangat penting.

Banyak faktor yang harus dipertimbangkan saat memilih antara opsi aplikasi seluler web, asli, dan hibrida untuk perangkat seluler. Masing-masing memiliki kelebihannya sendiri, tetapi aplikasi web seluler sering kali mewakili opsi pengembangan (dan karenanya waktu-ke-pasar) Anda yang paling efisien. Jika Anda memilih untuk menempuh jalan itu, saya harap tutorial pengembangan aplikasi web seluler ini membantu Anda lebih langsung dan berhasil ke tujuan Anda.