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

Brza Izrada Web Aplikacija Sa Meteorom

by
Difficulty:BeginnerLength:ShortLanguages:

Croatian (Hrvatski) translation by Davor Budimir (you can also view the original English article)

Final product image
What You'll Be Creating

Meteor Vam pruža brz razvoj radnog okruženja koji će stvoriti izomorfne web aplikacije koje "naprosto rade". Meteor arhitektura je zaista predivna u smislu da će ažurirati sve klijente spojene na Vašu aplikaciju istovremeno, bez potrebnog osvježavanja stranice. To ima ogromne učinke za stvaranje reaktivnih web aplikacija.

Instalacija Meteora

Meteor je napravljen s ciljem lakoće korištenja, i zahvaljujući tome ova filozofija je očuvana od njegovog samog početka.

Instalacija je toliko jednostavna da je potrebno unijeti samo sljedeću naredbu na Linux / Mac OS X sustavima:

Korisnici Windowsa mogu preuzeti službeni instalacijski program.

Izrada aplikacije

Koristi se uz pomoć komandne linije putem meteor alata. Da biste napravili novu aplikaciju naziva my_meteor_app u Vašem polaznom direktoriju, uradite sljedeće:

Sada ćete biti u mogućnosti pristupiti Meteor aplikaciji putem https://localhost:3000—port 3000 je zadani port.

Struktura datoteka

Prema zadanom načinu ćete imati stvorene sljedeće datoteke:

Datoteka my_meteor_app.html sadrži markup potreban da prikaže stranicu—Meteor koristi handlebarove vitičaste zagrade kao sintaksu. Kompletan kôd u Vašoj HTML datoteci je kompajliran sa Meteorovim Spacebar kompilatorom. Spacebars koriste izjave okružene sa duplim vitičastim zagradama poput {{#each}} i {{#if}} da bi dodali logiku i podatke Vaših pogleda.

Možete proslijediti podatake u predloške iz Vašeg JavaScript kôda definiranjem pomagača, te da bi ponovili polja možete koristiti {{#each items}}.

Dokument my_meteor_app.js sadrži oba JavaScripta potrebna da radi na klijentu, te serveru. Svi događaji za klijenta ili direktive mogu biti navedene u ovoj datoteci.

Datoteka css je za uljepšavanje naše aplikacije, i po zadanom načinu je prazna.

Kako HTML datoteke rade

Meteor raščlanjuje sve HTML datoteke u Vašoj mapi aplikacije te ih prepoznaje kao oznake najvišeg nivoa: <head>, <body>, i <template>.

Sve unutar <head> oznaka se dodaje zaglavlju HTML-a poslanog klijentu, a sve unutar <body> oznake dodaje se u tijelo sekcije, baš kao u običnoj HTML datoteci.

Sve unutar <template> oznaka se pretvara u Meteor predloške, koji mogu biti pridruženi unutar HTML dokumenta koristeći {{> templateName}} ili navedeni u Vašem Javascriptu sa Template.templateName.

Praktični primjer

Zamijenite standardni HTML sa sljedećim kôdom:

Ovdje smo odredili template te {{#each}} petlju za pravljenje bullet-point listi. Završite primjer dodavanjem sljedećeg kôda u my_meteor_app.js:

Pogledajte u Vašem pregledniku završni rezultat. Sada možemo dodatno unaprijediti stvari tako što ćemo implementirati trajne podatke sa MongoDB zbirkom.

Postojani podaci sa MongoDB

Meteor čini rad s podacima laganim. Sa zbirkama, podaci su dostupni u bilo kojem dijelu koda kojem mogu pristupiti klijent i poslužitelj. Na ovaj način je vrlo lako dodati novu logiku pogleda i imati stranicu koja se ažurira automatski.

U Meteoru, bilo koje komponente pogleda koje su povezane s prikupljanjem podataka automatski će prikazati najnovije izmjene podataka, tako da je reaktivan u realnom vremenu.

Promijenite Vaš my_meteor_app.js dokument da koristi MongoDB sa sljedećim:

Linija Tasks = new Mongo.Collection("tasks"); govori Meteoru da namjesti MongoDB kolekciju imena tasks. Reperkusija za ovo u Meteoru je da na klijentu stvara privremenu vezu s predmemorijskom vezom poslužitelja.

Za unos podataka možemo koristiti poslužiteljevu konzolu. Da biste ga pokrenuti iz novog terminalnog prozora, cd u direktorij i pokrenite aplikaciju (to mora biti učinjeno dok se Meteor izvodi u zasebnoj kartici):

Sada, unutar Vaše konzole za Mongo DB Vaše aplikacije, dodajte sljedeći zapis:

Pogledajte u pregledniku da bi ste vidjeli promjene. Otvorite alate za razvojne programere te u konzoli upišite sljedeće:

Vaša lista će se sada dinamično ažurirati na zaslonu. Otvorite zaseban prozor preglednika u novom slučaju na radnoj površini. Upišite još jednu insert naredbu u konzolu.

Vidjet ćete oba slučaja kako se ažuriraju u stvarnom vremenu, bez potrebe da osvježite stranicu. Zamislite sad implikacije ažuriranja baze podataka i Meteor ažuriranje svih klijenata.

To je razlog zašto je Meteor lak za pravljenje istinski reaktivnih aplikacija. Korisnici će moći vidjeti ažuriranje podataka u stvarnom vremenu u pregledniku.

Meteor Paketi

Meteor projekt ima javni paket server od isobuild paketa. To vam omogućuje da brzo dodajete funkcionalnosti Meteor aplikaciji jednostavnim instaliranjem paketa putem meteor add <package name> sintakse.

Dodavanje npm Paketa

U Meteor možete dodati i npm pakete koristeći meteor add <package name> sintaksu. Učinimo naš zaslon malo ljepšim iz našeg prethodnog primjera tako što ćemo dodati moments paket za jednostavnije oblikovanje datuma.

Sada kada imate moment dostupan u Vašoj aplikaciji, možete ga koristiti. Ne trebate više ništa uraditi.

Uredite HTML predložak ovako:

Sada ćemo ažurirati naše helper funkcije u my_meteor_app.js datoteci:

Otvorite Vaš prozor preglednika, i dokle god je meteor naredba aktivna u terminalu vidjet ćete listu ažuriranja s trenucima koji pružaju mjerenje vremena. Odlično!

OAuth

Dodavanje OAuth ovjere Vašoj aplikaciji je stvarno jednostavno. To se može postići dodavanjem samo dva paketa koristeći sljedeću naredbu:

Jednom kada ovi paketi budu dodani Vašoj aplikaciji, možete jednostavno dodati {{> loginButtons}} već unaprijed napravljenom predlošku u Vašoj my_meteor_app.html datoteci. Nakon osvježavanja Vašeg predlednika vidjet ćete gumb za podešavanje značajke Google prijava. Pratite napisane korake i bit ćete spremni — Da! Tako je jednostavno.

Zaključak

Meteor je fantastičan framework koji dobija sve više i više na popularnosti, a vjerujem da je i lako vidjeti zašto je tako, zbog jednostavnog dizajna i implementacije paketa. Brza izrada prototipova aplikacija u tjedan dana više nije nemoguće kada imate Meteor u vašem alatnom okviru.

Ako želite naučiti više o Meteoru, nastavite čitati online njihovu izvrsnu dokumentaciju.

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.