This repository was archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathintro-to-firebase.html
More file actions
303 lines (303 loc) · 16.5 KB
/
intro-to-firebase.html
File metadata and controls
303 lines (303 loc) · 16.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!DOCTYPE html>
<html>
<head>
<title>Intro to Firebase</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200i,400,400i,700,700i" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css" >
<link rel='stylesheet' type='text/css' href="../css/theme.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css" >
<link rel='stylesheet' type='text/css' href="../css/new-styles.css" >
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:1.5vw; line-height:0.85em; letter-spacing: -0.1em;'>
,---, ___ ___
,`--.' | ,--.'|_ ,--.'|_
| : : ,---, | | :,' __ ,-. ,---. | | :,' ,---.
: | ' ,-+-. / | : : ' : ,' ,'/ /| ' ,'\ : : ' : ' ,'\
| : | ,--.'|' |.;__,' / ' | |' | / / | .;__,' / / / |
' ' ;| | ,"' || | | | | ,'. ; ,. : | | | . ; ,. :
| | || | / | |:__,'| : ' : / ' | |: : :__,'| : ' | |: :
' : ;| | | | | ' : |__ | | ' ' | .; : ' : |__' | .; :
| | '| | | |/ | | '.'|; : | | : | | | '.'| : |
' : || | |--' ; : ;| , ; \ \ / ; : ;\ \ /
; |.' | |/ | , / ---' `----' | , / `----'
'---' '---' ---`-' ---`-'
,---,.
,' .' | ,--, ,---,
,---.' |,--.'| __ ,-. ,---.'|
| | .'| |, ,' ,'/ /| | | : .--.--.
: : : `--'_ ' | |' | ,---. : : : ,--.--. / / ' ,---.
: | |-,,' ,'| | | ,'/ \ : |,-. / \ | : /`./ / \
| : ;/|' | | ' : / / / || : ' | .--. .-. | | : ;_ / / |
| | .'| | : | | ' . ' / || | / : \__\/: . . \ \ `. . ' / |
' : ' ' : |__; : | ' ; /|' : |: | ," .--.; | `----. \' ; /|
| | | | | '.'| , ; ' | / || | '/ : / / ,. | / /`--' /' | / |
| : \ ; : ;---' | : || : |; : .' \'--'. / | : |
| | ,' | , / \ \ / / \ / | , .-./ `--'---' \ \ /
`----' ---`-' `----' `-'----' `--`---' `----'</pre>
<h2 class='date'> July 11th, 2018</h2>
</header>
<article class='container'>
<section id="todo" >
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Client Vs. Server Persistence</li>
<li>Firebase</li>
<li>Practice activities</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Last class, we talked about data persistence as well as client and server-side storage.
Today's lesson will continue utilizing the concept of data persistence, applying it to server-side
storage with <span class="note">Firebase</span>. We'll be learning Firebase primarily through
examples, so this will be an activity-heavy, individual work-centric class.
</p>
<p><span class="note">Firebase</span> is
an easy-to-use server-side database that makes it easy to power
our front-end applications with expansive datasets. Unlike previous classes, we will be beginning
to dive into backend technologies—up to this point, everything has been written in the front-end.
</p>
<h2>Questions up to this point? Review?</h2>
<hr>
<p>
As a general warning, please begin the homework <span class="italic">as soon as possible!</span>
This homework is very challenging, and what makes it challenging isn't the "new" stuff.
The challenge is getting a handle on increasingly complex javascript logic,
especially the multiplayer RPS game.
</p>
</section>
<section>
<h1>Client Vs. Server Persistence</h1>
<h2>Quick Review:</h2>
<ul>
<li>What is "data persistence"?</li>
<li>What is the difference between "client side" and "server side" data storage?</li>
<li>What is one case where you might use one vs the other?</li>
<li>What is one advantage of using each?</li>
</ul>
</section>
<section>
<h1>Firebase</h1>
<p><span class="note">In short:</span> Firebase offers an extremely easy to use system for relaying
data between your application and their dedicated platforms.</p>
<p>It offers an easy to use, intuitive GUI for seeing your data in real-time.</p>
<p>It offers near instantaneous transmission of data between the Firebase database and your application.
Of specific importance is the concept of "real-time" data binding
(i.e. when your data changes in the database it will <span class='bold'>immediately</span> reflect
that change in your application.)</p>
<p>Firebase website:
<a href="https://firebase.google.com/" target="_blank" title="Firebase site">https://firebase.google.com/</a>
</p>
<hr>
<div class="student-activity">
<h2>Class activity!</h2>
<p>Follow along with me as I create a new Firebase. The steps are as follows:</p>
<ul>
<li>Click "Get Started For Free"</li>
<li>Login with your Google account</li>
<li>Click "Create New Project"</li>
<li>Name your database whatever you like, as long as the name is unique</li>
</ul>
<p>Once you have a Firebase app, click "Database" on the left navbar.</p>
<p>The displayed URL is where all of the data will get stored.</p>
<p>
<span class="note">Note: </span>It is important to note that by default Firebase requires authentication
to read/write to a new database.
</p>
<p>
To complete exercises without worrying about authentication, you need to set your database rules to "public".
Please click the "rules" tab, set both ".read" and ".write" to true, and then click Publish.
</p>
</div>
<hr>
<h3>Next, let's look at how to use Firebase to store and update data in real-time.</h3>
<hr>
<div class="activity">
<h2>Instructor activity...</h2>
<p>Let's take a look at an application that uses Firebase and a simple button click to store data and
update it.
</p>
<p>Then, we'll look at the code behind the app.</p>
<p class="bold">Things to Watch For:</p>
<ul>
<li>Inclusion of the Firebase.js file</li>
<li>Firebase config and initialization</li>
<li>Creation of a reference to the database (i.e.
<code>var database = firebase.database()</code>)</li>
<li>The use of <code>.set()</code> to save the data to the database
<li>The use of <code>.ref()</code> to specify
where the data will be saved. Since there is nothing inside the parentheses
the data is saved to the database's root directory.</li>
</ul>
<p>Note that there is no HTML changing in this app—just Firebase data.</p>
</div>
<div class="student-activity">
<h2>Class activity!</h2>
<p>
Navigate to your app's overview page and click "Add Firebase to your web app".
You should see a snippet of code giving you the Firebase source script, a <code>config</code>
object and code to initialize Firebase itself.
</p>
<p>Using this snippet, replace the Firebase config object in the click button app
with the config from <span class="italic">your own</span> Firebase database. This object
tells Firebase the URL of your database.</p>
<p>
Click the button a few times and notice the changes being made to the database.
Everyone should have a working connection by the end of this activity.
</p>
</div>
<hr>
<p>Talk amongst yourselves about the code you've seen thus far.</p>
<p>Pay deep attention to the process of setting up a new Firebase and <code>.set()</code> specifically.</p>
<hr>
<div class="student-activity">
<h2>Class activity!</h2>
<p>We're going to continue looking at the click button app we have.</p>
<p>As I click, the numbers change. This isn't necessarily groundbreaking—the really cool part is how I can close my tab and reopen it and find the same data still there,
without <code>localStorage</code>.</p>
<p>What's cooler than that? Having multiple tabs open and having the data update automatically between
all of them. Let's check that out!</p>
<hr>
<p>For the last part of this activity, in your browser, open up the original file that contains the unedited
version of the Firebase config such that we all have the same file open.</p>
<p>Feel free to mash the button as much as you want! Notice that you don't even need to refresh
the page to see this instantaneous change. Even if we were to use <code>localStorage</code>,
it wouldn't be possible for the same data to be altered and shared across multiple browsers and/or
computers if we were deploy it.</p>
</div>
<div class="review">
<h2>In-Depth Review</h2>
<p>We're going to walk through the code again.</p>
<p>The key aspects of this file include:</p>
<ul>
<li><code>database = firebase.database()</code> references the database</li>
<li><code>.set({})</code> saves data</li>
<li><code>.ref()</code> specifies where the data will be saved</li>
<li><code>.on("value", function(){})</code> creates an on-change event with a callback function
that executes when the page is loaded or when the database changes</li>
</ul>
<p>Why is this cool? What can we use this for?</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Clickbutton Comments</h3>
<p>Open up <code>instructor-do-clickbutton-nocomments.html</code>. One last time,
go through this file and comment each of the lines of code with what you think is happening
on that line.</p>
<p>If you finish early visit the Realtime Database Getting Started Guide (<a href = "https://firebase.google.com/docs/database/web/start" title="Realtime Database Getting Started Guide" target="_blank">https://firebase.google.com/docs/database/web/start</a>).</p>
</div>
<div class="review">
<h2>Click Button Comments Review</h2>
<p>We're going to walk through the code (yet) again, focusing on the comments.</p>
<p>Let's open the floor to questions!</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Countdown Counter</h3>
<p>I'm going to demo an application before you build it. You'll have two choices in difficulty.</p>
<p>
Using either <code>logic.js</code> (easier) or <code>logicOption2.js</code> (harder) in <code>11-countdownbutton</code>, create the click
down activity using a Firebase database to store the click data on the backend.
</p>
<p>
Your application should be able to run on multiple browser windows simultaneously and register click
events on each screen correctly.
</p>
</div>
<div class="review">
<h2>Countdown Activity Review</h2>
<p>Let's walk throught the code, stopping where people had issues.</p>
<p>It's important to emphasize that there are effectively two pieces in play when trasmitting and receiving
data from a Firebase server: <code>on.("value")</code> for retrieval and <code>.set</code> for setting
data.</p>
</div>
<div class="activity">
<h2>Instructor activity...</h2>
<p>I'll be demoing another Firebase-based app. This one changes multiple properties, all associated
with the same database. Changes are reflected in both the Firebase database and in the HTML of this application.</p>
<p>Let's dig into the code!</p>
</div>
<hr>
<div class=student-activity>
<h2>Student activity!</h2>
<h3>Most Recent User</h3>
<p>I'll be demonstrating your next activity shortly. The most recent user is changing in realtime to replace
the old content when new data is submitted.</p>
<p>You'll be attempting to create a webpage that achieves this functionality. The finished product should
save the newest user to a Firebase database and change the HTML.
</div>
<div class="review">
<h2>Most Recent User Review</h2>
<p>As we go over the code, again we should be focusing on the key aspects: the <code>on.("value")</code>
to track changes, the <code>.set({})</code> to add data, etc.</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>More Activities</h1>
<div class="student-activity">
<h2>Student activity!</h2>
<p>This application will take longer to complete than the other activities we've had today.
I'll demo it first.
</p>
<p>Using either <code>logic.js</code> (easier) or <code>logicOption2.js</code> (harder) in
<code>14-codersbay</code>, create the CodersBay app using a Firebase
database to store data on the backend.</p>
<p>Your application should be able to run on multiple browser windows simultaneously
and register click events on each screen correctly.</p>
</div>
<div class="review">
<h2>CodersBay Review</h2>
<p>The <code>on.("value")</code> method
to track changes and <code>.set({})</code> method to add data should start to become familiar by now.</p>
<p>If this isn't quite clicking yet, don't worry! It will likely take a couple more hours of playing with
this new technology to understand how it works. Once you understand it, you'll be able to do the homework.
</p>
</div>
<hr>
<div class="activity">
<h2>Instructor activity...</h2>
<h3>Presence</h3>
<p>I'm going to demo an application that keeps track of all the visitors viewing a page.</p>
<p>After we open up a bunch of instances to see how it works, we'll <span class="italic">lightly</span>
go over the code to see why it functions the way it does. We'll be paying special attention to
<code>.ref()</code>.</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<p>This time, it's time to use the presence of a user to modify the CodersBay activity.</p>
<p>Using <code>logic.js</code> as a starting point, incorporate view tracking using Firebase
on the backend.</p>
<p><span class="note">Hint:</span> <code>.set()</code> overwrites
everything in the specified directory, so we will need to use <code>.ref()</code>
to store bidder data and connections in different folders.</p>
</div>
<div class="review">
<h2>CodersBay Presence Review</h2>
<p>We'll be going over the code slowly and thoroughly.
</p>
</div>
<hr>
<p>This new material may seem super fuzzy and weird, and that's okay!
The purpose of this lesson was to show you the capabilities of Firebase, and some of the really
cool stuff you can do with it.</p>
</section>
<div class="page-break">
<h1>That's all for today, see you Saturday!</h1>
</div>
</article>
</body>
<!-- Script to make <pre> tags pretty -->
<script type='text/javascript' src="../js/syntaxhighlighter.js"></script>
<script type='text/javascript' src="https://code.jquery.com/jquery.js"></script>
</html>
</html>