Intro

Let's dive deeper into how the data of Instagram Stories works.

Photo data

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 photo data

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!

Database

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!

Finding photos

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.

Finding Joe's photos

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.

Finding Joe's Story photos

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!

Disappearing stories

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!

Finding story photos

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!

Server and database

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.

SQL

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.

Intro

With Photo data structured, we can take a look at how viewing a story on the Instagram app works.

Opening a story

When you open a story, you'll usually see a loading indicator before you see the first photo. What's happening?

  • The Instagram app is requesting photos from an Instagram server

Yeh! that's right!

App and server

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!

Steps for loading a story

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.

App interface

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
}
  • It gets formatted and displayed in the app

Nice!

Formatting iOS app data

For formatting data on Android and iOS applications, developers use different sets of tools.

Have you heard of tools used for building iOS apps?

  • Swift and Objective-C

That's right!

Formatting Android app data

For developing Android apps, the set of tools are different. Do you know what they are?

  • Java and Kotlin

Great job! 

Logic for the interface

Let's describe how we would lay out the image container if we were to code the Instagram Stories feature.

  • Set the image container to span the width and height of the screen

Nice!

Laying out the image and text

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!

Display data

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!

Summary

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
}