Post Details
Showcase 1: Building an Instagram-Like Travel App | iOS Tutorial
Nazli Temurtas
25 Feb 2021
Build and run the Travel App on both iOS & Android. The source code is available.
In this app, users can share the pictures that they take, and have a timeline and profile page like Instagram. Also, users can see views, likes, usernames, comments, etc. Depending on your experience and the drafts that you have, building an app UI like this one, takes hours to days. With this tutorial, you can do it in less than half an hour.
We will build this app from scratch, with no codebase. It will include zero logic, but the UI part. For the logic part, you can modify, and implement it depending on how you import/insert your data/photo by opening the source code in your favorite IDE. For this tutorial, weāll use Xcode.
If you are a new user of Monday Hero, click here for QuickStart. It includes information from the sign-up to create the first project.
To complete this tutorial, please check the system requirements. š
ā macOS High Sierra (10.13.4) or later to import a design file
ā You can use our Web App that supports every OS, and template project to continue without importing a design file.
ā Xcode (v10.0 or later)
Also if you want to get source code directly or have some trouble doing any of the steps, here is the GitHub link. Feel free to use it as you want.š²
Letās begin! š¤
1- Download the design file.
It is prepared for you, no need to design from zero now. You can download the file that you want to use below. Here is the Travel App Sketch File / Travel App AdobeXD File / Figma File.
2- First, create and name your project.
Create an iOS project and name it as you prefer. You can name it the āTravel Appā.
3- Export the design file to Monday Hero via the plugin.
Select the pages that you need, and click Plugins > Monday Hero > Export. You will see the current projects that you can export.
ā ļø Sketch plugin will be automatically installed. You can download the Adobe XD plugin from here and double-click to install it in seconds.
From Sketch To Monday Hero
From Adobe XD To Monday Hero
ā”ļø Pro Tip: In this tutorial, they(icons, images, etc.) were made exportable for you. But for the future, donāt forget to make them exportable in the design file.
For the screens that you see below, Monday Hero generates the code of texts and images for you. You will get them all in one place.
Letās start with the Profile Page.
As you can see, users can put images there, and they should be able to scroll through vertically. You should create a component that corresponds to UICollectionView in Swift. A cell prototype is the element/component that will repeat itself. You can create components by simple click and dragging. You will see the GIF examples below steps.
Create the collectionView.
A CollectionView object is responsible for managing an ordered collection of data items and presenting them in customizable layouts which are rectangles in this case. Click and drag through pictures, then select the class as CollectionView-Vertical. Next, you should select the Properties/Classes as a cell prototype. Thatās it, you can save and see the updated code.
You will see that the code is updated and on top, the following code block has been created.
@IBOutlet private weak var userpicturesCollectionView: UICollectionView!
IBOutlet is a connection from an Interface Builder to a UI component. And below, you will see the code has been generated, and all you need to do is use your real data/data source to change the pictures as you want.
In every component creation, after you click āSaveā, you can see that code changes on the right side. You canāt edit right now, but no worries, you will get your full code by exporting soon.
Buttons
If you want to see the tutorial results faster, you can skip this step. If you skip, they will look like an image and have no function. Letās create the buttons for better and clean code.
You will see two button creation GIFs below. Letās start with the follow button. You will click and drag the component, name it and the class is āButtonā. And in properties/classes, there is only a title needed. The tool is automatically detecting the blue color for this button and its borders.
Then, the add/insert button below. This button has only an image, and you can repeat this step for all other buttons on this page.
After you finish all buttons that you want, you can go to New Post Page.
New Post Page
Here below, you can see the components of the new post page. I didnāt mark and create all the buttons again since you can find a similar example above.
TableView
TableView is specifically designed to display a scrolling list of items.
And here is a GIF below, if you have trouble creating the TableView component.
The rest of the buttons are up to you. If you want to create it, you can create it. You donāt need to do anything for others, texts, and images will get automatically. The components that you create will be dynamic.
List Page
Here you can see the repetitive photos and scroll like a list, too. You can follow creating the TableView component step again.
Thatās it. All getting faster step by step isnāt it? š¤
Home Page
On the home page, you donāt need to do anything! We marked the buttons that were created, again you prefer what to create on this page.
All done! Letās go for exporting! š„³
Exporting The Code
Since it is the first project, you can export it all as a new project.
In the future, you can create your components and export āonly edited screenā into āan existing projectā which will make editing easier and provides you flexibility.
If you have trouble with exporting or the export screen doesnāt pop up, you can reload the page by changing the view to another one and exporting again.
You will see that a project named āiOS-Exampleā was created in the directory that you selected. You should wait a sec to be sure every file is successfully exported.
Successfully Exported Project
The successfully exported project files look like the GIF below. You should see assets, screens, localizable stringsā¦
And now, it is ready to run! āØ
Developer Actions š»
Here now, you will see the developerās actions that you can do for flexibility. As a developer, you can change the alignments and positions as you prefer, and here you should make a decision about what will happen to the texts below the profile description (8 Photos, 176 Likes, and 6 Marks) in the larger/smaller screen.
1. Defining Widths
In the case below, there is no information about how their (8 Photos, 176 Likes, and 6 Marks texts) width will change in the Sketch file so we will define equal widths for them.
When you click one of the items, you will see the items on the left. You can do the following steps to do it like us.
Click the āMarks Labelā, press the CTRL/Control button, and drag it through Likes Label. You will see a blue dot and line that lets you define constraints for the items. Click the āEqual Widthsā. And do the same step from Likes Label to Photos Label.
In case of any problems, here is the GIF below for you.
2. Letās follow with the button below š¤
As you can see, the button looks below the base rectangle view. You can follow the Main.storyboard>Profile Page View Controller > View to reach this section. The only you should do is change the position of the button. You can click and drag it to below Base View2. Here is the GIF for you.
Thatās all, pretty quick! āš»
You can do the same arrangements on the pages that you need. Letās see our final results below! š„³
Here below, you can see how they look in the simulator.
Happy coding!š¤
Please feel free to ask any question about Monday Hero or any step of the tutorial to the Team & Discord Community directly!