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

Prototyping With Meteor

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Karina Dea Setiyaningrum (you can also view the original English article)

Meteor jauh lebih dari sekedar alat cepat prototyping, tetapi sangat bagus untuk membuat prototipe. Dalam tutorial ini, kita akan berjalan melalui proses mengubah wireframe HTML sederhana menjadi aplikasi fungsional dalam jumlah langkah yang sangat sederhana.

Kami akan membuat wireframe sederhana dari aplikasi ruang obrolan. Proses yang kami coba pertunjukkan dimulai dengan wireframe HTML / CSS murni, yang dilakukan di Meteor demi kenyamanan, yang kemudian dengan mudah dapat diubah menjadi aplikasi nyata, berkat kemudahan pengembangan Meteor.

The Meteor Book

Catatan: Tutorial ini diadaptasi dari The Meteor Book, panduan langkah demi langkah yang akan datang untuk membuat aplikasi Meteor dari awal. Buku ini akan memandu Anda melalui pembuatan situs berita sosial multi-user lengkap (pikirkan Reddit atau Digg), mulai dari mengatur akun pengguna dan izin pengguna, semua cara untuk mengelola peringkat dan pemilihan real-time.


Menyeting aplikasi yang komplek

Sebuah tutorial Meteor sebelumnya di sini tentang Nettuts + menunjukkan cara menginstal Meteor dan membangun aplikasi sederhana menggunakan line tool perintah meteor. Dalam tutorial ini, kita akan melakukan hal-hal sedikit berbeda, dan menggunakan Meteorit.

Meteorit adalah komunitas yang membuat pembungkus untuk Meteor yang memungkinkan kita untuk menggunakan paket non-inti yang dibuat oleh anggota lain dari komunitas Meteor. Meskipun sistem paket pihak ketiga built-in direncanakan untuk Meteor sendiri, pada saat penulisan ini, tidak ada dukungan, batasilah paket-paket yang didukung oleh tim inti Meteor. Jadi Meteorit diciptakan untuk memungkinkan kami (komunitas) untuk mengatasi keterbatasan ini, dan mempublikasikan paket kami di Atmosfer, gudang paket Meteor.

Untuk tutorial ini, kita akan menggunakan beberapa paket yang ditulis komunitas, jadi kita akan perlu menggunakan Meteorit. Untuk memulai, mari kita instal, menggunakan npm.

Catatan: Anda harus memiliki salinan Node dan npm yang diinstal pada sistem Anda. Jika Anda memerlukan bantuan dengan proses ini, instruksi pemasangan Meteorite adalah tempat yang baik untuk memulai.

Jika Anda menggunakan Windows, pengaturannya sedikit lebih rumit. Kami telah menulis detailed tutorial di situs kami untuk membantu Anda.

Setelah Meteorit terpasang, kami menggunakan alat baris perintah mrt (yang diinstal untuk kami) sebagai pengganti meteor. Jadi, mari kita mulai! Kami akan membuat aplikasi:


Packages and Wireframes

Untuk membuat aplikasi wireframe, kami akan menggunakan beberapa paket dasar yang memungkinkan kami untuk membuat halaman yang ditata sederhana dengan rute cepat di antara mereka. Mari tambahkan paket sekarang:


Step 1: Halaman depan

Kini setelah kami memilih beberapa style yang bagus untuk aplikasi kami, kami dapat membuat mockup layar pendaratan. Hapus file HTML, CSS, dan JS awal yang dibuat oleh Meteor dan buat dua file berikut dalam direktori klien (kami belum melakukan apa-apa di server).

(Atau, ikuti langkah-langkah dari repositori ini.)

client/chat.html

client/chat.js

Setelah menambahkan ini, Anda akan melihat aplikasi sederhana (jika palsu) berikut ini, ketika Anda menjelajah ke http://localhost:3000:

Data dalam tabel kamar adalah data tetap yang telah kita masukkan secara manual ke client/chat.js, tetapi keuntungan dari pendekatan ini adalah bahwa hal itu memungkinkan kita untuk mengulang HTML di wireframe tanpa harus memotong dan menempel (yang hampir secara universal itu ide yang buruk).


Step 2: Halaman ruang obrolan

Sekarang, mari kita menghubungkan halaman kedua. Kami akan menggunakan router untuk memilih antara dua halaman template; satu dengan pesan selamat datang, dan yang lainnya dengan daftar pesan untuk ruangan yang dipilih.

Mari mulai dengan menambahkan beberapa rute sederhana. Router bekerja dengan memetakan URL ke nama template. Kasus kami cukup sederhana; inilah yang kami tambahkan:

client/chat.js

client/chat.html

Kami menggunakan helper {{renderPage}} di file HTML kami untuk menunjukkan di mana kami ingin template yang dipilih untuk menggambar, dan seperti itu, kami dapat menelusuri antara dua URL dan melihat konten di sisi kanan berubah. Secara default, kita melihat template 'home', yang dipetakan ke rute /, dan menunjukkan kepada kita pesan yang bagus.

Jika kami menambahkan template dari rute 'room' dan menambahkan beberapa tautan ke kamar tertentu, sekarang kami dapat mengikuti tautan:

client/chat.html 'rooms' template

client/chat.html

Ini berfungsi karena url peta router, seperti localhost:3000/rooms/7, ke template 'room'. Untuk saat ini, kami tidak akan melihat id (7, dalam hal ini), tetapi kami akan segera!


Step 3: Mengambil data di ruang obrolan

Sekarang kami telah mengarahkan obrolan URL, mari kita menggambar obrolan di ruangan. Sekali lagi, kami masih mengejek, jadi kami akan terus membuat data palsu di file JavaScript kami, dan menggambarnya dengan Setang:

client/chat.js

Jadi kami telah menambahkan beberapa data obrolan ke ruang pertama, dan kami akan merendernya setiap saat (untuk saat ini) di templat ruangan. Dengan begitu:

client/chat.html

Voila! Demonstrasi kerja aplikasi chatroom kami:


Step 4: Menggunakan data nyata dari pengkoleksian

Sekarang tiba bagian yang menyenangkan; kami telah membuat wireframe sederhana dari data statis cukup sederhana, tetapi berkat kekuatan Koleksi Meteor, kami dapat membuatnya berfungsi dalam waktu singkat.

Ingat bahwa Koleksi menangani sinkronisasi data antara browser dan server, menulis data ke database Mongo di server, dan mendistribusikannya ke semua klien lain yang terhubung. Ini terdengar seperti apa yang kita butuhkan untuk ruang obrolan!

Pertama, mari tambahkan koleksi pada klien dan server, dan tambahkan beberapa data perlengkapan sederhana untuk itu:

(Catatan: Kami akan meletakkan file koleksi di direktori lib/, sehingga kode tersebut tersedia baik di klien dan server.)

lib/collections.js

Kami telah memindahkan data kami ke dalam koleksi, jadi kami tidak perlu lagi menyalinnya secara manual ke dalam helper template kami. Sebagai gantinya, kita dapat mengambil apa yang kita inginkan dari koleksi:

client/chat.js

Kami telah membuat beberapa perubahan di sini; Pertama, kami menggunakan Rooms.find() untuk memilih semua kamar agar masuk ke template 'room'. Kedua, dalam template 'room', kami hanya memilih satu kamar yang kami minati ( Rooms.findOne() ), menggunakan sesi untuk melewati id yang benar.

Tahan! Apa sesinya? Bagaimana kami lulus id? Sesi ini adalah toko global Meteor dari negara aplikasi. Isi sesi harus berisi semua yang perlu diketahui Meteor untuk menggambar ulang aplikasi dalam keadaan yang sama persis seperti saat ini.

Salah satu tujuan utama router adalah untuk mendapatkan sesi ke keadaan seperti itu ketika mengurai URL. Untuk alasan ini, kami dapat menyediakan fungsi perutean sebagai titik akhir untuk URL; dan kami menggunakan fungsi-fungsi itu untuk menetapkan variabel sesi berdasarkan konten URL. Dalam kasus kami, satu-satunya keadaan yang dibutuhkan aplikasi kami adalah ruang yang kami gunakan saat ini - yang kami uraikan dari URL dan disimpan dalam variabel sesi 'currentRoomId'. Dan itu berhasil!

akhirnya, kami harus mendapatkan tautan dengan benar; sehingga kami dapat melakukannya:

client/chat.html

memodifikasi data

Sekarang kami memiliki koleksi yang menyimpan data kamar kami, kami dapat mulai mengubahnya sesuai keinginan kami. Kita dapat menambahkan obrolan baru ke suatu ruangan, seperti:

atau, kita bahkan dapat menambahkan ruang baru

Tantangan berikutnya adalah memasang formulir untuk melakukan transformasi seperti itu, yang akan kita tinggalkan sebagai latihan untuk pembaca (atau mungkin tutorial selanjutnya)!

Jika Anda ingin mempelajari lebih lanjut tentang Meteor, pastikan untuk memeriksa buku kami yang akan datang!

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.