Czech (Čeština) translation by Jakub Dokoupil (you can also view the original English article)
V dnešním tutoriálu budeme se dostanete nahoru a běží s Firebase vybudováním jednoduché konverzační aplikací díky využití si Firebase Javascript API. Tato aplikace vám poskytne stavební prvky pro rozvoj pokročilejších aplikací v reálném čase na svých vlastních projektech.
Začínáme
S cílem získat Firebase nahoru a běží, budete muset vytvořit účet vývojáře zdarma tím, že navštívíte jejich webové stránky a registrace. Jakmile jste se úspěšně zaregistrovali, přesměruje vás Firebase řídicího panelu vašeho účtu, kde budete mít přístup ke všem umístění dat Firebase a další hezké vlastnosti. Však správně nyní byste měli vybrat umístění dat Firebase nárok, můj první APP. neváhejte přejmenovat tuto aplikaci nebo vytvořit novou.
Když umístění dat Firebase vznikla, byl přidělen svůj vlastní jedinečný název hostitele. Tento jedinečný název hostitele je velmi důležité. protože to je místo, kde budou vaše data číst a zapisovat také. Budeme diskutovat o názvu hostitele do větší hloubky, dále v kurzu, ale pro tuto chvíli:
Pojďme začít stavět
Na první položku v programu: vytvořit nový soubor HTML, který odkazuje klienta Firebase, jQuery a Bootstrap CDN. Je zcela zřejmé, že musíme odkazovat Firebase CDN. Teď to nemusí být tak jasné, proč jsme odkazování jQuery a Bootstrap. Já používám jQuery a Bootstrap pro rychlý vývoj aplikací. Obě tyto knihovny umožňují mi dělat věci rychle a které nevyžadují mnoho ruční kódování. Však já nebude pokrývat jQuery nebo Bootstrap velmi podrobně; tak neváhejte a další informace o těchto JavaScript knihovny sami.
HTML
Kód, který implementuje, co jsem popsal je následující:
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>
|
Nyní, když máme náš soubor HTML vytvořený a se odkazuje správný CDN, můžeme začít cvičit zbytek naší aplikace.
Zaprvé potřebujeme zjistit, jaké základní funkce této aplikace bude potřebovat. Zdá se, že většina konverzační styl aplikace mají dva podobnosti: okno se zprávou pro odesílání zpráv na serveru a oddíl, který získá naplněn zpráv ze serveru. V našem případě tento server bude naše umístění dat Firebase.
Pojďme provést zprávou pro odesílání zpráv na serveru před ruku. To bude vyžadovat, abychom vytvořili jednoduché rozhraní, které obsahuje vstupní pole a tlačítko Odeslat zabalený v rámci značky form. Vzhledem k tomu, jsme odkazování Bootstrap stylesheet, máme využít některých předdefinovaných stylů bootstrap k vytvoření rozhraní. Jak jsem uvedl dříve, to je velmi pohodlné a umožňuje nám psát méně kódu ručně.
Takže pojďme nejprve umístit div s kontejnerem atribut třídy přímo poté, co tělo otevírací značky v souboru HTML. Je to zaváděcí funkce, která poskytuje šířku omezení a odsazení obsahu stránky. V rámci značky kontejneru umožňuje přidat název zalomený v H1 Tagy, tak, že můžeme dát aplikace popisný název. Bude můj titul, "Firebase Chat aplikace". Nebojte se, používat vlastní kreativity při psaní svůj titul.
Kód, který implementuje, co jsem popsal výše, vypadá takto:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
</div>
|
Kromě toho musíme také přidat div s atributy třídy: panel a panel-default. Panel je zaváděcí součást, která poskytuje jednoduchý rámeček, který obsahuje čtyři vnitřní div: panel nadpis, titul obrazu, panel tělo a zápatí panelu ve výchozím nastavení. Jsme nebudete používat panel nadpis a název obrazu, ale budeme používat panel tělo a zápatí panel. V panelu DIV bude použit jako hlavní kontejner pro klienta konverzační skupiny.
Kód, který implementuje, co jsem popsal výše, je následující:
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 současnosti jsme nebude pracovat s panel tělo. Však budeme muset použít tento oddíl dále v kurzu pro vyplnění zprávy od našeho umístění dat.
Právě teď se zaměřujeme na panel zápatí div. Panel zápatí bude obsahovat vstupní pole, tlačítko Odeslat a tlačítko reset. Dáváme do vstupního pole id atributu komentáře a tlačítko Odeslat atribut id odeslání btn. Oba tyto atributy id jsou velmi důležité a bude zapotřebí dále v kurzu. Nebojte se změnit atribut ID pro prvky formuláře.
Kód, který implementuje, co jsem popsal výše, je následující:
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>
|
Teď pojďme implementovat kód JavaScript, který nám k odeslání zprávy do umístění dat našich Firebase umožní.
JavaScript
Nejprve musíme přidat sadu značek script přímo nad uzavírací značku v souboru HTML těla. V rámci značky script musíme vytvořit odkaz na umístění dat našich Firebase. Bez tohoto odkazu jsme nelze zapsat data do našeho umístění dat. To lze provést inicializaci konstruktor Firebase a předáním naše umístění dat jako parametr. Nezapomeňte, že umístění dat Firebase byl vytvořen při instalaci Firebase (jedinečný-název hostitele).
Kód, který implementuje, co jsem popsal výše, je následující:
1 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
Po inicializaci objektu odkazu Firebase, je třeba svázat obslužnou rutinu události click k výběru tlačítka Odeslat. Umístění tohoto voliče je uvnitř panelu zápatí. Také musíme zajistit, že zpětné volání obslužné rutiny události obsahuje příkaz return false jako poslední řádek kódu. To není zajistit, aby výchozí akce odeslání formuláře, dojít a zabránit šíření do stromu modelu DOM události. Však v některých případech můžete chtít událost probublávání dochází.
Implementovat obě fragmenty kódu JavaScript, co je popsáno výše:
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 |
});
|
Dále definujeme proměnnou, která odkazuje na komentář selektor a další proměnnou, která odstraní prázdné znaky ze začátku a na konci komentáře hodnoty.
Kód, který implementuje, co jsem popsal výše, je následující:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var comment_value = $.trim(comment.val()); |
4 |
|
5 |
return false; |
6 |
});
|
Nyní musíme určit metody pro skutečně psaní prací komentáře do našeho umístění dat.
Zápis dat do Firebase
Je Firebase API nabízí několik metod, jak zapisovat data do umístění dat. Však v dnešním tutoriálu se chystáme zaměřit na pomocí metody push() a set(). Krátce Podívejme, co každý z těchto metody nám umožňují dělat.
- Set() metoda bude zapisovat data do umístění dat, jakož i přepisovat data, která je v současné době uloženy v umístění dat.
- Metoda push() bude zapisovat data umístění dat pomocí automatického generování nové dítě místo pod jedinečným názvem. Kromě toho bude uvádět tento jedinečný název časového razítka. To umožní všem dětem místa mají být chronologicky seřazen.
Po zkontrolování set() a push() metody; Myslím, že je to docela zřejmé, že potřebujeme využít metody push() v naší aplikaci. Jinak jsme neustále přepíše poslední komentář na naše umístění dat a to by nebyla žádná zábava.
Chcete-li to, musíme přejít zpět na JavaScript, který jsme dříve přidané na stránku. Nyní je třeba posunout hodnotu komentář na naše umístění dat. Nyní, mějte na paměti, že existují různé nabízené metody, které umožňují nabízet data v různých formátech, například objekt, pole, řetězec, číslo, logická hodnota nebo null. Používáme jen objekt, který obsahuje hodnotu klíče dvojice komentář a hodnotu komentář. Kromě toho můžeme připojit volitelné zpětného volání na oheň, po dokončení metody push. Zpětné volání vrátí chybový objekt selhání a o úspěchu, hodnotu null.
Kód, který implementuje, co jsem popsal výše, je následující:
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 |
});
|
Teď pojďme přidat něco zajistit, že uživatelé konverzační skupiny nejsou schopna prázdné zprávy zapsat do naší umístění dat. Toho lze snadno dosáhnout přidáním jednoduchého if else prohlášení, která kontroluje délku komentáře hodnoty.
Kód, který implementuje, co jsem popsal výše, je následující:
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 |
});
|
Skvělé, jsme úspěšně dokončili část naší aplikace, která umožňuje uživateli zapsat data do našeho umístění dat. Ale jsme parapet chybí funkce, která uživatelům poskytuje konverzace v reálném čase zkušenosti. Tento druh zkušenosti bude vyžadovat schopnost číst data z podřízené lokality v rámci umístění dat.
Čtení dat z Firebase
Jak jsme se již zmínili, většina konverzační styl aplikace číst data ze serveru a pak naplnit část rozhraní. Budeme muset udělat totéž v naší aplikaci, posílením Firebase API.
Je Firebase API nabízí několik metod, jak číst data z umístění dat. V dnešním kurzu budeme soustředit na používání metody on() metody.
Metody on() metoda má několik argumentů, které stojí za pohled do, ale jen musíme pokrýt první dva argumenty: typ události a zpětné volání. Podívejme se na obě tyto.
Výběr typ události
Argument "eventType" má několik možností. Podívejme se na každou tak, že jsme schopni určit, které budou našim potřebám.
- "hodnota" - spustí se jednou a přečte všechny komentáře a pokaždé, když jakákoli změna komentáře to bude být spuštěna znovu, stejně jako číst všechny komentáře.
- "child_added" - bude spuštěna, jakmile za každý komentář, a pokaždé, když nový komentář je přidán.
- "child_removed" - spustí se kdykoli odstranit komentář.
- "child_changed" - spustí se kdykoli se změní komentář.
- "child_moved" - spustí se kdykoli komentáře objednávky se změní.
Po pohledu na výše uvedených možností, zdá se, docela zřejmé, že bychom měli používat "child_added" jako naše "typ události". Tento i typ se spustí jednou pro každý komentář na naše umístění dat, stejně jako pokaždé, když nový komentář je přidán. Navíc když je přidán nový komentář nesmí vrátit celou sadu komentářů na tomto místě, ale jen poslední podřízenou přidány. To je přesně to, co chceme! Není třeba vrátit celou sadu komentářů, když je přidán nový komentář.
Analýza zpětného volání
"Zpětné volání" metody on() Metoda obsahuje položku, která Firebase odkazuje jako na "snímek dat", která má několik členských funkcí, dnes se zaměřuje na name() a val().
Členské funkce name() nám poskytuje jedinečný název "snímek dat". Pokud si pamatujete dříve, jsme použili funkci push() napsat nový komentář na našich dat místo. Když bylo voláno push(), generovány nové dítě umístění pomocí jedinečného názvu a to je název, který bude vrácena vlastností prostřednictvím volání zpět členských function,name().
Členské funkce val() nám poskytuje s JavaScript objekt reprezentací "snímek dat" a tento snímek, budeme schopni načíst komentář z našeho umístění dat. Však musíme ustoupit na chvíli.
Dříve v tomto kurzu jsme implementovali JavaScript potřebné k replikaci komentáře na naší poloze Firebase a udělali jsme to tím, že tlačí na objekt dvojice klíč hodnota. V tomto případě byl klíč "komentář" a byla hodnota vstupu, který uživatel zadal. Proto pokud chceme extrahovat komentář od našeho "snímek dat" Musíme rozpoznat správný datový typ. V tomto případě máme co do činění s objektem, takže můžete použít zápis s tečkou nebo konzola notace pro přístup k zadané vlastnosti.
Obě z fragmentů kódu JavaScript níže, realizovat, co je popsáno výše:
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 |
});
|
Vykreslování komentářů
Další pojďme vytvořit jednoduchý, ale čistý způsob, jak zobrazit každý komentář. Toho lze snadno dosáhnout obtékání každý komentář v rámci div a označení každého komentáře s jeho jedinečným názvem. Obvykle komentáře jsou označena jménem uživatele, které napsal poznámku, v našem případě, je to anonymní konverzační skupiny klienta.
Kód, který implementuje, co jsem popsal výše, je následující:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment); |
Dále musíme přidat komentář do kontejneru na komentář a Získejte aktuální svislou pozici kontejneru posuvník a přejděte do tohoto umístění nejnovější komentáře. Tím se zajistí, že pokaždé, když komentář se posune Firebase, uvidí všichni uživatelé používající aplikace chat nejnovější komentář. To vše musí být provedeno v rámci zpětné volání.
To by měl vypadat přibližně takto:
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')); |
Nyní umožňuje použít některé jednoduché styly CSS DIVs omotal kolem každého bloku komentáře. To bude trochu atraktivnější vzhled a uživatelské přátelské. Tyto styly by měly přidat značky stylu, se nachází v části hlavy HTML.
Kód, který implementuje, co jsem popsal výše, je následující:
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 |
}
|
Spuštění aplikace
Nyní je čas pro spuštění aplikace. Umožňuje začít tím, že otevírají dvě instance z našich oblíbených, moderní prohlížeče a jejich umístění vedle sebe na naší pracovní ploše. Dále budeme procházet do umístění souboru našeho souboru, který jsme vytvořili na obou prohlížečů. Vyzkoušet si to tím, že píše několik poznámek a pozorovat kouzlo Firebase.
Je to neuvěřitelné, že jen pár řádků kódu může produkovat silný aplikace. Nebojte se upravit Tento úryvek v žádném případě přinést požadované výsledky.
Podívejte se na on-line demo to vidět v akci. Níže je kompletní zdrojový kód pro aplikaci celou konverzační skupiny:
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>
|
V souhrnu
V dnešním tutoriálu pracovali jsme celou cestu prostřednictvím procesu implementace jednoduché konverzační aplikací využitím si Firebase JavaScript API. Přitom jsme mohli zažít moc Firebase a získat uznání za své pohodlí. Níže jsou uvedeny některé z klíčových položek, které jsme narazili na dnes:
- Odkazování na umístění dat Firebase inicializace Firebase konstruktor.
- Zápis dat do Firebase metodou push.
- Čtení dat z Firebase metodou na události typu "child_added".
Doufám, že vám tento kurz dal výchozím bodem, že je třeba brát věci, které s Firebase. Pokud máte nějaké dotazy či připomínky, neváhejte a nechte je níže. Ještě jednou díky za váš čas a dál nekonečné možnosti Firebase API.
Zdroje
