Let's dive deeper into how the data of Instagram Stories works.
The core part of Instagram are photos and videos. To keep things simple, let's focus on some data stored for a photo.
What data might Instagram servers store when a photo is uploaded?
Nice!
Formatting data makes it easier to design and understand programs.
Let's try formatting Photo
data the same way a programmer at Instagram might do it.
Photo { image_file user_account is_story_photo }
Sweet!
Formatting data makes it possible for a server to work with a database. A database is a structured set of data.
Let's try filling out the data of a Photo
for a database when Joe uploads a cat photo to his story.
Photo { image_file: cat.png user_account: joe is_story_photo: true }
Nice!
The database at Instagram has over 40 billion photos. It has a bunch of different photos uploaded by different users.
Let's tell the server to give us a peek of what's inside Instagram's database.
Find first three Photos
//Output Below
Photo { image_file: coolbook.png user_account: emmawatson is_story_photo: true } Photo { image_file: soccerball.png user_account: cristiano is_story_photo: false } Photo { image_file: learntocode.png user_account: pywe is_story_photo: true }
See that? Each photo has their image_file
, user_account
, and is_story_photo
set to a specific value.
Let's outline the step a server would take to find photos from joe
.
Find Photos where user_account is joe
//Output Below
Photo { image_file: cat.png user_account: joe is_story_photo: true } Photo { image_file: dog.png user_account: joe is_story_photo: true } Photo { image_file: shelfie.png user_account: joe is_story_photo: false }
See that? Each photo found has user_account
set to joe
.
To find the photos that belong to Joe's Story, we'll need to tell that to the database using and
.
Find Photos where user_account is joe and is_story_photo is true
//Output Below
Photo { image_file: cat.png user_account: joe is_story_photo: true } Photo { image_file: dog.png user_account: joe is_story_photo: true }
Sweet!
Photos on your Instagram story "disappear" after 24 hours though.
So let's add an upload_date
so we can check if the photo should be visible.
Photo { image_file user_account is_story_photo upload_date }
Sweet!
With the updated data structure, the server can find photos that were uploaded less than 24 hours ago.
Find Photos where user_account equals joe and is_story_photo equals true and upload_date is less than 24 hours ago
//Output Below
Photo { image_file: cat.png user_account: joe upload_date: 6 hours ago }
Neat!
The logic for saving and finding photos is the interaction between the Instagram server and database.
SQL is one tool used to code this logic.
You might be surprised to find out the program we've been outlining and how it's written in SQL aren't so different:
Find Photos where user_account is joe and is_story_photo is true
//In SQL
SELECT * FROM Photos WHERE user_account IS "joe" AND is_story_photo IS TRUE
If you'd like to learn how to code in SQL make sure to add it to your favorite tracks.
With Photo
data structured, we can take a look at how viewing a story on the Instagram app works.
When you open a story, you'll usually see a loading indicator before you see the first photo. What's happening?
Yeh! that's right!
Let's put down the steps the Instagram app and server make while a story is loading.
App: Request Joe's Story Server: Find Photo where user_account is joe and uploaded_at was less than 24 hours ago Server: Sort photos by uploaded_at with newest photos first Server: Send back Photo data App: Display first photo
Sweet!
We just outlined the steps the Instagram app and servers use to display Stories on your phone. From the app to the server and back.
When the Photo
data gets sent back to the Instagram app, it just goes through one more step before you can see it in your app.
Do you know what it is?
Photo { image_file: cat.png user_account: joe upload_date: 6 hours ago } Photo { image_file: house.png user_account: joe upload_date: 8 hours ago }
Nice!
For formatting data on Android and iOS applications, developers use different sets of tools.
Have you heard of tools used for building iOS apps?
That's right!
For developing Android apps, the set of tools are different. Do you know what they are?
Great job!
Let's describe how we would lay out the image container if we were to code the Instagram Stories feature.
Nice!
Let's put down the steps for how we would lay out the image container and the text that displays the username.
Lay out image container. Lay out text for username.
Sweet!
With an image container and text laid out, we can display the data from the server in the app.
Photo { image_file: cat.png user_account: joe upload_date: 6 hours ago }
username.text = user_account image_container.image = image_file
Nice!
And there you have it!
We saw how a photo is uploaded to a server, saved on a database, and retrieved to be displayed on the Instagram app.
Photo { image_file: cat.png user_account: joe upload_date: 6 hours ago }