Meteor : Pengenalan Meteor js

Proses instalasi Meteor itu sangat mudah. Dalam kebanyakan kasus, Anda bisa menjalankan aplikasi meteor dalam waktu kurang dari lima menit.

Untuk memulainya, kita dapat menginstal Meteor dengan membuka terminal dan mengetik:

curl https://install.meteor.com | sh

Ini akan menginstal perintah meteor ke sistem Anda dan Anda siap untuk menggunakan Meteor.

Membuat Aplikasi Sederhana

Sekarang kita telah menginstal Meteor, lalu mari kita membuat sebuah aplikasi. Untuk melakukan hal ini, kita menggunakan perintah meteor di terminal:

meteor create microscope

Aplikasi yang Meteor telah buat untuk Anda adalah aplikasi boilerplate dengan strukture yang sederhana.

Meskipun aplikasi tersebut sangat sederhana, tapi kita masih bisa menjalankannya. Untuk menjalankan aplikasi, kembali ke terminal dan ketik:

cd microscope
meteor

Perintah ini akan men-download, memasang Meteor siap untuk digunakan untuk proyek Meteor Anda. Ketika proses instal selesai, Anda akan melihat sebuah direktori, microscope/, berisi sebagai berikut:

Sekarang arahkan browser Anda ke http://localhost:3000/ (atau http://0.0.0.0:3000/) dan Anda akan melihat sesuatu seperti ini:


Selamat! Anda telah berhasil membuat aplikasi Meteor pertama Anda. Untuk menghentikan aplikasi Meteor ini yang perlu Anda lakukan adalah membuka tab terminal di mana aplikasi berjalan, dan tekan ctrl + C.

Jika Anda menggunakan Git, ini adalah saat yang tepat untuk menginisialisasi repo Anda dengan git init.

Menambahkan sebuah Package

Sekarang kita akan menggunakan sistem paket Meteor untuk menambahkan UI Bootstrap framework pada proyek kita.

Ini tidak berbeda dengan cara biasa menambahkan Bootstrap dengan memasukkan secara manual CSS dan JavaScript file-nya, kecuali bahwa kita menggunakan package dari Andrew Mao (pembuat package ini) salah satu anggota komunitas Meteor(mizzao:bootstrap-3) untuk menjaga semuanya up to date untuk kita.

Selain itu, kita juga akan menambahkan paket yang bernama underscore. Underscore adalah Javascript utilitas library, dan sangat berguna untuk memanipulasi struktur data JavaScript.

Pada saat artikel ini ditulis, paket tersebut masih merupakan bagian dari paket Meteor yang resmi, karena itu paket ini tidak ada authornya seperti Bootstrap:meteor add mizzao:bootstrap-3
meteor add underscore
Segera setelah Anda telah menambahkan paket Bootstrap, Anda akan melihat perubahan dalam aplikasi kita:

Berbeda dengan cara "tradisional" dalam memasukan aset - aset, kita tidak harus mendeklarasikan setiap CSS atau file JavaScript, karena Meteor secara otomatis membaca semua CSS dan JS. Dan itu hanya salah satu dari banyak keuntungan dari Meteor package.

Strukture file dari aplikasi Meteor

Sebelum kita mulai coding, kita harus mempersiapkan projek secara benar. Agar projek yang kita buat rapih, buka direktori microscope dan hapus microscope.html, microscope.js, dan microscope.css.

Selanjutnya, buat empat direktori didalam /microscope: /client, /server, /public, dan /lib.

Lalu, kita juga akan membuat file kosong main.html dan main.js dalam /client. Jangan khawatir jika sekarang aplikasi tidak jalan, kita akan mulai memperbaikinya dengan mengisi file-file tersebut dalam bab berikutnya.

Kita perlu tahu bahwa beberapa direktori ini spesial. Ketika menjalankan code ini, Meteor memiliki beberapa aturan:

  • Code di direktori /server hanya berjalan pada server.
  • Code di direktori /client hanya berjalan pada klien.
  • Direktori dan file yang lain berjalan pada kedua klien dan server.
  • Aset statis Anda (font, gambar, dll) masuk dalam direktori /public.

Dan Anda juga perlu mengetahui bagaimana urutan Meteor me-load file/aset projek:

  • Semua file yang ada di dalam /lib di-load paling pertama.
  • Setiap file dengan awalan main.* akan di-load paling akhir.
  • File - file lainnya akan di-load secara alphabet berdasarkan nama filenya.

Meskipun Meteor memiliki aturan-aturan ini, itu tidak benar-benar mengharuskan Anda untuk menggunakan struktur file standar ini untuk aplikasi Anda jika Anda tidak menginginkannya. Jadi struktur yang kami sarankan adalah cara kita membuat Meteor projek, tapi bukan aturan baku.

Kami menyarankan Anda untuk melihat dokumentasi Meteor resmi jika Anda ingin rincian lebih lanjut tentang ini.

Apakah Meteor MVC?

Jika sebelum Meteor Anda pernah mengunakan framework lain seperti Ruby on Rails, Anda mungkin bertanya-tanya apakah aplikasi Meteor mengadopsi pola MVC (Model View Controller).
Jawaban singkatnya adalah tidak. Tidak seperti Rails, Meteor tidak memaksakan struktur yang telah ditetapkan untuk aplikasi Anda. Jadi dalam buku ini kita akan hanya menyusun kode dengan cara yang paling mudah bagi kita, tanpa khawatir terlalu banyak tentang akronim.

Sebenarnya kita tidak benar-benar membutuhkan direktori  public/ untuk aplikasi sederhana microscope karena tidak menggunakan aset static! Tapi karena kebanyakan aplikasi Meteor lainnya akan menyertakannya setidaknya untuk menaruh beberapa gambar, kita tetap menambahkan direktori public/.

Anda juga mungkin melihat direktori tersembunyi .meteor. Di sinilah Meteor menyimpan module-modulenya, dan kita tidak menyarankan untuk memodifikasinya secara manual. Bahkan, Anda sebenarnya tidak perlu mengutak-atik direktori tersebut. Kecuali untuk direktori .meteor/packages dan file .meteor/release, yang masing-masing digunakan me-list smart packages Anda dan untuk versi Meteor digunakan. Ketika Anda menambahkan paket dan perubahan rilis Meteor, dua file tersebut dapat mengecek perubahan pada projek Anda.

Underscore vs CamelCase

Hal yang sering di perdebatkan tentang penamaan variabel dijavascript dengan underscore(my_variable) vs CamelCase(MyVariable) adalah suatu hal yang tidak terlalu penting yang mana yang Anda bisa pilih salah satu, asalkan konsisten.
Dalam artikel ini, kita menggunakan CamelCase karena itu cara yang biasa dalam JavaScript(apalagi penulisan kata JavaScript, bukan java_script ).
Satu-satunya pengecualian untuk aturan ini adalah penamaan file yang akan menggunakan garis bawah (my_file.js), dan class pada CSS, yang menggunakan tanda hubung (.my_class). Alasannya karena garis bawah paling umum digunakan, sedangkan sintaks CSS sendiri sudah menggunakan tanda hubung(font-family, text-align, dll).

Menyiapkan CSS

Artikel ini bukan tentang CSS. Jadi untuk mempercepat pengerjaan CSS, kami telah menyiapkan stylesheet yang tersedia dari awal, sehingga Anda tidak perlu khawatir lagi tentang hal itu.

CSS otomatis akan dimuat dan minified oleh Meteor, sehingga tidak seperti aset statis lain, CSS ini akan masuk ke /client, bukan ke /public. Silahkan buat `client/stylesheet/ direktori sekarang, dan letakkan
style.css file ini di dalamnya:.grid-block, .main, .post, .comments li, .comment-form {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
body {
background: #eee;
color: #666666; }
.navbar {
margin-bottom: 10px; }
/* line 32, ../sass/style.scss */
.navbar .navbar-inner {
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-ms-border-radius: 0px 0px 3px 3px;
-o-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px; }

#spinner { height: 300px; }
.post {
*zoom: 1;
position: relative;
opacity: 1; }
.post:before, .post:after {
content: "";
display: table; }
.post:after {
clear: both; }
.post.invisible {
opacity: 0; }
.post.instant {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none; transition: none; }
.post.animate{
-webkit-transition: all 300ms 0ms;
-webkit-transition-delay: ease-in;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in; }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left; }
.post .post-content { float: left; }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px; }
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa; }
.post .post-content p { margin: 0; } .post .discuss { display: block; float: right; margin-top: 7px; } .comments { list-style-type: none; margin: 0; } .comments li h4 {
font-size: 16px; margin: 0; } .comments li h4 .date {
font-size: 12px;
font-weight: normal; }
.comments li h4 a {
font-size: 12px; }
.comments li p:last-child {
margin-bottom: 0; } .dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap; } .load-more {
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px; margin-bottom: 10px; }
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); } .posts .spinner-container{
position: relative;
height: 100px; } .jumbotron{ text-align: center;} .jumbotron h2{ font-size: 60px; font-weight: 100; } @-webkit-keyframes fadeOut {
0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut {
0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } .errors{
position: fixed; z-index: 10000; padding: 10px; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; } .alert {
animation: fadeOut 2700ms ease-in 0s 1 forwards; -webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards; -moz-animation: fadeOut 2700ms ease-in 0s 1 forwards; width: 250px; float: right; clear: both; margin-bottom: 5px; pointer-events: auto; }

CoffeeScript

Dalam Artikel ini kita akan menulis dalam JavaScript. Tapi jika Anda lebih suka CoffeeScript, Meteor telah menyediakannya untuk Anda. Cukup tambahkan paket CoffeeScript:
meteor add coffeescript

Sumber blog/artikel ini adalah dari buku DiscoverMeteor yang sudah diterjemahkan ke dalam bahasa Indonesia atas izin dari sang penulis aslinya.

Next tutorial: Cara Men-Deploy Meteor ke Server

Cendekia P Putra

< Software Developer /> | @cendekiapp | me@cendekiapp.com

Jakarta, Indonesia http://cendekiapp.com