How to Create an App – The Ultimate Guide

How do you create an app?

This guide will help you create your first app and get it off the ground as quickly as possible. The goal here is to teach you my process and some basics of app creation. In fact, as I walk you through my step-by-step building process, we will create an app along the way. Because… why not? Otherwise, this post would just be another boring “how-to” and, well… who wants that? So, if you follow along to the end of this guide, you will have built your first web app.

I hope to show you that creating a simple app doesn’t have to be as difficult and time-consuming as some would have you think. In fact, you will learn some easy ways to create an app.

Okay so let’s get to the step-by-step guide to creating an app. Here is the top google search result:

How to create an app for beginners in 10 steps

1. Generate an app idea.
2. Do competitive market research.
3. Write out the features for your app.
4. Make design mockups of your app.
5. Create your app’s graphic design.
6. Put together an app marketing plan.
7. Build the app with one of these options.
8. Submit your app to the App Store.
9. Market your app for maximum exposure.
10. Improve your app with user feedback.
11. Bonus: App making resources.

Now, if that’s what you’ve searched for, click here to read Chris’ post where he breaks down each point in more detail. For this guide, however, I will focus mainly on step #7 of his list, the “time-consuming” building process, though I will briefly touch on the rest. Don’t worry though, I will stick to the point and show you an easy way to creating an app. Step. By. Step.

What you’ll get from this post

In this post, my goal is simple. I want to teach you how to create an app. Specifically, I’m talking about a web-app. You’ll see just how easy it really is to get started. You can then wrap your web-app in a web viewer if you’d like to convert it into a mobile app to install on phones or tablets. This gives it a native feel on each device while allowing you to maintain a single codebase.

You’ll get familiarized with various programming languages and tools to help you create an app all by yourself. You will learn about the software you need to get your app running and make it available on the web. We’ll also talk about app security and various potential threats to our apps.

In the end, you’ll have a functioning environment to host multiple apps on, a ready-to-go template to get you started on your next web-app, basic knowledge to adjust the template or create a new one, and hopefully an appetite to create more apps.

Is there a difference between a mobile app and a web app?

An application that runs directly on a mobile device is called an app. An application designed to be run on the web and accessed from any device is called a web app. I’m not a big fan of that distinction as I can enclose a regular website into a web-view to make it a mobile app. One of those “Po-tay-to and Po-tah-to” situations.

---

What app I’ll create in this post

So, as I said at the beginning of this post, I’ll show you how to create an app by creating one myself. I’ll create an app to help companies comply with current Covid lockdown restrictions. Companies are required to record their employees’ and visitors’ contact information, ask them to affirm they do not have certain symptoms, and so on, in order to enter.

Most companies are going with the pen and paper route and keeping paper records. This poses the potential for human error and long lines at the door. It can also be difficult to retrieve specific forms for a specific employee and a given date. Filing can become cumbersome. We’ll call it TrackO since it’ll keep track of each entry.

The App Creation Pre-Building Process

There are a few things we’ll need to know before we start the building process. We know we want to build an app to help restaurants keep track of visitors. But we need to know the high-level version of how we’ll get the visitor to go to our app, what information to collect etc.

What will TrackO do and how?

In order to avoid causing users to download anything to their phone or typing in a website address, TrackO will use QR codes. A 2019 Global Web Index Study found the adoption of QR codes to have doubled in 2018 as compared to 2015. So we’ll use QR codes as well.

That said, the idea is to give companies the ability to dynamically generate QR codes on demand. They can then print it out, display it somewhere, and ask visitors, customers, and employees to sign in by scanning the QR code. When scanned, the user would click on a link that takes them to a web page to collect the required information. Once completed, their information is then stored in the database.

The Front End

On the front-facing side, the visitor sign-in page needs to be as simple as possible. The simpler and less intrusive, the better. The purpose is to get a visitor’s information and let them move on with their day. Just a few boxes for them to enter their name, email address and phone number will be enough.

To make our lives easier, we’ll find and use a free template. You’ll hear me say this a lot on this blog: no need to reinvent the wheel. If someone has already created something that fits our need and is willing to let you use it for free, why not? We want to create our app as quickly as possible. Just make note of the license that the template is released under and comply with its terms.

The ideal template is built on HTML5 and CSS3. We’ll use Bootstrap, which was designed to allow flexible design with different screen sizes. It automatically adjusts the layout for a better viewer experience.

And with that, we’ve pretty much covered steps 1 to 6 from Chris’ post I mentioned above.

The Back End

On the back end, we’ll also use a template. Again, no need to reinvent the wheel. We’ll need to allow a company to sign up as we don’t want to set each one up manually. The same template as the user-facing form can be used for the sign up process as well. For the admin portion, we’ll use an admin dashboard theme. We’ll just pick a dashboard template we like and edit it to fit our needs. The admin back end willbe used to show some statistics, generate/activate/deactivate QR codes, and control all the relevant settings.

As a whole, we’ll use PHP as the programming language, MySQL (MariaDB) as the database engine, and Apache2 as our web server, all running on Linux. This is what’s called a LAMP stack (Linux, Apache2, MySQL, PHP). Linux is an operating system, and MySQL and Apache2 are popular open-source applications. MySQL creates databases and provides an interface for interacting with them. Apache2 provides a mechanism for browsers to make requests and provides responses accordingly. And then there’s PHP, the most popular server-side programming language on the web.

79.1% of all websites whose server-side programming language is known, use PHP.

W3techs.com

Modular Design

Modular coding is the process of dividing a bigger program into separate smaller programs. Each module is a separate program. Other parts of the bigger system, or application, “call” it to perform a function. Modular coding reuses pieces of code throughout the system without having to rewrite the same lines every time. An example would be a component that talks to the database to connect, store, and retrieve data. Multiple apps can then call and use the same module to communicate with the database. There’s no need to reinvent the wheel. Each program would pass certain variables to the module and get a response back accordingly. Simple.

Advantages of Using Modular Coding when creating an app

1. Ease of Use: It is a very simplistic approach. Rather than dealing with thousands or even millions of lines of code, we can access the function of those lines simply by calling the module when required.
2. Re-Usability: Reuse the module at a different part of the system without re-typing all the same lines again. You can even re-use the same module in a completely different application altogether.
3. Ease of Maintenance: Modular coding results in fewer lines and is, therefore, less error-prone and easier to maintain.

Let’s start creating an app.

Project Overview

Our web app will need the following components:

1. The environment in which it will run,
   • A host machine with a static IP,
     • We’ll use Digital Ocean to spin up a VPS.
   • The webserver (with an SSL certificate),
     • We’ll go with Apache2
     • and a free Let’s Encrypt certificate.
   • The database server,
     • This will be MySQL (MariaDB).
   • Programming language interpreter to process our code,
     • PHP is my go-to language.
   • A domain name (Optional)
     • We’ll register one through Namecheap.
2. The web app source code itself that we will create.
   • First, there’s the front-end portion… the look-and-feel.
     • This is what the user will see. The face of our app.
     • This is where a premade template will save us a lot of time.
   • Second is the code and programming
     • the behind-the-scenes code that will generate our dynamic content.

On top of that, we’ll also need some tools to work with ourselves. At the very least, these are:

1. A web browser (duhh…), I use Chrome
2. A program called Putty to connect to the host machine via SSH,
3. WinSCP to upload files to our web server’s directory,
4. A text editor (yes.. Notepad will do the job)

1. Let’s set up the environment needed to create our app

At the core of what we’re doing, we’ll need to serve web pages via the internet. Therefore, we’ll start by buying a domain name and signing up for a hosting service. Then, we’ll go through the hosting set up by installing a web server, a database server, and PHP, our coding language.

Get a Domain Name for our app

Namecheap.com has been my go-to domain registrar for over 13 years now, and I genuinely recommend them. They offer a very easy to use interface with affordable prices.

So, let’s head over to Namecheap and buy ourselves a domain name. You can also start by checking the availability of a domain name here:

Find a domain starting at $0.88

powered by Namecheap

I would suggest you make it something generic so you’re not tied to only one app. Setting up an account here is super easy so I won’t go into details here.

Once you have purchased your domain name and completed your account registration, you’ll end up at your Namecheap Dashboard.

Click on the “Manage” button to the right of the domain listing. Then scroll down to the NAMESERVERS section and select Custom DNS from the drop-down. Finally, enter the 3 Digital Ocean name servers below, and we’re done.

• ns1.digitalocean.com
• ns2.digitalocean.com
• ns3.digitalocean.com

And with that, we’re done on the Namecheap side.

Get a hosting provider for our app

Now that the domain is set up, we’ll go to Digital Ocean and get ourselves a VPS. Unlike a shared host, a VPS gives you access to the operating system. We’ll need this access to install and customize the environment. If you want a $100 credit for your first 2 months, click here to activate it and sign up.

Add the domain name to Digital Ocean

Once you’ve created your account, we’ll need to let Digital Ocean know to handle our domain name. Here is how.

• Click the green “Create” button toward the top right
• Select “Domains/DNS”.
• Enter the domain name in the provided field.
• Click “Add Domain”

Create a droplet.

The next thing we’ll want to do is to create the VPS. Digital Ocean calls them “Droplets”. Doing this is as simple as adding the domain name.

• Click the green “Create” button. Yes, the same one.
• Select “Droplets”.
• Choose Debian version 10 x64 as the operating system.
• For the Plan, we’ll choose Basic and the $5/mo option.
• Scroll down to the data center selection and choose one.
  • The choice here is up to you but choose the geographically closest data center to you.
• Pick a secure password and enter it in the root password field.
  
  IMPORTANT: Make sure this is a secure password and that you write this password down. The root account is a super-admin account that is unrestricted in capability on your server.
  Also, you will need this outside the browser to log in to your server via Putty in the next section.
  
• Choose a hostname for this droplet.
  • for simplicity’s sake, make it a subdomain like app.yourdomain.com.
  • If you want to use the same server for your main website you can also call it www.yourdomain.com.
• Click the big green Create Droplet button at the very bottom and in less than 60 seconds you’ll have your VPS created.

Set up DNS records

One more thing we’ll need to do inside Digital Ocean is to set up our DNS records telling the internet where to find our app. This will also allow us to use the subdomain to access the server instead of the IP. From the list of droplets (left-side menu click Manage then click Droplets) and copy the IP address of your newly created virtual private server.

Now, go to your domains DNS settings and create the subdomain:

1. Click on the green Create button toward the top right.
2. From the sub-menu, select Domains/DNS.
3. Click on your domain name.