Sukurkite savo forumą realiuoju laiku naudodamiesi „Meteor“

Paleistas 2011 m. Balandžio mėn. Meteoras yra „JavaScript“ sistema, kuri yra įrankių bangos dalis, įvedanti naują interneto programų kūrimo būdą. Jūs žinote, kokia rūšis: nuolat girdite apie juos ir pažadate sau, kad juos patikrinsite, tačiau niekada nerandate laiko iš tikrųjų pasinerti.

Laimei, mes esame čia, kad padėtume jums. Taigi sekite paskui, ir po mažiau nei 30 minučių „Meteor“ bus paleistas ir paleistas, žais su įspūdingomis realaus laiko galimybėmis ir pagaliau sužinos, kas yra visas triukšmas.

  • Atsisiųskite šaltinio failus šiai pamokai

Meteoras



„Meteor“ realaus laiko prigimtis ir paprastas, galingas dizainas gali padėti kurti žiniatinklio programas daug greičiau nei jūs darėte anksčiau

Kodėl Meteoras?

Taigi, dėl ko Meteorui pirmiausia verta jaudintis? Na, pradedantiesiems, jis turi keletą labai įdomių funkcijų:

geriausias nešiojamas kompiuteris, skirtas „Photoshop CC 2015“
  • Realaus laiko ir reaktyvus Didžiausias „Meteor“ pardavimo taškas yra tai, kad pagal nutylėjimą jis veikia realiuoju laiku. Viskas vyksta tiesiogiai jūsų programoje, o „Meteor“ automatiškai atspindės bet kokius jūsų vartotojo sąsajos duomenų pakeitimus.
  • Visi „JavaScript“ Nekenčiu ar nemėgstate, negalite paneigti, kad „JavaScript“ yra viena iš populiariausių kalbų internete. Tai, kad „Meteor“ naudoja JS tiek kliente, tiek serveryje, daro jį ypač prieinamą pradedantiesiems, ypač jei turite patirties naudodami tradicinę naršyklės „JavaScript“.
  • Paprasta ir protinga Tai, kad „Meteor“ yra labai malonu dirbti, yra ne tik jos galingos galimybės, bet ir maži dalykai, kurie palengvina jūsų gyvenimą, pvz., Automatinis CSS ir „JavaScript“, įskaitant integruotą autentifikavimo vartotojo sąsają.

Darbo pradžia

Šiai pirmajai pamokai sukursime aplikacijų programą ir žaisime su ja. Taigi pradėkime nuo „Meteor“ diegimo. Tiesiog atidarykite komandinę eilutę ir paleiskite šią komandą:

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

Kol bėgi palaikoma platforma , viskas turėtų vykti sklandžiai. Norėdami įsitikinti, kad „Meteor“ veikia jūsų kompiuteryje, sukursime paprastą programą:

meteor create forum

Jei tai veikia, turėtume galėti paleisti programą atlikdami paprastus veiksmus:

cd forum meteor

Šablonų įprasminimas

„Meteor“ mums sukurta paprasta programa dar nedaug nuveikia, tačiau ji yra geras „Meteor“ šablonų sistemos pavyzdys. Meteoras naudoja Vairas savo šablonui, kurį paprasčiausiai galite pamatyti kaip įprastą HTML su keliomis specialiomis žymomis, kurios veikia kaip vietos rezervavimo ženklai.

Pažvelkime į teksto rengyklę atidarę forum.html. Čia {{> labas}} tiesiog reiškia „pakeisti mane šablonu, pavadintu labas“. Ir tikrai, „Hello“ šablonas yra apibrėžtas žemiau tame pačiame faile:

Hello World!

{{greeting}}

{{greeting}} yra dar vienas vietos rezervavimo ženklų tipas. Skirtingai nuo pirmojo, jis vadina „pagalbininku“, o ne kitu šablonu.

Pagalbininkai apibrėžiami šablono „JavaScript“ valdiklyje, o šiuo atveju - forum.js taip:

Template.hello.greeting = function () { return 'Welcome to forum.'; };

Duomenų saugojimas kolekcijose

Taigi mes žinome, kaip rodyti duomenis naudojant šablonus, bet iš kur šie duomenys iš tikrųjų atsiranda? Meteoras naudoja MongoDB , kuriame saugomos prekės „kolekcijose“. Taigi sukurkime naują kolekciją ir tada pasakykime apie tai pranešimų šabloną. Išvalykite forum.js turinį ir įveskite:



var Posts = new Meteor.Collection('posts'); if (Meteor.isClient) { Template.posts.helpers({ posts: function() { return Posts.find(); } }) }

Čia daug kas vyksta užkulisiuose. Mes sukūrėme a Meteorų kolekcija vadinamos „žinutėmis“, kliento ir serverio pusėmis.

Teleskopas - socialinių naujienų programa, sukurta kartu su „Meteor“. Programą sukūrė ir prižiūri šios pamokos autoriai, ji yra atviro kodo

Serverio pusėje, kai dokumentai bus pridėti prie kolekcijos, jie bus įrašyti į nuolatinę „MongoDB“ duomenų bazę. Kliento pusėje „postų“ kolekcija automatiškai prisijungia prie serverio ir sukuria naršyklės vietinį serverio kolekcijos veidrodį (arba talpyklą). Taigi, kai dokumentai sukuriami naršyklėje, jie perkeliami į serverį, kuris juos įterpia į „Mongo“ ir perduoda į visas kitas prijungtas „įrašų“ kolekcijas.

Klientas vs serveris

Galbūt pastebėjote „Meteor.isClient“. „Meteor“ programos yra atskiros žiniatinklio pasaulyje, nes jos gali paleisti kodą tiek naršyklėje, tiek serveryje ... ir kai kuriais atvejais net tą patį kodą!

„Meteor“ pateikia du būdus, kaip tai kontroliuoti. Pirma, jei sukursite / serverio ir / kliento katalogus, viskas, ką ten įdėsite, bus įkelta tik tam tikroje aplinkoje.

Jei jums reikia išsamesnės kodo vykdymo kontrolės, „Meteor“ taip pat pateikia čia naudojamus kintamuosius „Meteor.isClient“ ir „Meteor.isServer“, kurie leidžia jums maišyti serverio ir kliento kodą tame pačiame faile. Ir jei jūs visiškai nenurodote aplinkos, kodas tiesiog veiks abiejose vietose, kaip nutinka mūsų pirmoje kodo eilutėje.

Prieš pereidami prie faktinio duomenų įtraukimo į savo kolekciją, taip pat atnaujinkime pagrindinį programos šabloną, kad būtų rodomi pranešimų pagalbininkai, kuriuos mes jį perduosime. Tiesiog pakeiskite forum.html turinį šiuo:

Forum {{> posts}}

Posts

    {{#each posts}}
  • {{title}}
  • {{/each}}

Atkreipkite dėmesį į tai {{#eacheach}. Tai „blokinis pagalbininkas“ ir daro du dalykus vienu metu. Pirma, šablonui liepiama pakartoti bloką kiekvienam įrašui (atminkite, kad įrašų vertę gauname iš to paties pavadinimo šablono pagalbininko). Antra, sakoma, kad bloke jo vertė yra šiuo metu kartojamas elementas - šiuo atveju vienas įrašas. Tai reiškia, kad kai rašome {{title}}, šablonas žino, kad tikrai turime galvoje šį.pavadinimą, net jei valdiklyje neapibrėžėme konkretaus pavadinimo pagalbininko.

Jei viskas buvo suplanuota, naršyklėje atidarykite http: // localhost: 3000 ir turėtumėte pamatyti kažką panašaus

Jei viskas buvo suplanuota, naršyklėje atidarykite http: // localhost: 3000 ir turėtumėte pamatyti kažką panašaus

Pažvelkime iš arčiau į šią magišką kolekciją. Kadangi „Meteor“ iš dalies gyvena naršyklėje, mes galime tiesiog naudoti naršyklės konsolę, kad su ja kalbėtume! Paleiskite kodą, naudojamą pranešimų šablonui nurodyti pateikti užklausą dėl duomenų rinkimo:



kaip gauti komisinius už meną
Posts.find() » ‣LocalCollection.Cursor

Žymeklis yra „Meteor“ duomenų šaltinis, kuris pateikia duomenis, atitinkančius jam pateiktą užklausą (mūsų atveju - tuščią užklausą). Dabar mums tai nėra taip įdomu, todėl išskirkime iš jo duomenis naudodami:

Posts.find().fetch() » []

Tas skambutis turėtų grąžinti tuščią masyvą []. Taip yra todėl, kad nėra pranešimų. Taigi pridėkime vieną!

Posts.insert({title: 'A Brand New Post'});

Akimirksniu matome, kad puslapyje pasirodo įrašas, nes „Meteor“ reaktyvus atvaizdavimas palaiko HTML sinchronizavimą su pagrindiniu duomenų modeliu. Bet palaukite, yra dar daugiau; dabar galime paimti įrašą iš kolekcijos kliente:

Posts.find().fetch() » [‣Object]

Įrašas dabar ne tik gyvena vietinėje kolekcijoje ir rodomas mūsų naršyklės skirtuke, bet ir pabandykite atnaujinti naršyklę, o mūsų naujas įrašas vis tiek bus. Užkulisiuose „Meteor“ sinchronizavo tą įrašo objektą ({title: 'A Brand New Post'}) iki serverio, išsaugojo jį duomenų bazėje ir dabar platina visiems klientams, kurie prašo įrašų.

Kūrimas naudojant kliento sistemą, pvz., „Meteor“, reiškia, kad galite bendrauti su savo programa tiesiai iš naršyklės pulto

Išplėstinė mūsų vartotojo sąsaja

Dabar, kai mes žinome, kaip įterpti duomenis per konsolę, pažiūrėkime, kaip tą patį padaryti naudojant faktinę vartotojo sąsają (ir suteikiame savo pranešimams papildomą kūno lauką procese). Pirmiausia pridėkime paprastą formą prie savo šablono. Pridėkite formos šabloną prie forum.html:

brangiausias nešiojamas kompiuteris rinkoje
Post Title: Post Body:

Tada paskambinkite iš programos žymėjimo:

{{> form}} {{> posts}}

Dabar belieka prijungti valdiklį, kad mūsų forma tikrai kažką padarytų. Norėdami tai padaryti, apibrėžkime „įvykio pagalbininką“ savo formos šablonui. Pridėkite tai bloke „Meteor.isClient“:

Template.form.events = { 'click #submit': function(event){ event.preventDefault(); var title = $('#title').val(); var body = $('#body').val(); Posts.insert({ title: title, body: body }); $('#title, #body').val(''); } }

Pirma, norėdami „Meteor“ pasakyti, kada paleisti pagalbininką, mes paprasčiausiai naudojame įvykio raktinį žodį (šiuo atveju spustelėkite), po kurio eina CSS parinkiklis.

Pagalbinė funkcija kaip argumentą laiko „JavaScript“ įvykį, o mes vadiname jame esantį metodą preventDefault (), kad nuslopintume numatytąją naršyklės elgseną (pateikdami formą). Tada mes gauname formos laukų vertes dėka mūsų senojo draugo „jQuery“, kuris yra patogus pagal numatytuosius nustatymus susietas su „Meteor“.

Lieka tik įdėti naują įrašą į savo kolekciją. Jūs pastebėjote, kad sintaksė yra visiškai tokia pati, kaip tada, kai naudojome „JavaScript“ konsolę, ir mes baigiame išvalydami formą, kad du kartus per klaidą nepateiktų to paties. Galiausiai nepamirškime atnaujinti savo pranešimų šablono, kad būtų rodomas naujas kūno laukas:

Posts

    {{#each posts}}
  • {{title}}

    {{body}}

  • {{/each}}

Atidarykite savo svetainę dviejuose skirtinguose naršyklės languose ir pradėkite naują įrašą. Pamatysite, kad viename lange įterpti duomenys akimirksniu atsispindi kitame!

Visi duomenys, kuriuos įvedate viename lange, automatiškai iškart rodomi kitame



Visi duomenys, kuriuos įvedate viename lange, automatiškai iškart rodomi kitame

Vartotojo abonementai

„Meteor“ leidžia labai lengvai įdiegti vartotojo abonementus dėl iš anksto supakuotos vartotojo autentifikavimo sistemos. Norėdami jį suaktyvinti, pridėsime „accounts-ui“ ir „accounts-password“ paketus („Meteor“ paketai yra pasirenkami moduliai, suteikiantys jūsų programai papildomų galimybių). Grįžkite į terminalą ir įveskite:

kaip pakeisti pasirinkimą
meteor add accounts-ui && meteor add accounts-password

„Meteor“ ne tik teikia visą užkulisinę mašiną, leidžiančią veikti vartotojų abonementams, bet ir suteikia mums gražų, paruoštą naudoti valdiklį. Grįžkime į „forum.html“ ir pridėkite pagalbininką „{{loginButtons}}“ prieš pat mūsų formą, taip:

{{loginButtons}} {{>form}} {{>posts}}

Dabar turėtumėte turėti nuorodą „prisijungti“, kuri atveria išskleidžiamąjį meniu Prisijungti / prisiregistruoti. Mes norime, kad vartotojai prisijungtų naudodami vartotojo vardo / slaptažodžio derinį. Pridėkite šias eilutes forume.js iškart po if (Meteor.isClient) {:

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

Tai atlikę, sukurkite paskyrą. Dabar susiekime savo žinutes su savo vartotojais. Bloke „Post.insert“ pridėkime dabartinio vartotojo vartotojo vardą, kurį gauname paskambinę „Meteor.user“ () į įrašo ypatybes:

Posts.insert({ title: title, username: Meteor.user().username, body:body });

Norėdami modifikuoti šabloną, padarysime, kad tik prisijungę vartotojai galėtų matyti pateikimo įrašo formą. Pridėkite mūsų {{form}} šabloną paprastame if sakinyje. Šablone galime gauti dabartinį vartotojo objektą paskambinę currentUser:

{{#if currentUser}} {{>form}} {{else}}

Please log in to submit a new post.

{{/if}}

Galiausiai parodykite kiekvieno įrašo autoriaus vartotojo vardą:

{{#each posts}}
  • {{title}}

    by {{username}}

    {{body}}

  • {{/each}}

    Daugiau „Meteor“ Jei norite perkelti dalykus į kitą lygį, „Discover Meteor“ padės jums žingsnis po žingsnio kurti žiniatinklio programas nuo nulio

    Šioje pamokoje matėme, kad naudojant „Meteor“ pakanka kelių kodų eilučių, kad būtų galima paleisti paprastą programą. Ir jei norite sužinoti, kaip toliau elgtis, kviečiame susipažinti su mūsų knyga Atraskite meteorą !

    Žodžiai: Tomas Colemanas ir Sacha Greif

    Šis straipsnis iš pradžių pasirodė tinklinis žurnalas 242 leidimas.

    Patiko tai? Perskaitykite tai!

    Turite klausimą? Klauskite komentaruose!