Learn to code: Mobile apps

Introduction

What is a mobile app?

A mobile app is a software program or application built specifically for a mobile phone handset. So just like you use different desktop programs on your laptop to read emails, play games, socialise with your friends, so apps are built to offer these services on mobile phones. But we know what you really want to know: how can you go about bringing your own little square on your smartphone screen into existence?

Why build a mobile app?

Although it shares the same principles of building a desktop software program, it’s the accessibility and mobility which makes building an app a far more attractive project for any budding developer. Solve everyday problems with time-saving tools, motivate people to lead healthier and fitter lives, or create entertainment on-the-go: a program for a mobile phone means putting your idea straight into people’s pockets.

How can I create a mobile app?

If you’ve got an idea to solve an everyday problem or a creative concept for the next viral game, you might be wondering how you can create your own mobile app to unleash out into the world.
There are a few fundamental questions you’ll need to answer before you start learning to code your own app…

  • Which operating systems will be targeted, iOS or Android or both? There are other operating systems but iOS and Android make up more than 99% of market coverage in the UK.
  • Which versions of the operating systems will be targeted? You could target only the latest version of Android (9.0) but that will only be around 50% of Android devices in the UK. A good rule of thumb for Android and iOS is to target the latest two versions.
  • Mobile, Phablet and/or Tablet? You can limit yourself to only mobile phones, or you can target tablets as well. If you target Tablets you will need to design your app to look good for both small and larger screens.
  • What kind of device functions does the app need to link into? Do you want to use the devices camera, contacts, calendar or other functionality?
  • Who is building the app? If it’s just you, ask people to test it and give you feedback. If your working in a team, a project or SCRUM master will help you keep the build on track.

The difference in native, web-based and hybrid

Depending on your answers to the previous questions you may need to tailor your choice of tech stack to work with. Here is a run down of the options when picking your tech stack to work with.

Native apps

Apps are more often than not developed with one mobile-operating system in mind, and these are called native apps. The everyday example of native apps are Android or iOS. Developers creating native apps consider best-practice development processes of the mobile platform, to maximise the functionality and performance of the program. Something developed specifically for iOS, therefore, will not run or even be available to download on a mobile device which uses Android.

Web-based apps

These apps, by nature, require an internet connection to serve the intended user experience. Built using web frameworks such as HTML/CSS and Javascript, they use the internet to load the data necessary to run the app avoid using memory on individual devices. You can extend this style of app into an offline first downloadable app. This is called a progessive web app and can be downloaded and used on either Android or iOS. PWA’s also don’t require you to go through the relevant app store.

Hybrid apps

A combination of native and web-based technologies, hybrid apps are built using HTML5, CSS and JavaScript in much the same way as web apps, but are compiled into separate apps for each targeted operating system before deploying to any device. These function locally on the device inside the native framework. They have the advantage of running on multiple mobile platforms but at a lower quality.

Building for Android and iOS using React

Now we have an idea about the range of options when it comes to building a mobile app, we will focus on the web-based progressive web app route. This allows us to build using JavaScript, a very popular language with lots of tutorials out there on the Web. We can also get the app working for the web and as a downloaded mobile app. Another great benefit is that we can use this on Android and iOS and not need a Mac to develop on.

We could use any number of JavaScript frameworks out there to build a PWA, but the one we will use in this guide is currently the most popular, React. React is a JavaScript UI Library and was created by Facebook with performance in mind, so it helps us built fast responsive user interfaces. Another advantage is if we wanted to get closer to native apps we could later transition from React to React Native, which also uses JavaScript and a lot of similar concepts to React, making the learning curve easier.

Step 1 – Learn JavaScript
JavaScript is a programming language that allows you to add interactivity to web pages. You will want to learn to code with it if you are going to work in web development or build hybrid mobile apps. There are a number of great JS courses online, some paid and some free. Here are some recommended free resources to get started with.

We recommend the VS Code IDE to start coding with.

Step 2 – Learn React
As mentioned above, React is a JavaScript UI Library built by Facebook. It is free to use and is currently the most popular library for building JS user interfaces. Once you have a good grounding in JavaScript you will need to move onto React. Here is a good place to start. Create React App (CRA) is a brilliant tool to help you get started with a React application. It also comes with built in PWA setup (which we will use later).

Step 3 – Add offline functionality with service workers
At this point you should have a basic web app working with CRA along with any functionality you have added. You could host this as a web app and access it via a phone’s browser. We are going to go a step further and make the website work offline (currently it only supports online mode).

A service worker is a script that the browser runs in the background which can be used to tell the browser where to load data from, be it from a remote source or a local cache/ database. You should read up on service workers to learn more.

As a minimum, you can turn on CRA’s default behaviour for offline functionality. Here is a simple guide to do this.

Step 4 – Use chrome extension Lighthouse to check for PWA compatibility
A web app needs to meet a set amount of criteria to be classed as a PWA. Once we have enabled offline functionality with a service worker on a create react app application, most of the remaining criteria is around metadata and app icons.

There are tools out there that can help point out which criteria we are missing. One of these tools is a chrome plugin called Lighthouse.

Go through the checklist using this tool to add the final items to your app to satisfy the PWA criteria.

Step 5 – Host your application and download app via your website
The final step is to host your application and access it. You can use any hosting provider of your choosing. Heroku, AWS and Firebase are all good options. Firebase is free and relatively simple to use so go ahead and try it out. 

Firebase will take care of the SSL certificate for you so your site should be served from a https:// url. Now you can access your site on a mobile device and download it as a mobile app. On Android, this will take the shape of a download banner. On iOS, you will need to select share and add to homescreen.

Congratulations! You now have a fully working web and mobile app!

This is only an introduction into mobile app development. Join us at our next taster day to learn how to use JavaScript, HTML and CSS to build an app in an afternoon.

Free Taster Days

Come and learn to code a web app, and get a glimpse into the day in the life of a _nologist. We’re a friendly bunch here at _nology: with plenty of professional advice to share with anyone curious about the job potential of learning to code. If you’re inspired by the prospects of a career which is not only creative and challenging but rewarding too - join us at one of our free taster days in Bristol or London.

Become a developer in 12 weeks

Feeling inspired by the potential of a career in tech? So are we. Book a call with the team today. of Sign up to learn more about joining our 12-week tech training course, and introduce yourself to the _nology team!