I Developed an Instagram Clone Backend App in 1 Day as a Complete Newbie
Three weeks ago, I joined the marvelous tech startup Altogic which is a BaaS platform that focuses on increasing the productivity of developers and reducing the time-to-market of new apps and services.
Even if I joined as a growth marketer and not as a developer, I wanted to learn development on a certain level and understand the product very well so that I could communicate effectively with developers.
So, I got to work and it took me 1 day to finish an Instagram Clone Backend App including the learning process.
It wasn’t because I am a genius at coding. I did it with the help of the exceptional, easy-to-use, and revolutionary tool Altogic.
My Coding Background
I am a complete newbie in development. I only coded elementary apps like rock-papers-scissors with Python and did simple operations on Firebase that didn’t require any coding background.
Before I get to how I did this using Altogic, let me share a small piece of information for newbie coders like me that will read this story.
Backend Application in a Nutshell
Typically, a modern application consists of two parts: frontend and backend.
Frontend is what users see and interact with. It is concerned with the user experience of your app.
Backend is what happens behind the scenes when users interact with your app.
When a user interacts with a certain part of your app, the logic you defined on your backend is executed and carries out the operations needed.
Of course, it is not that simple, but this knowledge is enough for you to create backend apps on Altogic.
Here is a couple of components my Instagram Clone Application includes:
Authentication
When a user sends sign up information, a user object is created on the database with that information and a verification mail is sent automatically.
When the user verifies their email, emailVerified field of the user is updated to “true” from “false”.
Following
A user can follow someone, see who they are following and who is following them.
Posts
Users can share posts and like the posts.
When a user shares a post; a post object that holds the post image, text, and user who posted information is created on the database.
Users can also see who liked a certain post.
Comments
Users can comment on posts and like comments.
When a user sends a comment to a certain post; a comment object that holds the comment text, user who commented, commented posts and comment like count information is created on the database.
Users can also see who liked a certain comment and comments of a certain post.
How I Did It
Now, we can get to the fun part where I simplify how I did this and tell you in 3 steps.
Creating a Backend Application with Altogic
By the way, Altogic Client Library comes with all these authentication features built in, but I will tell you how to manually design your authentication services with Altogic Designer in this story so that you can understand how it works.
1. Create your database model.
First, we need a database model to store our data in an organized way. For example, we can have a users model, and in that model, we can set fields like name, password, email, etc. Fields can be of different types like text, email, integer, boolean(true or false), date, encrypted text(for passwords), etc.
A few examples:
- users model for authentication that holds user objects.
Each user object holds email(email text), password(encyrpted text), name(text), etc. informations of users. - posts model that holds post objects.
Each post object holds post sharer(object id), comment count(integer), like count(integer), caption(text), image(url link) etc. informations of posts. - comments model that holds comment objects.
Each comment object holds user who commented(object id), commented post(object id), comment’s like counts(integer), etc. informations of comments.
Of course you do not need to define all your data models at the start. You can create your application in steps.
I started with authentication so I created users model first. After I completed my authentication process I created posts model and services, and then I got to comments.
Altogic even creates one for you when you create an app.
When a new user signs up to our app, they will send their name, email and password to our database. With that information, we will create a user object on our database(an object in the users table).
But how to do that?
2. Create your endpoints and services (cloud functions)
To do database operations(post, get data), we use RESTful API(POST, GET, PUT and DELETE methods).
Users send data to our database (signing up, sharing posts)
→ They send a POST request.
Users get data from our database (seeing who follows them)
→ They send a GET request.
Users want to update data on our database (changing username)
→ They send a PUT request.
Users want to delete data from our database (delete a post or an account)
→ They send a DELETE request.
Now that we know what RESTful API is;
We need to define a path for the POST requests users will send when signing up → Endpoint
and
Define what will happen to our database when that POST request is sent to the path we defined. → Service (Cloud Function)
Creating our Endpoint:
Creating an endpoint on Altogic is very simple. We specify the method, path, and the service that will be executed when a POST request is sent to the path we specified, and our endpoint is created!
Now, what will happen when a user sends a POST request(method) to the path “/users/sign-up” (when a user signs up)?
Creating our service(cloud function):
Altogic creates a service connected to our endpoint automatically while creating the endpoint. In this case, we created a Sign Up Service linked to the Sign Up endpoint. This means that the Sign Up Service will be executed when a POST request is sent to the “/users/sign-up” path.
Now let’s get to our service from the services tab and define what will happen when a user signs up.
Click on Sign Up Service and you will see the service where we can define our logic(what will happen on “sign up” behind the scenes of our app) by dragging and dropping the right nodes and without writing a single line of code.
At first, we only have our Start node like all services. This node is initialized when a user signs up.
We click the Start node and define what we expect when a user signs up. In this case, we expect the inputs needed to create a user object on the database so we request a single model of “users”.
Now, we need to pick the input user sent on the POST request to create a user object with it.
We use Get Object Value node and pick the body(input user sent).
Now that we have the required information (username, email, password, etc. the user sent) on our Get Object Value node, we can create a user object on the database on the “users” model for our new user with it.
To create the user object, we use Create Single Object node. We connect it to the Get Object Value node and specify the model the user object will be created on, which is our users model in this case.
There is one last part to it. This is a perfectly functioning service, but we probably want to see a response when this service is executed that states whether it was executed successfully and sends created object information to us so that we can see if it functioned correctly.
For this, we use Return Success Response node. We connect it to our previous node, which means it will trigger a success response when this service is executed properly, and then, to see the object created on the response, we connect the Create Single Object node to inside of the Return Success Response node.
Our service is done and now we can get to the third and final part.
3. Tester
Let’s see if our app works. Click on the cloud symbol top-right of the screen, and then click Test to go to the Tester.
Click on Sign Up endpoint and you’ll see the test panel for our endpoint.
From here, we can type in the information a user will type in when signing up and send a POST request to the path /users/sign-up with our input just like a user and see what will happen.
EXCLAMIER! The input(body) we send must be in JSON format for Altogic to understand it. You can see the example JSON format on the picture above.
Now click Send.
As we can see, we got the object created on the database as response and the Status of the response is 200, which means a Successful response. Altogic also created a unique id for our object and omitted the password because the password field was “encrypted text” type.
This is the most basic authentication backend application you can create on Altogic in approximately 2 minutes.
We can complexify our authentication by adding more nodes to our service and even creating other services for the sign up process. We can send an email to the users’ email address for verification by integrating third-party tools like MailChimp or SendGrid, and then verify their emailVerified field on the users table when they click the link on the verification mail we sent, and do much, much more.
You can also use Altogic’s client library to even expedite your process further.
I will not get into the detail about all this in this story, but it is very easy and simple to do with Altogic, even for a person without a programming background like me. As I said, I created an Instagram Clone Backend App in 1 day with this amazing tool including the learning process of a newbie.
I will share all parts of how I did it in the upcoming days.
If you are interested, follow me on Medium and @Altogic on Twitter.
Peace!
