For everyone: Create a data model for our app

[LearningNerd]

Before we can build our study partner matchmaking app, we need to decide on a clear model for our data! A data model is just a way to organize different pieces of information and define how they all relate to each other. We'll review a couple examples of data modeling both by writing code and drawing diagrams, and then your challenge will be to create one possible data model for our group project!

📚 Prerequisites: First complete the following challenges:

1. "Create your first Firebase app!"
2. "Practice displaying Firebase data"
3. "Practice with JavaScript objects and arrays"

✔️ To complete this challenge: Review the examples below, and then post a comment at the bottom of this page with your proposed data model for our group project!

You can edit your comment at any point to update your answer, so you don't have to do these all at once! To edit your comment after you publish it, click the pencil icon in the top right corner of your comment:

❓ If you have any questions, please post a comment at the bottom of this page! (You can also ask us on Slack, but please post a comment here too so we can more easily reference it later.)

1. Data modeling example with penguins

Remember our fictional penguins from the previous challenge? We used JavaScript objects to model each fictional penguin, using properties to contain each piece of information that we wanted to track for them!

Here's the example code that was provided at the end of that challenge, leaving out the methods (like sayHello) and instead only including the properties that we want to track for our penguins:

var gunter = {
  name: "Gunter",
  origin: "Adventure Time",
  canFly: false,
};

var ramon = {
  name: "Ramón",
  origin: "Happy Feet",
  canFly: true,
};

var fred = {
  name: "Fred",
  origin: "Sitting Ducks",
  canFly: false,
};

Then we created an array to contain a list of our three penguins: var penguins = [gunter, ramon, fred];

Now imagine that we want to build a Firebase app for our penguins, to keep a database that organizes each penguin's information! Here's what that same data might look like inside our Firebase console:

Firebase only stores objects, strings, numbers, and Boolean values -- it actually doesn't have any native support for arrays! So to get around that, we stored the list of penguins as nested objects (objects inside of other objects). Now instead of using array indexes to uniquely identify each penguin, we're assigning each penguin object to a property that serves as a unique ID number -- just like a social security number!

We can visualize the hierarchy of this data model by drawing a simple diagram:

Notice all three penguin objects are inside the penguins object, just as the penguins object is inside the penguinDatabase object! These are still key-value pairs, but here the values are entire objects! If we were to export our data from Firebase, this is what our data structure would look like as JavaScript code:

var penguinDatabase = {

  "penguins": {

    "1152": {
      "canFly": false,
      "name": "Gunter",
      "origin": "Adventure Time"
    },
    "1153": {
      "canFly": true,
      "name": "Ramón",
      "origin": "Happy Feet"
    },
    "7344": {
      "canFly": false,
      "name": "Fred",
      "origin": "Sitting Ducks"
    }

  }

};

2. This is not only a JavaScript object, but valid JSON as well!

JSON stands for JavaScript Object Notation, and it's just a data format that uses JavaScript syntax. JSON can contain strings, numbers, objects and arrays -- the only thing you can't have in JSON data are methods (since by definition, data doesn't really do anything on its own; it just sits there, waiting for some software program to do something with it).

There's even a JSON.stringify() method built into JavaScript that lets you easily convert a JavaScript object into a JSON-formatted string! Test it out for yourself by copying the code above to define your own penguinDatabase object, and then run this code afterwards to see a nicely formatted string appear in your browser console:

console.log( JSON.stringify(penguinDatabase, null, '\t') );

Try it with other objects too! You can also convert JSON strings back into working JavaScript objects again using the built-in JSON.parse() method, too!

3. Read about best practices for structuring Firebase data

Take some time to read "Structure Your Database" in the official Firebase documentation. Take notes on any new vocabulary you find in that article, look closely at their examples, and pay extra attention to their suggestions for best practices.

• Notice how they describe Firebase as nothing but a tree (or hierarchy) of JSON data!

• They suggest that you avoid deeply nested data and instead "keep your data structure as flat as possible", because that makes it easier to download only the data you need, instead of inefficiently downloading all of it just to get one tiny section.

• For two-way relationships in your data, for example between users and groups, it's actually more efficient to duplicate some of your data. In Firebase (and other similar types of databases), a little redundancy can actually be a good thing!

4. Review examples of more complex Firebase data models

OK, so JSON is pretty fun and useful for converting a data model into actual code and vice versa, but the real challenge in data modeling is deciding what data to include and how to organize relationships between difference pieces of data in an efficient and logical way!

First take a look at the Firepad demo, a collaborative text editor very similar to Google Docs that was built with Firebase!

• Try out their app and take a moment to think about what types of data need to be saved in order to make it work.

Next, take a look at the outline of Firepad's data model.

• Notice that they track a list of users, a list of revisions, and both of those objects each have a unique ID number.
• Notice also that each revision is linked to a user by including the user's ID as a property of each revision object!
• Take a moment to think about how this data model would look if you drew a diagram for it, and also how it would look in JavaScript code as a collection of nested objects.

Finally, take a look at the Firechat demo, a chatroom built with Firebase!

• Try out this app too, and think about what types of data are needed to make it work.
• Then take a look at the outline of Firechat's data model for a more complex example.

5. Challenge: Create a data model for our group project!

🏆 The goal: based on what you learned from all the examples above, create a proposal for one possible data model to use for our study partner matchmaking app!

✔️ To complete this challenge: Post a comment at the bottom of this page with the following three things:

1. An outline of your proposed data model, detailing the objects we should have and the properties we should include for each of those objects. (Follow the format used in Firepad's data model outline.)

2. A drawing to diagram the relationship of all the objects in your proposed data model, similar to the penguin example above.

3. A JavaScript code snippet defining a collection of nested objects the way they would look if exported from a Firebase database, following the penguin example above.

Remember, there's no right answer! This is an open-ended challenge to serve as practice and as a conversation-starter for our next brainstorming/design session.

[kammitama5]

[LearningNerd]

Thanks @kammitama5! Diagram looks great so far -- but it could still be fleshed out some more, so we have a more clear picture of what the database would be tracking and how those pieces of data will be linked together. For example, you mention an "archived conversation" -- how would you propose we track conversations as part of our data model? You could borrow from the Firechat example here! I'd love to see some more details. You also don't need to worry about the firebase object or the database object itself -- just the rest of the data required for our app to work.

When you have time, please also post an outline similar to the Firebase demo links at the end of the instructions, as well as a JavaScript code snippet -- again, use the provided examples as a reference. :)

[kammitama5]

Yup. There's an Archive in database, which also has a unique userid in database. My intent was that each Archived piece of data has an Id so it can be accessed that way. Maybe we have different ideas in mind and our communication isn't clear?

[LearningNerd]

@kammitama5 Yeah it wasn't clear to me from the diagram you posted above -- maybe try showing it with examples of 2 or 3 of each object in your data model and how those lists will be stored? See the examples for ways to show it. For example, right now you show a single profile object but it isn't clear how multiple profiles would be stored. Same for the database object. Also, if there are conversations being stored, what pieces of information are being stored for each of those conversations (aside from an ID)? Just some food for thought for when you get around to making your next iteration of this.

[LearningNerd]

Here's the example data model outline we reviewed as a group on Saturday June 24th:

• users
  • userId
    • email
    • name
    • photoURL
    • bio
    • languages
      • languageId: skillLevel
• languages
  • languageId
    • name
    • description

And here's a photo of the whiteboard, showing the same data model above:

Example JSON-formatted code for the above data model, with ONE sample user (with a "userId" of "1") and TWO languages:

var testDatabase = {
	"users": {
		"1": {
			"email": "..",
			"name": "Dan",
			"photoURL": "....",
			"bio": "....",
			"languages": {
				"33": 3,
				"12": 1
			}
		}
	},
	"languages": {
		"33": {
			"name": "JavaScript",
			"desc": "The scripting language of the web!"
		},
		"45": {
			"name": "HTML",
			"desc": "A markup language for structuring a web page."
		}
	}
};