Servage Magazine

Ionic is a framework created with Angular for building cross-platform mobile applications using web technologies. The main language for developing with Ionic is TypeScript, which is based on JavaScript. Ionic allows you to create applications for the most popular mobile operating systems by maintaining only a single code base.

Getting Started

If you have used Angular before, getting started with Ionic is easy. If not, don’t worry—there’s only a few commands to run and your first project will be up and running.

The recommended way to create a new Ionic project is to use the Ionic CLI which is a tool similar to the Angular CLI. It can be used to not only create new projects but also new starter code files and to build a working application that you can run in a browser or on a real mobile device.

To get started as quickly and easily as possible, you can install Ionic using npm: “npm install -g ionic cordova”. In addition to Ionic, you must install Cordova. It is the tool that packs your application into a single file you can install on a mobile device. When you have both of the packages installed, you can create a new starter application using Ionic CLI: “ionic start myApp sidemenu”. There are more templates to choose from, but the side menu template is a good starting point.

Running the Application

Now that we have a basic starter project set up, the next step is to get it running in a web browser. Running the application in a web browser is an easy and fast way to test the app, but for final testing you want to run it on a real device. To start the app in a web browser, you can run “ionic serve” in your terminal or command prompt.

Adding Your Own Code

To build a real application, you surely want to write some own code to the starter project. Ionic has some handy tools to help you get started with this. We already quickly talked about the commands Ionic CLI has that you can use to create new code files easily.

Like in Angular, Ionic projects consist of components. A component is a piece of code responsible for a certain functionality in your application. For example, a newsletter sign-up box can be its own component. To create this component, you can use the “ionic generate component newsletter-box” command. This generates new files in your project under the src directory.

Building a Mobile Application

Since Ionic is a framework for building mobile applications, you probably want to build a mobile application, such as an APK file for Android, at some point. Ionic CLI makes this quite easy for you too. The “ionic build android” command can be used to build an Android APK. However, this requires some additional dependencies such as a Java and Android Studio. Building for iOS requires Xcode and a Mac, but the good thing is that you can build for both platforms without making any changes to your code.

After you have executed the build command, you can find the generated installation package for the platform you chose in your project folder. You can then install the app on your mobile device.