But first, let me do a quick reminder of what Ionic is and what benefits it can bring to web development.
If you are a seasoned pro in Ionic, skip this section and jump straight to the tutorial.
What Is Ionic Used for?
Ionic is a framework that provides a toolkit for creating production-ready mobile apps and progressive web apps.
All you need is to use web technologies you got used to.
Using a single codebase, you can create and run an app on any platform. Besides, Ionic is framework-agnostic, meaning you can integrate it with any front-end framework. Most popular are React, Angular, and Vue (official integration is coming soon).
Besides, you can always rely on the community’s help – there are lots of plugins, starters, templates, and themes to help you keep moving forward. Using them in your projects is time-saving – no need to build every piece of functionality from scratch.
Creating a Reporting App in Ionic
What will you get as a result?
After the tutorial completion, you’ll get an analytics reporting app running. You can deliver it to end-users as a tool for in-depth data analysis. The layout and design of the app will depend on your specific case. You can treat this tutorial as a general approach to building reporting software.
Here’s a brief overview of features your project will be empowered with:
Composing reports with drag & drop
Aggregating, grouping, filtering, and sorting data interactively
Highlighting what matters most with formatting
Saving & exporting reports with a few clicks
And a desire to create an awesome app!
Starting an Ionic Project
We’re going to use React as a front-end framework for the Ionic app. If you’d like to repeat the process in Angular, check out the links in the reference below.
Following the steps from the official guide, create a basic Ionic app. Skip this step if you already have an app.
Next, add the Flexmonster React module:
index.tsx and import the styles of a pivot table control:
src/App.tsx and include the FlexmonsterReact package here:
import * as FlexmonsterReact from 'react-flexmonster';
Right there, create a report based on your data. I took the “Apple mobility trends” dataset from Kaggle and put the CSV file to the
public/assets folder. Our report will show the average mobility values by months in different regions.
Here, the mapping object is defined to prettify the captions of the fields and set their data types explicitly.
Next, embed the pivot table component and set the previously defined report:
Run the app:
npm run start
Creating a Dashboard
Now you have a pivot table that shows the summarized data in your Ionic app. But what if you want to add more visualization elements to the web page?
Here’s where the concept of dashboard comes in handy. A dashboard usually consists of different data visualization components that show data from multiple angles and help answer the question that a data analyst is posing.
Let’s create an interactive dashboard by adding one more element to the page – Pivot Charts.
It can be done in the same way as for the pivot table. The only difference is that you need to turn on the chart mode using options.
Here we composed a slightly different report that highlights other aspects of data:
You’re all set!
Dashboard in the Ionic web app
The next step is to deploy the app on a mobile platform of your choice. Check out recommendations and guidelines on deployment on the official Ionic website.
Once you are done, let’s test the app on a mobile device using a device emulator of Android Studio or Xcode.
Here’s how your mobile dashboard looks on iPhone 5/SE:
To style up the app, you can use the beautiful Ionic UI components.