Skip to content

Commit 67ac819

Browse files
deltaepsilondeltaepsilon
committed
Replacing Dashboard with Console throughout.
1 parent 0ca9c8f commit 67ac819

File tree

9 files changed

+542
-102
lines changed

9 files changed

+542
-102
lines changed

‎cloud-firestore/indexes.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ async function getUploadsByUser(userId) {
1818

1919
This query would require indexes on `userId` and `created`.
2020

21-
### Dashboard index management
21+
### Console index management
2222

23-
Queries are super easy to handle via the Dashboard.
23+
Queries are super easy to handle via the Console.
2424

2525
The easiest way to do it is to write whatever queries you like and watch your DevTools console for error messages.
2626

27-
You'll see an error message in DevTools whenever you attempt to run a query that requires an index. That error message will come with a link that you can click on to take you to your Dashboard.
27+
You'll see an error message in DevTools whenever you attempt to run a query that requires an index. That error message will come with a link that you can click on to take you to your Console.
2828

29-
Once on the Dashboard, you'll get a prompt to create the required index. Simply confirm and wait for the index to build.
29+
Once on the Console, you'll get a prompt to create the required index. Simply confirm and wait for the index to build.
3030

3131
### Firebase Tools index management
3232

‎cloud-messaging/introduction.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Firebase Cloud Messaging: Introduction
2+
3+
Cloud Messaging is used for those notifications that pop up in the corner of your Chrome or Firefox browser.
4+
5+
They're also used to pop native Android and iOS notifications.
6+
7+
Firebase Cloud Messaging (FCM) used to be known as Google Cloud Messaging (GCM), and if you're familiar with GCM... well, not much has changed.
8+
9+
FCM is advertised primarily for use with Android and iOS. The Firebase Console doesn't even have an FCM page on it. There's a Notifications page for Android and iOS that encapsulates FCM functionality, but it's useless for web.
10+
11+
We'll be interacting directly with the FCM API using a Cloud Function. No Console page is required.
12+
13+
### How do I send messages?
14+
15+
FCM is actually one of the simpler Firebase modules.
16+
17+
You send messages using Cloud Functions or your own server, and you receive them with a service worker in your browser.
18+
19+
You can message individual browsers, and you can subscribe a browser to a "topic" so that it can receive bulk messages.
20+
21+
We'll get into the details later... just know that there's not much to it. You can send messages to your clients either individually or by topic. And the device handles displaying the message. Your work is done.
22+
23+
### Why send messages?
24+
25+
Excessive browser and mobile notifications are obnoxious. Our phones and browsers light up constantly with Twitter notifications trying to drag us back into their app. We disable those notifications pretty aggressively.
26+
27+
But there's a reason for the flood of alerts. They work. They pull people back into Twitter, Tumblr, and Facebook. And they're super helpful when you miss a bunch of Slack messages or emails from the office.
28+
29+
You're likely already sending notifications if you develop for Android or iOS. We won't be covering that here, but we'll show you how to send notifications to a web browser. Again, it's not complicated.

‎dashboard/introduction.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Firebase Console: Introduction
2+
3+
We'll kick this party off with a quick run down of the Firebase Console.
4+
5+
It's how you'll interact with most of the Firebase features.
6+
7+
You'll need your Console to configure your Firebase services and watch data flow through your project.
8+
9+
Most of the Console's functions are also accessible via the Firebase Tools command-line interface, or CLI; however, we always have our Firebase Console open in a browser tab whenever we're developing on Firebase. So make good friends with your Firebase Console and it will help carry your app to serverless glory.

‎dashboard/walk-through.md

Lines changed: 404 additions & 0 deletions
Large diffs are not rendered by default.

‎firebase-hosting/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ There are plenty of easy ways to serve up static files; but since every app need
66

77
### Advantages of Firebase Hosting
88

9-
Firebase Hosting is fully integrated with the rest of the Firebase platform. You can deploy easily from the command line. You can see those deploys on the Firebase Dashboard and roll back to earlier versions if you break something.
9+
Firebase Hosting is fully integrated with the rest of the Firebase platform. You can deploy easily from the command line. You can see those deploys on the Firebase Console and roll back to earlier versions if you break something.
1010

1111
Hosting supports URL redirects, URL rewrites, control over headers and default HTTP2 support.
1212

‎firebase-storage/introduction.md

Lines changed: 91 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,91 @@
1-
# Firebase Storage: Introduction
2-
3-
Every image that you upload online has to get stored somewhere, and cloud storage providers such as Amazon and Google Cloud will store those files as "objects" in "buckets".
4-
5-
The Firebase Realtime Database and Cloud Firestore are great for storing data, but they're not so good with files. Google Cloud Storage, heretofore referred to as Cloud Storage, is built to store and serve these files.
6-
7-
Firebase Storage is a front for Cloud Storage... an extremely useful front.
8-
9-
### The old file-upload pattern
10-
11-
Browsers are great at uploading files, but files are often too big to send over a single HTTP POST, so they're typically streamed to a server. This streaming happens as a series of chunks which the server has to listen for, waiting patiently until the total size of the chunks adds up to the expected file size. The server can then take the file that it has assembled from a bunch of chunks and stream it up to Cloud Storage... again, in a series of chunks.
12-
13-
We've written plenty of file streaming servers, and they're a pain in the neck.
14-
15-
### Firebase Storage saves the day
16-
17-
The old file-upload pattern requires a sophisticated server. And Firebase is all about getting rid of your servers.
18-
19-
Firebase Storage enables you to upload files directly from a browser to Cloud Storage. Firebase Storage handles all of the servers and all of the streaming, leaving you with a simple JavaScript interface.
20-
21-
It seems like a small feature.
22-
23-
Firebase Storage is tiny.
24-
25-
All it does is upload files.
26-
27-
But it's hiding a ton of complexity that you'd have to code yourself, so it's a massive win.
28-
29-
### It's just a bucket
30-
31-
Cloud Storage treats each bucket as just that, a bucket.
32-
33-
Cloud Storage does not have a concept of folders.
34-
35-
But you **can** put forward slashes in your filenames, which Firebase Storage will treat as a file path.
36-
37-
For example, we've created a Firebase project named `Quiver Four`; therefore, Firebase Storage automatically creates a Cloud Storage bucket named `quiver-four.appspot.com`.
38-
39-
Let's upload a file to `howtofirebase/uploads/enable-firestore.png`:
40-
41-
```javascript
42-
function uploadFile(file) {
43-
return firebase
44-
.storage()
45-
.ref()
46-
.child('howtofirebase/uploads/enable-firestore.png')
47-
.put(file)
48-
.then(snapshot => {
49-
// snapshot represents the uploaded file
50-
});
51-
}
52-
```
53-
54-
#### And the Firebase Dashboard pretends that the file is in a nested folder!
55-
56-
57-
![storage-browser.png](https://goo.gl/zpYKzh)
58-
59-
60-
#### Cloud Storage pretends that it's in a folder as well:
61-
62-
![cloud-storage-browser.png](https://goo.gl/j7kVrS)
63-
64-
#### But then we pulled the file details down using the Cloud Storage SDK and pushed them up to Firestore. Notice that file's name attribute is `howtofirebase/uploads/enable-firestore.png`.
65-
66-
![file-details.png](https://goo.gl/YQPnMR)
67-
68-
### Cloud Storage SDK
69-
70-
Firebase Storage does not have it's own Node.js SDK. It's a browser-only system.
71-
72-
But do not despair! Since these files are merely Cloud Storage objects in a Cloud Storage bucket, we can use the Cloud Storage SDK to interact with them in Node.js.
73-
74-
And we can get Cloud Storage SDK bucket references straight from the Firebase Admin SDK in Node.js!
75-
76-
```javascript
77-
const admin = require("firebase-admin");
78-
79-
const serviceAccount = require("path/to/serviceAccountKey.json");
80-
81-
admin.initializeApp({
82-
credential: admin.credential.cert(serviceAccount),
83-
storageBucket: "quiver-foure.appspot.com"
84-
});
85-
86-
const bucket = admin.storage().bucket();
87-
// 'bucket' is a Cloud Storage bucket instance
88-
```
89-
90-
**bucket** is an object defined by the [@google-cloud/storage library](https://cloud.google.com/nodejs/docs/reference/storage/1.5.x/Bucket) for Node.js. The GCP libraries feel different from the Firebase libraries, mostly because the docs look different. But don't be afraid of GCP. It gives you much finer-grained control over its features than Firebase does.
91-
92-
93-
1+
# Firebase Storage: Introduction
2+
3+
Every image that you upload online has to get stored somewhere, and cloud storage providers such as Amazon and Google Cloud will store those files as "objects" in "buckets".
4+
5+
The Firebase Realtime Database and Cloud Firestore are great for storing data, but they're not so good with files. Google Cloud Storage, heretofore referred to as Cloud Storage, is built to store and serve these files.
6+
7+
Firebase Storage is a front for Cloud Storage... an extremely useful front.
8+
9+
### The old file-upload pattern
10+
11+
Browsers are great at uploading files, but files are often too big to send over a single HTTP POST, so they're typically streamed to a server. This streaming happens as a series of chunks which the server has to listen for, waiting patiently until the total size of the chunks adds up to the expected file size. The server can then take the file that it has assembled from a bunch of chunks and stream it up to Cloud Storage... again, in a series of chunks.
12+
13+
We've written plenty of file streaming servers, and they're a pain in the neck.
14+
15+
### Firebase Storage saves the day
16+
17+
The old file-upload pattern requires a sophisticated server. And Firebase is all about getting rid of your servers.
18+
19+
Firebase Storage enables you to upload files directly from a browser to Cloud Storage. Firebase Storage handles all of the servers and all of the streaming, leaving you with a simple JavaScript interface.
20+
21+
It seems like a small feature.
22+
23+
Firebase Storage is tiny.
24+
25+
All it does is upload files.
26+
27+
But it's hiding a ton of complexity that you'd have to code yourself, so it's a massive win.
28+
29+
### It's just a bucket
30+
31+
Cloud Storage treats each bucket as just that, a bucket.
32+
33+
Cloud Storage does not have a concept of folders.
34+
35+
But you **can** put forward slashes in your filenames, which Firebase Storage will treat as a file path.
36+
37+
For example, we've created a Firebase project named `Quiver Four`; therefore, Firebase Storage automatically creates a Cloud Storage bucket named `quiver-four.appspot.com`.
38+
39+
Let's upload a file to `howtofirebase/uploads/enable-firestore.png`:
40+
41+
```javascript
42+
function uploadFile(file) {
43+
return firebase
44+
.storage()
45+
.ref()
46+
.child('howtofirebase/uploads/enable-firestore.png')
47+
.put(file)
48+
.then(snapshot => {
49+
// snapshot represents the uploaded file
50+
});
51+
}
52+
```
53+
54+
And the Firebase Console pretends that the file is in a nested folder!
55+
56+
![storage-browser.png](https://goo.gl/r5bWP9)
57+
58+
Cloud Storage pretends that it's in a folder as well:
59+
60+
![cloud-storage-browser.png](https://goo.gl/mVB1p8)
61+
62+
But then we pulled the file details down using the Cloud Storage SDK and pushed them up to Firestore. Notice that file's name attribute is `howtofirebase/uploads/enable-firestore.png`.
63+
64+
![file-details.png](https://goo.gl/fhm5w5)
65+
66+
### Cloud Storage SDK
67+
68+
Firebase Storage does not have it's own Node.js SDK. It's a browser-only system.
69+
70+
But do not despair! Since these files are merely Cloud Storage objects in a Cloud Storage bucket, we can use the Cloud Storage SDK to interact with them in Node.js.
71+
72+
And we can get Cloud Storage SDK bucket references straight from the Firebase Admin SDK in Node.js!
73+
74+
```javascript
75+
const admin = require("firebase-admin");
76+
77+
const serviceAccount = require("path/to/serviceAccountKey.json");
78+
79+
admin.initializeApp({
80+
credential: admin.credential.cert(serviceAccount),
81+
storageBucket: "quiver-foure.appspot.com"
82+
});
83+
84+
const bucket = admin.storage().bucket();
85+
// 'bucket' is a Cloud Storage bucket instance
86+
```
87+
88+
`bucket` is an object defined by the [@google-cloud/storage library](https://cloud.google.com/nodejs/docs/reference/storage/1.5.x/Bucket) for Node.js. The GCP libraries feel different from the Firebase libraries, mostly because the docs look different. But don't be afraid of GCP. It gives you much finer-grained control over its features than Firebase does.
89+
90+
91+

‎firebase-tools/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Firebase Tools: Introduction
22

3-
The Firebase Dashboard handles most administrative functions, but it doesn't deploy code, and there are some admin functions that don't have dashboards yet.
3+
The Firebase Console handles most administrative functions, but it doesn't deploy code, and there are some admin functions that don't have console dashboards yet.
44

55
That's where Firebase Tools comes in.
66

‎firebase-tools/walkthrough.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ You may get an error like...
8585
Error: HTTP Error: 400, Project 'how-to-firebase-tutorials' is not a Firestore enabled project.
8686
```
8787

88-
... in which case, you'll need to use your Dashboard to activate the Firestore Beta. Make sure to start in locked mode.
88+
... in which case, you'll need to use your Console to activate the Firestore Beta. Make sure to start in locked mode.
8989

9090
![enable-firestore.png](https://goo.gl/veDwFU)
9191

‎introduction/overview-and-structure.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This course consists of a bunch of modules, including:
44

5-
- Firebase Dashboard
5+
- Firebase Console
66
- Firebase Authentication
77
- Firestore
88
- Realtime Database
@@ -23,7 +23,7 @@ These modules are multi-purpose tools that can be used in all sorts of creative
2323

2424
| Module | Intensity | Reasoning |
2525
| --------------- | -------------- | ------------------------------------------------------------------------------------ |
26-
| Dashboard | 🌶 | A quick walk-through |
26+
| Console | 🌶 | A quick walk-through |
2727
| Authentication | 🌶 | Auth is the easiest Firebase feature to implement. |
2828
| Firestore | 🌶🌶🌶🌶🌶 | Firestore is the meat of Firebase's offering. |
2929
| Realtime DB | 🌶🌶🌶🌶 | The Realtime DB (RTDB) has some "gotchas" |

0 commit comments

Comments
 (0)