Build an Instagram Clone

Author: @sydneylai

Scope of this Tutorial

This example will demonstrate how to build your own Instagram Clone with OutSystems. You will walk through how to connect a database, manage dependencies for plugins and replicate the front-end of a social media application. This app is easy to build with only a few drag and drops and you will have yourself a super sweet clone!

Finished Demo:

Start Here

Step 1: Start with a Phone app
When you launch Service Studio, you want to create a mobile application by clicking on the Phone app.

Drag a Screen Widget into the center and name it 'Home' as your homescreen. Set the screen to Anonymous so anyone can access without a login account.

Step 2: Set the foundations
In your navigation find the electric plug icon to Manage Dependencies so that you can have a reusable service:
Camera Plugin
OutStagram Core - the core is the database, and its methods to create posts

Step 3: Connect the database
Drag a screen widget into the canvas. Name the Empty Screen "Home Screen"

Pre-load the database that was previously created by dragging OutStagramCore onto the screen and creating an Entities titled “Post”.

Data > OutStagramCore > Post (Entities) and drag into the screen

[The Image]
Remove any non-relevant descriptions in the x.y Expressions and remove the StyleClass “img-circle” and head to Styles to adjust the width to “FILL”.

WARNING:

If your image is not properly sizing then go to the Widget Tree and drag and drop the image file out of the containers.

Step 4: Save and Publish
Save and publish by clicking on the green arrow in the center, now this version is available on the server.

Step 5: Posting images
On your Interface tab, head to GetPosts Entity and add a source named "PostLike" On the second “Joins”, the Post will be switched to “With or Without” PostLike. The folder structure and script will show the Post.Id, UserId and GetUserId

Post.Id = PostLike.PostId and PostLike.UserId = GetUserId()

Step 6: Heart Icon
Search for the Icon widget and drag it over into the proper container, otherwise the image will be stuck in an improper container:

Continue on by decreasing the size to “Font Size” and set the color of the heart.

Enclose the Icon in an If, and set the open If condition by the following folder structure:
GetPosts > Lists > Current > PostLike > UserId where the script will return:

GetPosts.List.Current.PostLike.UserId = GetUserId()

Go back to search an Icon for an empty heart to drop an If Statement into.

Make sure your Heart icons are enclosed in a false/white branch.

Step 7: Backend for “Liking” an image
Link an If to action, where when a user likes an image, the action will toggle the like of the post, which will be added to the action logic flow.

Right-click on the heart icon and add a New Client Action,and rename that action from “LinkOnClick” to “ToggleLink”, and run the Server Action. Drag and drop the Run Server Action to the Action Flow, select the OutStagramCore

Now set the following

UserId: GetUserId()
PostId: GetPosts.List.Current.Post.Id

Now drag & drop your GetPost Entity onto your logic flow so that you see a refresh for GetPosts. Since you made changes to your serverside, you need the referesh to reflect the changes.

Step 8: Show Likes
Head to your MainFlow screen, right-click and add a Block, rename the block to ”ShowLikes”. Add an Input Parameter in your ShowLikes and rename the PostId. Double-check that the built-in AI has recognized your Data Type, otherwise ensure that it’s a Post Identifier.

Step 9: Post Database
Right click to Fetch data from the database and drag the Data > OutStagramCore > PostLike entity onto your screen, the Aggregate you just created. I want the likes for the given PostId, so head to Filters and Add Filter, which should appear as:

PostLike.PostId = PostId

Step 10: Show Likes Continued
Click on the ShowLikes block and drag a x.y Expressions widget and set the parameters to:

GetPostLikesByPostId
GetPostLikesByPostId.Count

Put in an Example value to maintain the WYSIWYG aka a placeholder, and then type next to it “likes” in the text space.

Back in Interface, HomeScreen, drag the Block ShowLikes > PostId

“GetPosts.List.Current.Post.Id”

Step 11: Take and Post Photos

Back in the Home Screen, drag and drop the camera icon into the top right corner.

Now right click and link the camera to a new screen named UploadPicture.

Within the UploadPicture Screen and add a Local Variable to store the picture, named "Picture". You can see the embedded AI will suggest the data type: Binary Data. Add a second Local Variable to add the Post’s Description.

In UploadPicture > Events > add OnInitialize to bootstrap the camera plug-in

Run (drag and drop) a Client-side Action, Select Action: CheckCameraPlugin

Drag & drop an If to test to test the output of the camera check:

CheckCameraPlugin.IsAvailable

Right-click on the If Statement and Swap Connectors

For the following If statement branches:
False Branch: Add a False, in case the Camera is not working, add an End widget after the Message widget. Message can be written as: "No camera available" and drop an End to end the logic.

True Branch:If action is available, add a Run Client Variable > Camera PlugIn > Take a Picture

• Drag Assign to the logic flow
• Assign the Variable = Picture
• Assign the x.y Expression = TakePicture.ImageCaptured
• Click on UploadPicture Interface screen and set the UploadPicture Screen's title to “Upload Picture”
• Add a Form widget to edit the post
• From the right, drag the ‘Picture’ Local Variable to the center
• Drag the description into the center
• Change the button from ‘Save’ to ‘Upload’

Step 12 Edit Button
Double click the 'Upload' button to the Action Flow
Run a Server action: OuStagramCore > API > NewPost

Click on “NewPost

UserId: GetUserId()
Picture: Picture
Description: Description

To finish this flow, on UploadPicture > UploadOnClick action flow, and send the user back to the homepage by adding the Destination widget and Select Destination: Home

Delete the End button and drag the logic from New Post to the MainFlow\Home

Save and Publish Once More, now play with your Instagram Clone app!