10%

Try : Insurtech, Application Development

Edtech(5)

Events(31)

Interviews(10)

Life@mantra(10)

Logistics(1)

Strategy(14)

Testing(6)

Android(41)

Backend(28)

Dev Ops(2)

Enterprise Solution(20)

Frontend(28)

iOS(38)

Javascript(13)

AI in Insurance(24)

Insurtech(57)

Product Innovation(34)

Solutions(13)

Augmented Reality(7)

Customer Journey(7)

Design(6)

User Experience(21)

Artificial Intelligence(93)

Bitcoin(7)

Blockchain(14)

Cognitive Computing(7)

Computer Vision(6)

Data Science(13)

FinTech(41)

Intelligent Automation(25)

Machine Learning(43)

Natural Language Processing(10)

Learn Ionic Framework From Scratch in Less Than 15 Minutes!

13 minutes, 33 seconds read

You’ll be amazed to know that globally, nearly 62% of users access the internet through mobile last year. By the end of 2020, the number of smartphone users is going to reach 2.87 billion. 

This is huge, isn’t it? But, this also raises a question — are desktop/web applications dying?

Developers frequently face this dilemma of which platform to learn for web/mobile app development. Fortunately, hybrid app development platforms and frameworks answer this question. Let me quickly walk you through hybrid mobile app creation before delving deeper into Ionic Framework.

What is a hybrid mobile app?

You might have encountered terms like native and hybrid mobile apps. Developers use these terms to describe the underlying technology behind building the apps. A hybrid mobile app is built using technologies like HTML, CSS, and Javascript, which are compatible with web applications as well. 

On the contrary, native apps are the ones that are developed on android/iOS technologies specifically. However, an external user cannot figure out whether an app is a hybrid or native. 

Many platforms and frameworks allow building impressive hybrid applications like Ionic, React Native, Xamarin, Onsen UI, PhoneGap, and Mobile Angular UI. In this article, we’ll discuss the Ionic Framework in depth. I’ll also explain why we’re choosing Ionic for hybrid app development. After reading this, you’ll be able to install Ionic SDK, build and run your apps from scratch.

Happy coding!

Why Ionic Framework?

Ionic is one of the most popular frameworks for developing hybrid apps available today. Its complete source code is available on GitHub. With the Ionic framework, anyone can start creating effective android apps just with an idea, a computer, and an internet connection. 

Did you notice — I didn’t mention pricing?

That’s true. You need not buy a license for Ionic. Thus, you can start developing apps for free.

  1. Cross-platform: The application you develop once in Ionic is compatible with web, Android, iOS, Windows, and some other operating systems. You’ll only need a handy knowledge of Javascript. Also read – Trending Javascript Frameworks for 2020
  2. Frontend development: Ionic uses AngularJS for front-end development. Angular’s CSS and Javascript features allow you to customize your app with buttons, menus, and several attractive color schemes. You can apply derivative and UI elements while you launch your app on different platforms and whoa! Your app just now got a native look.
  3. Developers community: With a vast and active community, you’ll always find help at hand for any problem you face while developing apps on Ionic.
  4. Cordova plugins: This is one of the best parts of Ionic app development. It opens the doors to native device capabilities beyond pure web applications. With Cordova, you get access to logs, battery, geolocation, camera, etc. to enhance your app performance. And you can avail these all by adding just a few simple codes.
  5. Code reusability: Once you’ve developed an app, you can use the same code with slight changes to build an entirely new app. This will help you a lot in improving your TAT (Turn around time).
  6. Testing: Testers can easily run the script using Cordova commands for both iOS and Android.

Now let’s get started with Ionic Framework!

Quick Installation Guide for Ionic & Components

Let’s start with minimum basic requirements for building your app with the current release of Ionic. Currently, Ionic targets iPhone and Android devices supporting iOS 7+ and Android 4.1+. However, you’ll find some old Android devices, where Ionic apps might not work. 

If you’re on Windows, make sure you download and install Git for Windows and optionally Console2. In this guide, you’ll be executing commands in Git Bash or Console2 windows.

First, we need to install the most recent version of Apache Cordova. It will take your app and bundle it into a native wrapper to turn it into a traditional native app.

To install Cordova, make sure you have Node.js installed and then run the command – 

$ sudo npm install -g cordova

Special Notes:
Linux Android Note: If you’re using a 64-bit version of Ubuntu, install 32-bit libraries. It is because Android is only 32-bit at the moment. You can use the following command-

$ sudo apt-get install ia32-libs

If you’re on Ubuntu 13.04 or greater, ‘ia32-libs’ has been removed. You can use the following packages instead-

$ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0

If you are running a 64-bit version of Fedora you’ll need to install the following 32-bit packages-

$ sudo yum install -y glibc.i686 glibc-devel.i686 libstdc++.i686 zlib-devel.i686
ncurses-devel.i686 libX11-devel.i686 libXrender.i686 libXrandr.i686

Windows note on Java, Ant, and Android: Install the most recent Java 8 JDK and not just the JRE. Currently, Cordova doesn’t support JDK 9. 

Next, create an environment variable for JAVA_HOME. It should point to the root folder where the Java JDK is installed. For example, if you’ve installed the JDK into C:\Program\Files\Java\jdk7, set JAVA_HOME at this path. Post this, add the JDK’s bin directory to the PATH variable as well. As per previous assumption, it should be either %JAVA_HOME%\bin or the full path: C:\Program Files\Java\jdk7\bin

Apache Ant

To install Ant, download the zip file (here), extract it, and move the first folder in the zip to a safe place. After this, update your PATH to include the bin folder in that folder. For example, if you moved the Ant folder to C:/, you’d want to add this to your PATH:

C:\apache-ant-1.9.2\bin

Android SDK

It is important to install the Android SDK. Android SDK provides you API libraries and developer tools which are necessary to build, test, and debug Android apps.

You’ll need to set the ANDROID_HOME environment variable. Point this to [ANDROID_SDK_DIR]\android-sdk directory. For example, 

C:\android\android-sdk

Next, you’ll need to update your PATH to include the tools/ and platform-tools/ folder in that folder. Therefore, using ANDROID_HOME, add both %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools.

Install Ionic

Run the following command to install ionic:

$ sudo npm install -g ionic

Create the project

$ ionic start todo blank –type ionic1

This will create a ‘todo’ folder in the directory where the command was run. Next, go into this directory and list the contents. This is how the outer structure of your ionic project will look like: 

$ cd todo && ls

├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks      // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms  // iOS/Android specific builds will reside here
├── plugins    // where your cordova/ionic plugins will be installed
├── scss       // scss code, which will output to www/css/
└── www        // application – JS code and libs, CSS, images, etc.

Configure Platforms

Next inform ionic that you want to enable iOS and Android platforms. Please note, unless you’re on macOS, leave out the iOS platform. So, run the following commands.

$ ionic cordova platform add ios
$ ionic cordova platform add android

Basic code structure in the Ionic Framework

Let’s now walk through the anatomy of an Ionic app. Inside the folder (we just now created), we’ve a typical Cordova project structure where we can install native plugins, and create platform-specific project files.

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up scripts, CSS includes, and bootstrap, or start running our app. We won’t spend much of our time in this file.

For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

<ion-app></ion-app>

and the following scripts near the bottom:

<!– Ionic’s root component and where the app will load –>
<ion-app></ion-app>
<!– The polyfills js is generated during the build process –>
<script src=”build/polyfills.js”></script>
<!– The vendor js is generated during the build process
  It contains all of the dependencies in node_modules –>
<script src=”build/vendor.js”></script>
<!– The main bundle js is generated during the build process –>
<script src=”build/main.js”></script>

These scripts are all generated by the build system, so no need to worry about them. 

./src/

You’ll find your code inside the src directory. And you’ll be doing most of the work for an ionic app here. While running the ionic server, the code inside src/ is transpiled into the correct Javascript version, which a browser understands. Currently, it’s ES5. This means that we can work at a higher level using TypeScript, but we can also compile down to the older form of Javascript depending on the browser needs.

src/app/app.module.ts is the entry point for our app.

Near the top of the file, we should see this:

@NgModule({
  declarations: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HelloIonicPage, ItemDetailsPage, ListPage],
  providers: [StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

You’ll notice that every app has a root module, which controls the rest of the applications. You’ll find this very similar to ng-app from Ionic 1 and AngularJS. We’ll also bootstrap our app (using ionicBootstrap) from here. 

./src/app/app.html

Here we’ll discuss the main template for the app in src/app/app.html.

First, set the root component to MyApp in src/app/app.component.ts. This will be the first component to load in your app. Typically, it is an empty shell for other components to load into it. We’ll set our app.component.ts template to src/app/app.html. This is how it will look. 

<ion-menu [content]=”content”>
  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item *ngFor=”let p of pages” (click)=”openPage(p)”>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]=”rootPage” #content swipeBackEnabled=”false”></ion-nav>

Test it out:

To make sure that the default project works, try building and running the project (substitute iOS for android to build for Android instead):

$ ionic cordova build ios
$ ionic cordova emulate ios

Deployment

Android Devices

Deploying to an Android device is a fairly straightforward process. If you have a working Android development environment, you’re ready to go.

Requirements:

Running Your App

Enable USB debugging and Developer Mode on your Android device. Then run ionic cordova run android — device from the command line.
This will produce a debug build of your app, both in terms of Android and Ionic’s code.

Please note that enabling USB debugging and Developer Mode may vary from device to device. However, it is easy to look up with a simple Google search. For details, you can check out – Enabling On-device Developer Options in the Android docs.

Production Builds

To run or build your app for production, run

ionic cordova run android –prod –release

(or)

ionic cordova build android –prod –release

This command will minify your app’s code as an ionic source. It will also remove any debugging capabilities from the APK. People generally use this while deploying an app to the Google Play Store.

Sign Android APK

For releasing your app in the Google Play Store — sign your APK file. For this, create a new certificate/keystore.

Let’s generate your private key using the keytool command that comes with the JDK:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

Now, you’ll be prompted to create a password for the keystore. After answering the rest of the nice tool’s questions, you’ll have a file called —  my-release-key.jks in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks app-release-unsigned.apk my-alias

After signing, one final step — you’ll need to run the zip align tool to optimize the APK. You’ll find this tool at-

/path/to/Android/sdk/build-tools/VERSION/zipalign. 

For example, on OS X with Android Studio installed, zipalign is in ~/Library/Android/sdk/build-tools/VERSION/zipalign:

zipalign -v 4 app-release-unsigned.apk HelloWorld.apk

If you want to verify that your apk is signed, run apksigner. You can find this in the same path as the zipalign tool:

apksigner verify HelloWorld.apk 

Now we have our final release binary called HelloWorld.apk and we can release this on the Google Play Store for all the world to enjoy! 

iOS Devices

iOS developers need to generate a provisioning profile for code signing their apps for testing. However, the good news is that you can develop and test your apps on your iOS device without a paid Apple Developer account in iOS9. This is particularly great for developers who want to try mobile development using the Ionic Framework.

You’ll require- 

  • Xcode 7 or higher
  • iOS9 

Creating a Provisioning Profile

First of all, you’ll need to set up a provisioning profile for code signing your apps.

Using an Apple ID

  1. Open Xcode preferences (Xcode > Preferences…)
  2. Click the ‘Accounts’ tab
  3. Log in with your Apple ID (+ > Add Apple ID…)

Once you’ve logged in successfully, you’ll find a new ‘Personal team’ with the role ‘Free’ appearing beneath your Apple ID.

Ionic Framework: creating a provisioning profile

Running Your App

  1. Run a production build of your app with ionic cordova build ios –prod
  2. Open the .xcodeproj file in platforms/ios/ in Xcode
  3. Then connect your phone with USB. Select your phone as the run target.
  4. Click the play button in Xcode

Oops, code signing error! No problem.

Code Signing Your App

It totally depends on whether you’re using Xcode 8 or an earlier version…

Xcode 7 and Earlier

For this, you’ll get a code signing error. It will look like the following image when you try to run the app.

Code sign error in Ionic Framework

To fix this, click the “Fix Issue” button and then select your “Personal Team” profile.

Code sign error fix issues

Xcode 8

In Xcode 8, the code signing error will appear as a build-time error instead of a pop-up.

Code sign error in Xcode 8

To select the certificate to sign your app with, do the following:

  1. Go to the ‘Project Editor’ by clicking the name of your project in the ‘Project Navigator’
  2. Select the ‘General’ section
  3. Select the team associate with your signing certificate from the ‘Team’ dropdown in the ‘Signing’ section
Ionic Framework: how to code sign

Trusting the Certificate

After code signing, you’ll get a launch error that looks like the following image. On Xcode 7 and below versions, you’ll see this automatically. On Xcode 8, it appears next time when you try to run the app.

launch error

To remove this error, you’ll have to tell the iOS device to trust the certificate. You can do this in the following steps-

  1. On your iOS device, open the ‘Settings’ app
  2. Then, go to General>Device Management. Here, you’ll find the email address associated with your Apple ID or Apple Developer account, which you used while code signing your app.
  3. Tap the email address
  4. Tap ‘Trust <your_email>’:
device management in ionic

After this, go back to Xcode and hit the play button. Or you can run ionic cordova run ios –device from the command line to install and launch your app on your iOS device.

Additional tips while using the Ionic Framework

1. Use or create a yeoman generator

Yeoman is a scaffolding tool that allows you to quickly deploy pre-configured projects. A place to start is exploring some of the Ionic Yeoman generators to see if they meet your requirements. 

Ionic Framework does have some excellent inclusions. But, you may want to customize your development environment with tools like javascript linters, code coverage support, emulators, and platform integrations to further improve your application. Yeoman generators also expose you to different folder structures, which you might find better than previous approaches.

2. Just put styles in www?

It may be tempting to rush into things and throw new scss files into the www folder; somewhere near the code for the Ionic styles and then add a reference to your CSS file within the index.html. 

Avoid that! 

This won’t work with the Ionic Gulp set up. It’s a safe practice to not to add things in there.

3. Put your custom app styles into their own folder

Today, your app might be small and simple. But, it will eventually grow and you might want it to remain manageable. You might be concerned especially when a team of developers will be involved in the project. 

Hence, I recommend splitting your app’s custom styles into a neater set of files. It should mirror Ionic’s sass files whenever we’re specifically overriding Ionic itself. You can put these custom app styles into their own sub folder, which will be easy to change/update later.

Now that you know that Ionic is the dominant hybrid mobile development framework, installing it, and using it is also easier as compared to other platforms. Do let me know if you have queries, I’ll be happy to help.

About the author: Anand Nanavaty is a Software Engineer at Mantra Labs. He has been involved in mobile app development for the company’s B2B clients. Apart from coding and experimenting with different application development frameworks, Anand likes trekking and hiking into the greens.

Related articles-

Cancel

Knowledge thats worth delivered in your inbox

MantraTalks Podcast with Parag Sharma: Delivering Digital-first Health Experiences for Patient Care in the New Normal

6 minutes read

The healthcare industry took the brunt of the Covid-19 pandemic from the very beginning. It was, and still is, a humongous task for hospitals to deal with the rising number of COVID patients as well as handling the regular consults. 

To delve deeper into the state of healthcare in the COVID times, we interviewed Parag Sharma, CEO, Mantra Labs Pvt Ltd. Parag shares his insights on how technology can help in delivering digital-first health experiences for patient care in the New Normal.

Parag is a product enthusiast and tinkerer at heart and has been at the forefront of developing innovative products especially in the field of AI. He also holds over ten years of experience working in the services line and has been instrumental in launching several startups in the Internet & Mobile space. His rich domain expertise and innovative leadership have helped Mantra climb to the top 100 innovative InsurTechs in the World – selected by FinTech Global. 

Catch the interview:  

Connect with Parag- LinkedIn

COVID-19 and Its impact on Healthcare Organizations

Considering the COVID situation, according to you how has COVID-19 impacted the IT & service operations among healthcare organizations?

Parag:  Since the onset of COVID-19, the healthcare sector has been deeply impacted. Institutions are facing a serious crunch in manpower. IT support systems which were usually manned and managed by a large team of IT professionals are not available in the same strength. Resource allocation’ is one of the biggest concerns due to physical and mental exhaustion of the healthcare workforce. 

Hospitals are facing issues such as operational disruption due to staff quarantine, supply-chain delays and sudden decline in patient footfalls, difficulty in sustaining fixed costs, etc. People are not comfortable getting out of the safety confinements of their homes due to the rising risk of getting infected with the virus. Hospitals will have to reassess their future strategy and budgets in light of the uncertain economic situation.

Preparing for the Future

What can hospitals do to ensure the continuity of their customer-facing operations in the wake of a second Pandemic wave?

Parag: There are many things that hospitals can do to manage themselves in this hour of crisis. Being more digital than what they are would be one step forward for all of them. They can bring their IT systems to the cloud so that the person can access data and manage their work remotely. They can enable their patients to book appointments and enquire about services through apps and chatbots which won’t require them to call the reception or come to the hospital. These are some of the services which hospitals can provide to their customers with minimum physical contact. 

Related: Manipal Hospital’s move to a self-service healthcare mobile application

Hospitals can extend Telehealth services to their patients. Recently, telehealth has proved to be useful especially when there is asymmetry between the number of patients and healthcare providers. I think it will be very useful for healthcare institutions to deploy telehealth solutions to provide medical facilities to people who have so far been outside the benefits of healthcare.

New Expectations in Health Experiences

Is consumer behavior defined by the ‘new normal’ going to change the way we access healthcare from this point on?

Parag: Yes, people will expect a completely different way to access healthcare services from now on. Hospitals should gear-up and rise to this occasion. The pandemic has also provided a new opportunity to adopt a completely different approach in the way healthcare is delivered. They always felt that medical care cannot be provided remotely but now this is happening and people are appreciating remote healthcare services. Hospitals and healthcare institutions are convinced that telehealth and remote care will be more successful soon.

Technology in Healthcare can Bridge Operational Gaps

What are the operational challenges, as far as digital capabilities go, that hospitals are facing currently? And, what steps must they take to bridge these gaps?

Parag: Operational challenges are not just digital challenges. But a lot of these challenges can be addressed with technology. For example, Electronic Health Records which hospitals manage within the premises can be moved to the cloud so that the person can access these records on the cloud itself and need not come to the hospital. 

Related: Medical Image Management: DICOM Images Sharing Process

Secondly, if you deploy telehealth and telemedicine solutions, irrespective of where your patients are or doctors are, hospitals can deliver the required care to its patients. You can even extend your diagnostics services to your patients by giving them an application through which they can seamlessly book appointments for consults, diagnostics, or pathological services and resolve their queries, etc. Simply by giving a seamless interface either through bots or applications can go a long way in providing better health experiences to the customers.

Role of Chatbots in Superior Customer Experiences

According to you, what role does chatbots powered by Artificial Intelligence have in the Healthcare CX landscape?

Parag: Chatbots are the simplest example of the implementation of AI-based technology in healthcare. There are a lot of things which bots can do simplistically. For example, if a patient wants to book an appointment with the doctors, instead of going through a complex web applications and interfaces, what if I can simply write “I want to book an appointment with the doctor Dr. XYZ at 4 pm” and the bot can figure out in case the time slot is available with that particular doctor, it will confirm the appointment followed by a payment process if the payment has to be made upfront. 

Apart from this, you can extend your bots to provide e-consultations where doctors can do remote consultations via audio and video features of a chatbot. So there is a huge scope for bots beyond answering routine queries by customers or booking appointments. It does not stop just there. You can extend chatbot functionalities to support functions such as admin, HR, finance, and business process efficiency so that they can provide better services to their customers.

Related: Healthcare Chatbots: Innovative, Efficient, and Low-cost Care

Chatbot Use Cases in Healthcare

Could you tell us some possible bot use cases for delivering better customer experiences to digital health users?

Parag: Apart from booking appointments and resolving customer queries, these bots can conduct remote consultations, internal processes, health symptom checker, out-patient video consultation, second opinion consultation, ordering medicines, psychological counseling & mental wellness, scenario-based risk advice, Heroism Recognition for employees, etc. Also, it can be further extended to help patients enquire about health insurance related queries, and all the interactions between insurance companies and hospitals can be provided to the patient. 

Related: Healthcare & Hospitals Use Cases | Digital Health

The Road Ahead

COVID-19 has forced hospitals to revise patient support strategy with limited operational staff that is bringing every day a new challenge. A way out is to heavily rely on digital innovation.

In India we have a disparity between the no. of healthcare providers and care seekers. Without technology, I don’t think there is any way healthcare institutions will be able to scale to a level where they can provide meaningful services to such a large number of people. Hospitals can invest in setting up an information exchange; making the process as seamless as possible; and removing all possible inefficiencies from the supply chain through technology.

Future growth for hospitals will come from digital technology because patients will opt more for digital platforms. And it is up to hospitals to catch up with the pace at which modern technology is developing. We, at Mantra Labs, have achieved several use cases including hospitals/diagnostic centers that are able to deliver superior health experiences.

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...
Go Top
bot

May i help you?

bot shadow

Our Website is
Best Experienced on
Chrome & Safari

safari icon