Setup environment of Ionic for Android or iOS app development

Recently, I received a request from our The Elite Gypsies group to create a dedicated mobile app for the group. The app would be available on both Android and iOS and would provide members with the latest news related to our interests, as well as the ability to upload videos, photos, and chat with other members.

This mini series will document the step-by-step process and progress of creating the app for our group. I will provide all the technical details of the app building journey, except the entry into the community and the app itself.

In order to begin the development of the mobile app, the programming environment needs to be set up. I will be using Windows 10, VSCode and Ionic to develop the app so that it can be built for both Android and iOS simultaneously.

Setting up the environment

It is important to ensure that you are using Windows 10 or a later version of the operating system. I am not familiar with the Mac development environment. However, the steps to setup environment might be the same. Try it out.

I will not provide specific details about the components, as it is assumed that you are capable of figuring it out on your own. Additionally, the instructions may be subject to change in the future. You can consult the individual installation guides for each component.

Java Development Kit (JDK) : To install JDK on Windows, follow these steps:

• Download the JDK installer for Windows from the Oracle website: https://www.oracle.com/java/technologies/javase-downloads.html
• Run the installer by double-clicking on the downloaded file. Follow the instructions to complete the installation.
• After the installation is complete, you will need to set the JAVA_HOME environment variable to the location of the JDK installation. To do this, open the System Properties dialog box, click on the Advanced tab, and then click on the Environment Variables button. Under System Variables, look for the JAVA_HOME variable and set its value to the location where the JDK is installed, e.g. C:\Program Files\Java\jdk1.8.0_241.
• To verify the installation, open the command prompt and run the following command: java -version. This should display the version of JDK that you have installed.

Note: Above steps are for Windows. If you are using Mac or Linux, steps may vary slightly.

VSCode : To install Visual Studio Code on Windows, follow these steps:

• Download the VSCode installer for Windows from the Microsoft website: https://code.visualstudio.com/Download
• Run the installer by double-clicking on the downloaded file. Follow the instructions to complete the installation.
• After the installation is complete, VSCode will be available in the Start menu or you can open it by searching for it in the Windows search bar.

Android Studio or Android SDK: You can either install Android Studio or only Android SDK since we are going to develop the application in VS Code.

There are a few steps to install the Android SDK (Software Development Kit) on your computer:

• Download the Android SDK from the Android developer website (https://developer.android.com/sdk/index.html)
• Extract the downloaded file to a directory on your computer where you want to install the SDK
• Open the SDK Manager by running the “SDK Manager.exe” file located in the “tools” folder of the extracted SDK directory
• In the SDK Manager, select the packages that you want to install and click “Apply” to begin the installation process
• Once the installation is complete, you can use the SDK tools to develop and test your Android applications

Setup Android Path variables

• Right-click on ‘My Computer’ and select Properties. Go to Advanced system settings and select ‘Environmental Variables’ option.
• Under the User Variable table, click New to open New User Variable dialog.
• Put ANDROID_HOME as Variable name and provide the path of the SDK folder next to Variable value. Example: C:\Users\thege\AppData\Local\Android\Sdk
• Click OK to close the dialog box.
• Go to the folder where SDK has been installed. Inside the SDK folder look for ‘tools’ and ‘platform-tools’ folder.
• Copy the path for both tools and platform-tools.
• Open ‘Environmental Variables’ dialog box. Go to System Variables table in Environmental Variables and locate the Path variable.
• Edit the PATH variable from ‘Edit system Variables’ dialog box.
• Add the ‘tools’ and platform-tools’ folder’s full path, Example: C:\Users\thege\AppData\Local\Android\Sdk\platform-tools;C:\Users\thege\AppData\Local\Android\Sdk\tools;
• Close the entire opened dialog box.
• This configures the Android. However, to check open the command prompt.
• Type the command ‘android’. This will open the Android SDK Manager dialog box, as shown below. This ensures that the android is configured properly. You should at least get Android specific help.

Keep in mind that you need to close and reopen any open command line windows for the changes to take effect.

Installing Node

• Download the Node.js installer from the official Node.js website (https://nodejs.org/en/download/ )
• Run the installer by double-clicking on the downloaded file.
• Follow the prompts in the installer to complete the installation process
• Once the installation is complete, you can verify that Node.js is installed by opening a command prompt and running the command node -v. This should display the version number of Node.js that you have installed.
• Once Node is installed, you can use npm command to install other tools. The npm stands for Node Package Manager.

Installing Angular

Open command prompt and type following command to install Angular globally.

npm install -g @angular/cli

This will install angular globally as -g stands for global. You can visit https://cli.angular.io website for more instructions.

Installing Ionic Framework

open command prompt and type following command.

npm install -g @ionic/cli

You can visit https://ionicframework.com/docs/intro/cli website for more instructions.

Installing Cordova

Open command prompt and type following command

npm install -g ionic cordova

You can visit https://ionicframework.com/docs/v3/intro/installation/ for more information

Installing Gradle

Gradle is a build automation tool that is often used in Java and Android development. Here’s how to install Gradle on your computer:

• Download the Gradle binary distribution from the official Gradle website (https://gradle.org/install/)
• Extract the downloaded file to a directory on your computer where you want to install Gradle
• Add the bin directory of the extracted Gradle distribution to your system’s PATH environment variable.Open the “Environment Variables”.
• Under “System variables”, scroll down and find the “Path” variable, then click “Edit”
• Click “New” and enter the path to the “bin” directory of the extracted Gradle distribution (e.g., C:\gradle-6.7.1\bin)
• Click “OK” to save the changes.

Once you have set up the path, you should be able to run the gradle command from the command line to open the Gradle.

After installing the tools mentioned above, ensure that they are all working correctly and that there were no errors during the installation process. If you do encounter errors, consult the documentation for each tool for further information.

Now that we have all the necessary tools set up on our system, let’s proceed to building a simple Ionic application for Android.

Create new Ionic application

• Create new folder where you want to create your application.
• Open command prompt and navigate to the folder through DOS commands.
• Type the following command to start ionic application process.

ionic start

• This command will prompt you to provide project name.
• Once you type the project name and press enter, it will ask you to select the templates.
• Select Angular from the list and enter.
• This command will create the application folder based on the project name you have given and create all the necessary files inside that folder.
• Now navigate inside the folder through DOS commands. Make sure you are insider the folder of the project you have just created.
• Type the following command to get all the information about your application folder.

ionic info

• This above command will provide you all the installed versions of the tools required to create ionic application.
• Now type below command to start the ionic application server.

ionic serve

• This command will launch the default browser and start a localhost server for the application we have created, allowing you to view Outlook-style folders in the localhost application at the URL http://localhost:8100/folder/inbox.

Create APK file of the Ionic app

• You need to add Android config files into the app using following command on command prompt.

ionic cordova platform add android

• Once all the required files have been added to the application, we can proceed to building the APK.

ionic cordova build android

• This command will compile your default application and convert it into apk file. You should be able to find the apk file into your application folder example platforms\android\app\build\outputs\apk\debug\app-debug.apk
• Copy this apk file on your android and install the app.

In next entry, we will see how to create our wordpress app into ionic mobile app.