By using our website you agree with ourPrivacy Policy.

Post Details

Showcase 1: Building an Instagram-Like Travel App | iOS Tutorial

N
Nazli Temurtas

25 Feb 2021

cover

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.

We designed all you need for this app

We designed all you need for this app šŸ¤“

2- First, create and name your project.

Create an iOS project and name it as you prefer. You can name it the ā€œTravel Appā€.

Creating a project

Creating a project.

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

How to export a design from Sketch to Monday Hero. #sketchtocode

How to export a design from Sketch to Monday Hero. #sketchtocode

From Adobe XD To Monday Hero

How to export a design from Adobe XD to Monday Hero

How to export a design 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.

Exported screens in a project. w/Monday Hero

Exported screens in a project. w/Monday Hero.

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.

Creation of collectionView and defining the cell prototype

Creation of collectionView and defining the cell prototype.

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.

Button examples with different properties

Button examples with different properties.

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.

How to create a button in Monday Hero

How to create a button in Monday Hero.

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.

TableView and Cell Prototype in Profile Page

TableView and Cell Prototype in Profile Page.

And here is a GIF below, if you have trouble creating the TableView component.

Create TableView

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.

List Page and TableView component

List Page and TableView component.

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.

Buttons on the Home Page

Buttons on the Home 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.

How to export all screens in the project

How to export all screens in the 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ā€¦

A folder that is full of your design, assets, fonts, colors, layouts and the CODE

A folder that is full of your design, assets, fonts, colors, layoutsā€¦ā€¦ and the CODE. šŸ¤“

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.

The texts that we will define equal widths, and how it looks in Xcode

The texts that we will define equal widths, and how it looks in Xcode.

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.

The pop-up options to define widths

The pop-up options to define widths.

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.

How to define widths in Xcode

How to define widths in Xcode.

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.

How to change the position of the button in Xcode

How to change the position of the button in Xcode.

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.

Tutorial results

Tutorial results šŸ¤©

Happy coding!šŸ¤“

Please feel free to ask any question about Monday Hero or any step of the tutorial to the Team & Discord Community directly!