20 min read

How To Make an App? Create an App in 2021 – Complete Beginner Guide

make an app

Well-designed apps with intuitive user experiences outperform traditional websites because of their portability and speed. There is no person that without a smartphone in his pocket, right? The mobile app market is huge, the app development process is not that harsh and competition to create the best mobile app for a business is on. Let us show you how to make an app without coding.

Before we dive into the app-making process, whether you’re starting a mobile app development company or want to create an app for your business, see the most important app-building stages for your app to be a success.

Before we dive into the process of mobile app making, enter the builder and follow the steps shown below.

Enter into Shoutem app builder and start creating your app!

How To Make an App – Step by Step No-Code Guide for Begginers

To create an app from one of our templates, click on Get started! Or Create Your App button. You can also develop an app by creating an account first, but for the purposes of this tutorial, we will complete the process by clicking on the button Get started!

Use pre-built templates that match your business!

Let’s make an app without coding!

Choose between several templates or proceed by choosing a blank app. We will be creating a News App for which we will use the News App template. 

Once the template is chosen, you must register or log in. If you don’t have an existing account already, you need to create one – a verification email is sent upon registration and once the verification is completed, you can proceed to create an app, like in the video below:

Before making an app, select a name of the app

The name of your app needs to stand out – choose a name that reflects the core features of your app, that is short, memorable, and aligned to the names of your developer accounts and of your brand/website.

The name of our website is SYNCD Magazine so we will call our app according to our website – SYNCD. See how here:

Add, remove and rearrange app screens

We have decided that our app will have 2 main functionalities – News and Podcast feed. Besides that, we’d like our app to have:

  1. Social Wall where our users will be able to discuss daily news topics
  2. Notifications – reminders and automated notifications
  3. My profile and Logout
  4. Onboarding

By default, Social Wall requires that an app user is signed into the app to be able to post content on the social wall so we will make all screens protected so that the app requires sign-in/up as soon as an app user launches it.

As we are using the News App template, there are some screens that were automatically added but are not needed for the purposes of our app – Photos, Videos, People and About. We will first remove those: navigate to the screen that you want to delete > click the ellipsis icon in the upper right corner of the settings page > choose Delete.

/We will need a News screen so we can choose to remove the existing content or simply add a new News screen to the app. To remove items from the chosen screen, navigate to the screen in question > find the item that you want to delete > click the Delete icon next to the item./

Once the mentioned screens are removed, it is time to add the ones that we need, excluding the News screen which is already there:

  1. Podcasts – https://shoutem.com/support/podcast-rss/
  2. Notification Center & Notifications settings – https://shoutem.com/support/push-notifications-feature/, https://shoutem.com/support/reminders-and-user-scheduled-notifications/
  3. Social Wall
  4. My Profile & Logout

To add screens to your app, go to Screens > click the + button > find the screen from the categories or type the name of it in the search bar > select a screen that you want your app to have. Once the screen is added to the app, its settings page will open.

Some extensions like Podcasts are not pre-installed so we will need to install them first – go to Screens > click the + button > find the screen from the categories or type the name of it in the search bar > select a screen to install it. Screens that are not pre-installed will not have an Installed label.

Check it out:

Extensions that do not have a screen, like Onboarding, RSS Monitoring, Loyalty, can be (un)installed from the Extension marketplace. Go to Extensions > click the + button > find the extension of your choice > click Install. 

These have their separate settings pages which can be found in main tabs like Settings and Push.

In the Extensions tab, you can update your extensions, remove them and install new ones. If you have any custom extensions, you can find those in My Extensions Tab in Extension Marketplace.

Now that you have all the screens that you need, it is time to rearrange them according to your preference. All screens can be moved and nested by drag and drop. 

The concept of this app is to have four screens on the main navigation and a sub-navigation for the rest of the screens. For that reason, we will add a Navigation screen to the app and nest screens under it once we are done with the main navigation. 

Add content and rename screens

To add content to the particular screen, you need to open its settings page. Content can be added in three ways:

  1. Manually 
  2. By import
  3. Via link (News RSS, Podcast RSS, WordPress, etc.)

Manually

Open the settings page of the screen where you want to add content manually > click ADD ITEM > fill in the information about the item > click ADD.

Screens where you can manually add content, such as News, About, Places, Events, etc, have a rich text editor where you can format text according to your preferences and add tables, lists, photos, links, and videos. 

By import

Open the settings page of the screen where you want to import items > click the arrow next to ADD ITEM button to open a dropdown menu > click Import list > click + Import.

To complete the import, you need to:

  1. Select source (CSV file)
  2. Create improper by choosing a file you want to import
  3. Map fields

A CSV file with the items you’d like to import needs to have columns according to the fields that are relevant to the specific screen where you are importing.

Via link

Open the settings page of the screen where you want to add a source link and paste the link to the Website URL or RSS feed field.

If you are fetching content from an RSS feed, make sure that your feed is formatted by RSS 2.0 guidelines > https://cyber.harvard.edu/rss/rss.html.

Now that you have added content to your screens, it is time to rename them. To do so, navigate to the screen that you want to rename > click the ellipsis icon in the upper right corner of the settings page > choose Rename > insert a new name > click SAVE.

Graphic design – choose layouts of the screens

Each extension has its own layouts you can choose from without using any code. For some, you can choose how the items will be displayed on the screen of choice and how they will be displayed once opened. 

To choose a layout, open the settings page of the screen of choice > open LAYOUT tab > choose a layout. 

Select Main navigation layout, upload icons, and set up the navigation bar

Shoutem app builder has some predefined layouts that are made in line with the most popular UX standards. The user experience encompasses all aspects of the end-users interaction with the company, its services, such as mobile apps, and products, and were the ones we have been known to people and easy to use. See what is in there!

Layout

To select the layout of Main navigation, go to Screens > Main navigation > Layout. Each layout has its own settings which can be configured once the layout is chosen.

Icons

You can choose theme icons or upload your own.

To upload your own icons, go to Screens > Main navigation > Icons > click on the icon you want to change > select My icons > click the + button to upload.

Navigation bar

To upload the navigation bar background image and configure its settings, go to Screens > Main navigation > Navigation bar. Here you can choose if you want this image to be visible on all screens or just on the main navigation, should the title of the screen hide 

Preview the mobile app 

You can preview your app in two ways – from the simulator in the builder and from the Shoutem Preview App for Androids. 

To preview your app from the builder, start the simulator that is positioned on the right side. Your app will begin to build and you will be able to preview it in 2-3 minutes. Each new preview attempt will take 2-3 seconds to load. 

Our builder allows you to preview your app from two different iOS devices – iPhone 8+ and iPhone XS. This perk comes in handy for the creation of app screenshots as well. 

Choose a theme for your application and customize it

How to develop a standout app that will be user-friendly but also original? One of the key elements to achieve that is understanding the app design, its importance, and what benefits one might have from carefully planned and executed app design. Let’s go!

To choose a theme, go to Style > Themes > click Change theme and apply a theme per your preferences

In Style > Customize theme we can customize the applied theme by changing the overall background color of the app, font size and type, color of the buttons, etc.

We will change the basic colors of the application under Basic colors by choosing a featured color, background color and paper background color.

We can also change the colors of the icons in the navigation bar, as well as notch status bar color, status bar text, title, etc. We will change Icons color only for now.

Since we are using Tab bar layout for our main navigation, we will configure settings under Tab bar and Drawer layout. We will change the Selected item background color and border color Tab bar for the selected item.

Our sub-navigation is using Icon grid layout so we will also change Item text and icon color under List, Card list, Icon grid and Tile grid layouts.

Under typography, we can change the font, size, and color of the text. We will now change the font to Rubik Regular, change the size of the title to 15, and change the color of the caption

We can also change the style of overlays, buttons, notifications, etc.

Protect screens and configure settings of other screens

In the Settings tab, you can configure extension settings – this is applicable primarily to the extensions that don’t have their settings pages in the Settings tab. 

Here you can find settings for Shopify, Loyalty, In-app purchases, Users, Onboarding, etc.

We will now configure Protected screens and Onboarding. 

In the Users tab you can manage users, create user groups, protect screens, choose authentication providers, and more (https://shoutem.com/support/users-screen-groups/). To make all screens protected (in which case sign in/up will be required), navigate to Settings > Users > Protected screens and enable Make all screens private. 

In the Onboarding tab, we will upload onboarding screens.

Think about the onboarding process as a user’s first impression of your app. Use that to familiarize your app users with your app and the content they can expect. When a user launches your app for the first time, the onboarding process reinforces your app’s value and provides instructions that highlight key benefits and features. How to make that? See in the next video.

To omit a text in the onboarding process, just add one or two blank spaces to each page title and page description field.

After that is completed, we will move on to app reminders. Push notifications, automated notifications, reminders, and user scheduled notifications can be configured in the Push tab. 

Push notifications are actually short pop-up messages that appear on the user’s screen nudging them to take some action, and they deliver personalized content to each user.

To enable reminders, go to Push -> Notification center -> General > and enable and add a reminder, but first, here you can learn how to use push notifications to improve and promote your app.

To enable automated push notifications which will be sent out when a new podcast is uploaded to your podcast RSS feed, go to Push > RSS Monitoring > enable monitoring > choose a screen with RSS feed.

The notifications that you are to send once the app is published will be visible on the Notification center screen.

Add App info

Once you are done with the previous steps, it is time to make final preparations to get your app published.

In Settings > App info you should upload the launch screen and app icons for iOS and Android. The name of the app has already been added. 

The icon of the iOS version needs to be in size 1024×1024 and the Android version in size 192×192.

These graphics will be visible once the app is installed on a device.

Add Store metadata

Store metadata is basically information on your mobile app that will be readable by a computer and algorithms. When thinking about them, check out the app store optimization since it is one of the most important things at this point in your mobile app development process.

In order for us to publish your app to both App Store and Google Play Store, we need certain pieces of information called store metadata. To add these, go to Settings > Store metadata.

iPhone/iOS section needs to include the following pieces of information:

  1. App title – must be at least 2 characters and max 30 characters.
  2. App Description – an app abstract, purpose and features overview. Must be at least 10 characters, and cannot be more than 400.
  3. Keywords – words by which the app will be more searchable in the store. Maximum of 100 characters separated by a comma.
  4. Support URL – the URL for users to contact for support. It can be website or the Facebook page, but must be a website.
  5. Privacy Policy URL – see more here.

[NOTE: Apps with Beaconstac and Kumulos extension need to include the following: 

  • Reason: why the permission to access the users’ location is needed and under what conditions the location is used
  • Disclosures: will location data of the user be disclosed to the third party
  • User Rights: what rights users have, ie. how they can opt-out of giving this permission (they can enable or disable access to location at any time, through device settings)]
  1. Screenshots – images that represent the app. Minimum of two screenshots are needed for display At least 2 screenshots for each display. See more info here.
  2. iOS developer account – username and password of a developer account are required, an app-specific password isn’t. 
  3. App price
  4. App review contact information – app’s owner first and last name, phone and email.
  5. Application category – Primary category is required, Secondary category is optional.
  6. Application rating – These are all set to None, and it serves to determine the targeted audience.

A short description is optional.

Android section needs to include the following pieces of information:

  1. Title of the app – must be at least 2 characters and max 30characters.
  2. Short description – a sentence about the app, max 30 characters.
  3. App Description – an app abstract, purpose and features overview. Must be at least 10 characters, and cannot be more than 400.
  4. Support URL – the URL for users to contact for support. It can be website or the Facebook page, but must be a website.
  5. Privacy Policy URL – see more here.

[NOTE: If your app has an integration with Beaconstac and/or Kumulos extension, you should add the following as well: 

  • Reason: why the permission to access the users’ location is needed and under what conditions the location is used
  • Disclosures: will location data of the user be disclosed to the third party
  • User Rights: what rights users have, ie. how they can opt-out of giving this permission (they can enable or disable access to location at any time, through device settings)]
  1. Artwork – app icon that will be shown in Google Play Store.
  2. Feature graphic – an image that is displayed next to the Artwork in Google Play Store.
  3. App screenshots – images that represent the app. Minimum of two screenshots are needed for display At least 2 screenshots for each display. See more info here.
  4. Application category
  5. Application price
  6. Google Play Android Developer Account information – owner email and account name.

Application rating is not required.

Invite Shoutem to your developer accounts

Before submitting an app for a Google Play Store, you should invite Shoutem so we can make some final polishing (like entering additional metadata and else).

For the iOS Dev account

Please note that this will work only with business-based accounts. 

  1. Log in to App Store Connect with your credentials at https://appstoreconnect.apple.com/
  2. Click “User and Access”
  3. Click the + button to add a user
iOS Dev account settup
  1. Fill in the user details as follows:
  • First name: Viktor
  • Last name: Marohnic
  • Email: shoutem@shoutem.com
  • Roles: Admin

It should look like this:

iOS Dev account info
  1. Click Invite.

Once we accept the invitation, your app will be submitted to the Apple App Store.

Off the topic, but fun fact – Apple App Store was always a little bit stricter when it comes to the regulations and publishing your apps, but lately, you can publish a Cannabis App without any special demands. There are some rules, of course, but how cool is that?

For the Google Play Dev account

Even though Shoutem Team will take care of the publishing process, think about the most relevant Google Play tags that could describe your mobile app or just the ones you want to be visible for, and pick the Google Play category that is relevant for your app. See more on how to choose between Google Play categories to make it clear.

  1. Sign in to your Google Play developer account via this link https://play.google.com/apps/publish/
  2. On the left side menu, click Users and permissions
  3. Click Invite new users button
Google Play Dev account setup

  1. Insert our email address our email and define a role
    Email: shoutem@shoutem.com
    Role: Administrator
Google Play Dev admin

5. Send us the invitation by clicking Invite user in the bottom right corner.

Once we receive and accept your invitation, we will be able to publish apps to your account while allowing you to retain your overall account privacy.

Publish your app

The final step of your app-making process. Be ready to fight with some publishing mistakes, but try to avoid them the best way possible.

Once you are sure that making an app process is done, and your app is fully ready for publishing, go ahead and click the Publish button

That’s it! You’ve successfully created and published your app and now leave the rest to our team 🔥



FAQs on Making Your Own Mobile Application

How much does it cost to build an app?

The cost of app-making starts at $79 per month (in case you decide to go with an annual plan, the most wallet-friendly option is $59/month). There are a few options too, check them out on our pricing page.

How do you create an app without any coding?

No-code apps are easy to make when using mobile app builders. All the steps needed are explained in the article above, as well as the video tutorials. Start with choosing a template for your app.

How do you make money from an app?

There are a few ways to monetize your business app. Creating a Freemium app, setting up an in-app purchase or subscription model, advertising or sponsorship are just some ways. Read more about top app monetization strategies.

How much does it cost to publish an app on the app store?

In order to publish an app at Apple App Store and Google Play Stores, you must have a Developers account, and it will cost you $99/year for Apple App Store, and a Google Play Store $29 one-time fee.

How to Create an App from Scratch?

First, enter the mobile app builder, and set an app name. After that, take a look at the steps we provided above.

How to validate your app ideas?

Ask some of these questions: is there something similar on the market? Does it fix any of potential users’ problems? Is there any real interest in that app?

How do I start an app business?

Start an app business by applying at our Resellers page. Once you become a reseller, you get a white-label app builder dashboard and will be able to use to create no-code apps for your clients.

How to create an app without coding skills?

Make an app without any code by starting a free trial within Shoutems mobile app builder. The next steps will be described once you start with an onboarding process