So you have an awesome app idea that could become your next/first business, but you have no idea how to code. Maybe you want to show developers what do you want for your app in the best way possible or maybe you just want to start developing mobile apps, but don’t know how to start or maybe you’re just curious. In any case you’ve, come to the right place. In this post I’ll show you how you can start turning your idea into something real.

NO CODE REQUIRED! (for now)

What do you need:

  • Mac
  • Xcode 10 (it’s free)
  • Imagination

Let’s get started

Install Xcode from the App Store if you haven’t already and launch it.

These are the first screens that you’ll see.

This slideshow requires JavaScript.

  1. Click on Create a new Xcode project.
  2. Click on single view app
  3. Pick the name of the app and you probably need to login your apple account. The language is Swift and don’t touch anything else.

Great! you have created your first project.

Let’s start by making some pictures available to our project. You can use any file from your computer. If you want to download some cool images Pexels have an awesome of free pictures you can download.

On the left side, click on Assets.xcassets, then, drag and drop those images just like in the red box. You can come here anytime to add or remove anything you need.

Screenshot 2018-12-15 at 14.26.05

Now also on the left side, click on Main.storyboard. This is where we are going to build the layout for your app.

See the blue rectangle? that’s where you can see all components available, images, buttons, labels and a lot more. We’ll just use these for now.

Go ahead and search for “image” then, drag and drop the component to the screen (view).

Screenshot 2018-12-15 at 14.07.52

Adjust that image component to fill the whole screen. On the right side you can see all the options available for that component. Click on image and choose one of your images. you can also pick, it’s size, opacity, etc. t might not look good at first, but in the Content Mode drop down you have several options like Aspect Fill or Scale to fill. Find out what are the best settings for your picture.

Screenshot 2018-12-15 at 14.09.08.png

Let’s do the same for a button and a label. Drag and drop the components and adjust them to where you want them to be.

Write something cool on the button like “Press Me” and write the name of your app on the label.

This slideshow requires JavaScript.

Now let’s talk about constraints.

Constraints are rules we set for all components. These rules will dictate how components will be displayed on the screen. This is super important for app development. All elements must be in the right place in different screens and this could be challenging to achieve at first. For now let’s just do some basic settings for you to launch your app in a way that looks good enough to show everyone your idea and how cool you are.

How do we set constraints?

First, click on your background image, then in those little buttons on the bottom right, click the second to the right, it says “Add new constraints”

Screenshot 2018-12-15 at 18.55.28

Here is where we define the component’s position. For a background you want all the distances between the picture and the screen boundaries to be equal to 0 (this is in pixels), filling the whole screen. Click on all those four red symbols, they represent the top right bottom and left distances. Then click Add Constraints.

Then do the same for the button and the label choosing the position you wish for those elements. Notice there will be some numbers already picked. That’s because Xcode calculates the position you placed those elements.

You can delete a constraint by expanding the Constraints menu on the left under your components.

I ended up with something like this.

Screenshot 2018-12-15 at 16.13.40

Now let’s create a second screen,

We want a new element called “View Controller”.

This will be your second screen. If it doesn’t need a background you can choose a new color on the right section. Play with those options, there’s a lot we can do here for all components. After that choose the components for that view. This is what I did.

Screenshot 2018-12-15 at 14.38.34

Now the process is equal to the first View, choose the images and the text. Notice The buttons can be either images or text! Do some basic constraints and don’t worry if you’re not sure what to do, i’ll show you something cool in a bit.

This is what I got.

Screenshot 2018-12-15 at 14.57.20

Now we have defined our layout, but we need to actually navigate from the first new to the second. To do that let’s, right click on our first button, drag it to the second view and select “Present Modally” like so.

This slideshow requires JavaScript.

Now you can do the same to the “Back” button and go back to the first screen allowing you navigate through screens. (This is not how it should be done on a real app)

Now lets run the app! Click on that play button and pick either an iOS simulator or your own iPhone (it needs to be connected to the internet).

Screenshot 2018-12-15 at 17.12.45

After running you might get a surprise… your layout might not look as good as you expected, and that’s because of constraints.

Xcode does give some tips and does some of the work for us.

The assistant will tell you what’s wrong and suggest some fixes.

Screenshot 2018-12-15 at 19.52.01

Now you just have to find out what works for you and when it’s done…

Voila!

You just made your first app prototype!

Now you can better express your app idea or start digging more into iOS development.

Take note that some of the steps were not good practice and are not ment for a real app implementation. More tutorials for that will come in the future.

This tutorial is ment for people that have an app idea and want to have a visual representation of that idea.

If you do have an app idea that want to turn into a business let me know.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.