Databases: Virtual Pet

Step 1
In this lesson we will be making a virtual pet which can be fed and given attention to.

The pet will be stored in a database so all users will interact with the same object data in real time.

Step 2
Before we begin you'll need to make an html page for your pet

Create a page with at the very least:

  • A Header
  • An image of your pet
  • A list of items including
    • Name
    • Food
    • Mood

Later (or even now) I suggest you come back with some CSS and make your page look really nice!

Step 3
The database we will be using is a free online database service called "Firebase"

You'll need to create a Firebase account using your google account.

(If you don't have a google account you will also need to make one of those)

Step 4
You'll be re-directed back to the homepage after signing in. Next go to your Console
Step 5
Press Add Project to create a new project
Step 6
Name your project and press Create
  1. Name your project something like "VirtualPet".
  2. Note your project ID (I have obscured mine in the image).
  3. Press Create Project.
Step 7
After your project is created head over to the Database Icon and press "Get Started"
Step 8
When prompted go ahead and choose the Realtime Database

The Cloud Firestore is currently in Beta and says it's better for larger more complex databases. We don't need to use it for this lesson.

Check Your Work
Step 9
You should now see you have an empty database named "virtualpet-#####"
Step 10
Entries in a database are broken into key-value pairs called "properties"

Hopefully this sounds familiar to you.
Database entries are stored as Objects

Indeed, a database can be though of as one big object.

We can even have objects inside of other objects:

Step 11
Next we're going to build our database object. It will be named "myPet" and have three properties
Step 12
We need to populate anew object with at least one property or firebase won't let us add it

So that means we are going to make the Object myPet and give it the property food all at the same time

It may look a bit confusing so read the next steps carefully!

Step 13
First add a child to the virtualpet database

Give it the name "myPet" or something similar

Do not press the "Add" button or it will be removed for being an empty object.

Instead press the + to add child...

Step 14
The "child" is really a "Property" of myPet

Name the property food and set it's value to 100

Now you may click Add

Check Your Work
Step 15
You should now have a database that looks like this

virtualpet-### is the database
myPet is your object
food is the first property

Step 16
Give your pet a name, a food, and a mood property

Note that the name is set as a string with the quotes around it!

Step 17
Now, we're going to deal with this warning message

Sometimes we may want to force users to authenticate before they may access our data.

But for this simple project we'd like to allow everyone access.

Step 18
Head up to the Rules tab and set "read" and "write" to true

Reading from a database is to access the values of its properties.
Writing allows users to update those values.

You don't always want to give both read and write access to everyone.

Check Your Work
Step 19
Your database is now setup and we are ready to access it in our project!
var myPet = {
  food: 100,
  mood: 100,
  name: "Smaug"
Step 20
Next we need to point our html file to our database

We can find the information to do this up in Project Settings

Step 21
Select to add Firebase to your web app and copy the code in the modal that pops up

These script tabs first include Firebase itself
Second run javascript code which connects to your database

Step 22
Paste these scripts into your head of your html page

Excuse all of the obfuscating, but with it people could tamper with my database!

Step 23
We're about to make a new p5js sketch to control our page, but first let's add Jquery and of course the p5js library

Jquery let's us update the html on our page in real time

p5js let's us use the setup() and draw() functions.
(And maybe a canvas later would be cooler than just a picture of your pet)

Jquery src

p5js src

Step 24
Create a new js file named pet.js (or use index.js if you prefer)

I also have made a pet.css file, but you may do that at the end if you wish.

Step 25
Include your javascript file and your stylesheet if you have one
Step 26
Hi TeenCode. I'm not done yet so here is an info dump showing you how to make the sketch!

Get a reference to your myPet object

Now make an object and populate it with the database data

db.on("value", getData) Means the function getData() will be called whenever a database value changes.

So the getData function puts that object data into myDragon and then uses jquery to update the spans with the ids "food" "mood" and "name".

I used the draw loop to check my pet's hunger level every frame

the checkHunger function looks at how long its been since the database updated the food value and then subtracts the right amount from food...its complicated.

try to read it and understand it

This means I added a timeSinceHunger value to my database

Lastly I added a feed function which shows how you can update a database value

I added some buttons in my html that let me feed her

Databases: Virtual Pet Info



Created By


Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach