Meteor Eğitimi: Meteor ile Gerçek Zamanlı Web Uygulamaları Oluşturma

Yayınlanan: 2022-03-11

Meteor, web ve mobil uygulamalar için eksiksiz bir JavaScript çerçevesidir. 2011'den beri var ve hızlı prototipleme için ideal, kullanımı kolay bir çözüm olduğu için Meteor geliştiricileri arasında güçlü bir ün kazandı. Ancak son zamanlarda geliştiriciler, Meteor'un artık sadece prototip oluşturmak için olmadığını fark ettiler: ticari geliştirme için kullanılmaya hazır. Sağladığı paket cephaneliği, dayandığı sağlam mongoDB/node.js temeli ve sunduğu kodlama esnekliği ile; Meteor, tarayıcı uygulamasından sunucuya veya veritabanına kadar her şeyi işleyerek sağlam, güvenli gerçek zamanlı web uygulamaları oluşturmayı kolaylaştırır.

Bu Meteor öğreticisi, kullanıcıların oturum açmasına ve bir kitap listesini yönetmesine olanak tanıyan basit bir katalog olan Meteor'da temel bir web uygulaması oluşturma konusunda size yol gösterecektir.

Meteor'u neden kullanmalıyım? Kısa cevap, “Çünkü Meteor eğlencelidir”. Web uygulamaları geliştirmeyi basitleştirir. Öğrenmesi kolaydır ve verileri senkronize etme ve sayfaları sunma temellerinden çok uygulamanızın işlevselliğine odaklanmanıza olanak tanır.

Ayrıca, uygun şekilde yerleşik birçok davranışa sahiptir. Meteor, canlı güncellemeleri otomatik olarak gerçekleştirir, böylece veri değişiklikleri hemen tarayıcı pencerenizde görünür ve hatta uygulamanın kendisindeki kod değişiklikleri bile "gerçek zamanlı" olarak tüm tarayıcılara ve cihazlara gönderilir. Meteor yerleşik gecikme telafisine sahiptir, dağıtımı kolaydır ve her türlü işlevi yerine getiren kurulumu kolay "paketlere" sahiptir.

Nispeten yeni bir çerçeve olmasına rağmen, Respondly ve Telescope gibi nispeten büyük ölçekli hizmetler de dahil olmak üzere birçok startup halihazırda Meteor uygulamaları geliştiriyor.

Meteor Montaj ve İskele

Meteor'u *nix sistemlerine yüklemek tek satırlık bir işlemdir:

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

Hala resmi bir destek olmamasına rağmen, Windows için önizlemeleri güzel bir şekilde geliyor. Söylentilere göre Windows desteği, Nisan veya Mayıs 2015'te sona erecek olan 1.1 ile birlikte gönderilecek. Meteor gibi akıllı bir çerçeveden bekleyebileceğiniz gibi, bir uygulamayı önyüklemek için tek bir komut satırının çalıştırılması gerekir:

 meteor create book-list

Bu, "kitap listesi" adında bir dizin oluşturacak ve onu bazı ortak kod ve bağımlı kodlarla dolduracaktır. Uygulamayı çalıştırmak için yeni oluşturulan dizine girin ve şunu çalıştırın:

 meteor

Web tarayıcınızda http://localhost:3000 açın, aşağıdakileri göreceksiniz:

Ayrıca, JSFiddle for Meteor: Book List: Default App benzeri bir site olan MeteorPad'de uygulamamızın “sürüm 0”ına da göz atabilirsiniz.

Meteor, görünümlerini HTML dosyalarında saklar. “book-list.html” dosyasını açarsak şunu göreceğiz:

 <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, bu HTML dosyalarından yanıtlar oluşturmak için bir şablonlama motoru olan “Blaze”i kullanır. Çift parantezler, Handlebars.js'yi (veya diğer benzer şablonlama motorlarını) kullanan herkese aşina olmalıdır ve burada benzer bir işlev görürler. Blaze, her bir çift ayraç çiftinin içindeki ifadeleri inceler ve her birini bu ifadelerin verdiği değerle değiştirir.

Bu basit örnek program sadece iki çift çaprazlı ifadeye sahiptir:

Birincisi, "{{> merhaba}}", Blaze'e "merhaba" adlı bir şablon eklemesini söyler. Bu şablon, dosyanın alt kısmında, <template name=”merhaba”> bölümünde tanımlanmıştır.
İkincisi, “{{counter}}” biraz daha karmaşıktır. Bu "counter" değerinin nereden geldiğini görmek için "book-list.js" dosyasını açmamız gerekiyor:

 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 }); }

Bazı şeylerin burada açıklanması gerekiyor. İlk olarak, “if (Meteor.isClient)” ve “if (Meteor.isServer)” olarak bölün. Meteor'ın tam yığın bir çerçeve olduğunu hatırlayın, bu nedenle yazdığınız kod hem sunucuda hem de istemcide çalışır. Bu koşullar, şunu sınırlamamıza izin verir: ilk blok yalnızca istemcide çalışır ve ikincisi yalnızca sunucuda çalışır.

İkinci olarak, “Session.setDefault” çağrısı vardır - bu, tarayıcıda “counter” adlı bir oturum değişkenini başlatır. Oturum değişkenleri, Meteor'daki küreseller gibi davranır (iyi ve kötü için). Ancak, bu oturum değişkeni doğrudan "{{counter}}" içinde görünmüyor. Bunun yerine, bu "sayaç" ifadesi, "Template.hello.helpers" bölümünde tanımlanan bir "yardımcı"dır. Bu yardımcı, yalnızca oturum değişkeninin değerini alır ve döndürür.

Yardımcının “reaktif” olduğuna dikkat edin. Bu, oturum değişkeni her değiştiğinde, Meteor'un ona başvuran bu yardımcı işlevi otomatik olarak yeniden çalıştırdığı ve Blaze'in tarayıcıyı yeni içerikle otomatik olarak güncellediği anlamına gelir.

İstemci kodu ayrıca "Template.hello.events" aracılığıyla olayları izler. Olayı olay tipine ve seçiciye göre tanımlarız (bu durumda, "düğmeye tıklayın") ve ardından Meteor'a o olayın ne yapması gerektiğini söyleriz. Bu durumda, yardımcı işlevi yeniden çalıştıran ve sırayla içeriği yeniden oluşturan oturum değişkeni artırılır.

Statik Verileri Görüntüleme

Bunların hepsi iyi ve güzel, ancak bu eğitim için istediğimiz Meteor uygulaması değil.

Bu uygulamayı değiştirmeye başlayalım - statik, sabit kodlanmış bir kitap listesi görüntüleyeceğiz. Şimdilik, kitapların listesini bir oturum değişkeninde saklayacağız. "isClient" kodunda, bookList şablonu oluşturulur oluşturulmaz oturum değişkenini ayarlamak için "Template.hello.rendered" öğesini kullanacağız:

 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"} ]); };

Ardından, bu oturum değişkenini "merhaba" şablonunda yeni bir yardımcıyla döndürürüz:

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

Ve "merhaba" şablonundaki değişken enterpolasyon yoluyla ekranda görüntüleyin:

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

Bu kodu Meteorpad'de çalışırken kontrol edebilirsiniz: Kitap Listesi: Oturum Değişkenini Göster

Dikkat edilmesi gereken ilk şey, Meteor sunucusunun kod tabanımızdaki değişiklikleri otomatik olarak algılaması, yeni kodu istemcilere iletmesi ve istemciden yeniden yüklemesini istemesidir. Bir uygulamayı dağıttıktan sonra bile, değişiklikleri dağıtabilir ve sıcak kod göndermeleriyle müşterilerimizi otomatik olarak güncelleyebiliriz.

Şimdiye kadar, elde ettiğimiz şey bu:

Hata, verileri yanlış görüntülüyoruz. Blaze burada doğruluk için puan alır (neden evet, bu bir dizi nesnedir), ancak kitap listemizi yararlı bir şekilde görüntülemek istiyorsak biraz daha akıllı olmamız gerekecek. Neyse ki Blaze, "#each" yönergesini kullanarak veri dizileriyle çalışmayı çok kolaylaştırıyor:

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

Blaze'de, "#each" biraz Angular'ın "ng-repeat" yönergesi gibi çalışır - dizi yapısını yineler, mevcut bağlamı dizideki geçerli nesneye ayarlar ve HTML'yi art arda “{{#each” içinde görüntüler. …}}”. Kitap listemiz şu anda böyle görünüyor:

MeteorPad'de: Oturum Değişkenini Düzgün Göster

Bazı Temizlik

Daha ileri gitmeden önce kodumuzu biraz temizleyelim.

Meteor, kod tabanınızı nasıl düzenlediğiniz konusunda muazzam bir hareket alanı sağlar. Göreceğiniz gibi, yalnızca birkaç zor ve hızlı kural vardır: HTML ve JavaScript'inizi nereye koyarsanız koyun, Meteor onu bulacaktır. Bu esneklik güzeldir, ancak kodunuzu mantıklı bir şekilde düzenlemenin sizin için daha önemli olduğu anlamına gelir, bu nedenle dev bir düzensiz karmaşayı sürdürmek zorunda kalmazsınız.

İlk olarak, bu "merhaba" şablonunu "bookList" gibi anlamlı bir şeyle yeniden adlandıralım ve ortak HTML'yi şununla değiştirelim:

 <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>

İkinci olarak, "istemci" ve "sunucu" kısımlarını ayrı dosyalara ayıralım. Uygulama dizinimizde, bir “istemci” alt dizini ve bir “sunucu” alt dizini kuracağız - Meteor, istemcide “/client/” dosyalarını çalıştıracağını ve “/sunucu/” dosyalarını çalıştıracağını otomatik olarak bilecektir. sunucu. Şablon kodunu şablondan sonra adlandırılan bir JavaScript dosyasına koymak iyi bir kuraldır, bu yüzden müşteri kodumuzu “client/bookList.js” içine koyalım. Şu anda boş olan sunucu başlangıç kodumuzu “server/startup.js” içerisine koyabiliriz. Son olarak, "

Tüm bu geçişlerden sonra bile Meteor'un tüm HTML ve JavaScript dosyalarımızı otomatik olarak bulacağını unutmayın. Bir dosya “/client/” içinde bir yerde olduğu sürece, Meteor onu istemcide çalıştırmayı bilecektir. Bir dosya “/server/” içinde bir yerde olduğu sürece, meteor onu sunucuda çalıştırmayı bilecektir. Yine, işleri düzenli tutmak geliştiriciye kalmıştır.

Şimdi kodumuz şöyle görünmelidir:

kitap listesi.html:

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

müşteri/kitapListesi.html:

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

client/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'); } });

sunucu/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");

http://localhost:3000'i gösteren tarayıcı penceresinde geliştirici konsoluna gidin ve “Kitaplar”ın değerini kontrol edin. Artık bir Mongo koleksiyonu olmalı! “Books.find().fetch()” dosyasını çalıştırmayı deneyin, boş bir dizi elde edeceksiniz – bu mantıklı, çünkü henüz ona herhangi bir kitap eklemedik. Konsolda buna öğeler eklemeyi deneyebiliriz:

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

Konsola bir şeyler eklemek oldukça sıkıcı. Bunun yerine, sunucu başladığında fikstür verilerini otomatik olarak veritabanına ekleyecek şekilde bir şeyler ayarlayacağız. O halde “server/startup.js”ye geri dönelim ve şunu ekleyelim:

 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"}); } });

Şimdi, sunucu başladığında, mevcut veri yoksa fikstür verilerini ekleyeceğiz. Bunu, terminalimize geri dönüp meteor sunucusunu durdurarak ve şu komutu çalıştırarak doğrulayabiliriz:

 meteor reset

Not: Bu komuta nadiren ihtiyaç duyacaksınız, çünkü bu komut, Meteor'un kullandığı veritabanını sıfırlar - yani temizler -. Meteor uygulamanızın veritabanında herhangi bir kullanıcı verisi varsa, bu komutu çalıştırmamalısınız. Ancak bu durumda, elimizdeki tüm test verilerini temizleyeceğiz.

Şimdi sunucuyu yeniden başlatacağız:

 meteor

Başlangıçta, Meteor başlatma rutinini çalıştıracak, veritabanının boş olduğunu görecek ve fikstür verilerini ekleyecektir. Bu noktada konsola gidip “Books.find().fetch()” yazarsak daha önce elimizde olan beş kitabı elde ederiz.

Bu adım için geriye kalan tek şey kitapları ekranda görüntülemek. Neyse ki bu, “return Session.get('books');” ifadesini değiştirmek kadar basit. "kitaplar" yardımcısında aşağıdakilerle:

 return Books.find();

Ve işimize geri döndük! Uygulama artık oturum değişkeni yerine bir veritabanı imlecinden gelen verileri görüntülüyor.

MeteorPad'e göz atın: Veritabanına Taşınma

Güvenlik endişeleri

Bunu “bunu yapma” diyerek başlatacağım.

Birisi tarayıcısında bu uygulamayı çalıştırıp konsola gidip "Books.remove({})" yazarsa ne olur sizce?

Cevap: Koleksiyonu silerlerdi.

Yani, bu oldukça büyük bir güvenlik sorunu - kullanıcılarımızın veritabanımıza çok fazla erişimi var. Herhangi bir istemci tüm veritabanına erişebilir. Sadece bu değil, herhangi bir istemci, ".remove({})" veri silme de dahil olmak üzere tüm veritabanında herhangi bir değişiklik yapabilir.

Bu iyi değil, hadi düzeltelim.

Meteor, işlevsellik eklemek için "paketleri" kullanır. Node.js için modüller ve Ruby için değerli taşlar ne ise, paketler Meteor için paketlenmiş bir işlevsellik iyiliğidir. Her türlü şey için paketler var. Nelerin mevcut olduğuna göz atmak için atmosfer.js'ye göz atın.

“Meteor create” ile yaptığımız varsayılan meteor uygulaması “autopublish” ve “insecure” isimli iki paket içeriyor. İlk paket, istemcilerin tüm veritabanına otomatik olarak erişmesini sağlar ve ikincisi, kullanıcıların bu veritabanı üzerinde herhangi bir eylemi gerçekleştirebilmesini sağlar.

Bunları kaldıralım. Bunu, uygulama dizininden aşağıdakileri çalıştırarak yapabiliriz:

 meteor remove autopublish insecure

Bu yapıldığında, kitap listesi verilerinin ekrandan kaybolduğunu göreceksiniz (çünkü artık ona erişiminiz yok) ve bir “Books.insert” aramasını denerseniz, şu hatayı alırsınız: “insert başarısız oldu : Erişim reddedildi". MeteorPad'de: Aşırı Güvenlik

Bu Meteor eğitiminden başka bir şey almazsanız, lütfen şunu unutmayın: Bir Meteor uygulaması dağıtırken, otomatik olarak yayınlanan ve güvenli olmayan paketleri kaldırdığınızdan emin olun. Meteor'un pek çok iyi güvenlik önlemi vardır, ancak bu iki paketi kurulu halde bırakırsanız, bunların hepsi boşunadır.

Peki, böyle bir güvenlik tehlikesi ise Meteor neden bu paketleri otomatik olarak dahil ediyor? Bunun nedeni, özellikle yeni başlayanlar için bu iki paketin başlamayı kolaylaştırmasıdır - bir tarayıcının konsolundan veritabanında kolayca hata ayıklayabilir ve ince ayar yapabilirsiniz. Ancak, otomatik yayınlamayı ortadan kaldırmak ve mümkün olan en kısa sürede güvensiz hale getirmek iyi bir uygulamadır.

Yayınla ve Abone Ol

Böylece, bu açık güvenlik açığını düzelttik, ancak iki sorun ortaya koyduk. İlk olarak, artık veritabanına erişimimiz yok. İkincisi, veritabanıyla etkileşim kurmanın hiçbir yolu yok.

İlk sorunu burada çözelim. Meteor, sunucunun veritabanının bir alt kümesini "yayınlamasını" ve istemcinin bu yayına "abone olmasını" sağlayarak bir veritabanına güvenli erişim sağlar.

İlk önce “/server/publications.js” dosyasını oluşturalım:

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

Ve “/client/subscriptions.js” oluşturacağız:

 Meteor.subscribe('books');

MeteorPad'de kontrol edin: Yayınlayın ve Abone Olun

Sunucu, tüm verilere erişimi olan bir imleç "yayınlar" ve istemci diğer uçta buna "abone olur". İstemci, imlecin tüm verileriyle veritabanının yansıtılmış bir kopyasını doldurmak için bu aboneliği kullanır. “Books.find().fetch()”e eriştiğimizde, beş nesnenin hepsini görüyoruz ve daha önce olduğu gibi ekranda görüntülendiğini görüyoruz.

Şimdiki fark, istemcilerin erişebileceklerini sınırlamanın gerçekten kolay olmasıdır. “find()” yayınını bir veri alt kümesine değiştirmeyi deneyin:

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

Artık müşteri beş kitaptan yalnızca üçünü görüyor ve geri kalanına ulaşmanın bir yolu yok. Bu sadece güvenlik için büyük bir nimet değil (diğer herkesin banka hesaplarını göremiyorum), aynı zamanda verileri parsellemek ve bir müşteriyi aşırı yüklemekten kaçınmak için kullanabilirsiniz.

Yeni Kitap Ekleme

İstemcilere veritabanına sınırlı ve güvenli bir şekilde okuma erişimi vermeyi gördük. Şimdi ikinci soruna bakalım: Kullanıcıların istedikleri herhangi bir şeyi yapmalarına izin vermeden veritabanını değiştirmelerine nasıl izin veririz? Paketten güvenli bir şekilde kurtulmak, müşterilerin hiçbir erişimi olmamasına neden oldu - hadi kitapların eklenmesine tekrar izin vermeyi deneyelim. Meteorda bunu sunucuya bir “method” ekleyerek yapıyoruz. “/lib/collections/books.js” dosyasına yeni bir kitap ekleyen bir yöntem ekleyelim:

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

Gördüğünüz gibi, bu "bookData"yı alır - bu durumda, bu "başlık" ve "yazar" alanlarına sahip bir nesnedir - ve onu veritabanına ekler. İstemciniz yeniden yüklendiğinde, istemciden bu yöntemi çağırabiliriz. Konsola gidip şöyle bir şey girebilirsiniz:

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

Ve presto! Kitap listesinden başka bir kitap alırsınız. Konsolu kullanmak dayanılmaz derecede hantal, bu yüzden devam edelim ve “bookList” şablonunun sonuna yeni kitaplar eklememize izin verecek basit bir form ekleyelim:

 <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>

Ve bunu, orijinal test uygulamasında yaptığımız gibi bir olay vakası kullanarak JavaScript'e bağlayabiliriz:

 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}) } });

Bunu MeteorPad'de çalışırken görebilirsiniz: Yöntemler

Güvenli olmayan ve otomatik yayına sahip olduğumuzda, müşteriler tüm veritabanına erişebilir ve bunları değiştirebilirdi. Artık güvensiz ve otomatik yayımlama ortadan kalktı, ancak yayınlar, abonelikler ve yöntemlerle müşteriler veritabanına erişebilir ve onunla kontrollü bir şekilde etkileşim kurabilir.

Bir yan not: Meteor'daki güvenlik sorunlarını "izin ver ve reddet" kurallarını kullanarak da çözebilirsiniz. Bunlar ve yukarıdaki yaklaşımı tercih etmemin bazı nedenleri hakkında daha fazla bilgiyi Discovermeteor.com adresinde bulabilirsiniz.

Kullanıcı doğrulama

Başladığımız yere geri dönmüş gibi görünebiliriz, ancak önemli bir fark var: artık veritabanına erişimi sınırlamak bizim için gerçekten çok kolay. Bunun nasıl çalıştığını görmek için bu uygulamaya kullanıcı eklemeyi deneyelim. Uygulamamıza bir oturum açma sistemi ekleyeceğiz ve ardından tüm müşterilerin sistem çapında tek bir kitap listesiyle çalışmasını sağlamak yerine, bunu her kullanıcının yalnızca kendi kitap listesine ekleyebileceği veya okuyabileceği şekilde yapacağız.

Uygulama dizinine gidin ve iki paket kurun:

 meteor add accounts-ui accounts-password

Orası. Uygulamaya bir giriş sistemi eklediniz. Şimdi sadece giriş kullanıcı arayüzünü book-list.html'ye eklememiz gerekiyor. Bu tek satırı gövdenin üstüne koyun:

 {{> loginButtons}}

Ekranın üst kısmında bir oturum açma istemi görmelisiniz:

Giriş bağlantısını tıklarsanız, bir e-posta adresi ve şifre isteyeceğine dikkat edin. İçinde aşağıdakilerle “/client/config.js” oluşturarak bunu basit kullanıcı adı/şifre giriş sistemine çevirebiliriz:

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

Bu noktada konsola “Meteor.userId()” yazdığınızda “null” dönecektir. Bir hesap oluşturmak için bağlantıya tıklamayı deneyebilirsiniz. "Meteor.userId()" çağrısı artık bir kimlik dizesi döndürmelidir. Sunucunun bu aynı bilgiye ("this.userId" olarak) erişimi vardır, bu nedenle "kitap ekle" yönteminin kullanıcıyı oturum açmaya zorlaması ve bir kullanıcı kimliği alanı eklemesi önemsizdir:

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

Şimdi geriye kalan tek şey, istemciyi sınırlamak, yalnızca bu kullanıcının eklediği kitapları göstermek. Müşterinin erişebileceği şeyleri daraltmak için yayının yeteneğini kullanırız:

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

Şimdi, yayın yalnızca bu belirli kullanıcıya ait kitapları bulur. UserId'ye Blaze ifadelerinden “{{currentUser}}” olarak bile erişebiliriz; ve bunu bir “{{#if}}” yönergesiyle (ki tam olarak düşündüğünüzü yapar), verileri yalnızca kullanıcı oturum açtığında göstermek için kullanabiliriz:

 <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>

MeteorPad'deki nihai sonuca göz atın: Kullanıcılar

dağıtım

Artık bu Meteor uygulamasını internete dağıtabiliriz. Bunu, bir terminaldeki uygulama dizinine gidip aşağıdakileri yürüterek yaparız:

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

“<uygulamanızın adı>” öğesini uygulama örneği için gerçek, kısa bir adla değiştirdiğinizden emin olun. Bu komutu çalıştırmak sizden Meteor ile bir hesap oluşturmanızı isteyecek ve ardından yeni uygulamanızı Meteor'ın test sunucularına koyacak ve böylece İnternet'te deneyebileceksiniz.

Hızlı bir demo için ihtiyacınız olan tek şey bu meteor.com çözümü. Meteor ekibi, sunucularında depolama veya bant genişliği için herhangi bir açık sınır açıklamadı. Dikkate değer tek sınırlama, uygulamanız uzun süre kullanılmadığında sitenin bir sonraki kullanıcı için açılmasının birkaç saniye sürmesidir.

Bununla birlikte, meteor.com ticari kullanım için tasarlanmamıştır. Ancak üretime geçtiğinizde, Meteor uygulamalarının dağıtımını kolaylaştıran Modulus ve Digital Ocean gibi hizmet olarak platform şirketleri var. Kendi sunucunuza bir meteor uygulaması dağıtmak istiyorsanız, "meteor up" bu işlemi de kolaylaştırır.

Sonraki adımlar

Tebrikler! Meteor'u öğrenme arayışınızda, şimdi çok basit bir gerçek zamanlı Meteor web uygulaması yaptınız ve dağıttınız. Açıkçası, bu, tüm bir özellik ve işlevsellik evrenine yalnızca küçük bir ilk adımdır. Şimdiye kadar gördüklerinizi beğendiyseniz, okuyucuları meteor özellikleri hakkında daha fazla bilgi ile daha karmaşık bir uygulama oluşturmaya yönlendiren David Turnbull'un İlk Meteor Uygulamanızı şiddetle tavsiye ederim. Küçük bir fiyata Kindle kitabı olarak ve Turnbull'un web sitesinde ücretsiz PDF olarak mevcuttur.

Ayrıca Meteor için mevcut olan paketleri de keşfetmek isteyeceksiniz. On üzerinden dokuzu, “Meteor'da <x> nasıl yaparım?” “bunun için bir paket var”. "Uygulamama yönlendirmeyi nasıl eklerim?" Demir Yönlendirici kullanıyorsunuz. "Bir RESTful API'sini nasıl sağlarım?" REStivus kullanıyorsunuz. "Birim testini nasıl dahil edebilirim?" Velocity'i kullanırsın. "Şema doğrulamalarını nasıl eklerim?" Collection2'yi kullanıyorsunuz. Mevcut tüm paketlere bakarak Atmosphere.js'de kolayca kaybolabilirsiniz.

Neden Meteor Kullanmıyorsunuz?

Bu öğreticiden de görebileceğiniz gibi, Meteor üzerine uygulama yazmak basit ve eğlencelidir, ancak dezavantajlarından bahsetmesem kusura bakmayın.

Meteor hala nispeten olgunlaşmamış. Geçtiğimiz Ekim ayında 1.0'a ulaştı ve bu da bazı sorunlara yol açıyor. Belirsiz bir şey yapmak istiyorsanız, henüz kimse bu işlevsellik için bir paket yazmamış olabilir. Mevcut paketlerin hata içerme olasılığı daha yüksektir, çünkü tüm sorunları çözecek kadar uzun süredir buralarda değiller.

Ölçekleme, Meteor ile bir şekilde bilinmeyebilir. Makul sayıda kullanıcıya kadar ölçeklenen çok sayıda Meteor sitesi var, ancak çok az sayıda çok büyük site var - on veya yüz milyonlarca kullanıcıyla Facebook veya LinkedIn sırasına göre hiçbir şey yok.

Bununla birlikte, geliştirme süresini kısaltmak ve harika bir şeyin başlangıcına katılmak için bir şans olduğundan, çoğu uygulama için Meteor mükemmel bir seçimdir.