Slovak (Slovenčina) translation by Jakub Dokoupil (you can also view the original English article)
V dnešnom tutoriále budeme sa dostanete hore a beží s Firebase stavbou jednoduché chatovacej miestnosti aplikácie s využitím Firebase je Javascript API. Táto aplikácia vám poskytne základné stavebné kamene pre rozvoj pokročilých real-time aplikácie na svoje vlastné projekty.
Začíname
S cieľom získať Firebase hore a beží, budete musieť vytvoriť účet zadarmo developer navštívite ich webové stránky a registráciu. Akonáhle ste úspešne zaregistrovaný, Firebase vás presmeruje na prístrojovú účet, kde budete mať prístup ku všetkým vaše Firebase údajov lokality a ďalšie príjemná funkcie. Však pravé teraz vyberte umiestnenie údajov Firebase nárok, môj prvý APP. neváhajte premenovať túto aplikáciu alebo vytvoriť novú.
Pri vytvorení umiestnenie údajov Firebase bol pridelený svoj vlastný unikátny hostiteľovi. Tento jedinečný názov hostiteľa je veľmi dôležitá. pretože to je miesto, kde vaše dáta budú čítať z a písomné taky. Názov hostiteľa viac do hĺbky, budeme diskutovať neskôr v tutoriále, ale teraz:
Poďme začať stavať
Prvý bod programu: vytvoriť nový súbor HTML, ktorý odkazuje na klienta Firebase, jQuery a Bootstrap CDN. Je úplne zrejmé, že musíme odkaz Firebase CDN. Teraz, to nemusí byť tak jasná, prečo sme odkazovanie jQuery a Bootstrap. Som pomocou jQuery a Bootstrap na účely rýchly vývoj aplikácií. Oba tieto knižnice umožňujú mi robiť veci veľmi rýchlo a oni nevyžadujú veľa rukou kódovanie. Avšak, budem nie zahŕňajúce jQuery alebo Bootstrap veľmi podrobne; tak neváhajte a prečítajte si nasledujúce JavaScript knižnice na vlastnú päsť.
HTML
Označenia, ktoré implementuje, čo som opísal je nasledovná:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
12 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
13 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
14 |
</body>
|
15 |
</html>
|
Teraz, keď máme náš HTML súbor vytvorený a je odkazovanie správne CDN, poďme začať pracovať von zvyšku našej aplikácie.
Po prvé, musíme určiť základné funkcie tejto aplikácie bude potrebné. Zdá sa, že väčšina chatovacej miestnosti štýl aplikácie majú dvoch podôb: okno s hlásením na odosielanie správ na serveri a časť dostane osídlena správy zo servera. V našom prípade, tento server bude naša Firebase umiestnenie údajov.
Poďme implementovať hlásením pre posielanie správ na server pred rukou. To bude vyžadovať nám vytvoriť jednoduché rozhranie, ktoré obsahuje vstupného poľa a Odoslať tlačidlo zabalené v podobe Tagy. Pretože my sme odkazovania Bootstrap stylesheet, máme pohodlie používania niektorých bootstrap štýlov vytvoriť rozhranie. Ako som uviedol predtým, to je veľmi výhodné a nám umožňuje písať menej kód ručne.
Takže poďme prvé miesto div class atribút nádoba priamo po korytom tag v súbore HTML. Je bootstrap funkcia, ktorá poskytuje šírku prekážky a polstrovanie pre obsah stránky. Vo vnútri kontajnera tagov, umožňuje pridať názov zabalené v H1 Tagy, tak, že môžeme dať žiadosť popisný názov. Moja hlava bude "Firebase Chat aplikácie". Nebojte sa použiť svoju vlastnú tvorivosť pri písaní vašej hlavy.
Označenia, ktoré implementuje, čo som popísal vyššie, vyzerá takto:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
</div>
|
Okrem toho musíme tiež pridať div s atribúty triedy: panel a panel-default. Panel je súčasť Bootstrap, ktorá poskytuje jednoduchý pole, ktoré obsahuje štyri vnútorné DIVs: panel-okruh, panel-hlava, panel-telo a panel-footer predvolene. Sme nebude používať panel-záhlavie a panel-titul, ale budeme používať panel-telo a pätu panel. Panel DIV sa používa ako hlavný kontajner pre klienta chatu.
Označenia, ktoré implementuje, čo som popísal vyššie, je nasledovná:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"></div> |
7 |
</div>
|
8 |
</div>
|
V súčasnosti sme sa nepracuje s panel-telo. Avšak, musíme použiť tento oddiel neskôr v tutorial pre naplnenie správy od našich umiestnenie údajov.
Práve teraz sa sústreďujeme na panel päty div. Päta panel bude obsahovať vstupné pole, tlačidlo Odoslať a tlačidlo reset. Dáme vstupného poľa atribútu id komentáre a tlačidlo Odoslať atribút id Odoslať-btn. Oba tieto atribúty id sú veľmi dôležité a bude potrebné neskôr v tutoriále. Nebojte sa zmeniť atribút ID pre prvky formulára.
Označenia, ktoré implementuje, čo som popísal vyššie, je nasledovná:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"> |
7 |
|
8 |
<form role="form"> |
9 |
<div class="form-group"> |
10 |
<label for="comments">Please enter your comments here</label> |
11 |
<input class="form-control" id="comments" name="comments"> |
12 |
</div>
|
13 |
|
14 |
<button type="submit" id="submit-btn" name="submit-btn" |
15 |
class="btn btn-primary">Send Comments</button> |
16 |
|
17 |
<button type="reset" class="btn btn-default">Clear Comments</button> |
18 |
</form>
|
19 |
|
20 |
</div>
|
21 |
</div>
|
22 |
</div>
|
Teraz poďme vykonávať JavaScript, ktorý nám napíšte do nášho Firebase umiestnenie údajov umožní.
JavaScript
Najprv musíme pridať sadu značky skriptu priamo nad uzavretie body tag v súbore HTML. V rámci script značky, musíme vytvoriť odkaz na naše Firebase umiestnenie údajov. Bez tohto odkazu sme nemožno zapisovať údaje na naše umiestnenie údajov. To môže byť splňované Firebase konštruktor inicializuje a absolvovanie naše umiestnenie údajov ako parameter. Pamätajte si, že umiestnenie údajov Firebase bol vytvorený pri nastavovaní Firebase (unikátny-názov hostiteľa).
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
Po inicializácii Firebase referenčný objekt, musíme viazať obslužného programu udalosti kliknite na Odoslať tlačidlo voliča. Umiestnenie tohto voliča je v rámci pätu panel. Potrebujeme tiež, aby sa zabezpečilo, že udalosť handler spätného obsahuje návratky nepravdivé vyhlásenie ako posledný riadok kódu. Sa zabezpečilo, že predvolené akcie formulára, nie vyskytnúť a zabrániť udalosti zo probublávání hore strom DOM. Avšak, v niektorých prípadoch môžete chcieť, udalosť bublajúce sa vyskytujú.
Obe nižšie úryvky JavaScript realizovať, čo je popísané vyššie:
1 |
$("#submit-btn").bind("click", function() { |
2 |
|
3 |
return false; |
4 |
});
|
1 |
$("#submit-btn").bind("click", function(event) { |
2 |
|
3 |
event.preventDefault(); |
4 |
event.stopPropagation(); |
5 |
});
|
Ďalej budeme definovať premennú, odkazujúcu komentár voliča a inej premennej, ktorá odstráni medzery zo začiatku a konca komentára hodnoty.
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var comment_value = $.trim(comment.val()); |
4 |
|
5 |
return false; |
6 |
});
|
Teraz potrebujeme určiť metódu potrebné pre skutočne písať diplomové pripomienky na naše umiestnenie údajov.
Zápis dát na Firebase
API Firebase's ponúka niekoľko metód zapisovať údaje do umiestnenia údajov. Avšak v dnešnom tutoriále budeme sústrediť na používaní metódy set a push(). Poďme stručne preskúmať to, čo každý z týchto metód nám umožnia robiť.
- Metódu set bude zapisovať údaje na umiestnenie údajov, ako aj prepísanie všetkých údajov, ktorý je aktuálne uložený v umiestnení údajov.
- Push() metódou písať údajov umiestnenie údajov automaticky generuje nové umiestnenie detí s jedinečným názvom. Okrem toho, tento jedinečný názov bude predponou časovú pečiatku. To vám umožní všetky deti miestach sa chronologicky zoradené.
Po prečítaní metódy set a push(); Myslím, že je to docela zrejmé, že musíme využiť metódu push() v našej aplikácii. Inak budeme priebežne prepísať posledný komentár na naše umiestnenie údajov a že by sa žiadna sranda.
To sa poďme skočiť späť na JavaScript, ktoré sme pridali na našu stránku. Teraz musíme tlačiť komentár hodnotu pre naše umiestnenie údajov. Teraz, majte na pamäti, že existujú rôzne push metódy, ktoré umožňujú tlačiť údaje v rôznych formátoch, napríklad objekt, array, reťazec, číslo, Boolovská hodnota alebo null. Budeme stačí použiť objekt, ktorý má hodnotu kľúča dvojica komentár a komentár hodnotu. Okrem toho prikladáme sa nepovinné spätné volanie na oheň potom push metódy dokončili. Spätné volanie zlyhania a úspechu, hodnotu null vráti chybový objekt.
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
fireBaseRef.push({comment: commentValue}, function(error) { |
6 |
if (error !== null) { |
7 |
alert('Unable to push comments to Firebase!'); |
8 |
}
|
9 |
});
|
10 |
|
11 |
return false; |
12 |
});
|
Teraz poďme pridať niečo, aby zabezpečili, že užívatelia chatu nie sú schopný napísať prázdnej správy na naše umiestnenie údajov. To možno ľahko vykonať pridaním jednoduchý Ak iný vyhlásenie, ktorá skontroluje dĺžka komentár hodnoty.
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
if (commentValue.length === 0) { |
6 |
alert('Comments are required to continue!'); |
7 |
} else { |
8 |
_fireBaseRef.push({comment: commentValue}, function(error) { |
9 |
if (error !== null) { |
10 |
alert('Unable to push comments to Firebase!'); |
11 |
}
|
12 |
});
|
13 |
|
14 |
comment.val(""); |
15 |
}
|
16 |
|
17 |
return false; |
18 |
});
|
Skvelé, sme úspešne ukončili časti našej aplikácie, ktorá umožňuje užívateľom zapisovať dáta na naše umiestnenie údajov. Ale sme parapet chýbajú funkcie, ktoré poskytuje užívateľom real-time chat skúsenosti. Tento druh skúseností bude vyžadovať schopnosť čítať dáta z dieťaťa miestach v rámci umiestnenie údajov.
Čítanie dát zo Firebase
Ako sme už bolo spomenuté, väčšina chatovacej miestnosti štýl aplikácie čítať údaje zo servera a potom zaľudniť časti rozhrania. Musíme urobiť to isté v našej aplikácie s využitím Firebase API.
API Firebase's ponúka niekoľko metód na čítanie údajov odkiaľ údaje. V dnešnom tutoriále sa budeme sústrediť na metódou on().
On() metóda má niekoľko argumentov, ktoré stoja hľadá do, ale len budeme na pokrytie prvé dva argumenty: eventType a spätné volanie. Pozrime sa obe tieto.
Vyberte typ udalosti
Argument "eventType" má niekoľko možností. Poďme sa pozrieť na každý, aby sme boli schopní určiť, ktoré spĺňajú naše potreby.
- "hodnota" - spustí raz a číta všetky komentáre a zakaždým zmeny komentárov to bude spustil znova, rovnako ako čítať všetky komentáre.
- "child_added" - spustí, akonáhle pre každý komentár, rovnako ako zakaždým, keď nový komentár je pridaný.
- "child_removed" - spustí kedykoľvek odstrániť komentár.
- "child_changed" - spustí kedykoľvek zmeniť komentár.
- "child_moved" - spustí kedykoľvek zmeniť poradie komentár.
Po pohľade cez vyššie uvedených možností, zdá docela jasné, že sme mali použitím "child_added" ako naše "typ udalosti". Tento dokonca typ sa spúšťa raz za každý komentár na naše umiestnenie údajov, ako aj zakaždým, keď nový komentár je pridaný. Navyše keď je pridaný nový komentár vráti nie celú sadu poznámok na tomto mieste, ale len posledné dieťa pridané. To je presne to, čo chceme! Nie je potrebné vrátiť celú sadu poznámok, keď je pridaný nový komentár.
Analyzovať spätné volanie
"Spätné volanie" on() metóda poskytuje položka, ktorá Firebase odkazuje ako "snímka údajov" ktoré má niekoľko členských funkcií, dnes sa zameriava na name() a val().
Name() Členské funkcie nám poskytuje jedinečný názov "snímka údajov". Ak si pamätáte skôr, sme použili funkciu push() napísať komentár na naše umiestnenie údajov. Push() bola volaná, generuje nové dieťaťa polohu pomocou jedinečný názov, a to je názov, ktorý bude vrátený cez call back členských function,name().
Val() Členské funkcie poskytuje nám s JavaScript object zastúpenie z "snímka údajov" a táto snímka, budeme môcť získať komentár z nášho umiestnenia údajov. Avšak, musíme ustúpiť na chvíľu.
V tomto tutoriále sme implementovali JavaScript musel tlačiť komentáre na naše Firebase umiestnenie a urobili sme to tým, že tlačí objektu s pár hodnotu kľúča. V tomto prípade kľúč bol "komentár" a hodnota bola vstupného, ktoré zadal používateľ. Preto, ak chceme získať komentár od našich "snímka údajov" musíme rozpoznať správny typ údajov. V tomto prípade máme čo do činenia s objektom, takže môžete použiť zápis bodu alebo držiak zápis prístup k zadanej vlastnosti.
Obe nižšie, úryvky JavaScript realizovať, čo je popísané vyššie:
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val().comment; |
4 |
});
|
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val()["comment"]; |
4 |
});
|
Vykresľovanie komentáre
Ďalšie poďme vytvoriť jednoduchý, ale čistý spôsob zobrazovania jednotlivých komentárov. To možno ľahko dosiahnuť balenie každý komentár do div a označovanie každý komentár s jeho jedinečný názov. Zvyčajne komentáre sú označené meno používateľa, ktorý napísal komentár, v našom prípade, je to anonymné chatu klienta.
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment); |
Ďalej musíme pripojiť každý komentár komentár kontajner a získať aktuálnu zvislú pozíciu komentár posúvač kontajner a prejdite k nim Posledná. Tým sa zabezpečí, že zakaždým, keď komentár je tlačené Firebase, pou itím aplikácie chat sa zobrazia všetkým používateľom Posledná komentár sa. To všetko musí byť vykonané v rámci spätného volania.
Mala by vyzerať asi takhle:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment) |
5 |
.appendTo(commentsContainer); |
6 |
|
7 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
Teraz umožňuje uplatňovať niektoré jednoduché CSS štýly na DIVs omotanie okolo každý blok komentára. To umožní, aby vzhľad mierne atraktívnejšie a užívateľsky príjemný. Tieto štýly treba dodať v štýle značky, nachádza v časti HTML head.
Kód, ktorý implementuje, čo som popísal vyššie, je nasledovná:
1 |
.container { |
2 |
max-width: 700px; |
3 |
}
|
4 |
|
5 |
#comments-container { |
6 |
border: 1px solid #d0d0d0; |
7 |
height: 400px; |
8 |
overflow-y: scroll; |
9 |
}
|
10 |
|
11 |
.comment-container { |
12 |
padding: 10px; |
13 |
margin:6px; |
14 |
background: #f5f5f5; |
15 |
font-size: 13px; |
16 |
-moz-border-radius: 5px; |
17 |
-webkit-border-radius: 5px; |
18 |
border-radius: 5px; |
19 |
}
|
20 |
|
21 |
.comment-container .label { |
22 |
margin-right: 20px; |
23 |
}
|
24 |
|
25 |
.comment-container:last-of-type { |
26 |
border-bottom: none; |
27 |
}
|
Spustenie aplikácie
Teraz je čas na spustenie našej aplikácie. Umožňuje začať otvoriť dva výskyty náš obľúbený, moderný prehliadač a ich umiestnenie vedľa seba na naše počítače. Ďalej budeme prechádzať umiestnenie súboru nášho súboru, ktorý sme vytvorili v oboch prehliadačoch. Vyskúšať si to písomne niekoľko pripomienok a radi pozeráte magic Firebase.
Je to neuveriteľné, že len pár riadkov kódu môžete vyrábať výkonnú aplikáciu. Neváhajte a upraviť tento úryvok v žiadnom prípade vytvárať vaše želané výsledky.
Pozrite sa na on-line demo to vidieť v akcii. Nižšie je kompletný zdrojový kód pre celú chatu aplikácie:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
|
9 |
<style>
|
10 |
.container { |
11 |
max-width: 700px; |
12 |
}
|
13 |
|
14 |
#comments-container { |
15 |
border: 1px solid #d0d0d0; |
16 |
height: 400px; |
17 |
overflow-y: scroll; |
18 |
}
|
19 |
|
20 |
.comment-container { |
21 |
padding: 10px; |
22 |
margin:6px; |
23 |
background: #f5f5f5; |
24 |
font-size: 13px; |
25 |
-moz-border-radius: 5px; |
26 |
-webkit-border-radius: 5px; |
27 |
border-radius: 5px; |
28 |
}
|
29 |
|
30 |
.comment-container .label { |
31 |
margin-right: 20px; |
32 |
}
|
33 |
|
34 |
.comment-container:last-of-type { |
35 |
border-bottom: none; |
36 |
}
|
37 |
</style>
|
38 |
</head>
|
39 |
<body>
|
40 |
|
41 |
<div class="container"> |
42 |
|
43 |
<h1>Firebase Chat Application</h1> |
44 |
|
45 |
<div class="panel panel-default"> |
46 |
|
47 |
<div class="panel-body"> |
48 |
<div id="comments-container"></div> |
49 |
</div>
|
50 |
|
51 |
<div class="panel-footer"> |
52 |
|
53 |
<form role="form"> |
54 |
<div class="form-group"> |
55 |
<label for="comments">Please enter your comments here</label> |
56 |
<input class="form-control" id="comments" name="comments"> |
57 |
</div>
|
58 |
|
59 |
<button type="submit" id="submit-btn" name="submit-btn" |
60 |
class="btn btn-success">Send Comments</button> |
61 |
|
62 |
<button type="reset" class="btn btn-danger">Clear Comments</button> |
63 |
</form>
|
64 |
|
65 |
</div>
|
66 |
</div>
|
67 |
</div>
|
68 |
|
69 |
<script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
70 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
71 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
72 |
<script>
|
73 |
|
74 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
75 |
|
76 |
$("#submit-btn").bind("click", function() { |
77 |
var comment = $("#comments"); |
78 |
var commentValue = $.trim(comment.val()); |
79 |
|
80 |
if (commentValue.length === 0) { |
81 |
alert('Comments are required to continue!'); |
82 |
} else { |
83 |
fireBaseRef.push({comment: commentValue}, function(error) { |
84 |
if (error !== null) { |
85 |
alert('Unable to push comments to Firebase!'); |
86 |
}
|
87 |
});
|
88 |
|
89 |
comment.val(""); |
90 |
}
|
91 |
|
92 |
return false; |
93 |
});
|
94 |
|
95 |
fireBaseRef.on('child_added', function(snapshot) { |
96 |
var uniqName = snapshot.name(); |
97 |
var comment = snapshot.val().comment; |
98 |
var commentsContainer = $('#comments-container'); |
99 |
|
100 |
$('<div/>', {class: 'comment-container'}) |
101 |
.html('<span class="label label-default">Comment ' |
102 |
+ uniqName + '</span>' + comment).appendTo(commentsContainer); |
103 |
|
104 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
105 |
});
|
106 |
|
107 |
</script>
|
108 |
</body>
|
109 |
</html>
|
Zhrnutie
V dnešnom tutoriále, pracovali sme celú cestu cez proces zavádzania jednoduché chatovacej miestnosti aplikácie s využitím Firebase je JavaScript API. Pritom sme boli schopní zažiť silu Firebase a získať ocenenie pre svoje pohodlie. Nižšie sú uvedené niektoré z kľúčových položiek, ktoré narážame na dnes:
- Odkazovanie umiestnenie údajov Firebase inicializáciou Firebase konštruktor.
- Zápis dát na Firebase metódou push.
- Čítanie údajov z Firebase metódou na akcie typu "child_added".
Dúfam, že tento návod vám dal východiskový bod, budete musieť vziať ďalšie veci s Firebase. Ak máte nejaké otázky alebo pripomienky, neváhajte a nechať nižšie. Vďaka opäť za váš čas a udržať objavovanie nekonečné možnosti Firebase API.
Zdroje
