Cara Menyenangkan Membuat Game Sendiri dengan JavaScript

JavaScript adalah bahasa pemrograman yang serbaguna, dan salah satu penggunaan paling menariknya adalah membuat game. Dalam artikel ini, kita akan menjelajahi dunia menciptakan game dengan JavaScript dan mengapa ini adalah pengalaman yang menyenangkan.

Alasan Mengapa Membuat Game dengan JavaScript Menyenangkan?

1. Kreativitas Tanpa Batas

Ketika Anda mulai membuat game dengan JavaScript, Anda memasuki dunia tanpa batas di mana hanya imajinasi Anda yang mengatur batasan. Anda dapat menciptakan cerita, karakter, dan dunia game Anda sendiri dengan segala detail yang Anda inginkan.

2. Pengalaman Interaktif

Membuat game dengan JavaScript memberi Anda kesempatan untuk menciptakan pengalaman interaktif yang memikat. Anda dapat menggabungkan animasi, suara, dan efek khusus untuk membuat game yang menghibur pemain.

3. Pengembangan Keterampilan

Mengembangkan game dengan JavaScript adalah cara yang bagus untuk meningkatkan keterampilan pemrograman Anda. Anda akan belajar tentang logika, algoritma, dan pemrosesan data dalam konteks yang menyenangkan.

4. Pemuasan Diri

Melihat game Anda bekerja dan dinikmati oleh orang lain adalah pengalaman yang sangat memuaskan. Ini memberi Anda rasa pencapaian yang kuat dan motivasi untuk terus berkembang.

5. Komunitas Game Developer yang Kuat

Tidak perlu merasa sendirian dalam perjalanan ini. Ada komunitas game developer yang kuat yang bersedia berbagi pengetahuan dan pengalaman. Anda dapat belajar banyak dari rekan-rekan developer.

Cara Membuat Game dengan JavaScript

Membuat game dengan JavaScript memerlukan pemahaman dasar tentang HTML, CSS, dan tentu saja JavaScript. Berikut adalah langkah-langkah umum dalam pembuatan game:

1. Persiapkan Lingkungan

Pastikan Anda memiliki editor kode yang sesuai, dan web browser untuk pengujian. Anda juga perlu tahu cara menyimpan dan mengelola proyek Anda.

2. Mulai dengan Konsep Game

Pertama, tentukan konsep game Anda. Apakah itu game puzzle, platformer, atau permainan teka-teki? Apa ceritanya? Siapa karakter utamanya? Bagaimana pemain bisa menang?

3. Pelajari Dasar-dasar JavaScript

Jika Anda belum memahami JavaScript, mulailah dengan belajar dasar-dasar bahasa ini. Anda harus tahu cara membuat variabel, mengelola perulangan dan pengkondisian, dan bekerja dengan fungsi.

4. Menggunakan Library atau Framework

Anda dapat memanfaatkan library atau framework JavaScript game development seperti Phaser atau Three.js. Ini dapat mempercepat proses pengembangan Anda.

5. Coding dan Desain

Mulailah menulis kode game Anda. Ini melibatkan membuat elemen permainan, mengatur aturan, dan mengelola interaksi pemain. Selain itu, Anda juga perlu merancang tampilan game, termasuk grafik, suara, dan animasi.

6. Ujilah dan Tingkatkan

Setelah Anda memiliki game yang berfungsi, uji game Anda secara menyeluruh. Temukan bug dan perbaiki mereka. Pastikan game Anda berjalan lancar di berbagai browser.

7. Bagikan dan Pelajari

Setelah Anda puas dengan game Anda, bagikan dengan teman dan komunitas game developer. Terima umpan balik dan gunakan pengalaman ini untuk memperbaiki game Anda.

Peralatan dan Kebutuhan Membuat Game JavaScript

Untuk membuat game dengan JavaScript, Anda memerlukan berbagai alat dan bahan. Berikut adalah daftar spesifikasi yang Anda butuhkan:

a. Perangkat Keras:

1. Komputer:

Anda memerlukan komputer atau laptop dengan spesifikasi yang memadai untuk pengembangan permainan. Sebaiknya gunakan komputer yang memiliki kecepatan prosesor dan RAM yang cukup untuk menjalankan perangkat pengembangan permainan.

2. Mouse dan Keyboard: 

Perangkat masukan standar seperti mouse dan keyboard diperlukan untuk mengendalikan perangkat pengembangan permainan.

3. Monitor: 

Monitor berkualitas tinggi dengan resolusi yang memadai akan membantu Anda melihat detail permainan dengan jelas.

b. Perangkat Lunak:

1. Text Editor atau Integrated Development Environment (IDE): 

Anda memerlukan text editor atau IDE seperti Visual Studio Code, Sublime Text, atau WebStorm untuk menulis dan mengedit kode JavaScript Anda.

2. Browser Web: 

Anda perlu browser web modern seperti Google Chrome, Mozilla Firefox, atau Safari untuk menguji dan memperbaiki permainan Anda. Chrome sering digunakan karena memiliki DevTools yang kuat untuk debugging.

3. Node.js: 

Node.js adalah runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di luar browser. Ini sering digunakan dalam pengembangan game dengan JavaScript.

4. Library atau Framework Game: 

Jika Anda ingin mempercepat pengembangan game, Anda dapat menggunakan library atau framework game seperti Phaser, Three.js, atau Babylon.js. Pilih yang sesuai dengan jenis game yang ingin Anda buat.

5. Grafik dan Suara: 

Untuk mengembangkan game dengan kualitas tinggi, Anda mungkin memerlukan perangkat lunak desain grafis seperti Adobe Photoshop atau GIMP, serta perangkat lunak pengedit audio seperti Audacity.

6. Version Control: 

Penggunaan sistem kontrol versi seperti Git dan platform hosting seperti GitHub sangat berguna untuk melacak perubahan kode Anda dan berkolaborasi dengan tim jika Anda bekerja dalam tim.

c. Pengetahuan dan Bahan Lain:

1. Pemahaman JavaScript: 

Anda perlu memiliki pemahaman yang baik tentang JavaScript, termasuk konsep dasar seperti variabel, perulangan, pengkondisian, dan manipulasi DOM (Document Object Model).

2. Kreativitas: 

Membuat game adalah proses kreatif. Anda perlu memiliki imajinasi dan kreativitas untuk merancang cerita, karakter, dan elemen visual dan audio yang menarik.

3. Waktu dan Ketekunan: 

Pengembangan game adalah usaha yang memakan waktu. Anda perlu bersabar dan tekun dalam mengatasi masalah, debugging, dan perbaikan.

4. Dokumentasi dan Sumber Daya Online: 

Manfaatkan dokumentasi resmi JavaScript, library game, dan sumber daya online seperti tutorial, forum, dan komunitas game developer.

Dengan alat, perangkat lunak, pengetahuan, dan sumber daya yang sesuai, Anda dapat memulai perjalanan Anda dalam pengembangan game dengan JavaScript. Ingatlah bahwa pengembangan game adalah proses yang menantang, tetapi juga sangat memuaskan ketika Anda melihat hasil akhirnya.

Membuat game dengan JavaScript adalah perjalanan yang menyenangkan dan bisa memuaskan diri anda lebih dari memainkan game orang lain. Ini adalah cara yang fantastis untuk mengeksplorasi kreativitas Anda sambil mengembangkan keterampilan pemrograman yang kuat. Jadi, jika Anda mencari tantangan yang menyenangkan dalam dunia pemrograman, cobalah untuk membuat game dengan JavaScript - siapa tahu, mungkin Anda akan menciptakan game yang menjadi favorit banyak orang!

Oleh ringkes

Selanjutnya

Cara Menggunakan OpenJDK Menggantikan JavaJDK di Windows 32 bit

Oracle sebagai pemilik lisensi resmi Java saat ini tidak lagi mengeluarkan dukungan versi Java terbaru untuk arsitektur teknologi X86 sehingga JDK untuk arsitektur tersebut juga tidak ada. Pengguna Java dengan perangkat lawas harus segera mencari alternatif penggantinya.

Teknologi arsitektur processor X86 atau lebih dikenal dengan 32 bit sekarang semakin ditinggalkan. Banyak teknologi yang sekarang tidak lagi mendukung arsitektur prosessor ini, salah satunya adalah Java dengan JDKnya yang dimulai dari versi 9 keatas. 

Semakin hari perkembangan teknologi semakin banyak pembaruan, agar semakin efektif dan efisien terutama pada bagian pondasi (base) suatu project. Salah satunya adalah penggunaan Java JDK yang menjadi salah satu bagian vital dalam pengembangan aplikasi Android.

Nasib Pengembang Aplikasi dengan Hardware Lawas 

Pengembang aplikasi yang memang bertujuan untuk membuat aplikasi yang didukung perangkat modern, maka harus mengikuti aturan tersebut. Belum lagi banyak teknologi pendukung seperti Gradle dan Plugin yang hanya akan mau menjalankan perintah yang dibuat hanya untuk arsitertur prosessor 64 bit.

Selama kebutuhan aplikasi dalam mengakses fitur hardware belum mengharuskan penggunaan bagian yang terpengaruh mungkin keharusan untuk upgrade belum terasa. Tapi bila sudah mentok atau mengalami dead end maka mau tidak mau harus memikirkan solusi terbaik dari masalah tersebut.

Masalah ini juga saya alami ketika saya tidak dapat menggunakan bagian Android market terbaru pada aplikasi Android saya. Keterbatasan tersebut setelah saya cari penyebabnya adalah pada java JDK dimana saya saat itu masih menggunakan versi Java JDK 8.

Menggunakan OpenJDK di Windows 32 bit

Untuk mengatasi hal tersebut memang disarankan untuk segera upgrade Hardware. Tapi bagi yang belum memiliki kapasitas untuk melakukannya harus mencari solusi alternatif agar tetap dapat mengikuti zaman.

Saat menulis tulisan ini, sebenarnya Java dihalaman web Oracle sudah mencapai versi 19. Untuk tetap dapat menggunakan Java versi terbaru saya menggunakan OpenJDK, tapi saya memilih untuk menggunakan versi java 15 sesuai kebutuhan saya.

Cara mendapatkannya cukup mudah yaitu bisa mendownload melalui website https://adoptopenjdk.net/ atau saat ini telah migrasi ke https://adoptium.net/. Sebagai informasi bila anda tidak menemukan pilihan openJDK versi 32 bit pada halaman yang anda buka, silahkan pilih menu release archieve.

Untuk menggunakan openJDK cukup mudah silahkan install bila anda pilih bentuk msi atau extract bila anda punya bentuk zip, bila anda telah pernah menggunakan javaJDK sebelumnya anda tinggal mengubah setting path di System variabel windows pada variabel JAVA_HOME diarahkan ke posisi path anda menginstall OpenJDK. 

Contohnya seperti punya saya di:

C:\Program Files\AdoptOpenJDK\jdk-15.0.2.7-hotspot

Silahkan restart windows, dan hasilnya seperti berikut:

Oleh ringkes

Selanjutnya

Arti Tanda Lingkaran di WhatsApp

WhatsApp memberikan fitur baru berupa tanda lingkaran pada chat sejak bulan Maret 2022 dan baru sampai untuk pengguna Indonesia.

Tanda baru pada chat selain tanda centang satu, centang dua, dan centang biru sekarang ada tanda baru untuk melengkapi fitur WhatsApp. Tanda baru tersebut berbentuk dua lingkaran dengan garis putus-putus diluarnya.

Banyak orang yang mempertanyakan apa maksud tanda tersebut, apakah tanda tersebut juga ada artinya seperti tanda centang pada chat?.

Arti Tanda Lingkaran Putus Pada WhatsApp

Tanda lingkaran akan muncul pada chat WhatsApp anda, berarti adanya chat balasan untuk status yang telah anda buat. Chat yang berkaitan dengan status anda dibedakan dengan chat biasa menggunakan tambahan tanda lingkaran.

Tanda lingkaran pada chat hanya akan muncul pada chat tertentu untuk menunjukkan chat tertentu yang berhasil dikirim oleh pengguna. Sehingga berbeda dengan chat biasa yang akan selalu ditandai dengan tanda centang satu untuk sudah dikirim, centang dua sudah sampai, dan centang biru untuk sudah dibuka.

Dengan tanda lingkaran itu anda akan bisa memantau apakah status yang anda buat sudah direspon oleh teman anda yang melihatnya melalui tanda yang muncul pada halaman muka WhatsApp Anda.

Selain anda selaku penerima chat, orang yang mengirim respon status juga akan dapat melihat tanda lingkaran pada chat yang dia kirim. Tanda tersebut dapat ditemukan pada halaman ruang obrolan pada sebelah kanan centang untuk chat yang berkaitan dengan status.

Nah sekarang anda sudah gak perlu repot untuk membedakan chat teman-teman yang menanggapi status anda ataupun chat dari mereka yang memang ada perlu lain. 

Demikian informasi kali ini, semoga bermanfaat.

Oleh ringkes

Selanjutnya

Persamaan dan Perbedaan Tugas Web Developer dengan Web Programmer

Tidak dapat dipungkiri bahwa dunia teknologi sekarang ini banyak menggunakan jasa web developer dan programmer. Walaupun sering dianggap sama ternyata banyak yang belum tahu bahwa sebenarnya keduanya adalah berbeda.

Saat semua proses baik itu ekonomi, kesehatan dan lainnya hingga pendidikan harus terhubung, maka jembatan yang paling relevan saat ini adalah menggunakan internet. Untuk mengoptimalkan jalur internet maka tidak dapat jauh dari teknologi web.

Sedangkan manusia dapat mengakses internet memerlukan perangkat yang mampu menterjemahkan sinyal menjadi informasi yaitu dengan komputer. Meskipun banyak perangkat lain seperti smartphone, tablet dan smartwatch yang menjadi produk turunan,  tapi seyogyanya mereka juga adalah komputer.

Dalam memanfaatkan internet manusia sangat dimudahkan oleh komputer sehingga semua proses sudah dikerjakan oleh mesin. Penulis program atau disebut programmer membuat rangkaian instruksi yang dapat dimengerti mesin sehingga mesin dapat melayani manusia dalam bentuk aplikasi atau program yang sudah jadi.

Untuk membuat program selama ini banyak orang mengira cukup dikerjakan oleh programmer. Tapi kemudian belakangan muncul istilah developer. Karena sama-sama memiliki keahlian menulis program maka banyak orang yang menganggap keduanya sama saja.

Perbedaan Web Developer dengan Programmer

Seorang Web developer atau secara lokalnya adalah pengembang web memiliki tugas yang tidak sekedar menulis kode seperti seorang programmer. Seorang web developer dituntut agar dapat membuat dan mengembangkan situs web hingga dapat dijalankan secara menyeluruh.

Situs web ternyata tidak hanya berisi kode program, terdapat banyak hal lain yang menyusunnya. Bagian paling nampak dari situs web adalah adanya konten, desain, dan dibalik itu ada jalur proses bisnis, sistem database, sistem pertukaran data (API) yang ternyata tidak sembarangan membuatnya. 

Masih ada banyak tugas yang harus dilakukan oleh seorang pengembang web yang bukan termasuk dalam urusan koding atau menulis program. Oleh sebab itu beberapa bagian lainnya akan dikerjakan bersama-sama dengan desainer grafis, penulis konten maupun para ahli pemasaran yang paham urusan search engine optimalisation (SEO).

Maka dari itu pengembang web juga dibagi menjadi tiga bagian untuk mempermudah kerjanya, antara lain: 

• FrontEnd Developer adalah developer yang mengurusi tampilan yang langsung dapat dilihat oleh pengunjung web. Pada umumnya bagian ini mengurus bagian pemrograman HTML, CSS dan JavaScript.
• Backend Developer merupakan developer yang mengurusi lalu lintas data yang diproses maupun disimpan dalam sistem. Pada umumnya bagian backend developer perlu memahami urusan dinamic programming (PHP, ASP, Java), service, server, API, SQL, ataupun noSQL.  
• Full Stack Developer merupakan developer yang bertanggung jawab pada kelancaran semua urusan FrontEnd dan Backend.

Pada dasarnya seorang web developer musti menguasai cara  mengembangkan sistem berbasis web tapi juga lihai menulis instruksi untuk dikerjakan komputer atau istilah mudahnya adalah programing. Jadi apabila anda bercita-cita sebagai seorang developer, maka secara tidak langsung anda akan dituntut untuk juga menjadi seorang programmer.

Oleh ringkes

Selanjutnya

Cara Menggunakan jQuery Menemukan Elemen HTML yang Disembunyikan

Pada saat ini perkembangan FrontEnd menjadi sangat menarik. Terlebih lagi dengan kemampuan JavaScript untuk membantu menyembunyikan elemen HTML ataupun mengelola elemen baru, sehingga developer dapat membuat aplikasi yang interaktif tanpa harus banyak berpindah halaman.

Dulu programmer menggunakan metode dengan banyak halaman untuk menampilkan suatu layanan tertentu misalnya halaman utama, halaman informasi, halaman formulir registrasi, halaman login dan lain sebagainya. Masing-masing halaman benar-benar didesain dan dibuat terpisah dalam file masing-masing, sehingga pengguna dapat memanfaatkan layanan dengan cara berpindah melalui link.

Dengan semakin banyak halaman dengan banyak elemen maka tentunya juga memerlukan tambahan waktu untuk mendesain ataupun menulis kode untuk masing-masing halaman dalam file. Semakin besar file juga akan berakibat negatif karena mempengaruhi lama waktu loading, sehingga dapat menurunkan antusias pengguna.

Tehnik Virtual DOM

Semakin kesini, banyak perubahan terjadi dimana suatu layanan tidak perlu banyak memerlukan file berukuran besar untuk diload. Semua elemen bisa dibuat dengan mode virtual DOM (Document Object Model) atau akan dibuat hanya saat diperlukan saja. Seperti konsep elemen yang digunakan react, ataupun juga konsep elemen template seperti pada vue.

Cara baru dalam membuat elemen HTML ini membuat waktu render halaman menjadi sangat hemat, sehingga mencapai kondisi ideal untuk dijadikan aplikasi mobile maupun desktop.

Manfaat Elemen Yang Disembunyikan

Sedikit berbeda dengan tehnik diatas dimana DOM baru akan dibentuk dan diload ketika dibutuhkan, kita juga dapat melakukan tehnik sederhana dengan menyembunyikan dan menampilkan elemen dari yang sudah ada.

Mungkin bagi yang belum mencoba fitur framework seperti diatas, akan lebih nyaman dengan metode menggunakan library seperti misalnya jQuery. Berbeda dengan cara yang digunakan framework, pada jQuery cara menghemat adalah dengan menyembunyikan elemen yang tidak dibutuhkan dan menampilkan yang dibutuhkan saja.

Menemukan Elemen yang Disembunyikan

Dengan membuat tampilan element saat diperlukan saja, maka sering menimbulkan pertanyaan bagaimana cara mendeteksi elemen yang sedang disembunyikan? Atau dalam kondisi saat terpengaruh fungsi disembunyikan sesaat seperti dalam toggle misalnya.

Misalnya saat elemen sedang terpengaruh fungsi .hide(), .toggle(), atau bahkan .show()?

Pada dasarnya jQuery bekerja dengan memanipulasi DOM di properties CSS dimana akan merubah kondisi sesuai dengan kebutuhan. Untuk mendeteksi kondisi elemen sedang disembunyikan atau tidak maka juga dapat menggunakan fungsi jQuery seperti berikut:

// untuk mendeteksi apakah elemen sedang tampil

$(element).is(":visible");

atau bisa juga dengan 

// untuk mendeteksi apakah elemen sedang disembunyikan

$(element).is(":hidden");

Oleh ringkes

Selanjutnya

Keuntungan Menggunakan Email Hosting Dibanding Email Gratisan

Saat ini hampir semua orang pasti sudah mengenal email, bahkan mungkin banyak yang telah memiliki alamat email tidak hanya satu. Email merupakan surat elektronik yang dapat digunakan mengirim ataupun menerima surat dalam bentuk digital. 

Ternyata seiring perkembangan era digital sekarang ini fungsi email tidak hanya terbatas untuk mengirim dan menerima surat elektronik saja. Saat ini email juga banyak digunakan sebagai syarat mengakses layanan tertentu misalnya untuk registrasi akun game online, memesan tiket pesawat, mendaftar akun bank dan lain sebagainya.

Untuk pelaku bisnis fungsi email jauh lebih penting, salah satunya yaitu sebagai media pemasaran ataupun media komunikasi dengan pelanggan. Media pemasaran menggunakan email sering kali terbukti lebih efektif dan efisien ketimbang media pemasaran lainnya.

Pemasaran menggunakan email umumnya lebih tertarget dan lebih jelas siapa sasarannya. Asalkan alamat email yang terkumpul dijaring melalui cara yang sesuai strategi, bukan asal-asalan atau bahkan dengan cara membeli dari sumber sembarangan sehingga data menjadi random.

Email Gratisan vs Email Berbayar

Sekarang ini banyak orang yang menggunakan layanan email gratis seperti gmail, Yahoo ataupun hotmail. Tidak hanya perorangan bahkan tidak jarang perusahaan juga ada yang menggunakan layanan email gratis tersebut.

Layanan email gratis memang memudahkan dan umumnya tidak merepotkan, sebab sudah pasti anda  dapat menggunakan layanan email tanpa harus membayar dan semua sudah di maintenance secara otomatis oleh penyedia layanan.

Sayangnya layanan email gratis tidak dapat di-custom dan kurang dapat menunjukkan kredibilitas perusahaan ataupun status sosial seseorang di masyarakat. Sehingga sedikit banyak tentu ada pengaruhnya apabila digunakan sebagai alamat email resmi suatu perusahaan atau orang yang terkenal.

Seringkali email pemasaran yang dikirim dengan alamat gratisan akan dianggap tidak asli dari perusahaan dan dianggap spam. Tentu customer akan lebih yakin dengan email yang dikirim dari alamat resmi perusahaan dari pada email gratisan.

Macam Layanan Email

Saat ini terdapat berbagai layanan email yang ada di Internet, namun pada secara garis besar ada 3 jenis yang perlu anda ketahui.

Email Gratisan

Layanan email ini pada umumnya memberikan layanan yang memudahkan dan tidak banyak pengaturan. Batasan yang paling umum ada pada email gratisan adalah pada keterbatasan customisasi nama, kuota, cara pengiriman. Layanan email gratisan kadang juga menampilkan iklan.

Email Shared Hosting

Dari namanya yang sudah terdapat kata shared, maka layanan email ini bisanya disertakan pada pembelian atau sewa paket hosting website. Email shared hosting akan menggunakan sebagian ukuran dari kapasitas penyimpanan hosting website. 

Layanan email shared hosting ini pada umumnya juga dikenal dengan sebutan webmail. Untuk mengaktifkan layanan ini anda hanya perlu mengakses setting pada cpanel yang sudah disediakan perusahaan penyedia hosting website.

Keuntungan dari email shared hosting yang paling nampak adalah dengan kebebasan dalam menggunakan nama email yang dapat anda pilih sesuai dengan nama domain website anda. Misalnya nama domain website anda www.contohweb.com maka nama email anda dapat menggunakan nama website dibelakangnya. Contoh:

CustomerService@contohweb.com.

Email Hosting

Layanan email hosting merupakan layanan email yang paling sering direkomendasikan untuk perusahaan. Selain untuk menunjang pemasaran perusahaan, email hosting juga dapat menunjang pengelolaan email antar departemen internal perusahaan karena terdapat fasilitas pengelolaan masing-masing email pada server yang terpisah dengan webhosting.

Email hosting memiliki semua kelebihan webmail dan tidak perlu berbagai tempat dengan hosting website. Sehingga lebih mudah diatur dan keamanannya lebih dapat dipantau.

Bila perusahaan sudah menerapkan konsep paperless atau meminimalkan penggunaan dokumen dalam bentuk fisik yang harus dicetak di atas kertas, maka email hosting akan banyak membantu dengan berbagai kelebihan tambahan lainnya sebagai berikut:

• Branding Perusahaan
• Kredibilitas perusahaan meningkat
• Email dapat dibackup
• Kapasitas dapat diatur dan lebih besar
• Pengaturan privasi lebih terjamin
• Pengelolaan akun dapat lebih fleksibel

Untuk menggunakan layanan Email baik Shared Hosting ataupun Email Hosting memerlukan server yang harus selalu online. Perusahaan dapat memilih membangun sistem server sendiri ataupun menyewa layanan server email pada perusahaan yang khusus mengurusi layanan hosting.

Dengan membangun server sendiri maka perusahaan harus bertanggung jawab pada pengaturan dan pengelolaan baik berupa privasi, koneksi, keamanan dan maintenance sendiri. Namun bila tidak ingin direpotkan dengan semua hal tersebut maka perusahaan dapat mengalihkan beban tanggung jawab tersebut pada perusahaan layanan hosting.

Oleh sebab itu pemilihan layanan hosting tidak boleh sembarangan. Salah satu layanan hosting terpercaya untuk pengelolaan webhosting dan email hosting adalah niagahoster.

Oleh ringkes

Selanjutnya

Mengatasi Perbedaan Perilaku HTML5 di Browser PC dengan Mobile App

HTML5 merupakan teknologi yang telah membuka jalur pembuatan berbagai produk software tanpa harus tergantung pada sistem operasi tertentu. Tidak peduli sistem operasi modern apa ataupun hardware apa yang digunakan, hampir semuanya kini dapat mengakses HTML5 dengan minimum perbedaan.

Saat ini banyak cara yang dapat dipilih developer untuk membuat aplikasi. Dengan hanya satu kali menulis kode saja, maka source code tersebut dapat dibuild atau juga dicompile menjadi aplikasi untuk berbagai platform. Pada umumnya cara ini tidak lepas dari peran teknologi web yang muncul lebih dulu atau peran dari aplikasi koding yang menyediakan fasilitas untuk porting source code menjadi bentuk aplikasi native dari suatu platform.

Salah satu teknologi web yang makin marak digunakan bahkan menurut saya oleh Visual Studio Code, Construct bahkan flutter sekalipun berdasarkan kemajuan dari pengembangan HTML5. Penggunaan HTML5 digabungkan dengan Javascript membuat pengembangan aplikasi menjadi lebih simple dan tidak banyak membuang waktu untuk dapat membuat aplikasi dapat berjalan di berbagai platform.

Menulis kode untuk aplikasi yang sama untuk lingkungan sistem operasi atau platform berbeda bisa saja dapat memiliki kesamaan. Tetapi setelah praktek dengan beberapa project aplikasi dan game ternyata tetap saja ada yang berbeda.

Baca juga 3 Tips Sukses Membuat Berbagai Aplikasi Beda Platform dengan HTML5

Pada pembuatan aplikasi yang memanfaatkan HTML5 seringkali orang berpikiran selama dasar (base) nya sama maka tidak akan ada perbedaan. Sekali membuat aplikasi HTML5 + Javascript + CSS maka dianggap dapat digunakan untuk dicompile menjadi aplikasi native sepenuhnya tanpa merubah kode.

Tidak sepenuhnya salah tapi bila mulai berkaitan dengan sisi yang lain seperti penyimpanan localstorage, Pembacaan Ajax, dan lain sebagainya ternyata tetap saja membutuhkan koreksi.

Seringkali saya juga menemukan bahwa saat membuat aplikasi HTML5 di PC ataupun laptop hasil debugnya akan terjadi perbedaan dengan aplikasi mobilenya. Seperti teknologi pendukung HTML5 di mobile yang menggunakan webkit ataupun browsernya belum mendukung teknologi service workers.

Dengan perbedaan ini maka debug baik di sistem operasi atau platform yang digunakan dan debug pada platform tujuan sangat penting. Dari sekian percobaan saya dalam mengatasi perbedaan itu saya seringkali salah mengambil solusi malah pada pembacaannya misalkan begini:

Agar lebih mudah dipahami saya menggunakan metode Asyncrhonous:

1 2 3 4 5 6 7 8 9

$.ajax({ url:path+'/siswa.json', success: function(isi){ //isi langsung dimasukkan localStorage untuk simpan localStorage.siswa = isi; window.localStorage.setItem('siswa', translate); }, async:false });

Dari contoh diatas, hasilnya hanya akan dapat benar apabila yang dibaca dari data siswa merupakan data JSON. Tapi bila pembacaan data isinya bukan JSONnya sehingga menjadi salah apabila di eksekusi pada platform yang berbeda. Sehingga saya mengambil langkah kesalahan lagi dengan menggunakan pendeteksi JSON seperti berikut:

1 2 3 4 5 6 7 8

function isJson(str) { try { JSON.parse(str); } catch (e) { return false; } return true; }

Sehingga bila dimasukkan dalam ajax jadinya:

1 2 3 4 5 6 7 8 9 10 11

$.ajax({ url:path+'/siswa.json', success: function(isi){ //isi diperiksa bila json baru disimpan ke localStorage if(isJson(isi)==true){ localStorage.siswa = isi; window.localStorage.setItem('siswa', translate); } }, async:false });

Belajar dari kesalahan tersebut, maka sebaiknya yang dideteksi bukan datanya tapi langsung pada platformnya. Sebab bila didebug pada browser hasinya tidak sama bila dijalankan pada aplikasi native. Sehingga perlu menggunkan pendeteksi platform sebagai berikut:

1 2 3 4 5

function isMobile() { let check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; }

Sehingga bila dimasukkan dalam Ajax jadinya:

1 2 3 4 5 6 7 8 9 10 11 12 13

$.ajax({ url:path+'/siswa.json', success: function(isi){ if(isMobile()){ translate = isi; }else{ translate = JSON.stringify(isi); } window.localStorage.setItem('siswa', translate); }, async:false });

Oleh dodo

Selanjutnya