Tutorial Meteor: Membangun Aplikasi Web Real-Time dengan Meteor

Diterbitkan: 2022-03-11

Meteor adalah kerangka kerja JavaScript full-stack untuk aplikasi web dan seluler. Sudah ada sejak 2011, dan telah mendapatkan reputasi yang kuat di antara pengembang Meteor sebagai solusi ideal dan mudah digunakan untuk pembuatan prototipe cepat. Namun, akhir-akhir ini para pengembang menyadari bahwa Meteor tidak hanya untuk membuat prototipe lagi: ia siap digunakan untuk pengembangan komersial. Dengan gudang paket yang disediakannya, fondasi mongoDB/node.js yang kokoh yang diandalkannya, dan fleksibilitas pengkodean yang ditawarkannya; Meteor memudahkan pembuatan aplikasi web real-time yang kuat dan aman, menangani semuanya mulai dari aplikasi browser hingga server atau database.

Tutorial Meteor ini akan memandu Anda membuat aplikasi web dasar di Meteor - katalog sederhana yang memungkinkan pengguna masuk dan mengelola daftar buku.

Mengapa menggunakan Meteor? Jawaban singkatnya adalah, “karena Meteor itu menyenangkan”. Itu membuat pengembangan aplikasi web menjadi sederhana. Mudah dipelajari, dan memungkinkan Anda lebih fokus pada fungsionalitas aplikasi Anda daripada dasar-dasar menyinkronkan data dan menyajikan halaman.

Ini juga memiliki banyak perilaku yang dibangun dengan nyaman. Meteor secara otomatis melakukan pembaruan langsung, sehingga perubahan data segera muncul di jendela browser Anda, dan bahkan perubahan kode pada aplikasi itu sendiri didorong ke semua browser dan perangkat secara "real-time". Meteor memiliki kompensasi latensi bawaan, mudah diterapkan, dan memiliki "paket" yang mudah dipasang yang menangani semua jenis fungsi.

Meskipun ini adalah kerangka kerja yang relatif baru, banyak perusahaan rintisan telah membangun aplikasi Meteor, termasuk layanan berskala relatif besar seperti Respondly dan Telescope.

Pemasangan Meteor dan Scaffolding

Menginstal Meteor pada sistem *nix adalah satu-baris:

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

Meskipun masih belum ada dukungan resmi, pratinjau mereka untuk Windows berjalan dengan baik. Desas-desus adalah bahwa dukungan Windows akan dikirimkan dengan 1.1, yang akan keluar pada bulan April atau Mei 2015. Seperti yang Anda harapkan dari kerangka kerja cerdas seperti Meteor, bootstrap aplikasi memerlukan satu baris perintah untuk dipanggil:

 meteor create book-list

Ini akan membuat direktori bernama "daftar buku", dan mengisinya dengan beberapa boilerplate dan kode dependen. Untuk menjalankan aplikasi, masukkan direktori yang baru dibuat dan jalankan:

 meteor

Buka http://localhost:3000 di browser web Anda, dan Anda akan melihat yang berikut:

Anda juga dapat melihat "versi 0" aplikasi kami di MeteorPad, situs seperti JSFiddle untuk Meteor: Daftar Buku: Aplikasi Default

Meteor menyimpan tampilannya dalam file HTML. Jika kita membuka “book-list.html”, kita akan melihat:

 <head> <title>book-list</title> </head> <body> <h1>Welcome to Meteor!</h1> {{> hello}} </body> <template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p> </template>

Meteor menggunakan "Blaze", mesin templating, untuk membuat respons dari file HTML ini. Tanda kurung kurawal harus familiar bagi siapa saja yang telah menggunakan Handlebars.js (atau mesin templating serupa lainnya), dan mereka memiliki fungsi yang serupa di sini. Blaze memeriksa ekspresi di dalam setiap pasang kurung kurawal ganda dan mengganti masing-masing dengan nilai yang dihasilkan oleh ekspresi ini.

Program contoh sederhana ini hanya memiliki dua ekspresi tanda kurung ganda:

Yang pertama, “{{> hello}}”, memberi tahu Blaze untuk menyertakan template yang disebut “halo”. Templat itu ditentukan di bagian bawah file, di bagian <nama templat=”halo”>.
Yang kedua, “{{counter}}”, sedikit lebih rumit. Untuk melihat dari mana nilai "penghitung" ini berasal, kita perlu membuka "book-list.js":

 if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.hello.helpers({ counter: function () { return Session.get('counter'); } }); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }

Beberapa hal perlu dijelaskan di sini. Pertama, dipecah menjadi “if (Meteor.isClient)” dan “if (Meteor.isServer)”. Ingat bahwa meteor adalah kerangka kerja tumpukan penuh, sehingga kode yang Anda tulis dijalankan di server dan klien. Persyaratan ini memungkinkan kita untuk membatasi bahwa: blok pertama hanya berjalan di klien, dan yang kedua hanya berjalan di server.

Kedua, ada panggilan "Session.setDefault" - ini menginisialisasi variabel sesi yang disebut "counter" di browser. Variabel sesi bertindak sedikit seperti global di Meteor (baik dan buruk). Namun, variabel sesi itu tidak muncul secara langsung di “{{counter}}”. Sebaliknya, ekspresi "penghitung" itu adalah "pembantu", yang didefinisikan di bagian "Template.hello.helpers". Helper ini hanya mengambil nilai variabel sesi dan mengembalikannya.

Perhatikan bahwa helper adalah "reaktif". Ini berarti bahwa setiap kali variabel sesi berubah, Meteor secara otomatis menjalankan kembali fungsi pembantu yang mereferensikannya, dan Blaze secara otomatis memperbarui browser dengan konten baru.

Kode klien juga memantau acara, melalui "Template.hello.events". Kami mengidentifikasi peristiwa berdasarkan jenis peristiwa dan pemilih (dalam hal ini, "tombol klik"), dan kemudian memberi tahu Meteor apa yang harus dilakukan peristiwa itu. Dalam hal ini, variabel sesi bertambah, yang menjalankan kembali fungsi pembantu dan pada gilirannya merender ulang konten.

Menampilkan Data Statis

Semua ini baik dan bagus, tetapi bukan aplikasi Meteor yang kami inginkan untuk tutorial ini.

Mari kita mulai mengutak-atik aplikasi ini - kita akan menampilkan daftar buku yang statis dan berkode keras. Untuk saat ini, kami akan menyimpan daftar buku dalam variabel sesi. Dalam kode “isClient”, kita akan menggunakan “Template.hello.rendered” untuk mengatur variabel sesi segera setelah template bookList di-render:

 Template.hello.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); };

Kemudian, kami mengembalikan variabel sesi itu dengan pembantu baru di templat "halo":

 Template.hello.helpers({ books: function () { return Session.get('books'); } });

Dan tampilkan di layar melalui interpolasi variabel di template "halo":

 <template name="hello"> <h3>Here are your books:</h3> {{ books }} </template>

Anda dapat melihat kode ini beraksi di Meteorpad: Daftar Buku: Tampilkan Variabel Sesi

Hal pertama yang harus diperhatikan adalah bahwa server Meteor secara otomatis mendeteksi perubahan pada basis kode kami, mendorong kode baru ke klien, dan meminta klien untuk memuat ulang. Bahkan setelah kami menerapkan aplikasi, kami dapat menerapkan perubahan dan secara otomatis memperbarui klien kami melalui push kode panas.

Sejauh ini, inilah yang kami dapatkan:

Ups, kami salah menampilkan data. Blaze mendapat poin untuk akurasi di sini (mengapa ya, ini adalah array objek), tapi kita harus sedikit lebih pintar jika kita ingin menampilkan daftar buku kita dengan cara yang berguna. Untungnya, Blaze membuatnya sangat mudah untuk bekerja dengan array data menggunakan arahan “#each”:

 <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL>

Di Blaze, "#each" bekerja sedikit seperti direktif "ng-repeat" Angular - ia mengulangi melalui struktur array, mengatur konteks saat ini ke objek saat ini dalam array, dan berulang kali menampilkan HTML di dalam "{{#each …}}”. Inilah tampilan daftar buku kami sekarang:

Di MeteorPad: Tampilkan Variabel Sesi dengan Benar

Beberapa Pembersihan

Sebelum melangkah lebih jauh, mari kita bersihkan kode kita sedikit.

Meteor memungkinkan kelonggaran luar biasa dalam cara Anda mengatur basis kode Anda. Seperti yang akan Anda lihat, hanya ada beberapa aturan keras dan cepat: di mana pun Anda meletakkan HTML dan JavaScript, Meteor akan menemukannya. Fleksibilitas ini bagus, tetapi itu berarti Anda lebih berkewajiban untuk mengatur kode Anda dengan cara yang masuk akal, jadi Anda tidak terjebak mempertahankan kekacauan besar yang tidak teratur.

Pertama, mari kita ganti nama template "halo" ini menjadi sesuatu yang bermakna, seperti "bookList", dan ganti HTML boilerplate dengan ini:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body> <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

Kedua, mari kita pisahkan bagian "klien" dan "server" menjadi file terpisah. Di direktori aplikasi kami, kami akan menyiapkan subdirektori "klien" dan subdirektori "server" - Meteor akan mengetahui secara otomatis untuk menjalankan file "/ klien/" pada klien, dan menjalankan file "/ server/" pada server. Ini adalah konvensi yang baik untuk menempatkan kode template dalam file JavaScript dinamai template, jadi mari kita menempatkan kode klien kita ke "client/bookList.js". Kami dapat menempatkan kode server-startup kami yang saat ini kosong di "server/startup.js". Akhirnya, mari kita keluar dari “

Perhatikan bahwa bahkan setelah semua ini beralih, Meteor masih akan secara otomatis menemukan semua file HTML dan JavaScript kita. Selama file ada di suatu tempat di "/ client/", Meteor akan tahu untuk menjalankannya di klien. Selama file ada di suatu tempat di "/ server /", meteor akan tahu untuk menjalankannya di server. Sekali lagi, terserah kepada pengembang untuk mengatur semuanya.

Jadi sekarang kode kita akan terlihat seperti ini:

daftar buku.html:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body>

klien/daftar buku.html:

 <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

klien/bookList.js:

 Template.bookList.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); }; Template.bookList.helpers({ books: function () { return Session.get('books'); } });

server/startup.js:

 Meteor.startup(function () { // code to run on server at startup }); ~~~ Check it out on MeteorPad: [Initial Code Cleanup](http://meteorpad.com/pad/MwvMcsBAzfbWwEXp3/Book-List:%20Initial%20Code%20Cleanup) Verify that everything's running correctly by checking the browser window and then we're good to move on to the next step. ## Using the Database in Meteor The Meteor server runs on top of a MongoDB database. In this section of our tutorial, we will move the static list of books out of the session variable and into that database. First, delete the Template.bookList.rendered code, so that we're no longer putting stuff into that session variable. Next, we should add that list of books to the database as fixture data when the server initializes. As you'd expect for MongoDB, Meteor stores data in "collections". So, we'll create a new collection for our books. To keep things simple we will name it "books". It turns out that both the client and the server will want to know about this collection, so we'll put this code in a new subfolder: "/lib/". Meteor knows automatically that files in "/lib/" run on the client and the server. We'll create a file called "lib/collections/books.js", and give it just one line of code: ~~~ js Books = new Meteor.Collection("books");

Di dalam jendela browser yang mengarah ke http://localhost:3000, buka konsol pengembang dan periksa nilai "Buku". Sekarang seharusnya menjadi koleksi Mongo! Coba jalankan "Books.find().fetch()", dan Anda akan mendapatkan array kosong – yang masuk akal, karena kami belum menambahkan buku apa pun ke dalamnya. Kami dapat mencoba menambahkan item ke dalamnya di konsol:

 Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"})

Menambahkan hal-hal di konsol agak membosankan. Sebagai gantinya, kami akan mengatur semuanya sehingga ketika server dijalankan, kami secara otomatis memasukkan data perlengkapan ke dalam database. Jadi mari kembali ke “server/startup.js”, dan tambahkan ini:

 Meteor.startup(function () { if (!Books.findOne()) { Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"}); Books.insert({title: "1984", author: "George Orwell"}); Books.insert({title: "The Lord of the Rings", author: "JRR Tolkien"}); Books.insert({title: "The Catcher in the Rye", author: "JD Salinger"}); Books.insert({title: "The Great Gatsby", author: "F. Scott Fitzgerald"}); } });

Sekarang, saat server dinyalakan, jika tidak ada data, kami akan menambahkan data perlengkapan. Kami dapat memverifikasi ini dengan kembali ke terminal kami, menghentikan server meteor, dan menjalankan perintah ini:

 meteor reset

Catatan: Anda jarang memerlukan perintah ini, karena perintah ini akan me-reset - misalnya, membersihkan - database yang digunakan Meteor. Jika aplikasi Meteor Anda memiliki data pengguna dalam database, Anda tidak boleh menjalankan perintah ini. Namun dalam kasus ini, kami hanya akan menghapus data uji apa pun yang kami miliki.

Sekarang kita akan memulai server lagi:

 meteor

Saat startup, Meteor akan menjalankan rutinitas startup, melihat database kosong, dan menambahkan data fixture. Pada titik ini, jika kita pergi ke konsol dan mengetik "Books.find().fetch()", kita mendapatkan lima buku yang kita miliki sebelumnya.

Yang tersisa untuk langkah ini adalah menampilkan buku di layar. Untungnya, itu sesederhana mengganti "return Session.get('books');" dengan yang berikut ini dalam "buku" pembantu:

 return Books.find();

Dan kami kembali berbisnis! Aplikasi sekarang menampilkan data dari kursor database, bukan dari variabel sesi.

Lihat di MeteorPad: Pindah ke Database

Perhatian pada keamanan

Saya akan mengawali ini dengan mengatakan: "jangan lakukan ini".

Menurut Anda apa yang akan terjadi jika seseorang menjalankan aplikasi ini di browser mereka, membuka konsol, dan mengetik “Books.remove({})”?

Jawabannya adalah: mereka akan menghapus koleksinya.

Jadi, itu masalah keamanan yang cukup besar - pengguna kami memiliki terlalu banyak akses ke database kami. Setiap klien dapat mengakses seluruh database. Tidak hanya itu, klien mana pun bisa membuat perubahan apa pun ke seluruh database, termasuk penghapusan data “.remove({})” itu.

Ini tidak baik, jadi mari kita perbaiki.

Meteor menggunakan apa yang disebut "paket" untuk menambahkan fungsionalitas. Apa modul untuk Node.js, dan permata untuk Ruby, paket adalah fungsionalitas yang dibundel untuk Meteor. Ada paket untuk segala macam hal. Untuk menelusuri apa yang tersedia, lihat atmosphere.js.

Aplikasi meteor default yang kami buat dengan "meteor create" mencakup dua paket yang disebut "autopublish" dan "tidak aman". Paket pertama membuatnya agar klien memiliki akses otomatis ke seluruh database, dan yang kedua membuatnya agar pengguna dapat melakukan tindakan apa pun pada database itu.

Mari kita hilangkan itu. Kita dapat melakukannya dengan menjalankan yang berikut dari direktori aplikasi:

 meteor remove autopublish insecure

Setelah selesai, Anda akan melihat data daftar buku menghilang dari layar (karena Anda tidak lagi memiliki akses ke sana), dan jika Anda mencoba panggilan "Books.insert", Anda akan mendapatkan kesalahan: "insert failed : Akses ditolak". Di MeteorPad: Keamanan Berlebihan

Jika Anda tidak mengambil apa pun dari tutorial Meteor ini, harap ingat ini: saat Anda menerapkan aplikasi Meteor, pastikan Anda menghapus paket yang diterbitkan secara otomatis dan tidak aman. Meteor memiliki banyak tindakan pencegahan keamanan yang baik, tetapi semuanya sia-sia jika Anda membiarkan kedua paket tersebut diinstal.

Jadi, mengapa Meteor secara otomatis menyertakan paket-paket ini, jika itu adalah bahaya keamanan? Alasannya adalah, terutama untuk pemula, kedua paket tersebut memudahkan untuk memulai - Anda dapat dengan mudah men-debug dan men-tweak database dari konsol browser. Tapi itu praktik yang baik untuk membuang autopublish dan tidak aman sesegera mungkin.

Terbitkan dan Berlangganan

Jadi kami memperbaiki lubang keamanan yang menganga itu, tetapi kami telah menimbulkan dua masalah. Pertama, kita sekarang tidak memiliki akses ke database. Kedua, kami tidak memiliki cara untuk berinteraksi dengan database.

Mari kita atasi masalah pertama di sini. Meteor menyediakan akses aman ke database dengan meminta server "memublikasikan" subset dari database, dan meminta klien "berlangganan" ke publikasi itu.

Pertama, mari kita buat “/server/publications.js”:

 Meteor.publish('books', function() { return Books.find({}); });

Dan kita akan membuat “/client/subscriptions.js”:

 Meteor.subscribe('books');

Lihat di MeteorPad: Publikasikan dan Berlangganan

Server "menerbitkan" kursor yang memiliki akses ke semua data, dan klien "berlangganan" di ujung yang lain. Klien menggunakan langganan ini untuk mengisi salinan cermin database dengan semua data kursor. Saat kita mengakses “Books.find().fetch()”, kita melihat kelima objek, dan kita melihatnya ditampilkan di layar seperti sebelumnya.

Perbedaannya sekarang adalah sangat mudah untuk membatasi apa yang dapat diakses oleh klien. Coba alihkan publikasi "find()" ke subset data:

 Meteor.publish('books', function() { return Books.find({}, {limit:3}); });

Sekarang klien hanya pernah melihat tiga dari lima buku, dan tidak ada cara untuk mendapatkan sisanya. Ini bukan hanya keuntungan besar untuk keamanan (saya tidak bisa melihat rekening bank orang lain), tetapi Anda dapat menggunakannya untuk membagi data dan menghindari kelebihan beban klien.

Menambahkan Buku Baru

Kami telah melihat bagaimana memberi klien akses baca ke database dengan cara yang terbatas dan aman. Sekarang, mari kita lihat masalah kedua: bagaimana kita membiarkan pengguna mengubah database tanpa mengizinkan mereka melakukan apapun yang mereka inginkan? Menyingkirkan paket yang tidak aman membuat klien tidak memiliki akses sama sekali - mari coba izinkan penambahan buku lagi. Di meteor, kami melakukan ini dengan menambahkan "metode" ke server. Mari tambahkan metode, yang menambahkan buku baru, ke “/lib/collections/books.js”:

 Meteor.methods({ addBook: function(bookData) { var bookID = Books.insert(bookData); return bookID; } });

Seperti yang Anda lihat, ini mengambil "bookData" - dalam hal ini, itu adalah objek dengan bidang "judul" dan "penulis" - dan menambahkannya ke database. Setelah klien Anda memuat ulang, kami kemudian dapat memanggil metode ini dari klien. Anda dapat pergi ke konsol dan memasukkan sesuatu seperti ini:

 Meteor.call('addBook', {title: "A Tale of Two Cities", author: "Charles Dickens"})

Dan presto! Anda mendapatkan buku lain di daftar buku. Menggunakan konsol sangat kikuk, jadi mari kita lanjutkan dan tambahkan formulir sederhana di akhir template "daftar buku" yang memungkinkan kita menambahkan buku baru:

 <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form>

Dan kami dapat menghubungkannya ke JavaScript menggunakan kasus peristiwa, seperti yang kami miliki di aplikasi pengujian asli:

 Template.bookList.events({ "submit .add-book": function(event) { event.preventDefault(); // this prevents built-in form submission Meteor.call('addBook', {title: event.target.title.value, author: event.target.author.value}) } });

Anda dapat melihat ini beraksi di MeteorPad: Metode

Ketika kami memiliki ketidakamanan dan autopublish di tempat, klien dapat mengakses dan mengubah seluruh database. Sekarang dengan tidak adanya rasa aman dan autopublish, tetapi dengan publikasi, langganan, dan metode, klien dapat mengakses database dan berinteraksi dengannya secara terkendali.

Di samping catatan: Anda juga dapat mengatasi masalah keamanan di Meteor dengan menggunakan "perbolehkan dan tolak aturan". Anda dapat mengetahui lebih lanjut tentang itu dan beberapa alasan saya lebih suka pendekatan di atas daripada di findmeteor.com.

Otentikasi Pengguna

Mungkin terlihat seperti kita baru saja berputar kembali ke tempat kita memulai, tetapi ada satu perbedaan penting: sekarang sangat mudah bagi kita untuk membatasi akses ke database. Untuk melihat cara kerjanya, mari coba tambahkan pengguna ke aplikasi ini. Kami akan menambahkan sistem masuk ke aplikasi kami, dan alih-alih meminta semua klien bekerja dengan satu daftar buku di seluruh sistem, kami akan membuatnya sehingga setiap pengguna hanya dapat menambah atau membaca daftar buku mereka sendiri.

Buka direktori aplikasi, dan instal dua paket:

 meteor add accounts-ui accounts-password

Di sana. Anda baru saja menambahkan sistem login ke aplikasi. Sekarang kita hanya perlu menambahkan UI login ke book-list.html. Letakkan satu baris ini di bagian atas tubuh:

 {{> loginButtons}}

Anda akan melihat prompt login di bagian atas layar:

Perhatikan bahwa jika Anda mengklik tautan masuk, itu akan meminta alamat email dan kata sandi. Kita dapat mengubahnya menjadi sistem login username/password sederhana dengan membuat “/client/config.js” dengan yang berikut di dalamnya:

 Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" });

Pada titik ini, Anda dapat mengetik "Meteor.userId()" di konsol, dan itu akan mengembalikan "null". Anda dapat mencoba mengeklik tautan untuk membuat akun. Memanggil “Meteor.userId()” sekarang harus mengembalikan string ID. Server memiliki akses ke informasi yang sama ini (sebagai "this.userId"), jadi metode "tambahkan buku" dapat memaksa pengguna untuk masuk dan menyertakan bidang ID pengguna adalah hal yang sepele:

 Meteor.methods({ addBook: function(bookData) { if (this.userId) { bookData.userID = this.userId; var bookID = Books.insert(bookData); return bookID; } } });

Yang tersisa sekarang adalah membatasi klien, hanya menampilkan buku-buku yang telah ditambahkan pengguna ini. Kami menggunakan kemampuan publikasi untuk mempersempit apa yang dapat diakses oleh klien:

 Meteor.publish('books', function() { return Books.find({userID: this.userId}); });

Sekarang, publikasi hanya menemukan buku dari pengguna khusus ini. Kami bahkan dapat mengakses userId dari ekspresi Blaze sebagai “{{currentUser}}”; dan kita dapat menggunakan ini, dengan arahan “{{#if}}” (yang melakukan persis seperti yang Anda pikirkan), untuk hanya menampilkan data saat pengguna masuk:

 <template name="bookList"> {{#if currentUser}} <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form> {{else}} <h3>Please log in to see your books</h3> {{/if}} </template>

Lihat hasil akhir di MeteorPad: Users

Penyebaran

Sekarang kita bisa menyebarkan aplikasi Meteor ini ke Internet. Kami melakukan ini dengan masuk ke direktori aplikasi di terminal dan menjalankan:

 meteor deploy <your app's name>.meteor.com

Pastikan Anda mengganti “<nama aplikasi Anda>” dengan nama pendek yang sebenarnya untuk instance aplikasi. Menjalankan perintah ini akan meminta Anda untuk membuat akun dengan Meteor, dan kemudian akan menempatkan aplikasi baru Anda di server uji Meteor sehingga Anda dapat mencobanya di Internet.

Untuk demo cepat, solusi meteor.com ini adalah semua yang Anda butuhkan. Tim Meteor belum mengumumkan batasan eksplisit untuk penyimpanan atau bandwidth di server mereka. Satu-satunya batasan penting adalah jika aplikasi Anda tidak digunakan untuk waktu yang lama, situs membutuhkan beberapa detik untuk berputar untuk pengguna berikutnya.

Konon, meteor.com tidak dimaksudkan untuk penggunaan komersial. Tetapi ketika Anda pergi ke produksi, ada perusahaan platform-as-a-service seperti Modulus dan Digital Ocean yang mempermudah penerapan aplikasi Meteor. Jika Anda ingin menyebarkan aplikasi meteor ke server Anda sendiri, "meteor up" membuat proses itu juga mudah.

Langkah selanjutnya

Selamat! Dalam pencarian Anda untuk mempelajari Meteor, Anda sekarang telah membuat dan menerapkan aplikasi web Meteor waktu nyata yang sangat sederhana. Jelas, ini hanyalah langkah kecil pertama ke seluruh fitur dan fungsionalitas. Jika Anda menyukai apa yang telah Anda lihat sejauh ini, saya sangat merekomendasikan Aplikasi Meteor Pertama Anda oleh David Turnbull, yang memandu pembaca dalam membuat aplikasi yang lebih rumit, dengan lebih banyak informasi tentang fitur meteor di sepanjang jalan. Ini tersedia sebagai buku Kindle dengan harga murah, dan sebagai PDF gratis di situs web Turnbull.

Anda juga ingin menjelajahi paket yang tersedia untuk Meteor. Sembilan dari sepuluh, jawaban untuk "bagaimana saya melakukan <x> di Meteor?" adalah "ada paket untuk itu". “Bagaimana cara menambahkan perutean ke aplikasi saya?” Anda menggunakan Router Besi. “Bagaimana cara saya menyediakan RESTful API?” Anda menggunakan REStivus. “Bagaimana saya menyertakan pengujian unit?” Anda menggunakan Kecepatan. “Bagaimana cara menambahkan validasi skema?” Anda menggunakan Koleksi2. Anda dapat dengan mudah tersesat di Atmosphere.js melihat semua paket yang tersedia.

Mengapa Tidak Menggunakan Meteor?

Seperti yang Anda lihat dari tutorial ini, Meteor sederhana dan menyenangkan untuk menulis aplikasi, tapi saya akan lalai jika saya tidak menyebutkan kekurangannya.

Meteor masih relatif belum matang. Itu mencapai 1.0 Oktober lalu, dan itu mengarah ke beberapa masalah. Jika Anda ingin melakukan sesuatu yang tidak jelas, mungkin belum ada yang menulis paket untuk fungsi itu. Paket-paket yang ada lebih cenderung memiliki bug, hanya karena mereka belum cukup lama untuk menyelesaikan semua masalah.

Penskalaan juga bisa agak tidak diketahui dengan Meteor. Ada banyak situs Meteor yang meningkatkan jumlah pengguna yang wajar, tetapi hanya sedikit situs yang sangat besar - tidak ada di urutan Facebook atau LinkedIn, dengan puluhan atau ratusan juta pengguna.

Namun, untuk sebagian besar aplikasi, Meteor adalah pilihan yang sempurna, karena ini adalah kesempatan untuk mengurangi waktu pengembangan dan untuk berpartisipasi dalam memulai sesuatu yang hebat.