Closed LearningNerd closed 7 years ago
Cool, thanks @kammitama5! :) That was fast! Hey, what do you think about this for a workflow for our team: I can create one copy of this issue assigned to each of us, so that everyone can track their progress individually using the checkboxes. (Right now if we're all using this ONE issue, the checkboxes are shared between all of us too, which is good for collaborative issues but not if everyone is doing it individually!)
And then I'll organize them all under this milestone: https://github.com/LearnTeachCode/pair-partners/milestone/1 (should help at least a little bit with reducing the clutter of having 5 essentially duplicate issues, lol)
Thoughts?
I like it! It's similar to what Andrew did with us for the mentorship. Works for me! :)
Here is my updated link to the branch/ pull request https://github.com/LearnTeachCode/pair-partners/tree/firebase-test-kam
@kammitama5 I just updated the issue with the rest of the steps -- see sections 3, 4 and 5! Should take you way less time to do the steps than it took me to document them, haha π
Meh. I'm lazy. Doing this when I get home :P
Approved your PR https://github.com/LearnTeachCode/pair-partners/pull/28, awesome! Closing this issue since you're all done :)
Firebase is a set of tools (now owned by Google) that help software developers build web and mobile apps more quickly and easily. We'll be using their real-time database platform as the backend for our app, so we don't have to worry about setting up or maintaining our own server! It's a great beginner-friendly way to start learning about databases, and these "Backend as a Service" (BaaS) tools are a huge trend in the tech industry right now!
βοΈ To complete this challenge: follow each step below, check off the checkboxes to track your progress (so we can see your progress too!), and then submit your solution as a pull request.
β If you have any questions, post a comment at the bottom of this page or ask us in our Slack chatroom!
π‘ Remember to commit early and commit often! A good rule of thumb is to make a commit with Git after every 15 minutes of coding and at the end of every work session.
1. Set up for local development on your computer
[x] Open the command line and navigate into your directory/folder for the
pair-partners
project.[x] Switch to the
master
branch (if you aren't already on it) with thegit checkout master
command.[x] Get the latest changes from GitHub with the
git pull
command.[x] Create a new local branch with
git checkout -b BRANCH-NAME
, replacingBRANCH-NAME
with an all-lowercase name for this new feature followed by your initials (for example,firebase-test-lk
).Great! Now any commits you make will be part of this new branch that you just created and switched to.
2. Create new files and folders for your Firebase test app
[x] Inside the
pair-partners
project directory, create a new directory calledfirebase-test
.[x] Navigate into the new
firebase-test
directory and create two new files:index.html
andfirebasetest.js
.[x] Copy this HTML boilerplate code and paste it into your
firebase-test/index.html
file (in other words, into your newindex.html
file inside thefirebase-test
directory).[x] Change the
<title>
to something like "Testing Firebase!" or similar.[x] Inside the
<body>
element, create the following elements:[x] An
<h1>
heading element that contains the same text as the title, something like "Testing Firebase!" or similar.[x] A empty paragraph with the id of
"message"
, as in<p id="message"></p>
.[x] A
<script>
element to import the Firebase JavaScript library into your web page. The source URL of the Firebase JavaScript file (hosted on Google's servers for our convenience!) is "https://www.gstatic.com/firebasejs/4.1.2/firebase.js". So your code for this step should be:<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
.[x] Another
<script>
element to import yourfirebasetest.js
file, as in:<script src="firebasetest.js"></script>
.Awesome! Now that you have your files set up and the Firebase library imported into your web page, you're ready to set up your first Firebase app! If you haven't already, now is a good time to make a Git commit to save your progress!
βοΈ SOLUTION for Part 2: https://gist.github.com/LearningNerd/dee22d9806d213aedfa151ed5898bb17
3. Set up your Firebase project
[x] Open the Firebase console (which is just a web page that lets you manage your app) and log in using your Google account.
[x] Click "Add New Project" and give your project a name like "Firebase Test":
[x] Click "Add Firebase to your web app":
[x] Copy and paste the JavaScript part of the initialization code into your
firebasetest.js
file, starting from// Initialize Firebase
until before the closing</script>
tag:[x] In the Firebase console, navigate to the "Database" page and then to the "Rules" tab. Shortcut: Click on this link and then choose your project to get to the page quickly!
"auth !== null"
and type to replace it withtrue
so that the code says".read": true, ".write": true
for the rules. Note: Don't use quote marks aroundtrue
![x] Click the "Publish" button right above the rules to save your changes. You should now see a warning that your security rules are defined as public and anyone can read or write to your database:
That's exactly what we want right now; while we're testing this first version of our app, we want it to work without requiring users to sign in first. Later we'll change the rules again to add security as needed.
βοΈ SOLUTION for Part 3: https://gist.github.com/LearningNerd/288df7eff9f78e9a44ab9215f8858355
Congrats, you now have a Firebase app! If you haven't already, be sure to make another Git commit to save your progress. Next, let's test out the app and make sure it works!
4. Add JavaScript code to display Firebase data on your web page
[x] Create a JavaScript object named 'messageBox' for the HTML element that has an
id
of"message"
.[x] Create another JavaScript object called
dbRef
. This object will be our reference to the "greeting" row of our Firebase database. Use this chain of built-in Firebase methods:var dbRef = firebase.database().ref().child("greeting");
[x] Last but not least, we'll use another built-in Firebase function to create an event listener that will display our data on the web page any time our database is updated:
dbRef.on("value", function(dataSnapshot) { messageBox.textContent = dataSnapshot.val(); });
βοΈ SOLUTION for Part 4: https://gist.github.com/LearningNerd/43b7edeaa40e3e61b6017c035c07670f
We'll learn more about all of these Firebase functions in the next challenges, but first let's test the app and make sure that our code is working!
5. Add sample data with the Firebase Console and test your app
[x] In the Firebase Console, navigate to the "Database" page and then to the "Data" tab. Shortcut: Click on this link and then choose your project.
[x] Hover your mouse over the text that looks similar to
fir-test-c7763: null
and then click on the green plus sign that appears:[x] In the two text boxes that pop up, type "greeting" for the name and "Hi from Firebase!" for the value. Then click the blue "Add" button when you're ready to save your new data:
[x] Now let's test our new app! Open up your
firebase-test/index.html
file with your web browser and you should now see your message "Hi from Firebase!" appear on the page![x] Next, navigate back to the "Data" tab of the "Database" page in the Firebase Console, click on your "Hi from Firebase!" message, type in the box to change the value to something else like "I changed this data in Firebase!", and then press the Enter key to save your changes:
[x] If you switch back to your
index.html
page in your web browser again, you should see the data change!π Congratulations, your first Firebase app is working! The coolest thing about Firebase is that it updates the data in real time so you don't even need to refresh the page to see the changes. Behind the scenes, it's using a WebSocket connection just like our SocketIO chatroom app did! Cool stuff, right?
βοΈ If you haven't already, be sure to make another Git commit. And while you're at it, be sure to check off all the checkboxes in these instructions for every step that you've completed -- that way the rest of our team can easily see your progress!
6. Create a pull request to share your code with us
π‘ You can create a pull request at any point! Please share your code with us at the end of every work session, whether or not you've finished the challenge. Pull requests are a great way to ask for feedback on your code!
[x] If you haven't already, make a commit! (Make sure you're on the branch for this challenge.)
[x] Upload your branch to GitHub with the
git push origin BRANCH-NAME
command.[x] Create a new pull request by clicking here, and make sure the base branch is set to "master" and the compare branch is set to the name of your new branch:
[x] Review your files to make sure all your changes show up, and then click the green "Create pull request" button:
[x] Make sure the title of your pull request includes the name of the challenge you're working on (for example,
Solution for "Create your first Firebase app!" challenge
). Then add any comments or questions in the description box and click "Create pull request" again to publish it:Once you've submitted your pull request, everyone on our team can share feedback on your code using GitHub's code review and commenting features. So keep an eye out for GitHub notifications in your email inbox!
Congrats, you've completed this challenge!
βοΈ Don't forget to check off all the checkboxes in these instructions, so the rest of our team can easily see your progress!
π More challenges to come, so stay tuned!