How to make an app

Ever wondered where apps come from? In this article we are going to let you in on our secrets, and show you how to make an app of your own!

Off course, the easiest way to make an app is to get us to make it for you! App development is something that can be learned in minutes, but takes years to master, but luckily we have some app development masters on hand to help.

Getting Started

First you need the tools. Our preferred tool is Microsoft Visual Studio. This can be downloaded from the Microsoft website. Offers vary over time but there is generally a free or trial version available if you just want to have a play.

We are going to use the C# programming language, and the Xamarin cross platform technology for this exercise, so when you install Visual Studio make sure you select the ‘Mobile development with .NET’ option:

We are using Microsoft Visual Studio 2022 in this exercise. Over time some things may change (such as menu names), but the general principles stay the same.

Creating a new project

Once you have Visual Studio installed, you need to create a new project. From the top menu select:

File -> New -> Project

In the new project dialog, type ‘Mobile App’ into the search box, then select the ‘Mobile App (Xamarin.Forms)’ template:

Go through the wizard, giving your project a name (this example will be named ‘TestApp’), and selecting the platforms you want to target (normally Android and iOS). Then click the Create button.

From the top menu select:

View -> Solution Explorer

You should see something like this:

Running the project

The first thing we want to do is just run the project so we can see it working. The easiest way to get started is to run the Android project. Android is a platform which is easy to work with on Windows devices (if you are on a Mac then iOS is easier).

You can run the project either by using an emulator, or by connecting your device to the PC using a proper data cable (i.e. not one of the cheaper charging cable which will not carry data). Note – getting the emulator or device connection working can be painful due to the large variety of devices available, so you might need to do some searching on the web if you run into problems. To get the emulator working you need to open the Android SDK manager to download the SDK (Software Development Kit), then you would use the Android Device Manager to create your Android Virtual Device.

To configure the SDK, from the top menu choose:

Tools -> Android -> Android SDK Manager

Once the SDK manager loads you can tick the relevant SDK you want to install. You may choose the latest if you only want to target the latest Android devices, or you may choose an older one to target older devices (and it will probably run on the newer devices as well).

Once the SDK is installed open the Android Device Manager:

Tools -> Android -> Android Device Manager

In here click the ‘+ New’ button to create a new Android Virtual Device emulator (AVD). You can choose the type of device, the Android platform, and other properties for your emulator. Now you can press the ‘Start’ button – the emulator should then load.

Once the emulator is working it should appear in the toolbar in Visual Studio:

We now need to tell Visual Studio which project we want to run. In the Solution Explorer right click on the TestApp.Android project and choose ‘Set as Startup Project’. Select your emulator from the list in the toolbar and press the green arrow Start button beside it. This will do the following:

• Build the software
• Deploy the software to your device
• Run the app

The screenshot below shows this app running on a Pixel 5 emulator:

Modifying the app

To make changes to the app you need to modify 2 things:

• The ‘View’ – this is the visual part of the page that the user sees.
• The ‘Code’ – this is what controls the logic behind the app.

To make changes you need to make sure the app is stopped. Press the red square ‘Stop Debugging’ button on the toolbar.

Now go into the Solution Explorer again. Navigate to TestApp \ TestApp \ Views, and double click on AboutPage.xaml. This will open the view in the editor:

In this file, look for some of the text you can see on the view and make changes to it. For example, in the above screenshot of the emulator find the label ‘Start developing now’ and change the text to something else. Now when you press the start button you should see this changed text on the page.

Writing Code

Now we will make a popup appear when the app loads. In the Solution Explorer navigate to TestApp \ TestApp \ ViewModels, and double click AboutViewModel.cs. In here change the code to this:

    public AboutViewModel()
    {
        Title = "About";
        Application.Current.MainPage.DisplayAlert("Hello", "Hello World", "Ok");
    }

Now run the app and see what happens. You should see a popup appearing as soon as the app loads!

Summary

This was just a very brief tutorial on how to get started building apps. The next step in learning how to make an app would be to look at the code in the files and learn how it works, but hopefully this tutorial gives a small insight into the basics!