For Melanie: Create your first Firebase app!

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.

Remember to use the commands cd to change directories, pwd to check where you currently are, and ls to list what's inside the current directory!
[x] Switch to the master branch (if you aren't already on it) with the git 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, replacing BRANCH-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.

Remember: every time you resume working on this challenge, you can switch to this branch with the git checkout BRANCH-NAME command. You can see a list of all your local branches and which one you're currently on by using the git branch command.

2. Create new files and folders for your Firebase test app

[x] Inside the pair-partners project directory, create a new directory called firebase-test.

Remember you can create new directories from the command line with the mkdir command, as in mkdir firebase-test.
[x] Navigate into the new firebase-test directory and create two new files: index.html and firebasetest.js.

Remember you can create new files from the command line with the touch command, as in touch index.html firebasetest.js to create both files at the same time!
[x] Copy this HTML boilerplate code and paste it into your firebase-test/index.html file (in other words, into your new index.html file inside the firebase-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 your firebasetest.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

Please don't look at the solutions until after you've checked and double-checked your code for each part of this challenge. No cheating! haha :)

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!
- [x] Double click the code where it says "auth !== null" and type to replace it with true so that the code says ".read": true, ".write": true for the rules. Note: Don't use quote marks around true!
[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.)

Remember: Start with git branch to see a list of your branches and which one you're currently on. Then use git checkout BRANCH-NAME to switch to the branch you created earlier for this challenge. Then do your usual workflow, using git status as needed, git add . to track all changes, and git commit -m "your commit description here" to save a snapshot of your project.
[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!

LearnTeachCode / pair-partners