|
- Create a page with these Page Elements:
* 2 input fields - one for the name, one for the school.
* 2 buttons - one to add the new guest, one to show the list of guests.
* A text label - on which to show the list.
<input type = "text" id="showListLabel" value="">
- Add a function addGuest() which takes the input information - name, school - and adds those to a guestList string, using something like:
guestList += newGuestInfo;
- Add a second function showList() that displays the guestList in the text label.
Fix all the bugs and make sure this runs smoothly.
- Now, what happens if you close the web page? Is your guest list saved (does it persist, in tech-speak)? No! This is clearly a problem for anyone without a photographic memory. Lets setup a database so your guest list can persist when you are off-line.
First, setup a Google Firebase account at
https://firebase.google.com
- Log into your console and create a new project as described here:
https://firebase.google.com/docs/web/setup
Name it something like "PartyCloudBase".
- Click on the project and choose "Add FireBase to your web app." Follow instructions to add Firebase config info to your Party List HTML page. Something like:
var config = {
CONFIG DETAILS HERE
}
firebase.initializeApp(config);
var partyFB = firebase.database();
- Now we need to change database permissions so your Party List page can read from your database. Choose your PartyCloudBase project in the console and choose Database in the left-hand menu bar. Then choose "RULES". Change the rules config details to allow everyone to have access to your database. (This is OK for now, while we are only storing test data)
- Modify your addGuest() function to add the new guest info to your PartyCloudBase, in addition to saving it locally.
Use the set() method. The code will be something like:
partyFB.ref(newName+newSchool).set({
name: newName,
school: newSchool,
});
- Add showing the contents of the databse list to the showList function:
peopleList2 = "People from the Database:";
usersRef.once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
personObj = childSnapshot.val();
personString = personObj.name;
personString += ", " +personObj.school+"
";
peopleList += personString;
});
});
peopleList2 += """;
};
- Clean the code until you've fixed all the bugs, and then run the Web Page. Add a few names to the Guest List. Now go to your console and click on "Database" in the left-hand nav. Do you see the names you've added?
If so congratulations, you've just built your first database app!
- We will make use of more database features in the next tutorial.
|
|
