3 Cara Mudah Membuat Scene di PhaserJS Sesuai Konsep JavaScript

Setiap game digital memiliki tampilan visual yang biasa disebut scene. Secara umum scene juga bisa digambarkan sebagai tempat atau tampilan dalam game. Didalam scene bisa diisi dengan karakter, object, tombol dan lain sebagainya.

Bila dianalogikan dengan microsoft power point, scene dalam game sama dengan slide. Kamu bisa menambahkan gambar background, pindah dari slide satu ke slide lainnya melalui waktu yang sudah disetting otomatis ataupun melalui klik pada tombol atau cara lainnya. Begitu juga dengan scene sama persis seperti slide.

Scene bisa dimanfaatkan menjadi bermacam-macam tampilan misalnya seperti scene loading, scene menu, scene level-1, scene level-2, scene gameover, scene menang, scene kalah, dan lain-lain. Kamu dapat berpindah scene dengan memicu kejadian misalnya status menang, waktu habis, atau menu yang dipilih.

Apa yang terjadi dalam scene harus sesuai dengan informasi dalam Game Design Dokumen yang kamu buat sebelumnya.

scene game bola pantul


Dalam sebuah Game Design dokumen kamu dapat menemukan Scene lebih mudah di bagian Flowboard, gabungan dari flowchart dan storyboard. Aturan apa yang terjadi dalam sebuah scene akan dapat dipahami dengan mudah oleh programmer melalui flowchart. 

flowchart game

Pada setiap game engine pembuatan scene pada umumnya hampir sama. Kamu diberikan opsi membuat scene dengan layout kosong yang dapat kamu isi dengan menambahkan background dan object yang kamu butuhkan. Kamu hendaknya melakukan setting ukuran panjang lebar atau otomatis menyesuaikan media permainan.

Sedangkan pada game framework seperti Phaser, kamu akan menemukan banyak tutorial mengenai scene. Dalam website resmi PhaserJS di http://phaser.io kamu akan menemukan berbagai macam contoh cara memanfaatkan Phaser. Salah satu kategori contoh tersebut khusus membahas tentang scene.

Cara Membuat Scene di PhaserJS

Memahami Metamorfosa Scene

Pada contoh pada website resmi Phaser tersebut pada umumnya menggunakan satu buah scene saja. Disini sebenarnya saya ingin menunjukkan bagaimana mengembangkan scene yang dari satu buah ke scene yang lebih banyak melalui logika pemrograman javascript. Kita mulai dengan scene paling sederhana.

Catatan : Saya menggunakan Phaser versi 2 untuk menulis penjelasan dalam contoh artikel ini.

Scene Sederhana di Phaser Menggunakan Konsep Function

Jenis scene ini paling mudah dibuat karena paling sederhana karena hanya berisi satu scene atau satu tampilan saja. Dalam tutorial penjelasan fitur di website phaser pada umumnya menggunakan jenis scene  ini.

Contoh sebuah  scene yang menampilkan sebuah gambar pesawat

var game = new Phaser.Game(
window.innerWidth
window.innerHeight
Phaser.AUTO
'phaser-game'
preload: preloadcreate: createupdate: updaterender: render });

function preload() {
    game.load.image('ship''assets/images/ship.png');
}
function create(){  
    game.add.sprite(game.world.centerX,game.world.centerY,'ship');  
}
function update(){
}
function render(){
}


Multi Scene dalam Satu File Menggunakan Konsep Object

Kemudian dari sebuah scene ini dapat dikembangkan menjadi banyak scene dalam sebuah game tapi masih dalam satu halaman koding. Jadi yang satu halaman adalah kodingnya tapi scene-nya lebih dari satu. Caranya adalah dengan membuatnya menjadi object Javascript.

Keuntungan Multi Scene dalam Satu File

  1. Game menjadi lebih menarik karena memiliki banyak tampilan yang berbeda
  2. Game menjadi lebih mudah dicustom dibandingkan satu scene
  3. Kecepatan loading lebih baik dibandingkan Multiscene banyak file

Pada contoh berikut ini scene dibuat sebagai level, levelnya ada tiga buah yaitu level1, level2 dan level3. Untuk pindah dari scene satu ke scene lainnya dapat dilakukan dengan klik pada layar.

var inGame = new Phaser.Game(window.innerWidthwindow.innerHeight
Phaser.AUTO'phaser-inGame');

inGame.level1 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#000";
        var style = { font: "bold 21px Arial"fill: "#fff"boundsAlignH: "center"
boundsAlignV: "middle" };
    
        text = inGame.add.text(00"dunia 1 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level2');
    }
}

inGame.level2 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#f00";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center",
 boundsAlignV: "middle" };

        text = inGame.add.text(00"dunia 2 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level3');
    }
}
inGame.level3 = {
    preload : function () {
        inGame.load.image('ship''assets/images/ship.png');
        inGame.stage.backgroundColor = "#00f";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center"
boundsAlignV: "middle" };

        text = inGame.add.text(00"dunia 3 \n (silahkan di klik mana aja)"style);
        inGame.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        inGame.add.sprite(inGame.world.centerX,inGame.world.centerY,'ship');    
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level1');
    }
}
inGame.state.add('level1',inGame.level1);
inGame.state.add('level2',inGame.level2);
inGame.state.add('level3',inGame.level3);
inGame.state.start('level1');


Multi Scene dengan File Terpisah Masing-masing Scene

Kode dalam satu file dengan banyak scene akan menjadi menyulitkan saat melakukan koding selanjutnya. Apalagi bila game sudah bertambah kompleks maka kode perlu dipilah-pilah berdasarkan tampilan scene. Oleh sebab itu akan lebih mudah bila setiap scene masing-masing dibuat pada file yang berbeda.

Keuntungan Scene pada File Terpisah
Dengan pemilahan setiap scene dalam satu file berbeda maka kelebihannya yaitu:
  1. Memudahkan programmer dalam proses mencari kesalahan atau debuging. 
  2. Kode scene dapat dibongkar pasang dengan game lain yang serupa dengan mudah. Contohnya bagian loader, game over, credit dan lain-lain yang biasanya setiap game buatan suatu developer sama atau mirip.
  3. Selain itu kode proram menjadi lebih mudah dipelihara untuk pengembangan game selanjutnya. Misalnya bila programmer lebih dari satu maka bisa bekerja secara pararel sehingga game dapat lebih cepat diselesaikan.
Kekurangan Scene Terpisah pada File
  1. Karena file didalam game bertambah banyak maka saat loading memerlukan waktu tambahan.
  2. Hasil akhirnya pada game yaitu ukurannya bertambah besar.

Langsung saja diawali dengan file utama yang akan diload pertama kali saat game dimulai. File ini mengenalkan object semua scene dalam game seperti pada contoh ini adalah object level.
File pertama menginisiasi level, diberi nama level.js:
var inGame = inGame || {};//object yang sebagai pengenal agar tiap file terkoneksi
inGame.dolen = new Phaser.Game(
    window.innerWidth,
    window.innerHeight,
    Phaser.CANVAS,
    parent,
    false,
    false);


inGame.dolen.state.add('level3',inGame.level3);
inGame.dolen.state.add('level2',inGame.level2);
inGame.dolen.state.add('level1',inGame.level1);
inGame.dolen.state.start('level1');

File kedua berisi kode level1, diberi nama level1.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya

inGame.level1 = {
    preload : function () {        
        this.stage.backgroundColor = "#000";
        var style = { font: "bold 21px Arial"fill: "#fff"boundsAlignH: "center"
boundsAlignV: "middle" };
    
        text = this.add.text(00"dunia terpencar 1 \n (silahkan di klik mana aja)",
 style);
        this.input.onTap.add(this.pindah,this);
    },
    create : function (){           
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level2');
    }
}

File ketiga berisi kode level2, diberi nama level2.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya
inGame.level2 = {
    preload : function () {
        this.load.image('ship''assets/images/ship.png');
        this.stage.backgroundColor = "#f00";
        var style = { font: "bold 21px Arial"fill: "#0ff"boundsAlignH: "center"
boundsAlignV: "middle" };
        text = this.add.text(00"dunia terpencar 2 \n (silahkan di klik mana aja)",
 style);
        this.input.onTap.add(this.pindah,this);
    },
    create : function (){   
        this.add.sprite(this.world.centerX,this.world.centerY,'ship');  
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level3');
    }
}

File keempat berisi kode level3, diberi nama level3.js:
var inGame = inGame || {};//terhubung dengan object inGame lainnya
var kapal;
inGame.level3 = {
    preload : function () {
        this.load.image('ship''assets/images/ship.png');
        this.stage.backgroundColor = "#00f";
        
        this.input.onTap.add(this.pindah,this);
        
    },
    create : function (){   
        this.add.sprite(this.world.centerX,this.world.centerY,'ship');  
    },
    update : function (){
    },
    render : function (){
    },
    pindah : function (){
        this.game.state.start('level1');
    }
}

Setiap file harus dipanggil dalam file html utama agar dapat dijalankan. Pada umumnya file html utama itu adalah index.html. Contohnya dengan urutan seperti berikut:
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="phaser.2.7.7.min.js"></script>
    </head>
    <body>
        <script src="level3.js"></script>
        <script src="level2.js"></script>        
        <script src="level1.js"></script>
        <script src="level.js"></script>
    </body>
</html>

Kesimpulan:
Cara membuat scene menggunakan Phaser dapat didalam sebuah file, atau bisa juga di sendirikan setiap scene dalam sebuah file masing-masing. Sesuaikan saja dengan kebutuhan kamu yang telah kamu rancang dalam Game Design Document (GDG).

Demikian tulisan kali ini semoga bermanfaat.

5 Alasan Saya Memilih Phaser dalam Membuat Game

Setelah beberapa tahun mencoba berbagai macam game engine ternyata saat ini pilihan saya jatuh ke PhaserJS. Saya telah mencoba berbagai game engine sperti Unity, Constract, gameDevelop dan beberapa lainnya akhirnya memilih Phaser. Cocok bagi saya tentu saja belum mesti begitu juga untuk kamu. 

Sebenarnya saya mulai tahu Phaser sudah sejak lama yaitu sekitar akhir tahun 2013, bahkan sejak saya masih belajar pemrograman mobile dengan intelXDK. Pada salah satu pilihan Javascript engine di intelXDK ada Phaserjs yang kemudian mulai saya explorasi. Tetapi setelah beberapa minggu ekplorasi itu tidak saya lanjutkan akibat beberapa pekerjaan yang sudah deadline sehingga harus saya prioritaskan.

Karena banyaknya pekerjaan dan padatnya jadwal mengajar, membuat saya dulu juga ingin mencoba alternatif membuat game dengan tanpa harus menulis kode bahasa pemrograman. Oleh sebab itu saya mulai mencoba-coba berbagai engine game dimulai dari constract kemudian lainnya. 

Tetapi setelah game yang saya buat dengan bantuan game engine sudah jadi, ternyata saya tidak puas karena ada batasan yang diterapkan bertentangan dengan keinginan saya. Kemudian saya mulai berpetualang mencoba engine satu dan lainnya, untuk menemukan mana yang dapat membantu saya tanpa harus dibatasi dan mesti tanpa biaya. 


Phaser adalah Framework Game bukan Engine Game

Walaupun di forum-forum salah masih banyak yang memperselisihkan antara Framework dan Engine. Tetapi saya nyatanya menemukan bila Phaser memang tidak dibungkus dengan tampilan GUI yang memudahkan seseorang membuat game.

Meskipun ada Phaser Editor tetapi itu juga bukan game engine-nya Phaser. Phaser editor merupakan software untuk membantu menulis kode secara khusus untuk membuat game dengan Phaser.

Phaser menyediakan berbagai fungsi yang dapat dimanfaatkan seseorang untuk membuat game dengan menuliskan kode programnya. Maka saya setuju memang  phaser lebih tepat disebut sebagai framework game. 

Kelebihan Phaserjs



Baik engine ataupun framework keduanya memiliki kelebihan dan kelemahan yang saling berkebalikan. Jadi bila pada engine merupakan kelemahan maka diframework merupakan kelebihan. Menurut pendapat peserta forum html5gamedev setelah dikumpulkan disini saya rangkum

Kelebihan Framework Game adalah

  1. Dibuat untuk membuat game dengan menulis kode
  2. Lebih fleksibel dan memberikan kebebasan bagi orang yang membuat game dengan framework itu
  3. Karena berisi kode jadi yang tahu secara lebih dalam adalah yang menulis kode itu sendiri

Kekurangan Framework adalah

Memerlukan waktu belajar (learning curve) yang lebih panjang dibandingkan dengan engine atau singkatnya lebih susah. Ya bisa dimengerti karena menulis bahasa pemrograman itu seperti belajar dan menulis dengan bahasa yang bukan sehari hari. Ditambah lagi yang ditulis adalah berdasarkan logika pemrograman.

Padahal sebenarnya kalau tahu triknya mudah juga kok menggunakan framework. Seperti cara belajar JavaScript yang menurut banyak orang susah, tapi kalau tahu cara sederhanya mudah lho, seperti di artikel cara belajar Javascript paling mudah yang jarang diketahui umum.

Saya sebenarnya tidak terlalu bermasalah apakah Phaser merupakan framework ataukah game engine. Saya cuma fokus apakah sarana tersebut dapat membantu saya mewujudkan tujuan saya dengan efektif dan efisien. 

Kelebihan dan Kekurangan Phaser

Maka saya mencoba mengenal Phaser dari kelebihan dan kekurangannya. Berikut ini kelebihan dan kekurangan baik menurut pendapat beberapa pengguna yang telah saya rangkum dan pendapat menurut saya sendiri.

Kelebihan Phaser Menurut Penggunanya

  1. Phaser dirancang dengan struktur yang baik, sehingga memudahkan pemula sekalipun untuk belajar
  2. Phaser dirancang untuk pengembangan game dan menjadi salah satu yang terbaik
  3. Phaser didukung dengan banyak plugin
  4. Phaser mampu berjalan di WebGL dan Canvas sehingga kamu dapat memilih sendiri atau membiarkan sistem yang memilihnya untuk kamu

Kelebihan Phaser Menurut Saya

Bila kamu ingin membuat game maka kamu dapat memilih untuk menggunakan salah satu dari game engine yang telah ada. Sedangkan saya sebenarnya ingin bebas tidak diatur-atur untuk menuangkan ide.

  1. Dengan Phaser saya bebas mengatur tampilan sesuai yang saya inginkan. Background saya yang berkaitan dengan dunia bahasa pemrograman terutama pemrograman web sering menggelitiki diri saya untuk mengcustomisasi tampilan dengan HTML+CSS. Tentu saja Phaser dapat mengakomodir hal tersebut.
  2. Saya sebenarnya ingin mengatur lebih detil tentang kapan munculnya kejadian bagaimana kejadian itu muncul atau memacu kejadian yang lain. Salah satu kejadian yang dulu mendasari saya menggunakan phaser adalah dalam memunculkan iklan. Beberapa engine ada yang memberikan fasilitas memunculkan iklan, tetapi ada juga yang harus membayar dulu.
  3. Saya menyukai membuat game dengan tanpa biaya. Saat ini banyak Engine yang bebas biaya walaupun dengan batasan aturan tertentu.
  4. Saya ingin membuat game hanya sekali kerja tapi dapat digunakan di desktop, website, maupun mobile. 
  5. Alasan selanjutnya ini sebenarnya adalah karena keterbatasan saya yang memiliki peralatan komputer dengan spesifikasi intel pentium 2 belum core masih 32bit, RAM 2GB. Dengan spesifikasi tersebut saya tertantang untuk tetap dapat membuat game yang menyenangkan. Syukurlah dengan phaser hal itu masih dapat diwujudkan.

Setelah kelebihan Phaser yang menarik untuk digunakan, maka tentu tidak imbang bila tidak dituliskan pula apa saja kekurangan menurut penggunanya dan juga menurut saya sendiri.

Kekurangan Menurut Penggunanya

  1. Ukuran phaser untuk game desktop menjadi besar sebab perlu dibungkus dengan thirdparty misalnya electron atau NWJS yang dulu bernama NodeWebKit.
  2. Untuk membuat game mobile memerlukan bantuan third party seperti cordova.
  3. Pengaturan state terkadang membingungkan untuk pemula


Kekurangan Phaser Menurut Saya

  1. Phaser memiliki versi 2 yang berbeda dengan versi 3. Sehingga bila ingin membuat game dengan versi 3 harus merubah kode lagi.
  2. Phaser harus ngoding, iya karena framework belum ada enginenya maka harus ditulis. Tetapi sisi baiknya jadi lebih cepat paham untuk orang dengan background programmer.
  3. Phaser belum dapat dimanfaatkan untuk game 3D. Mungkin bisa tapi perlu upaya extra yang belum saya ketahui.


Kesimpulan

Phaser merupakan framework yang baik untuk mengembangkan game lintas platform (cross platform). Dengan dukungan komunitas dan berbagai plugin membuat pemula lebih mudah belajar dalam lingkungan yang menyenangkan. 

Saya akhirnya menyadari bahwa berbagai game engine memang memiliki kelebihan dan juga kekurangannya masing-masing. Terus terang saya juga suka Engine dan disini saya tidak mengunggulkan bahwa Phaser adalah yang terbaik. 

Tetapi phaser merupakan Framework yang cocok bagi saya karena dapat saya manfaatkan sesuai dengan keinginan saya saat ini. Jadi tulisan ini memang alasan subjectif saya dan silahkan kamu membuat pilihan kamu sendiri.

Apakah suatu saat saya akan berpindah menggunakan Game Engine? Bila memang ide saya dapat diwujudkan dengan game Engine maka kenapa tidak, saya tidak menutup diri untuk menggunakannya kelak.

Demikian tulisan saya kali ini, semoga bermanfaat.

3 Tips Sukses Membuat Aplikasi Mobile dari HTML Tanpa Perlu Merubah Koding

Dulu saya berpikir kalau membuat aplikasi atau game mobile dengan cara compile HTML5 menjadi aplikasi android .apk dengan cordova akan langsung dapat dilakukan tanpa perlu mengubah kode apapun. Alasannya karena baik browser desktop ataupun juga aplikasi mobile hasil compilasi html5 berjalan sama-sama berjalan di webkit. Tetapi setelah beberapa kali membuat aplikasi dan game ternyata ada yang perlu diwaspadai karena sering menimbulkan kesalahan atau eror. 

Mudah membuat Aplikasi dan Game dengan HTML5

Kita semua tentu sudah tahu kalau file hasil pemrograman HTML5 dapat dimanfaatkan untuk membuat aplikasi mobile baik Android maupun IOS. Sudah lama saya juga menggunakan cara ini  karena lebih cocok untuk saya dibandingkan membuat aplikasi native. Kode html, css dan javascript dapat dicompile dengan bantuan wrapper seperti phonegap, cordova atau intelXDK menjadi aplikasi atau juga game mobile. 

Cara sukses mengubah html5 menjadi mobile

Dengan cara ini proses pembuatan aplikasi android menjadi lebih menyenangkan karena hanya butuh text editor untuk menulis kode HTML5,CSS, dan Javascript. Sedangkan untuk proses ujicoba dan debugging dapat melalui browser pada fitur Developer Tools. Agar lebih jelas silahkan baca cara belajar javascript paling mudah.


Saat HTML5 dibuild ataupun istilahnya di compile, ada beberapa hal yang berbeda dengan browser saat menjalankannya. Apa saja perbedaan itu? langsung saja berikut ini perbedaan yang saat ini berhasil saya temukan.

1. Perbedaan Pembacaan Lokasi awal

Pada umumnya suatu aplikasi HTML5 agar dapat berjalan dengan baik memerlukan sebuah server. Aplikasi HTML5 yang menggunakan JavaScript agar dapat menjalankan fungsi-fungsi secara optimal harus ditempatkan di sebuah server.

Pada saat aplikasi HTML5 sudah dilaunching agar dapat diakses secara online oleh pengguna, maka alamatnya akan menyesuaikan dengan alamat IP hosting misalnya http://216.233.36.21 atau bisa juga dengan alamat domain, misalnya http://inwahyu.com. Sedangkan pada saat proses koding untuk membuat aplikasi, biasanya saya menggunakan alamat di localhost misalnya http://localhost:8080.

JavaScript akan dapat mengenali posisi awal melalui posisi file index.html di dalam server. Untuk browser desktop hal ini akan langsung dapat dimanfaatkan untuk membaca file yang dibutuhkan. Masalahnya ketika aplikasi HTML5 dicompile menjadi aplikasi mobile titik awal aplikasi berbeda. dalam artikel ini saya baru memeriksa bila digunakan pada aplikasi mobile di android saja, untuk aplikasi mobile di iOS belum saya coba.

Aplikasi mobile akan mulai membaca dialamat file:///android_asset/www. Oleh sebab itu bila kamu ingin membuat kode aplikasi kamu fleksibel perlu mendeteksi titik awalnya dapat menggunakan kode berikut:

var path = window.location.href.replace('/index.html''');

Dengan alamat tersebut kita dapat mengakses file data, file gambar dan lain sebagainya. Oleh sebab itu kamu dapat mendeteksi apakah browser desktop yang sedang dijalankan ataupun  webkit di perangkat mobile. Implementasinya contohnya seperti berikut:

var path = window.location.href.replace('/index.html''');
function tes1(){        
    $.ajax({
        url:path+'/siswa.json', //path digunakan menunjuk lokasi alamat file
        success: function(isi){  
        translate = isi
        alert("siswa1: "+translate);
        },
        async:false
    });
}

2. Perbedaan Pembacaan Data Browser dengan Aplikasi Mobile

Ternyata setelah saya perhatikan dan saya uji coba, ada perbedaan hasil pembacaan data dalam format JSON di browser desktop dan setelah aplikasi dicompile menjadi .apk. Sebenarnya masalah ini dapat diantisipasi agar tidak merubah kode. Yang saya ketahui berbeda adalah pada data berupa JSON yang dibaca dengan ajax melalui browser ternyata dibaca berbeda oleh aplikasi android setelah menjadi .apk.

Hal ini membuat saya sering menemukan kesalahan pada aplikasi android yang baru ketahuan ketika saya ujicoba di smartphone. Padahal ketika saya jalankan sebagai aplikasi HTML5 di browser komputer semua baik-baik saja. Setelah saya uji coba berulang-ulang ternyata pembacaannya memang ada perbedaan. Tepatnya adalah saat browser mendeteksi bahwa aplikasi HTML5 sedang dijalankan pada jenis mobile atau desktop.

Kali ini saya ingin menunjukkan perbedaan cara baca browser terhadap data yang mungkin berguna untuk anda. Hal ini saya temukan ketika saya sedang membuat aplikasi android dari HTML5 melalui cordova.

Bagi Anda yang pernah membuat aplikasi Android menggunakan cordova, phonegap, intelXDK atau yang lain mungkin juga sudah menyadari perbedaan hal ini. Tetapi bila anda belum menyadari mari kita coba saja seperti pada contoh berikut ini.

Langsung saja kita mulai dengan membuat file json misalnya seperti berikut:

File siswa.json berisi kode array-object berikut:

[{ "nama":"joko","kelas":"3","usia":17},
"nama":"susi","kelas":"2","usia":16},
"nama":"herman","kelas":"3","usia":18},
"nama":"rani","kelas":"3","usia":17},
"nama":"budi","kelas":"2","usia":16}]


File murid.json berisi object dalam object berikut:

{"0":{ "nama":"joko","kelas":"3","usia":17},
"1":{ "nama":"susi","kelas":"2","usia":16},
"2":{ "nama":"herman","kelas":"3","usia":18},
"3":{ "nama":"rani","kelas":"3","usia":17},
"4":{ "nama":"budi","kelas":"2","usia":16}}

Kedua data diatas sebenernya sama cuma saya ingin menunjukkan bahwa kedua model data diatas sama-sama dapat diakses tapi berbeda dalam pembacaannya saat dibrowser dengan di apk. Seperti yang kita ketahui bahwa untuk memanggil data JSON kita dapat menggunakan metode AJAX atau Fetch melalui JavaScript. 

Perbedaan Hasil Pembacaan Ajax Browser vs Webkit di apk

Kemudian data ini akan kita panggil untuk ditampilkan melalui pesan alert melalui metode AJAX di browser dan kita bandingkan hasilnya di baca di apk:

Contoh melalui metode AJAX:

var path = window.location.href.replace('/index.html''');
function tes1(){        
    $.ajax({
        url:path+'/siswa.json',
        success: function(isi){  
        translate = isi
        //isi langsung dimasukkan variabel translate 
        alert("siswa1: "+translate);
        },
        async:false
    });
    $.ajax({
        url:path+'/murid.json',
        success: function(isi){        
        translate = JSON.stringify(isi);
        //isi diparsing dulu menjadi string baru dimasukkan variabel translate
        alert("murid1: "+translate);
        },
        async:false
    });
    console.log("proses 1 berakhir");
}


Perhatikan perbedaan pembacaan data yang terjadi adalah saat data dipanggil melalui browser Google Chrome dan setelah dijadikan file apk dibawah ini bila kode sama dengan yang diatas tanpa diubah sama sekali. Untuk menggunakan saya tinggal memanggil fungsi tes1().

a. Hasil saat browser membaca data siswa menggunakan AJAX:

Tampilan JSON di browser dengan AJAX

b. Hasil saat apk membaca data siswa menggunakan AJAX:

Tampilan JSON di apk dengan AJAX

Lalu perhatikan bedanya dengan saat membaca data browser yang datanya diparsing menjadi string.

c. Hasil saat browser membaca data murid menggunakan AJAX:
Tampilan JSON di browser dengan AJAX

d. Hasil saat apk membaca data murid menggunakan AJAX:

Tampilan JSON di apk dengan AJAX

Bagaimana berbeda sekali bukan? oleh sebab itu sebelum data digunakan maka kamu harus membuat data menjadi standar sehingga kamu tidak pusing sendiri nantinya. Solusinya adalah dengan mendeteksi jenis browser yang sedang beroperasi membaca data. Contohnya kodenya sebagai berikut:

function tes2(){    
    $.ajax({
        url:path+'/siswa.json',
        success: function(isi){        
        if(isMobile()){
                translate = isi;                                
        }else{
                translate = JSON.stringify(isi);
        }
        alert("siswa2: "+translate);
        },
        async:false
    });
    $.ajax({
        url:path+'/murid.json',
        success: function(isi){        
        if(isMobile()){
                translate = isi;                                
        }else{
                translate = JSON.stringify(isi);
        }
        alert("murid2: "+translate);
        },
        async:false
    });
}

Untuk mendeteksi browser:


fungsi mendeteksi browser


Untuk menggunakan saya tinggal memanggil fungsi tes2(). Langsung saja hasil screenshootnya seperti berikut:

a. Hasil saat browser membaca data siswa menggunakan AJAX:

Tampilan JSON di browser dengan AJAX

b. Hasil saat apk membaca data siswa menggunakan AJAX:

Tampilan JSON di apk dengan AJAX

c. Hasil saat browser membaca data murid menggunakan AJAX:


Tampilan JSON di browser dengan AJAX

d. Hasil saat apk membaca data murid menggunakan AJAX:

tampilan json di apk dengan metode AJAX

Hasilnya akhirnya baik browser chrome di komputer maupun dibaca aplikasi .apk semuanya sudah sama. Jadi datanya dapat digunakan untuk proses selanjutnya tanpa harus mengubah kode lagi.

Lalu bagaimana dengan metode Fetch?
Saat ini saya dapat memanfaatkan metode fetch dengan baik di browser desktop. Saya contohkan saja untuk membaca data yang sama seperti diatas yaitu file siswa.json dan murid.json. Kode yang saya gunakan sebagai berikut:
async function bacaFetch(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}
function myDisplay(myText){
    alert(myText);
}
function tes3(){
    bacaFetch("siswa.json");
    bacaFetch("murid.json");
}

Bila browser dapat membaca file ini dengan baik, tetapi tidak begitu ceritanya dengan apk. Aplikasi mobile tidak menampilkan hasil apapun saat saya memanggil fungsi tes3() diatas. Bila anda punya caranya memanfaatkan fetch di apk silahkan berbagi dikolom komentar.

3. Perbedaan Pembacaan Plugin ataupun File yang disertakan

Wrapper seperti Cordova, phonegap dan lainnya menempelkan file contohnya cordova.js yang dibutuhkan agar dapat mengoperasikan BOM (Browser Object Model) dan untuk mengakses fungsi hardware dalam webkit. 

Browser tidak akan dapat mengenali cordova.js plugin cordova maka karena itu kamu tidak akan dapat memerintahkan hardware melalui aplikasi browser dengan cordova. Bahkan fungsi yang kamu gunakan untuk memanfaatkan plugin cordova akan dianggap salah sehingga menimbulkan eror.

Sedangkan cordova di apk akan dapat kamu manfaatkan untuk mengakses fungsi-fungsi hardware sesuai plugin yang kamu gunakan. 

Bila kamu menemukan seperti ini, maka perlu menon-aktifkan cordova saat menggunakan nya di dibrowser. Sebaliknya mengaktifkannya saat dimobile app.

Itulah tadi perbedaan yang saya temui pada saat membuat aplikasi android. Bila anda menemukan perbedaan lainnya ataupun solusinya silahkan tuliskan dikomentar.

Demikian tulisan kali ini semoga bermanfaaat.

Catatan Saya Dari Tahun 2020

Tahun 2020 merupakan tahun yang banyak meninggalkan bekas bagi saya, tentunya bagi kamu juga. Tahun 2020 dunia sedang dilanda pandemi Covid-19 yang menimbulkan banyak polemik disana sini. Ajang perebutan kekuasan, pergesekan antara ego dengan keimanan dan banyak lagi. Berimbas pada banyak hal termasuk persahabatan yang sudah lama dipupuk menampakkan akar aslinya kepermukaan.

Diluar itu semua, dari tahun 2020 saya berusaha untuk mengambil pelajaran yang mungkin bermanfaat bagi saya dan mungkin juga berguna untuk kamu. Saya ingin agar dapat memeras masalah itu semua, membuang ampasnya dan mengambil sarinya untuk membawa harapan yang lebih baik di tahun selanjutnya.

catatan dari tahun 2020


Selama masih ada harapan bukankah manusia memiliki cahaya untuk tetap dapat terus menjalani kehidupan.

Mulai dari yang pertama dari awal tahun dimana saya mendapat kesempatan untuk tetap dapat melanjutkan studi S2 yang hampir selesai. Saya sangat bersyukur apalagi kemudian dibulan-bulan pertama tahun 2020 mendapat kesempatan untuk melaksanakan program studi sit-in ke luar negeri.

Di saat baru saja turun dari pesawat dan sampai ke negara tetangga yaitu Thailand, saya dikejutkan karena terdeteksi memiliki suhu tinggi. Kemudian saya harus dipisahkan dengan rombongan di tempat khusus lalu diperiksa lebih lanjut. 

Ternyata saat itu Thailand sudah lebih dulu memperketat pemeriksaan kedatangan orang asing dimana di Indonesia masih dianggap aman karena covid-19 disangka takut dengan sinar matahari. Alhamdulillah ternyata setelah diperiksa beberapa menit, saya dinyatakan tidak terbukti menderita penyakit tersebut.

Saat di negara lain tersebut saya banyak belajar tentang toleransi dan pertemanan. Dimana orang-orang yang memiliki kesamaan entah itu darimana asalnya, kesamaan bahasanya atau kesamaan lainnya akan lebih mudah akrab apalagi ditempat asing. 

Selain itu saya juga menemukan banyak hal yang sangat berbeda dikumpulkan menjadi satu, seperti acara menyanyikan lagu Islami (Qosidah) lengkap dengan panggung dan pengiringnya yang berjilbab di lokasi mall tepat didepan pantai Pattaya yang banyak orang memakai busana pantai yang minim sebut saja bikini. Rasa haru, aneh, lucu dan tidak biasa susah dipilah-pilah diotak saya. Sambil terduduk saya berusaha mengambil nilai bahwa membawa kebaikan itu tidak harus dirumah ibadah, dimana saja bisa asalkan kita mengemasnya dengan indah.

Sepulang dari Negara tetangga saya tidak kaget bila di negara kita masih saja santai menghadapi covid yang dianggap gak berbahaya saat itu. Yang saya kaget sebenarnya adalah teman-teman yang biasanya duduk bersila dengan saya dan saya anggap baik-baik saja, malah menunjukkan sikap agamis, rasis, dan pandangan lain karena perbedaan politik yang harusnya sudah selesai ditahun lalu.

Kemudian masuk sepertiga tahun 2020 beberapa momen menunjukkan pada saya bahwa banyak pendakwah agama yang tiba-tiba jadi pandai ilmu kesehatan dan menyarankan cara mudah menghindari covid-19. Saya tidak ingin menyakiti hati teman-teman saya itu dengan menyanggah pendapat mereka. Saya lebih memilih untuk damai dan tidak sering bertemu mereka.

Ketika mendekati pertengahan tahun isu politik kembali memanas, membuat saya susah menemukan kedamaian ditempat yang biasanya hati saya merasa tentram. Masalah kesehatan bisa bercampur aduk dengan masalah politik bahkan agama juga digunakan sebagai bumbu untuk memperkuat opini pihak tertentu.

Ada juga kenyataan yang membuat saya sedih dimana orang dekat saya bahkan menyatakan diri untuk ikut saja menyerahkan diri dengan ikut golongan tertentu. Walaupun tidak setuju, saya tetap menghormati apa yang diputuskannya.

Saya sendiri yang dasarnya lebih suka merdeka bebas memilih takdir kita sendiri, tetap mengingatkan tapi malah jadi salah faham. Diperistiwa ini saya mengambil nilai bahwa saya tidak bisa mengendalikan kemauan orang, yang saya bisa lakukan adalah mengusahakan yang terbaik pada diri saya sendiri.

Tahun 2020 juga tahun yang berkesan karena saya harus larut dalam kesibukan penulisan tesis yang akhirnya selesai juga. Bulan Desember saya dinyatakan lulus dan akhirnya wisuda dengan cara yang belum pernah ada di generasi sebelum saya, yaitu wisuda online.

Dengan beberapa drama yang membuat tegang tapi setelah terlewati rasanya lega banget. Ternyata pasrah pada Tuhan itu harus juga diiringi usaha maksimal agar membuahkan hasil.

Saya bersyukur hingga tulisan ini saya buat, keluarga saya masih dilindungi Alloh. Setelah berbulan-bulan stay at home, terkadang kami juga ingin keluar rumah untuk membeli kebutuhan dan barang penting. Sayangnya ketika saya menikmati momen kekeluargaan ini. Ada saja peristiwa yang mengganggu kedamaian dan keutuhan keluarga.

Satu lagi akhirnya setelah sejak dulu ngekos waktu kuliah dimana saya ingin belajar musik saya tahan terus. Kini saya akhirnya bisa belajar not dan chord dengan ukulele. Herannya bila dulu di kos saya susah menghafal sekarang bisa lancar, apa karena covid jadi lebih banyak nganggur terus mudah hafal ya? Atau apa karena dulu alat musiknya pinjam jadi susah hafalnya? Hehehe

Saya selalu berusaha bahagia dengan mensyukuri hari ini. Saya juga belajar merencanakan hari esok yang lebih baik dengan berpijak dari pengalaman hari ini.

Salah satu hal yang ingin saya tuliskan yaitu Saya tidak ingin kehilangan dan juga tidak ingin teman saya sendirian. Saya masih ingin suatu hari nanti ngobrol bersama, senyum bersama, makan bersama dan merayakan hari raya atau suasana istimewa lainnya bersama tanpa takut virus ataupun dibayangi ego yang paling benar.

Sambil menunggu hal itu terjadi, saya mensyukuri apa yang saya dapat dihari ini.

Pada tulisan ini saya tidak ingin mempengaruhimu untuk setuju dengan pandangan saya, dan tidak juga untuk pamer dengan menunjukkan keberhasilan yang saya dapatkan. Saya hanya ingin menuliskan suara batin saya yang semoga bisa menjadi catatan saya agar dapat lebih baik dikemudian hari. Saya berharap dapat membacanya lagi sebagai pelajaran dan agar siapapun dapat mengambil manfaatnya. 

Itulah pelajaran yang dapat saya simpulkan dari 2020, bagaimana denganmu Kawan?

Cara Belajar JavaScript Paling Mudah Yang Jarang Diketahui Umum

JavaScript merupakan salah satu bahasa script yang direkomendasikan untuk dipelajari bagi pemula karena mudah digunakan dan dapat dimanfaatkan untuk banyak hal. Kali ini saya ingin menulis tentang cara belajar JavaScript paling dasar dengan sangat mudah, kamu tidak perlu menghafal apa-apa. Tidak perlu juga menginstall apa-apa cukup dengan membaca artikel ini kamu sudah belajar JavaScript.

Bagi kamu yang ingin belajar bahasa pemrograman, memilih Javascript sebagai bahasa paling awal merupakan pilihan yang baik. Pada saat belajar kamu bisa mulai dari yang paling dasar, seperti yang dicontohkan pada tulisan ini. 

Setelah kamu mahir dalam penulisan Javascript standar ECMA, kamu dapat memilih cara yang paling sesuai dengan yang kamu sukai. Kamu bisa memilih salah satu dari banyak pilihan cara menulis kode (framework) yang sesuai dengan pribadi kamu.

Belajar Javascript paling Mudah


Javascript seringkali menjadi materi wajib bahasa pemrograman yang selalu dipelajari di bangku sekolah, Padahal (sst.. rahasia..) tidak perlu sekolah pun seseorang bisa menguasai JavaScript. Kamu tentu ingat berita digambar ini.

cara belajar javascript paling dasar


Wih keren ya, TKW Indonesia diajari ngoding untuk membuat website. Tentunya untuk membuat website salah satunya ada bahasa javascript.

JavaScript selalu saja dikonotasikan dibutuhkan hanya saat seseorang membuat website. Padahal saat ini JavaScript dapat digunakan untuk berbagai hal misalnya untuk membuat game, menangani server, membuat aplikasi mobile, aplikasi desktop, Internet Of Things (IoT) dan masih banyak lagi. Jadi tidak hanya untuk melulu membuat website atau animasi website saja, JavaScript dapat dimanfaatkan untuk banyak hal.

JavaScript dulunya bernama Mocha, merupakan bahasa yang awal pertama kali dikembangkan oleh Brendan Eich 1995 untuk browser bernama Netscape. Kemudian Mocha ditawarkan kepada publik untuk dikembangkan bersama-sama sebab JavaScript terbukti dapat berjalan optimal pada berbagai browser. Hingga setelah dikembangkan bersama berganti nama menjadi LiveScript lalu berubah lagi menjadi JavaScript seperti yang kita kenal saat ini.

Walaupun mirip namanya dengan Java tetapi JavaScript ini bukan turunan bahasa pemrograman Java loh. JavaScript termasuk dalam kelompok bahasa script yang dapat dijalankan tanpa harus dikompilasi dan memiliki standar untuk browser yang dikenal sebagai ECMAScript atau ES.

Syarat Belajar JavaScript

Untuk belajar JavaScript kamu dapat menggunakan tool yang sudah ada pada setiap komputer. Bahkan baru saja kamu menginstall sebuah sistem operasi baik itu Windows, Mac, ataupun Linux kamu sudah bisa menulis kode JavaScript dan menjalankannya tanpa tambahan lagi. Jadi javascript memang sangat sangat fleksibel dan mudah. Kamu cukup membutuhkan:

"Browser"

Hanya itu saja? Yup betul.

Bahkan kamu bisa belajar banyak cukup menggunakan browser saja dengan memanfaatkan fasilitas console yang ada di setiap browser saat ini. Waw keren bukan?

Silahkan pilih salah satu browser, contoh: Google Chrome, Mozilla Firefox, Microsoft Edge, Opera dll

cara belajar javascript paling dasar


Untuk menampilkan console misalnya pada browser Google Chrome kamu tinggal menekan tombol f12 pada keyboard. Langkahnya sangat simple yaitu:

  1. Silahkan buka aplikasi Google Chrome
  2. Setelah tampil tekan tombol f12 di keyboard laptop kamu maka kamu sudah dapat melihat tampilan console.

Atau bisa juga dengan cara:

  1. Buka aplikasi Google Chrome kemudian 
  2. Klik kanan lalu > inspect element > pilih console

Setelah console tampil kamu sudah dapat melakukan uji coba sederhana misalkan dengan melakukan operasi tambah, seperti berikut.

Contoh:

ketik 

1+1

Tekan enter maka akan ditampilkan hasilnya dibawahnya 

2

Tentu saja kamu bisa mencoba angka yang lain atau bisa juga operasi lain (+, -, /, *). Bagaimana mudah sekali bukan?

cara belajar javascript paling dasar


Untuk menampilkan pesan kamu juga bisa melakukannya dengan sangat sederhana seperti berikut.

contoh:

ketik

alert("saya suka JavaScript");

tekan tombol enter

Maka kamu akan menemukan sebuah pesan dengan tulisan yang sama dengan isi didalam tanda petik diatas. Jadi bila ingin mengubah isi pesan yang tampil silahkan ubah tulisan dalam tanda petik.

cara belajar javascript paling dasar

Kelebihan dari cara ini adalah ketika kamu menulis fungsi atau kata yang terdaftar dalam standar javascript, maka browser akan membantu menunjukkan pilihan fungsi lain yang mirip. Jadi kamu akan terhindar dari salah ketik dengan lebih mudah dibandingkan text editor yang belum tentu update terhadap fitur ini.

Yang Perlu di Latih dalam Belajar JavaScript

JavaScript merupakan bahasa pemrograman script yang memiliki kelengkapan seperti bahasa pemrograman lainnya. Sehingga kamu bisa memanfaatkan:

  • konstanta
  • variabel
  • array
  • object
  • operator
  • operasi percabangan
  • operasi perulangan
  • dan lain sebagainya pada JavaScript.

Semakin kamu mahir dalam memanfaatkan fitur-fitur tersebut, kamu dapat memanfaatkan JavaScript untuk berbagai aplikasi ataupun produk software yang bisa kamu buat sendiri. 

Bahkan kamu dapat memanfaatkan library JavaScript yang sudah disiapkan oleh programmer lain secara gratis baik secara embed ataupun external. 

Keren bukan?

Jadi kamu tidak harus mengetik kode sendiri atau membuat semuanya dari nol, kamu dapat memanfaatkan library, framework dan bahkan dapat bekerja sama dengan programmer lain untuk membuat produk-produk yang bisa tawarkan untuk orang lain. Misalnya library untuk mengakses map atau peta online, library untuk membuat animasi, library untuk membuat game, Library untuk data mining, Library untuk memanfaatkan sosial media (fb,twitter, google) dan masih banyak lagi.

Tidak hanya sampai disitu saja, Javascript juga menyumbangkan notasi yang saat ini banyak digunakan bahasa pemrograman lain untuk bertukar data. Notasi yang dikenal sebagai JSON (JavaScript Object Notation) saat ini memungkinkan untuk komunikasi antar perangkat, antar sistem, antara server. Bahkan kamu tentu tahu kalau perangkat Android atau iOS kamu saat ini sedang melakukan proses sinkronisasi data juga menggunakan JSON.

Kesimpulan

JavaScript merupakan bahasa pemrograman yang sederhana dan mudah untuk dipelajari. JavaScript juga memiliki fitur dan penggunaan yang dimiliki bahasa pemrograman lainnya. Meskipun mudah tetapi JavaScript memiliki kecanggihan yang tidak dapat dipandang sebelah mata.

Untuk belajar JavaScript paling dasar kamu tidak perlu menghafal, tidak perlu susah. Cukup dengan mengenal dulu apa itu JavaScript.

Semakin kamu memahami JavaScript, kamu dapat memanfaatkan berbagai tool, library, framework, bahkan device. Sehingga produk kamu dapat digunakan dengan baik pada banyak media.

Banyak sekali kemampuan JavaScript yang tidak mungkin dapat dijelaskan hanya dengan sebuah artikel ini saja. Masih banyak hal yang bisa kamu temukan dan bisa kamu kembangkan sesuai kebutuhan dan cita-cita kamu dengan memanfaatkan JavaScript.