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.
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.
Building for Android and iOS using React
We recommend the VS Code IDE to start coding with.
Step 2 – Learn React
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!