Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Memperkenalkan Vue dan Weex untuk Aplikasi Mobile Native

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Vue adalah framework JavaScript populer untuk aplikasi web dengan binding yang mudah antara data dalam memori dan antarmuka pengguna. Sekarang Weex memungkinkan kita untuk mengkode aplikasi mobile native menggunakan framework Vue!

Mengapa kita menggunakan Vue dan data framework binding lain seperti Angular and React? Apa istimewanya mereka? Kami menggunakannya untuk memastikan bahwa data aplikasi yang disimpan dalam memori tetap sinkron dengan antarmuka pengguna dan sebaliknya.

Kami juga menggunakan framework ini untuk memungkinkan kami membangun aplikasi dengan sangat cepat, dan dengan cara yang dioptimalkan untuk kinerja.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menggunakan framework Vue, khususnya bagaimana memahami konsepnya tentang data binding dan template. Kemudian, saya akan memperkenalkan platform Weex, untuk mengkode aplikasi mobile native menggunakan Vue!

Data Binding

Mari kita lihat contoh sederhana untuk memahami bagaimana framework ini dapat benar-benar menghemat waktu kita. Yang kami inginkan adalah input field sederhana yang tetap sinkron dengan data aplikasi kami. Aplikasi kami sendiri dapat mengubah data secara terprogram, dan pengguna dapat mengubahnya melalui masukan pengguna, jadi kami harus menonton UI dan data aplikasi.

Two way data binding

Penulisan kode yang akan mendukung pengikatan data ini akan menjadi verbose. Kami perlu membuat event listener dan objek proxy dan dapat diobservasi untuk menangkap perubahan apa pun dalam data aplikasi. Dan kompleksitas ini hanya tumbuh dan tumbuh karena lebih banyak jenis data dan input ditambahkan. Vue dan data framework binding lainnya mencegah kita harus menulis semua kode binding.

Dengan Vue, jika pengguna kami mengubah beberapa data masukan, itu akan menyinkronkan kembali ke data aplikasi seperti:

Changes flowing from the UI to the model

Atau jika aplikasi mengubah data, itu akan memperbarui antarmuka pengguna seperti ini:

Changes flowing from the model to the UI

Saat kami mempertahankan antarmuka pengguna dan data aplikasi bersama-sama dalam sinkronisasi, itu berarti aplikasi kami melakukan persis seperti yang kami harapkan. Vue akan mengelola semua ini dan memungkinkan proses binding data kuat lainnya terjadi.

Persiapan

Sekarang kita tahu mengapa kita menggunakan framework ini, mari kita menyiapkan aplikasi Vue sederhana untuk menjalankan beberapa contoh. Buat file HTML baru di mana saja di komputer Anda dan tempelkan kode berikut ke dalamnya:

Ini adalah file HTML sederhana yang terhubung ke library Vue JS. Ini berisi elemen div dengan ID app. Di dalam skrip tag kami memiliki variabel disebut app yang kami gunakan untuk menunjukkan view kami — saya akan menjelaskan bagian ini nanti.

Kemudian kami membuat contoh Vue baru, atau 'view'. Konstruktor ini memberi tahu framework elemen mana yang akan berisi UI aplikasi kami dan membuatnya tetap sinkron dengan data aplikasi.

Sekarang klik dua kali pada file HTML untuk membukanya di browser, dan buka jendela konsol browser.

The browser console in Chrome

Interpolasi Teks

Interpolasi teks memungkinkan kami melekatkan expression dalam kode HTML kami yang akan ditafsirkan ketika halaman dirender. Expression bersifat langsung, jadi jika data yang mereka andalkan berubah, halaman akan diperbarui secara real time. Ini dikenal sebagai rendering deklaratif, yang memungkinkan kita untuk menempatkan expression di mana saja dalam konten elemen. Mari kita tinjau dengan contoh sederhana.

JS

Kode JavaScript kami sekarang berisi objek data yang akan menyimpan semua data aplikasi kami untuk tampilan ini. Di dalamnya, saya telah membuat properti message dengan string "Hello world".

Selanjutnya, mari kita tampilkan properti ini di HTML.

HTML

Ekspresi ditunjukkan dengan sintaks kurung ganda. Vue JS mengelola dependensi setiap expression dan memperbarui halaman langsung jika mereka berubah. Dalam kasus kami, kami memiliki dua expressions, dengan properti message sebagai dependensi masing-masing. Ekspresi pertama {{ message }} hanya menampilkan properti pesan. Ekspresi {{ message.split('').reverse().join('') }} yang kedua mengambil properti pesan, dan kemudian:

  • Membagi string menjadi array:
    [ "h","e","l","l","o"," ","w","o","r","l","d" ]
  • Membalikkan urutan array:
    [ "d","l","r","o","w"," ","o","l","l","e","h" ]
  • Bergabung bersama array untuk mendapatkan "dlrow olleh", yang merupakan pesan yang sama tetapi dicetak mundur.

Sekarang buka browser dan segarkan halaman HTML. Kemudian buka jendela konsol browser dan tetapkan app.message nilai baru dan lihat bagaimana output diperbarui di browser.

Simple Vue template example

Anda juga dapat menggunakan matematika dalam template expressions, atau data terstruktur dalam objek. Sebenarnya, seperti yang Anda duga, expression Vue hanya JavaScript. Akses ke variabel global adalah sandboxed, sehingga Anda dapat mengakses Math, tetapi tidak window. Ini membantu menjaga aplikasi Anda tetap aman — dan pengguna Anda juga.

Dengan menggunakan Vue hanya dengan beberapa baris kode, kita dapat memiliki data binding dua arah yang canggih. Ini memastikan bahwa antarmuka pengguna dan data aplikasi disinkronkan dengan relatif mudah.

Arahan

Arahan adalah cara lain untuk data binding dalam pandangan kami. Kita dapat menggunakannya untuk mengikat data aplikasi ke attributes, events, input fields, dan repeatable data. Mari kita bahas setiap arahan dan temukan cara kerjanya.

  • v-bind: mengikat nilai atribut
  • v-model: mengikat data aplikasi ke elemen input seperti textarea
  • v-on: mendefinisikan suatu event handler
  • v-for: mengikat ke suatu array atau objek

v-bind Mengarahkan

Arahan v-bind digunakan untuk mengikat data atribut. Ini memungkinkan kita untuk mengikat data aplikasi ke nilai atribut. Anggap saja seperti interpolasi teks tetapi dalam sebuah atribut. Anda dapat mengikat class, id, value atau atribut lainnya dengan direktif v-bind.

Untuk contoh ini, saya ingin mengikat data aplikasi kami ke atribut data-attr menggunakan v-bind directive v-bind:data-attr.

JS

HTML

Dalam contoh di atas, kita mengikat atribut yang disebut data-attr ke serangkaian sumber data yang berbeda. Pertama, kita mengikatnya dengan type dan names properti object. Lalu kita mengikatnya ke ekspresi matematika, dan kemudian menggabungkan semua binding bersama menjadi satu atribut array.

Lihatlah output di browser: Anda dapat mengklik pada tab Elements untuk melihat output dari setiap nilai atribut.

Binding attribute values

Sekali lagi, Anda dapat mengubah data aplikasi di konsol untuk melihat proses data binding.

Changes to the model are rendered automatically

Pikirkan arahan v-bind sebagai memungkinkan ekspresi dalam nilai atribut. Ini sangat kuat dan mudah dibuat dengan library Vue.

v-model Directive

Arahan ini digunakan secara khusus untuk menjaga data aplikasi tetap sinkron dengan bidang input fields, text areas, and selection elements. Inilah contohnya:

JS

HTML

Untuk bagian pertama halaman ini, kami memiliki teks input field dan text area, yang keduanya memiliki direktif v-model yang membuat bidang masukan ini sinkron dengan properti message, menggunakan v-model="message". Dengan begitu, jika Anda mengubah salah satunya, model akan diperbarui dan kemudian bidang input lainnya akan diperbarui. Silakan dan cobalah!

Binding to input elements

Di bagian selanjutnya kami memiliki drop-down yang disinkronisasikan dengan properti selected dengan v-model="selected". Dengan begitu, jika pemilihan diubah, model kami akan diperbarui.

Akhirnya, kami memiliki beberapa pilihan. Saya telah menunjukkan cara melakukan ini dengan dua cara: dengan beberapa checkboxes dan dengan beberapa input pilihan. Karena kami dapat memiliki beberapa nilai, saya telah membuat array checkedNames yang dapat menyimpan beberapa nilai. Beberapa input pilihan dan checkboxes masing-masing memiliki direktif v-model yang menargetkan properti checkNames. Cobalah, dan mereka harus tetap selaras saat Anda membuat pilihan.

Multiple selection binding

v-on Directive

Arahan ini memungkinkan kita untuk melampirkan acara ke elemen HTML. Arahan ini dapat digunakan pada elemen-elemen tertentu yang dapat memiliki peristiwa masukan yang melekat padanya seperti hovering, clicks, text input, key presses, dan banyak lagi. Untuk contoh ini, kita akan membuat tombol sederhana dengan click event.

JS

HTML

Di petunjuk v-on, setelah titik dua, kami menetapkan event yang ingin kami lampirkan. Dalam contoh ini, ketika click event diaktifkan, kami akan menjalankan beberapa ekspresi. Pertama, kami membuka kotak dialog peringatan, lalu kami mengubah nilai properti clicked. Perhatikan bahwa Anda dapat memanggil fungsi dalam ekspresi v-on.

A button with a click event

v-for Directive

Arahan ini adalah salah satu yang paling kuat dari semuanya. Kita dapat menonton objek atau array apa pun untuk perubahan dan membuat berulang kali bagian dari kode template kami untuk setiap properti atau elemen yang ditemukan di objek atau array itu. Misalnya, untuk merender deretan nama sebagai daftar:

JS

HTML

Dalam contoh ini, pertama-tama kita lampirkan perintah v-for ke elemen yang ingin Anda ulangi. Nilai dari direktif menentukan objek atau array yang ingin kita ulang (names) serta variabel yang akan berisi nilai untuk setiap iterasi (name). Sekarang, dalam elemen yang berulang ini, kita dapat menggunakan variabel name dalam ekspresi.

Jika kita kemudian memodifikasi array, misalnya dengan metode seperti push, sort atau reverse, data template secara otomatis akan diperbarui. Coba jalankan contoh dan ubah array di jendela konsol.

Rendering a list of elements with the v-for directive

Komponen

Proses binding data terjadi dalam tampilan. Komponen hanya tampilan reusable yang bisa kita ulangi di seluruh aplikasi kita. Setiap komponen harus memiliki beberapa data template yang akan diberikan sebagai bagian dari antarmuka pengguna dan beberapa data aplikasi. Anda dapat secara opsional menyertakan beberapa styling jika Anda mau.

Mari gunakan lagi v-for direktif ke item daftar output. Tapi kali ini, kami akan membuat setiap item menjadi komponen. Kami akan memberikan nama komponen ini sehingga kami dapat menargetkannya dalam kode template kami: list-item. Komponen juga dapat memiliki "properti terdaftar", yang dapat kita tetapkan nilai yang akan ditetapkan ketika kita membuat komponen. Dalam kasus saya, komponen list-item akan mengharapkan untuk menerima nilai untuk properti name, didefinisikan dengan alat props:["name"].

Mari sekarang buat komponen ini. Silakan tambahkan kode berikut ke dalam tag skrip Anda:

JS

Juga pastikan Anda memiliki data aplikasi berikut:

HTML

Di sini Anda dapat melihat komponen list-item akan diulang untuk setiap nama yang ditemukan dalam array. Setiap nama akan ditetapkan ke nama variabel yang didefinisikan dalam v-for directive. Kami mengirimkan properti name ke komponen menggunakan v-bind.

Setiap contoh hanyalah salinan dari komponen. Kita dapat memodifikasi setiap salinan atau contoh secara terpisah satu sama lain. Jadi pikirkan komponen sebagai cetak biru dan contoh sebagai salinan yang dibuat dari cetak biru. Inilah hasil akhirnya:

List rendered with components

Kompilasi dan Vue CLI

Kami telah bekerja dengan file HTML yang sangat sederhana dan membiarkan Vue menginterpretasikan semuanya pada saat run-time. Namun, Vue hadir dengan tool commind-line. Anda mungkin bertanya pada diri sendiri mengapa. Salah satu alasannya adalah bahwa template halaman yang dikompilasi sebelumnya akan berkinerja lebih baik daripada template yang diinterpretasi oleh Vue pada saat run-time. Alasan lain adalah bahwa, jika kita membangun aplikasi berskala besar dan mencoba memasukkannya ke dalam satu file HTML, itu akan cepat menjadi tidak terkendali.

Jadi kita perlu modularitas untuk memecah aplikasi besar menjadi bagian yang lebih kecil.

Instalasi Vue CLI

Untuk menggunakan baris perintah, Anda harus membuka jendela konsol untuk sistem operasi Anda.

  • Untuk Mac, tekan Command-Space lalu ketikkan terminal dan tekan Return.
  • Untuk Windows, cari command prompt di menu startup, pastikan untuk mengklik kanan dan "open as administrator".
  • Untuk Linux, tekan Control-Alt-T.

Sebelum melanjutkan, pastikan Anda memiliki versi terbaru Node.js yang diinstal. Kemudian kita perlu menginstal Webpack, yang akan mengkompres ukuran file proyek kami, membuatnya lebih cepat di browser kami. Kemudian kita dapat menginstal Vue CLI dan menjalankan perintah yang relevan untuk platform Anda:

Mac & Linux

  • sudo npm install -g webpack
  • sudo npm install -g vue-cli

Windows (pastikan Anda menjalankan konsol sebagai administrator)

  • npm install -g webpack
  • npm install -g vue-cli

Itu dia! Kami sekarang siap untuk mulai menyiapkan proyek Webpack canggih kami. Pertama, arahkan ke direktori tempat kami ingin membuat proyek kami, dalam kasus saya desktop, dan kemudian buat proyek. Anda dapat mengganti myapp dengan nama proyek apa pun yang Anda inginkan.

  • vue init webpack myapp

Anda akan dituntun melalui serangkaian pertanyaan tentang proyek Anda, yang meminta Anda untuk mengisi data seperti judul dan deskripsi dan menanyakan Anda apakah akan menginstal plugin pihak ketiga. Untuk contoh ini, Anda dapat menjawab tidak untuk semua tambahan opsional. Setelah dibuat, kita perlu menginstal dependensi, jadi arahkan ke direktori proyek, dan kita akan menjalankan perintah install.

  • cd myapp
  • npm install

Biarkan NPM menginstal semua paket dependensi, dan kemudian kami siap untuk melanjutkan.

Buat sebuah Proyek Vue

Setelah paket-paket itu diinstal, kita dapat menjalankan server pengembangan dengan mengetik npm run dev. Jendela browser Anda akan terbuka, menampilkan halaman berikut.

The Vue starter project welcome screen

Kami tidak akan melalui struktur keseluruhan proyek, tetapi ketika Anda membuka direktori myapp, Anda akan melihat direktori src. Ini berisi file App.vue, file main.js dan, di direktori components, file Hello.vue.

File Vue adalah komponen. File main.js mengonfigurasi tampilan awal dan kemungkinan konfigurasi lainnya juga. Mari kita lihat file App.vue dan Hello.vue.

The vue files from the Vue starter project

Di sini Anda dapat melihat setiap komponen Vue dibagi menjadi tiga bagian:

  • <template>: HTML markup yang membentuk bagian dari UI.
  • <script>: data aplikasi, filter, metode, properti yang dihitung, pengamat, dan metode.
  • <style>: styling CSS atau Sass dari komponen kami.

Kompilasi

Menyusun semua komponen bersama-sama akan menghasilkan aplikasi berskala besar. Ini berarti ketika kami sedang mengembangkan, kami bekerja pada potongan kode modular kecil, yang disebut komponen, bukan seluruh aplikasi. Di Vue kami memiliki komponen file tunggal yang berisi JavaScript, HTML, dan CSS. Ia bahkan akan mengurus ES6 untuk ES5, Sass ke CSS dan Jade ke HTML jika Anda memilih untuk menggunakan bahasa tersebut.

Anda akan melihat di file App.vue, saya telah menyoroti di mana impor komponen Hello.vue. Komponen dapat bersarang di dalam komponen lain!

Saat menyusun, proyek kami dibangun dengan proses berikut:

Vue build process

Kami masih menggunakan sintaks yang sama seperti pada contoh sebelumnya. Namun, kami sekarang bekerja dengan file Vue yang lebih kecil dan mengumpulkannya bersama. Kami juga memiliki beberapa fitur yang lebih canggih seperti preprocessors dan Jade, Sass, ES6 dan kompresi Webpack.

Weex

Kini setelah memahami library Vue, mari lihat sekilas bagaimana kami dapat menggunakan aplikasi web kami dan mengubahnya menjadi aplikasi mobile native, yang dapat dipasang di iOS atau Android.

Weex adalah framework hibrida, yang berarti memungkinkan beberapa teknologi, seperti mobil hibrida yang dapat menggunakan listrik dan bensin. Dalam kasus kami, kami menggunakan kode JavaScript dari aplikasi web kami, tetapi kami merender ke antarmuka pengguna asli. Juga, dari JavaScript kita dapat mengakses API asli perangkat untuk mengakses perangkat keras seperti kamera, sensor, dan sistem file.

Parts of a Weex app

Dengan Weex, alih-alih merender aplikasi kita ke HTML, kita menggunakan XML. Sebenarnya, HTML dan XML sangat mirip, sehingga sintaksnya akan terlihat akrab. XML ini kemudian akan dikonversi ke komponen asli. Sekarang JavaScript kami akan dapat berbicara dengan komponen asli seperti itu berbicara ke DOM di Vue dengan HTML. Tidak hanya itu, tetapi komponen asli dapat ditata dan diposisikan dengan CSS termasuk animasi, transisi dan banyak lagi, dan mereka dapat diintegrasikan ke lapisan asli.

Itu hanya sebuah teaser dari apa yang dapat dilakukan Weex. Dalam tutorial selanjutnya, saya akan membawa Anda lebih mendalam dengan Weex, dan kami akan melihat cara membuat beberapa aplikasi native lintas platform yang praktis.

Pros

Vue memiliki sintaks yang sederhana dan meningkatkan popularitas dengan sangat cepat. Weex memungkinkan kami membuat aplikasi seluler menggunakan JavaScript dan Vue, tetapi tetap menghadirkan pengalaman aplikasi native.

Cons

Vue sendiri stabil, tetapi Weex masih dalam pengembangan awal — saat ini berada di dalam inkubator Apache. Tapi jangan khawatir, Weex akan segera siap produksi, dan itu didukung oleh Alibaba raksasa teknologi. Jadi, jika membangun pada pratinjau pengembang mengkhawatirkan Anda, Anda mungkin menunggu hingga Weex mencapai rilis penuh.

Kesimpulan

Anda sekarang telah melihat bagaimana binding data adalah alasan utama untuk menggunakan Vue dan framework serupa. Mereka menghemat waktu pengembangan dan menyediakan cara standar untuk membangun aplikasi. Anda juga telah melihat cara menggunakan interpolasi teks, direktif, dan event dalam Vue, dan bagaimana fitur-fitur ini bekerja bersama untuk menjaga sinkronisasi data aplikasi dengan antarmuka pengguna.

Kami memulai dengan proyek dasar dengan hanya satu tampilan. Namun kemudian kami membuat proyek yang lebih maju yang memiliki tampilan yang lebih kecil dan modular yang disebut komponen. Komponen-komponen membiarkan kami menghancurkan proyek kami sehingga lebih mudah untuk dikodekan dan dipelihara. Setelah itu, kami melihat bagaimana menggunakan compiler Vue untuk memungkinkan transpilasi ES6, Jade dan Sass ke dalam bahasa standar, sementara mengompresi ukuran file ke minimum.

Semua pengetahuan ini akan membantu Anda ketika Anda mulai coding dengan Weex. Weex akan memungkinkan kami untuk mengambil aplikasi web Vue kami dan mengubahnya menjadi aplikasi seluler. Weex sedikit berbeda — kami menggunakan XML dengan komponen khusus, alih-alih HTML — tetapi kami masih dapat menggunakan teknologi web lainnya, seperti CSS dan JavaScript. Itu berarti kami tidak perlu mengubah logika aplikasi kami dari aplikasi web ke aplikasi seluler.

Nantikan postingan saya berikutnya di Weex development, dan sementara itu, periksa beberapa postingan kami yang lain tentang pengembangan aplikasi mobile dengan teknologi web.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.