This repository has been 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
/
Copy pathfirebase-application-building.html
279 lines (279 loc) · 15.3 KB
/
firebase-application-building.html
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
<!DOCTYPE html>
<html>
<head>
<title>Firebase Application Building</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" >
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:2vw; line-height:0.85em; letter-spacing: -0.33em;'>
_______ ___ ______ _______ _______ _______ _______ _______
| || | | _ | | || _ || _ || || |
| ___|| | | | || | ___|| |_| || |_| || _____|| ___|
| |___ | | | |_||_ | |___ | || || |_____ | |___
| ___|| | | __ || ___|| _ | | ||_____ || ___|
| | | | | | | || |___ | |_| || _ | _____| || |___
|___| |___| |___| |_||_______||_______||__| |__||_______||_______|
_______ _______ _______ ___ ___ _______ _______ _______ ___ _______ __ _
| _ || || || | | | | || _ || || | | || | | |
| |_| || _ || _ || | | | | || |_| ||_ _|| | | _ || |_| |
| || |_| || |_| || | | | | || | | | | | | | | || |
| || ___|| ___|| |___ | | | _|| | | | | | | |_| || _ |
| _ || | | | | || | | |_ | _ | | | | | | || | | |
|__| |__||___| |___| |_______||___| |_______||__| |__| |___| |___| |_______||_| |__|
_______ __ __ ___ ___ ______ ___ __ _ _______
| _ || | | || | | | | | | | | | | || |
| |_| || | | || | | | | _ || | | |_| || ___|
| || |_| || | | | | | | || | | || | __
| _ | | || | | |___ | |_| || | | _ || || |
| |_| || || | | || || | | | | || |_| |
|_______||_______||___| |_______||______| |___| |_| |__||_______|
</pre>
<h2 class='date'> July 14th, 2018</h2>
</header>
<article class='container'>
<section id="todo" >
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Activity Overview</li>
<li>"Child added" Event</li>
<li>MomentJS</li>
<li>Practice Applications</li>
<li>Timers and APIs Checkpoint</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Welcome to day two of Firebase!</p>
<p>Let's begin with questions, things you're stuck on, eye-opening revelations, neat stuff you
might have figured out or built, etc.
</p>
<p>Stumped about <code>.set({})</code>? Really confused on <code>ref()</code>? Feel free to ask
questions. Otherwise, we'll jump right into today's session.</p>
<p>Today's class will be dedicated to building more complex applications with Firebase using
some new capabalities and library functions.</p>
</section>
<section>
<h1>Application Overview</h1>
<p>You'll be spending a good portion of this class recreating an employee timesheet apllication
which uses Firebase to track employee names, roles, start dates, lengths of employment,
monthly rates, and total amounts billed.
</p>
<div class="activity">
<h2>Instructor activity...</h2>
<p>I'll demo the timesheet application's frontend shortly.</p>
<p>We won't be looking at the Firebase storage quite yet, just focusing on the functionality
provided for us.
</p>
</div>
<div class="student-activity">
<h2>Class activity!</h2>
<h3>Where's the data?</h3>
<p>Discuss these two questions:</p>
<ul>
<li>Which fields <span class="bold">must</span> be in the database?</li>
<li>Which fields can we avoid sending to the database in favor of calculating locally?</li>
</ul>
</div>
<hr>
<div class="activity">
<h2>Instructor activity...</h2>
<p>Now, let's look at how the backend works, side-by-side with the client.</p>
<p>As I demo it, pay special attention to how some fields are inputted on the client side,
and how the remaining fields are calculated using the initial inputs.
</p>
</div>
<p>Why might this approach have advantages over uploading every calculated field into
into the database?
</p>
<hr>
<p>The main reason for limiting the data we store on the backend is that we drastically
reduce the amount of updates we have to send to the database every month—or, in some cases,
every second— employees' tenures grow.
</p>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Phase I: Main Application Design</h3>
<p>This activity will be for focusing your efforts on creating the application layout for the site.</p>
<p>This phase involves:</p>
<ul>
<li>Creating the overall HTML/CSS/Bootstrap Layout</li>
<li>Creating the initial <code>.on("click")</code> event that will dynamically trigger new HTML
rows to be generated.</li>
</ul>
<p>This phase does <span class="italic">not</span> involve sending or receiving data to/from Firebase.</p>
<p>If you finish early:</p>
<ul>
<li>Continue refining the design! Take things to the next level.
Make this application portfolio-grade!</li>
<li>Begin reading about
<code>push({})</code> and <code>.on("child_added")</code> in the Firebase documentation.</li>
</ul>
</div>
<hr>
<p>By this point, everyone should have an initial design completed. Unlike other activities,
completed code will not be provided, so be sure you have something. If your group does not,
during the next phase we'll help you get up to speed.
</p>
<hr>
<div class="activity">
<h2>Instructor activity...</h2>
<h3>Intro to Push</h3>
<p>As a quick break from development, we're going to look at some new syntax.</p>
<p>I'll be demoing an application we've worked on before, and it will still have the same
functionality.
</p>
<p>Everything is fine with it, but why don't we try changing the <code>.set({})</code>
method with <code>.push({})</code>? What will happen?</p>
<p>We'll be able to directly observe how Firebse creates new entries as "children" instead of
just overwriting existing data. After this demonstration, we will return to our main task.</p>
</div>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Phase II: Push Phase</h3>
<p>Using your newfound knowledge of the <code>.push({})</code> method, create the code
necessary to push employee data into the database upon clicking the "submit" button on your
webpage.</p>
<p><span class="note">Note</span>: Don't worry about getting the data to display in the HTML just
yet. Just focus on getting data pushed to the database.</p>
<p>If you finish early, begin reading about <code>.on("child_added")</code> in
the Firebase documentation and/or the MomentJS library.</p>
</div>
<hr>
<div class="activity">
<h2>Instructor activity...</h2>
<h3>Intro to <span class="monospace italic">child_added</span></h3>
<p>Another quick break for new functionality!</p>
<p>The previous "recent user" example has been expanded to not only showcase the most recent users,
but also to create a running list of users.</p>
<p>he Firebase Database is keeping a running list of all the users as "children"—we're
using a new Firebase method to retrieve and display the children data in our HTML.</p>
<p>Let's walk through the code and see what's new.</p>
</div>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Phase III: <span class="monospace italic">child_added</span></h3>
<p>Using your newfound knowledge of the <code>.on("child_added")</code> method, begin to retrieve your
employee data from the database and populating the records into your table.</p>
<p><span>Note:</span> Don't worry about calculating Months Worked or the Total Billed just yet.
Just focus on retrieving the data that is already in the database.
<p>If you finish easily, continue refining the aesthetics of your website,
consider incorporating "update" or "delete" employee buttons,
or begin reading up on the MomentJS library.</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>MomentJS ⏱</h1>
<p>Dates in JavaScript are weird: they're finicky, hard to get right due to their really picky
date formatting syntax. It quickly becomes a pain to format a given string as a date.
</p>
<p>Enter <span class="note">MomentJS</span>! It's a library that provides a standardized set
of tools for parsing, adding, subtracting, and comparing datetimes. We can look up some examples and play
with it in our console.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>MomentJS practice</h3>
<p>Let's take a moment to play with this new library. Keep in mind that as a developer, one of the
things you'll have to learn how to do is read documentation for something new,
then quickly be able to use it. In this case, you will use more advanced features of the MomentJS library.
</p>
<p>Check out <code>momentjs-activity.html</code> in <code>20-MomentJS</code>.</p>
<p>Complete each of the activities listed in the comments.</p>
<p><span class="note">Note:</span> You don't need to go in order.</p>
<p><span class="note">Note:</span> Don't let the simple
example fool you. Working with a new library can be tough.
Be prepared to get frustrated. Stick with it!</p>
</div>
<div class="review">
<h2>MomentJS Activity Review</h2>
<p>Which questions did you get? Which were difficult?</p>
<p>Let's walk through the code.</p>
</div>
<div class="student-activity">
<h2>Group activity!</h2>
<h3>Phase IV: DateTimes</h3>
<p>Now that you've had some practice with MomentJS, time to complete the employee tracker application.</p>
<p>You'll need to use the library to calculate the number of months
worked and subsequently, the total amount billed.</p>
</div>
<div class="review">
<h2>Employee Timesheet Review</h2>
<p>We'll be going over the code somewhat lightly—this code is extremely similar to your homework,
so you are encouraged to take another look at it yourselves.
</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Traintime Prediction Math</h3>
<p>Let's look at the easier version of your homework due next week.</p>
<p>As a reminder of its functionality, in this application, administrators input the time
for the first train of the day and the frequency with which a train arrives
at a station. With this information the application <span class="italic">automatically</span>
calculates the next arrival time.</p>
<p>The math behind this might get a little bit tricky. With your group write out the steps you would use
mathematically to determine the answer to the following situation assuming:</p>
<ol>
<li>The first train of the day comes in at 3:00 AM.</li>
<li>The train runs every 17 minutes</li>
<li>The current time is 7:12 PM.</li>
<li>There have been no delays and will be no delays.
<span class="gray italic">(must be nice, right?)</span></li>
</ol>
<p>Question: How many minutes away is the next train?</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<p>Let's use this time to talk about the code necessary. We'll take a look at the train example given
and use the comments to determine how we can calculate the difference we want.</p>
</div>
</section>
<section>
<h1>Project groups</h1>
<p>The next two weeks will be entirely dedicated to building projects.</p>
<p>Your goal? <span class="note">Build something awesome!</span></p>
<p>Requirements:</p>
<ul>
<li>Must uses at least two APIs</li>
<li>Must use AJAX to pull data</li>
<li>Must utilize at least one new library or technology that we haven’t discussed</li>
<li>Must have a polished frontend / UI</li>
<li>Must meet good quality coding standards (indentation, scoping, naming)</li>
<li>Must NOT use alerts, confirms, or prompts (look into modals!)</li>
<li>Must have some sort of repeating element (table, columns, etc)</li>
<li>Must use Bootstrap or Alternative CSS Framework</li>
<li>Must be Deployed (GitHub Pages or Firebase)</li>
<li>Must have User Input Validation</li>
</ul>
<p>Presentation date: two weeks from today</p>
<p>More info will be provided next class. Get stoked!</p>
</section>
<section>
<h1>Timers and APIs Checkpoint</h1>
<p class="bold">It's that time again!</p>
<p>The link to the a checkpoint quiz for your knowledge of timers and APIs will be Slacked out
to you. As a reminder, reminded that this quiz is not graded, and cannot hinder your ability to
complete the course. It exists so that we can gauge your progress and knowledge/skill retention.
</p>
<p>During office hours, we can review the answers to the checkpoint if you'd like.</p>
</section>
<div class="page-break">
<h1>That's all for today, see you Monday!</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>