DEV Community: Enappd

How to know if a React Native App goes to background ?

Vaibhav Gehani — Wed, 07 Sep 2022 20:34:45 +0000

How to know if a React Native App goes to the background?

We all question sometimes — Is it possible to know if a React Native app has gone to the background? Is there any callback or event which can be captured? The answer is AppState. As a bonus, we will cover adding a security screen to react native application.

In this article, we will go through AppState API and implement a scenario having a security screen that will be shown while switching between apps and while the app is in the foreground.

AppState

This API helps us to know the state of App if the app is active , inactive, or in background.

This API can be used in several use cases :

Handling Push Notification
Adding Security Screen.

In other words, any event you want to perform while switching app between active to foreground OR foreground to background OR background to active. Any of the cases can be handled using AppState API.

In Background, AppState API is using native functionality to trigger these events, like for iOS it uses Life Cycle Events and those events can be Scene Based or App Based.

Step 1 — Implementing AppState API

To implement AppState, we just have to import it from React Native and add a change Event listener. That event listener will provide the value of “what will be next /upcoming state for the application”. Using this we can trigger some code on State change.

appStateVisible holds the value of the current state of the application. We can only see the active state. But events can be triggered either in background, or foreground (because appState is indirectly using the Native Life cycle events).

Step 2 — Implementing security screen using AppState API

A security screen is a kind of blank screen that will appear while we are not active on the application (In other words, when we are not using the app there will be a blank/empty screen).

In above video, you will see if the app comes in the foreground (while switching the app) then a blank screen would appear. And if the notification section is scrolled down, in that case also you will see a blank screen for a moment. It is the security screen to protect our data/view, while we are not on the app.

The logic of creating this security screen is quite similar to the above logic, we just have to add a condition to check the current state. If appState is in background or foreground state, then we have to show the blank screen and if app is active , render the main content in App.js

In the above code, you can render your main content in appStateVisible == ‘active’ and if you want to add any content to the security screen then add code in the else part.

Conclusion

We know how we can handle situations where the app is in the background or foreground. There can be various scenarios “how to call API when the app is in the background”, “how to handle push notifications when the app is in the foreground or background” or “how to show the security screen while app is in the foreground”. Now we can handle these situations easily using AppState API.

Stay tuned to get more ways to use different inbuilt React native APIs.

Next Steps

If you liked this blog, you will also find the following React Native blogs interesting and helpful. Feel free to ask any questions in the comment section

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision | Pull to Refresh
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Migrating Ionic Cordova to Capacitor application — Complete Guide

Vaibhav Gehani — Sun, 04 Sep 2022 03:28:05 +0000

Migrating Ionic Cordova to Capacitor application — Complete Guide

Here is the complete guide to converting the Ionic Cordova application to Capacitor (this article works best for Ionic version 5/6 Angular). These days most of the developers are moving to the Capacitor, as it has more stable plugins than Cordova, and Apache has stopped support for the Cordova platform. In this tutorial, we will not just go through the commands to convert Cordova to capacitor but the complete process of converting a Real life Cordova app to Capacitor. Yay !!

Capacitor — How is it different from Cordova?

This section is relevant to only those who have been working with Ionic / Cordova for some time. Cordova has been the only choice available for Ionic app developers for quite some time. Cordova helps build an Ionic web app into a device installable app.

Capacitor is very similar to Cordova, but with some key differences in the app workflow

Here are the differences between Cordova and Capacitor (You’ll appreciate these only if you have been using Cordova earlier, otherwise you can just skip this section)

Capacitor considers each platform project a source asset instead of a build time asset. That means Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time
Because of the above, Capacitor does not use config.xml or a similar custom configuration for platform settings. Instead, configuration changes are made by editing AndroidManifest.xml for Android and Info.plist for Xcode
Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like ionic run ios . You will have to run iOS apps using Xcode, and Android apps using Android studio
Since platform code is not a source asset, you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers

In essence, Capacitor is like a fresh, more flexible version of Cordova.

Migrating Cordova to Capacitor

Before going on the steps for converting the Ionic Cordova app to Ionic Capacitor — we will look at the App code to be converted. Below is the package.json file for the Ionic Cordova project.

If you see the above package file, you will see there is a Cordova framework installed over Ionic. Now let’s start migrating Cordova to Capacitor.

To migrate Cordova to Capacitor, you should have a Cordova project first (LAMMO 😂). Go to your project directory and run the below command to add the Capacitor traces to your Cordova application.

$ ionic integrations enable capacitor

The above command will initialize and add basic capacitor libraries to your Cordova project. There are some base plugins that are needed to run the app on the devices or browsers.

This command sometimes gives errors [in real life — always gives errors 🚨]. If it throws errors, then install the base plugin using the below command.

$ npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

Now base plugins are installed, after that, we will initialize the capacitor using the below command

$ npx cap init

This command will ask you for some basic information related to App. Like the App name, and bundle ID. It will also ask if you want to copy plugin info from config.xml file, type ‘y’ for that.

This will create ‘capacitor.config.ts ’ file, it’s equivalent to config.xml file in the Cordova framework. Let’s have a look at capacitor.config.ts file and modify it for the capacitor framework.

Config file for Cordova setting

If you observe this file you will find a Cordova: {} block that contains information regarding Cordova plugins. But we don’t want Cordova now, so we will modify this file (capacitor.config.ts) for the capacitor.

Now we have added a plugins: {} block, that contains capacitor plugins information. Like Splash Screen, Push Notifications etc. plugins config (plugins {}) contains config of each plugin used in Ionic project. Capacitor can also have the Cordova plugin installed in it (but in our case we only want capacitor plugin to be used).

if you want to know more about how Config file is configured, the goto Capacitor config Schema .

Whenever you install a plugin, the plugin config needs to be added in this file. Like if you install Twitter plugin then its secret key will be put under config.

Note :- As we are initialising Capacitor 3, it needs capacitor.config.ts file rather than capacitor.config.json file (JSON file is supported by Capacitor 2 and older).

Now we are ready to take off. Before setting up Android and iOS platform, we will remove all the instances/plugin of Cordova and replace it with Capacitor. We will start this with cleaning up the package.json file. Here cleaning up means, removing all the Cordova existence from App (starting it with package.json file).

Note :- My way of removing cordova plugin from package.json file is to search for “cordova”and “@ionic-native” and remove all the strings or blocks related to it.

While removing Cordova plugin from package.json file, copy the removed plugin somewhere as we should know what plugin we need to add for capacitor. After removal of all the Cordova and ionic-native package.json will look like :-

But you must be feeling, our application is on state of complete break down. Yes, if you try to run ionic serve, you will see it will give lot of error. But wait for a while, our app will be fixed up soon.

After adding Capacitor to the application, we have to follow 3 steps:-

Removing Cordova and ionic-native code usage instances from the Ionic project.
Installing capacitor plugins
Replacing Cordova plugin code with capacitor plugin code.

Note :- This part will differ for each of the application, as every application uses same or the different plugins.

For removing the Cordova and ionic-native instances, we can search for ionic-native and remove all the instances of it. I will take one example of removing ionic-native and Cordova instances of the Cordova push plugin and adding a new alternative to the Capacitor Push notification plugin.

To remove and replace the Plugin, we will follow the below steps:-

Step 1 — Removing Cordova and ionic-native code usage instances from the Ionic project

Remove initialization of Cordova push plugin from app.module.ts :- Goto app.module.ts, remove the import statement of push plugin and also remove the injection of Push module from the providers. You have to remove the below-mentioned lines from the file.

import { FCM } from '@ionic-native/fcm/ngx'; - Remove FCM import statement

Providers: [
...,
FCM // Remove injection of FCM module
]

Now we have to remove it from Implementation file as well. Goto the file where your push plugin is imported. [Simply search for “import { FCM } from ‘@ionic-native/fcm/ngx’”]

Once you are on the page, remove the import statement and remove all the existence of that Push Plugin. Our code is in such a place where we do have push plugin implemented.

Step 2— Installing capacitor plugins

Implementing Capacitor Push plugin (Replacing Cordova Push Plugin) :- Its just a simple step, you can go toCapacitor Plugins page and search for the plugin you want to use. Before using it we have to install the push plugin using the below code.

$ npm install @capacitor/push-notifications

Step 3— Replacing Cordova plugin code with capacitor plugin code.

Capacitor plugins are easier to use as we do not have to inject them. In our case, we have used the push plugin, so add the below logic accordingly to your application. Put this code in place of your old Cordova-based plugin code.

import { PushNotifications } from '@capacitor/push-notifications';

const addListeners = async () => {
  await PushNotifications.addListener('registration', token => {
    console.info('Registration token: ', token.value);
  });
  await PushNotifications.addListener('registrationError', err => {
    console.error('Registration error: ', err.error);
  });
  await PushNotifications.addListener('pushNotificationReceived', notification => {
    console.log('Push notification received: ', notification);
  });
  await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
    console.log('Push notification action performed', notification.actionId, notification.inputValue);
   });
}

const registerNotifications = async () => {
  let permStatus = await PushNotifications.checkPermissions();
  if (permStatus.receive === 'prompt') {
     permStatus = await PushNotifications.requestPermissions();
  }
  if (permStatus.receive !== 'granted') {
     throw new Error('User denied permissions!');
  }
  await PushNotifications.register();
}

Like this, we can replace a Cordova plugin with a Capacitor plugin. This would be applicable for all of the plugins that need to be replaced with the Capacitor plugin.

Now our application is completely migrated to the Capacitor framework. And we can add android and iOS platforms to it by running the below command:-

// Creating www build folder

$ ionic build

// Installing android and ios packages

$ npm install @capacitor/android
$ npm install @capacitor/ios


// Adding iOS and android platform to the Ionic app

$ npx cap add android
$ npx cap add ios

Bonus : Using a Cordova plugin with Capacitor 🎉

You will find many of the plugins are not yet available in Capacitor but are available in Cordova. So, How to set the Cordova in a Capacitor app ? what to do in that situation?; we can also use Cordova plugins in the Ionic capacitor application. Let’s take an example, if you want to add a plugin to pick contacts from the contact book then the capacitor does not have any option for that but we have a Cordova alternative for it (cordova-plugin-contacts). Run the below command to install the contacts plugin

$ npm install cordova-plugin-contacts
$ npm install @ionic-native/contacts

Once the plugin is installed, we have to inject it into module.ts file as shown below.

import { Contacts } from '@ionic-native/contacts/ngx'; - Importing Contacts

Providers: [
...,
Contacts // Adding Contacts module as provider
]

Now for using it, we can simply import the plugin in the component.ts or page.ts and inject the Contacts module.

import { Contacts } from '@ionic-native/contacts/ngx';

constructor(private contacts: Contacts) {}

pickContacts() {
  this.contacts.pickContact()
}

Conclusion

Now we have successfully converted the Ionic Cordova application to the Ionic Capacitor application. Now the Ionic world is moving to the capacitor, as it has a more stable environment and does not cause any installation issues. You also found — How to set the Cordova plugins in a Capacitor app.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Deploying the Ionic iOS Application to App Store

Vaibhav Gehani — Wed, 13 Jul 2022 04:02:34 +0000

Deploying an Ionic iOS application to the App store is easier than deploying an Android application. In the Android application, we have to create an APK/Bundle and sign the APK/Bundle with a Keystore. And in the case of iOS applications, Xcode handles most of the signing and other stuff.

Note :- App Store is very strict about the app details, correct information, legal use of resources — all info provided should be very clear and true.

There are some Prerequisites to following this tutorial and deploying the app to App Store.

You must have Apple Developers Account (App Store connect Account).
You must have Xcode installed on your Mac.
The Most important:- You should have an Ionic application.

Now let start, and get your hands dirty into the Code. It’s enough of talking.

Register into Apple Developers Account

Before Registering you have to enroll in some of the programs. To get all the information about registration. Goto Enroll Program.

Adding iOS platform and Building the Ionic application.

As we already assume that you know how to start an Ionic Application. We will not go into details about it, you can check out our other blogs for Ionic app tutorials.

Add iOS app platform

Add the iOS platform to your ionic app with these commands (run from project root) :

$ npm install [@capacitor/i](http://twitter.com/capacitor/android)os
$ npx cap add ios

You can sync the existing installed plugins and web assets using

$ npx cap sync ios

This will update the corresponding pods for the iOS project and open the project in Xcode using

$ npx cap open ios

Click on App in left menu → Signing & Capabilities , select your development Team, keep Automatically Manage Signing checked.

Archive the iOS Application using Xcode.

To Build the iOS application, Open XCode and Select Any iOS Device from the top of the window.

As we want to deploy App, which can be run on any iOS device. That's why we have to select Any iOS Device. Then Click on Product and Select “ Build ”. This command will build the App code and will check if there is any Error in Plugins or in Code. If there is no error, then we are good to go (Let's Go..!)

But before Archiving and following the further step, you have to create an app in app store connect. To Create it, goto to the home page and click on create app option.

It will ask for the App name and a few more information, here Bundle ID is handled by the XCode. When you click on Bundle ID, it will show some of the bundle IDs connected to your Apple ID.

Once the app is created you will see a Dashboard (Now Xcode will check for the App in App Store Connect), where you have to input the information about the Application like App Screenshots, App Logo, and Login Information.

Note :- If your App has some login mechanism then provide it in the App Access section. As Apple Team will log in to the app and will check the app in detail.

Now select the Archive option in Product Options in XCode, This will create a new version of the iOS build for the code. It creates a .ipa file that is equivalent to the .apk in Android.

Once the iOS app is archived, you will get a popup to select Distribution Method. Click on Distribute option, it will ask which way you want to distribute the application.

As we want to distribute the iOS app to the App Store, so select App Store Connect and click on “ Next ”. After selecting Platform, we have to select the destination for the App to be uploaded.

To upload this version of the application, select the “ Upload ” option and click on “ Next ”. This will take some time to upload the Archive to the App Store.

While Uploading the Archive, it will ask for some options. Like App Store Connect Distribution options.

Keep it as it is, as we want to upload the App Symbols and Manage Version automatically by the XCode. Now click on “Next”.

Now the important part comes that makes our work much easier, is managing to sign of Archive. The “Automatically manage to sign” option is auto-selected. Don’t touch it unless you love problematic life 😂, XCode is here to make your life easy.

Note :- If you want to Sign the Application manually. Check the later part of the Blog. ⬇️

Now click on “Next”, Finally this will Process and it will show the summary of the Application. Much awaited option “ Upload ” button will come up.

Finally, it is uploading now….!! 😎. If you see it, it shows uploading App.ipa file. This means the Archive contains the IPA file. Which is being uploaded to the App store connect.

Yay, our application is being uploaded to the App store connect. Now we will move to the the App Store Connect Dashboard. To set up and publish the application.

Checking the App on App Store Connect.

To check App is there in App Store Connect Dashboard. Goto TestFlight Tab — you will see the App uploaded there. From there it can be used for internal testing OR for Deploying the application to the App Store.

Now to deploy the application, you have added a build on the Dashboard. Scroll a bit and click on the Select a build option.

Selecting a Build will show you the apps present in Testflight. You have to select the proper version of the application (currently there’s only 1 version available).

Now we have filled in all the information and selected the Build. It is the time for submitting it for the Review.

Click on Submit for Review and App will be submitted for review to the Apple Team. It can take up to a week to review. But Apple Team will Review it and will contact you if there is some problem OR they will publish the Application🎉.

Signing the iOS Application Manually

To sign the Application manually — when you want to control the signing steps completely, you have to create a certificate and provisioning profile in the App Store Connect. Once you login into App Store connect, Goto Certificates, ID and Profiles and create a certificate.

Click one + and it will ask for “what type of certificate you want to create”. We have to select the Apple Distribution option and click on continue. Now it will ask for “Certificate Signing Request” which we have to create using Mac.

Creating Certificate Signing Request

Open Keychain Access on your Mac, goto Certificate Assistance , and “Request a Certificate from Certificate Authority”. It will open a Certificate Assistance and you have to enter an Email ID (Apple ID) and select the Saved to Disk option. Click on continue to Create and Download the Certificate Signing Request.

Once CertificateSigningRequest (.certSigningRequest) is downloaded. We have to upload that into Adding Certificates Section.

Creating Profile

We have created the Certificate, now go to Profiles Section and Add a new profile. It will ask for “which type of profile you want to add”. Select the App Store option from Distribution Section.

After clicking on Continue, we have to select the App (using App ID). When you click on the dropdown, it will sync with XCode and suggest the already existing Apps (as Bundle Name). Select the App and click on “Continue”.

Once you click on continue, It can ask for the name of the Profile (Use any name). And you can download the Profile (.mobileprofile) after the process.

Now we have the Certificate and Profile. It’s time to manually sign the iOS application.

Manually Sign the iOS application

After selecting the Manually Signing option. It will ask for a Certificate and Profile.

Click on next after selecting the Downloaded Certificate and Profile. Then XCode will sign the iOS application and Send it to the App store connect (Test Flight). Then you can select the Build Version on the Release Page (Shown Above). And your manual signing process is complete.

Conclusion

Now our iOS Application is being deployed to the App Store. You can share the link to the app with the users — after the Apple team reviews the App. So they can download the application and use it. Stay tuned to Enappd Blogs for more Awesome Blogs.

Next Steps

If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Capacitor

Basic — Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps
Advanced — AdMob | Local Notifications | Google Login | Twitter Login | Games using Phaser | Play music | Push Notifications

Ionic Cordova

Taxi Booking App example with Ionic, Node, Express and MySQL
Ionic Payment Gateways — Stripe with Firebase | Stripe with NodeJS | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Authentications — Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features — Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing
Ionic messaging — Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase — Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic — Part 1 | Mocks & Spies| Async Testing

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Deploying Ionic Application to Play Store — Android

Vaibhav Gehani — Sat, 09 Jul 2022 06:02:28 +0000

Deploying Ionic Application to Play Store -Android

Most of the developers make the application but lag when they have asked to deploy them on the Play Store (Android). So in this tutorial, we will go through complete procedures Like “How to create a signed bundle for android app and deploy the app to Play Store”.

It will be a “ roller coaster ride ” 😎, as we will be going through Android studio to the Android developer console. A lot of setup work is needed to deploy the Ionic Application.

There is some Prerequisite you need to have before continuing further.

You need an Android Developer Account
Android Studio should be installed on your machine.
You should have an Ionic Application to deploy - [Most Important 😂]

Now we will start with setting up the Android app to be production-ready.

Making Android App Production Ready 📲

I am assuming you have an Ionic Capacitor/Cordova application and it is ready to be deployed. And if you are new to the Ionic framework you can know more about that on Enappd Blogs. Before moving on to Android Studio to create a Bundle file, there are some best practices that should be followed to create a production-ready code.

Delete all the unused files like unused assets/code, it helps to minimize the size of the www folder that will be later used in creating an APK or Bundle file.
Run npm run lint to remove all the lint errors in the code, it maintains the code up to a standard.

Now we will move to the android studio, where we will create the Signed Bundle file. Earlier Google Play console accepts the APK format but now it started accepting the Bundle file.

What is APK and Bundle File?

APK stands for Android Package Kit and it is the type of format file used by Android Devices to install the apps into it. Android Package contains different elements that are needed to install the app on the device like app metadata. APK format is a variant of JAR (Java variant).

Android App Bundle is a file (with the .aab file extension) that you upload to Google Play. App bundles are signed binaries that organize your app’s code and resources into modules. If you want to read more about this go here.

Checking Android API level (Minimum Req)

Before creating the Bundle file, keep in mind your android app should be on Android API level 30 as accepted by Google Play Console (at the time of release of Blog)

To check what level your android app is — you can go to platforms/android/project.properties and check the target variable. Below is the attached screenshot, of how to check the target.

If your Ionic android application is on a lower API level (<30) then to update it — add the below code to the config.xml file

<preference name="android-targetSdkVersion" value="30" />

The above code will help ionic-cli to know, which version of Android API needs to be added (in this case 30). If you want to change the Android level just change the value field in the above code. Now we can remove the android platform and reinstall it using the below commands.

$ ionic cordova platform rm android
$ ionic cordova platform add android

Once the Android platform is added again, you can check the project.properties target variable. Now we are ready to create a signed bundle using Android Studio.

Creating Signed Bundle File using Android Studio

Open Android Studio by locating your Android folder (platforms/android) and go to the Build menu and select Generate Signed Bundle / APK.

After selecting generate signed Bundle/APK, select Android App Bundle and click next (you can read the advantages/benefits of the Bundle file over APK)

From here, we have to follow the steps carefully, we have to create a Keystore file using which we will sign the Bundle file. Before creating a Keystore file, we will dive into “what is a Keystore file”.

What is a Keystore File? 🔑

The Keystore file contains the pair of the public and private keys that can be used in signing the file (any file can be signed using Keystore , not only APK). Here, signing the file means claiming the ownership of the file. If I sign an APK/Bundle file with a Keystore then it shows I have both private and public keys and I am the owner of that signed File.4

Note :- Keep in mind, the generate keystore file should be protected as if we want to update the application in future then the Bundle file should be signed with same Keystore.

The Keystore file contains the Keystore file password and a key with password and validity. Some other basic information is also needed while creating the file like name, org, and country code.

Fill in all the required information for the Keystore file and click on “OK”. Now it returns to the previous dialog with filled-in details.

We have created and selected the Keystore file that would be used to sign the Bundle File. Now we just have to click on “Next” to sign it with that Keystore. Once you click on “Next”, it will ask, In which environment do you want to sign the Bundle File. Select “release” and click on Finish.

Now, you will see a popup in the bottom right section of Android Studio, where it will ask you to locate the Signed Bundle file. (you can can click on locate or goto (platforms/android/app/release/app-release.aab).

Note :- If you didn’t get any response after clicking finish (at last step). Then you must have wrong password or have other problem. To resolve this, try to create a signed APK (rather than creating a bundle file) using Keystore. It will show you the possible error.

Now we are ready with our app-release.aab file and we just have configured a few things in Google Play console and uploaded the app-release.aab file.

Configuring Google Play Console

First of all, we have to create an app in our Playstore console, this app is complete details of our app — along with Bundle. This app will be published in Google Play Store. To create the app click on the “Create app” option in the dashboard.

After clicking on creating an app, it will ask for several app-level details like App name, Default language, app or game, free or paid, and will require some declarations at last (get check the boxes ✅). After filling in all the details click on Create app.

Now app is created, the first thing you have to do is to create a release. Select Release Overview on the side menu and select create a release and you will see the below screen.

There is an option for App Bundle, click on the upload button and select the generated app-release.aab file. Google Play Console will verify the bundle file, if it has some errors it will show there itself.

Possible Errors :- If you have uploaded a Bundle with wrong Keystore, you will get error of wrong SHA signing OR you will get the error for wrong Android API level (below API level 30).

After successful upload, it will show the uploaded Bundle file as below screenshot :-

After setting up the release, you have to click on Review Release. If there are some errors in creating a release it will show up (you will get an option to fix those error). While fixing those errors you will be taken to the Dashboard to update the Store details like App screenshots, Details, and other stuff.

Dashboard contains various setting up info, like Target Audience, app access and more. You can also create an internal testing team and release an app for only a limited group of people. Some of the Information is mandatory — without entering it, you will not be able to release the application.

Select Dashboard, Goto “Set up your App” and click on “Set up your Listing”. This is the most important part to set up, this info will be seen by users on the Play store.

Once you click on Store Listing, it will ask for the App name, description, app icon, and for few screenshots of the app on the device/simulator.

Click on “Save” to submit the Store information and go back to Release Overview and Continue there.

Once you are done with all the information — click on “Review Release”. Then check all the information before submitting the app. Clicking “Submit” will submit your app to the Google team for review. It will take some days for review and after that, your application will be released to the Play Store 🚀.

Conclusion

Now our Android Application is being deployed to the Google Play Store. You can share the link to the app with the users, so they can download the application and use it. Stay tuned to Enappd Blogs for more Awesome Blogs.

Next Steps

If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Capacitor

Basic — Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps
Advanced — AdMob | Local Notifications | Google Login | Twitter Login | Games using Phaser | Play music | Push Notifications

Ionic Cordova

Taxi Booking App example with Ionic, Node, Express and MySQL
Ionic Payment Gateways — Stripe with Firebase | Stripe with NodeJS | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Authentications — Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features — Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing
Ionic messaging — Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase — Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic — Part 1 | Mocks & Spies| Async Testing

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

PayPal Payment Integration using Braintree in Ionic 6 Vue app

Vaibhav Gehani — Wed, 06 Jul 2022 02:57:04 +0000

In this tutorial, we will go through PayPal payment using Braintree in Ionic 6. Previously Paypal supported the Cordova PayPal Plugin, which is no more maintained by PayPal, hence it has issues while making payments using PayPal Login. PayPal now recommends using Braintree for mobile payments, while web payment still works fine with the generic PayPal JS script. You can read more about the web integration in our blog — PayPal integration in Ionic PWA.

For ease of development, it is recommended to have same payment method i.e. Braintree for both mobile and web, instead of PayPal for web and Braintree for mobile.

This type of integration requires a Backend (server) to generate tokens and the final transaction is also done by the server. For this tutorial, we will be using a Node JS server and will be calling APIs from the Ionic app using an HTTP client.

Steps to Implement PayPal Integration Using Braintree:-

Create a Braintree sandbox account and get the required keys
Setup Ionic 6 Vue project
Setup Node JS project
Creating Node JS APIs for Braintree
Braintree/PayPal integration in an Ionic app using Node JS API’s
Testing

Before we proceed, a little bit about Ionic and Braintree

What is Braintree?

Braintree offers a variety of products that make it easy for users to accept payments in their apps or website. Think of Braintree as the credit card terminal you swipe your card through at the grocery store. Braintree supports the following major types of payment methods

ACH Direct Debit
Apple Pay
Google Pay
PayPal
Samsung Pay
Credit / Debit cards
Union Pay
Venmo

What is Ionic?

Ionic framework is a mobile app framework, which supports other front-end frameworks like Angular, React, Vue, and Vanilla JS, and builds apps for both Android and iOS from the same code.

If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Ionic you can write a single piece of code for your app that can run on both iOS and Android and web (as PWA), that too with the simplicity of HTML, CSS, and JS.

It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS, and JS. So, by default, Ionic cannot run as an app on an iOS or Android device. Cordova/Capacitor is the built environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera, web access, etc.

Ionic and Payment Gateways

Ionic can create a wide variety of apps, and hence a wide variety of payment gateways can be implemented in Ionic apps. The popular ones are PayPal, Stripe, Braintree, in-app purchases, etc. For more details on payment gateways, you can read our blogs on Payment Gateway Solutions in Ionic, Stripe integration in Ionic, Apple pay in Ionic etc.

Also, there are different types of Ionic Apps you can build for the same functionality. The most popular ones are :

Front-end: Angular | Build environment: Cordova
Front-end: Angular | Build environment: Capacitor
Front-end: React | Build environment: Capacitor
Front-end: Vue | Build environment: Capacitor ✅

PayPal can be integrated into websites as well as mobile apps. In this blog, we’ll learn how to integrate the PayPal payment gateway in Vue/Capacitor Ionic 6 apps using Braintree.

OK, enough of talking, let’s start building our PayPal Braintree Payment System.

Step 1 — Create Braintree sandbox account and get the required keys

This step is required to proceed further, we will be needing several keys to integrate PayPal in the Ionic 6 app as well as in Node JS script. To get these keys to go to Braintree Sandbox Account. Once you log in, you can go to settings and select API.

In the API section, scroll down and you will get the Required API key. We need three keys to initialize Braintree in Node JS scripts

Merchant Id
Public Key and
Private Key

Save these IDs, we will use them in initializing the Braintree on the server-side.

Step 2 — Set up the Ionic 6 project

In this part, we will create and configure the Ionic 6 Vue Project and also set up a new Node JS Script.

Creating and configuring the Ionic 6 application.

To create a new Ionic 6 project, run the below command:-

$ ionic start PayPal --blank --type=vue

This will create a blank app in the working directory and if you want to know more about creating the Ionic 6 project, go to Ionic Vue Beginners Blog. Now once we have created the Ionic Vue app, we can configure the app for Braintree, to do that follow the below steps. Before that, you can install the Axios (that will be needing to call node server APIs) package using the below command:-

$ npm i axios

a) Mount CDN to Ionic Vue app in home.vue file

How will the Ionic app load Braintree? Currently, there is no Cordova or Capacitor plugin for Braintree. Hence we will add the CDN to the home file i.e. home.vue, below is the CDN for Braintree JavaScript SDK.

<script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>

By adding this SDK CDN, Braintree will be available throughout the application. Below is the method you can use to mount the CDN on home.vue page.

createElement method will create an HTML component dynamically and we can add the src element (i.e. Braintree CDN). Once the script tag is loaded, then we have to initialize the Braintree setup using the event listener.

b) Using Braintree variable in Ionic 6 application

Once we mount the SDK CDN, we can use the Braintree variable on any page by using the below-defined syntax

declare const braintree;

Now in home.vue we can add this, we will use this variable to set up the Client-side application for successful payment.

Step 3 — Setup Node JS project

Create a separate folder for the node server. To create a Node JS script, we will run npm init in the working directory.

$ npm init

The above command will ask a few basic questions and creates the package.json file in the working directory. Now you can create the index.js file (All logic will be contained in the index file because we’re making a simple server). Once you have run the above commands, the project structure will look like this

We have to install some of the libraries that will help in implementing the node script. To install the libraries run the below command:-

$ npm install _cors express braintree body-parser_

To know more about cors, express, body-parser, and braintree you can follow the links. You can also check official Ionic documentation on CORS which we believe is very good for understanding.

Project Structure

Now we have all the basic requirements to start our node script.

Note — Check your project’s package.json file, it should contain the value stated below in the scripts section. If it doesn’t, just add manually:-

Step 4 — Creating Express JS APIs for Braintree

Creating Braintree APIs will allow us to get the Client ID requested from the client-side. We will use the Braintree package to implement those APIs. First of all, import the Braintree using the below command in index.js file

_const_ braintree = require("braintree");

Now use the Braintree object to initialize the Braintree Gateway. This initialization requires those keys (which we have saved in step 2) and environment value (i.e. for now we are using Sandbox , later you can use production value). Use the below command to initialize the Gateway.

_const_ gateway = new braintree.BraintreeGateway({
environment: braintree.Environment.Sandbox,
merchantId: "USE_YOUR_MERCHENT_ID",
publicKey: "USE_YOUR_PUBLIC_KEY",
privateKey: "USE_YOUR_PRIVATE_KEY"
});

This Gateway object will be used to get the Client ID and used in doing transactions.

Payment Flow with Braintree

The following flowchart will get you up to speed with the payment flow. With this in mind, you’ll be able to better follow the code steps given further

First, our Ionic application will call the Node JS API that will return the CLIENT ID generated using the API mentioned below:-

app.get("/brainTreeClientToken", (_req_, _res_) _=>_ {
 gateway.clientToken.generate({}).then((_response_) _=>_ {
  _console_.log('Token', response);
  res.send(response);
 });
});

‘/brainTreeClientToken’ API will be called from the Ionic app using Axios (later we will see in step 4). Once the client-side (Ionic app-side) gets the token it will set up the Braintree using the setup call (will see in step 4). After setup, the client will initiate payment using the Pay with PayPal button. Clicking the PayPal button will open In-App Browser and the sandbox will create a random user and provide info containing nonce (the token string used in making the transaction successful).

For making transactions, we will create Node JS API that will checkout payment using amount and nonce. Below is the transaction API:-

app.post("/checkoutWithPayment", jsonParser, (_req_, _res_) _=>_ {
  _const_ nonceFromTheClient = req.body.nonceFromTheClient;
  _const_ payment = req.body.paymentAmount;
  gateway.transaction.sale({
   amount: payment,
   paymentMethodNonce: nonceFromTheClient,
   options: {
     submitForSettlement: true
   }
  }).then((_result_) _=>_ {
    res.send(result);
  });
});

In the above API nonceFromTheClient and paymentAmount will be passed through the Ionic 6 app and using the gateway object we will make a transaction. This will return a transaction status containing complete info about the customer, and payment and also contains the status of payment. This will complete the flow of payment using PayPal. Below is the complete script code:-

Note

In the above script, you can replace route it in app.listen with the port 3000 . So it becomes app.listen(3000,()=>...
You can also create .catch for the .generate and .sale methods in the server. This way, if you get any error from the Braintree server, you will be able to see that in the node server terminal

Run the server using npm start or if you want to deploy code to some cloud server you can do that as well. If you’re running the server in the local system, the APIs will have a localhost URL. You can test web payments directly in the local system. For phone payments, you might have to deploy the node server on a cloud.

Step 5 — Braintree integration in Ionic Vue App using Node JS APIs

In this part we will go through client-side (Ionic app) integration, using which we can make the PayPal transaction. We have seen how to initialize Braintree in the Ionic app (stated in step 2).

declare const braintree

The following method can be used to retrieve the client ID from the server. This method will be called during the Braintree setup.

getClientTokenForPaypal(): Promise <_any_> {
  return new Promise((_resolve_) _=>_ { Axios.get('https://couponappserver.herokuapp.com/brainTreeClientToken').then((_res_) _=>_{
resolve(res.data);
  });
 })
},

Now we can set up Braintree using the below code. Notice that the **.setup is the function that defines for the first time that we are going to use PayPal as the payment gateway, using Braintree as the provider.**

Keep in mind this setup will require the CLIENT_ID that will be generated by server API (mentioned in Step 3). So first we will call the server API and then pass the CLIENT_ID to setup method. You can call this function when page loads ( i.e. in mounted() method). In this case, we are calling this function once script is loaded to application

initializeBraintree() {
  _const_ that = this;
  this.getClientTokenForPaypal().then((_res_: _any_) _=>_ {
   _let_ checkout: _any_;
   braintree.setup(res.clientToken, 'custom', {
   paypal: {
    container: 'paypal-container',
   },
   onReady: _function_ (_integration_: _any_) {
    checkout = integration;
   },
   onCancelled: () _=>_ {
    checkout.teardown(() _=>_ { checkout = null });
   },
   onPaymentMethodReceived: (_obj_: _any_) _=>_ {
    checkout.teardown(() _=>_ {
      checkout = null;
      that.handleBraintreePayment(obj.nonce);
    });
   }
  });
});
}

In the above method, first, we call the getClientTokenForPaypal() the method that will call the Node JS server brainTreeClientToken API and returns the token. Once we get the client token, we can set up Braintree using it. This setup method will initialize the PayPal-container that will be used to render the PayPal button in HTML.

Once the client token is obtained, the Paypal button will be automatically rendered in the HTML file in this place. Make sure you have this in your HTML file

<ion-button class="paypalCss" id="paypal-container"></ion-button>

This will render the Paypal button in Page view and will look like the below screen :-

Paypal button rendered in Ionic HTML view after client ID is obtained

Now we have completed the setup and we can make payment using this button. When we click the button it will open the In-app Browser and the sandbox will handle the payment and users info. This will return the nonce value in the callback defined in the setup call.

One more thing we have to keep in mind is that sometimes, the PayPal payment screen does not go off when we make a payment (due to some screen refresh JavaScript issues). To remove it manually, we have to use the teardown() method defined in the checkout variable (initialized on onReady() callback).

onReady: _function_ (_integration_) {
checkout = integration;
},

Below is the callback that will handle the nonce token and pass it on to another method that will handle the transaction.

onPaymentMethodReceived: (_obj_) _=>_ {
checkout.teardown(() _=>_ {
checkout = null;
that.handleBraintreePayment(obj.nonce);
});
}

We will pass the nonce value to handleBraintreePayment() method that will further call the transaction API defined in Node JS server. Here you can reinitialize the Braintree and show an alert after payment.

handleBraintreePayment(_nonce_: _any_) {
  this.makePaymentRequest(this.paymentAmount,nonce)
  .then((_transaction_: _any_) _=>_ {
    this.initializeBraintree();
    this.showDoneAlert();
  })
}

The abovemakePaymentRequest() method will call the transaction API defined in Node JS server, which will make the original payment using Braintree. Below is the function call:-

makePaymentRequest(_amount_: _any_, _nonce_: _any_): Promise <_any_> {
return new Promise((_resolve_) _=>_ {
_const_ paymentDetails = {
paymentAmount: amount,
nonceFromTheClient: nonce
}
Axios.post('https://couponappserver.herokuapp.com/checkoutWithPayment', paymentDetails)
.then((_res_) _=>_{
resolve(res.data);
});
});
}

The above function will contain the paymentAmount and nonce value and will pass them to the server API. That will return the transaction object and we can decide the client end logic according to the response that we get from the server. This will complete the PayPal Braintree integration from both the client-side and server-side. Below is the complete Vue and ts file code:-

Step 6 — Testing

As mentioned earlier, it is easy to test this setup in a web domain, because the server can run on localhost, and the Ionic app can call the server while running with ionic serve . Here is how the payment flow looks

To test it on your device, you will need to deploy the server on a cloud so you can call the APIs from the app. If there is a way you can call localhost APIs from your app (I don’t know any), that should work as well!

Conclusion:-

Congratulations !! 🎉 You just learned how to integrate the awesome Braintree payment system to make payments using PayPal.

You can make payments using both PayPal accounts and Debit / Credit Cards. This way of integration can work both in Web view and mobile apps. If you want to know more about any feature integration, you can check out our amazing tutorials at Enappd Blogs.

Happy coding!

Next Steps

If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Capacitor

Basic — Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps
Advanced — AdMob | Local Notifications | Google Login | Twitter Login | Games using Phaser | Play music | Push Notifications

Ionic Cordova

Taxi Booking App example with Ionic, Node, Express and MySQL
Ionic Payment Gateways — Stripe with Firebase | Stripe with NodeJS | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Authentications — Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features — Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing
Ionic messaging — Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase — Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic — Part 1 | Mocks & Spies| Async Testing

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Build Offline Ionic Angular 5 Applications

Vaibhav Gehani — Wed, 29 Jun 2022 02:52:55 +0000

In mobile apps, we have come across many conditions in which, the rendered data (from the server) is the same most of the time but is repeatedly fetched from the server. This data fetching every time from the server is useless and a huge waste of data bandwidth. Another similar situation where we can’t even access the app is — when we call the sever with no network/internet then there will be NO_INTERNET error in the App.

In such situations, we can customize the Ionic App, and manage the application when there is no internet. To do that we have to first recognize the status of the Network/Internet connection, and then perform online or offline logic.

Why do you need offline Performance?

Why do we need offline application performance ?? .. The Answer is to improve the user experience and maintain the state of the application properly, even with network fluctuations. As in today’s world, everything is dependent on the Internet and most applications won’t work if there is no Internet available. In some cases, it can, while in other cases we strictly need the Internet to perform some action. So the complete offline performance is dependent on your business logic. e.g If you have an online text editor it can let you type and edit after the initial loading of the document without any internet, but, for saving and other syncing features it will require internet.

Any drawbacks of Offline Performance?

With many advantages, offline performance brings many challenges for the developers. As this brings unexpected things to happen like no proper syncing of offline database and online database, it will lead the application to the dead state. And one of the major points, User is unpredictable and can take any action — such an unhandled case can cause an inconsistent app state, so keep in mind while giving offline privileges to the user.

How do Ionic 5 Applications works offline?

We will modify our Ionic application to have two major features, required for offline functionality:-

Store the DB tables on the device's local storage :- We will store some of the users and necessary information in the local storage (LocalStorage API, or any browser database). It will help us to operate the application offline as we have that data stored in local storage. This will resolve some of the problems that are less dependent on the Server. If your application has a very small database, you can sync all data of the user to phone storage. However, if you have large data of individual users, you can store data only for that session. This logic can be different for different apps, and one has to design the business logic accordingly.
Store API calls in local storage :- With data, we also store the APIs in local storage, we store APIs in such a way that it helps us recognize which API is completely served (i.e. response is received) and which one is left to be served. This helps us to make application flow more stable, as if there is no network available and we want to perform an HTTP POST request to our server then we store the API request in the local storage and will perform it later as soon as the network is available. e.g. Like syncing documents with an online database.

Implementing the Offline features in Ionic App :

We will assume that you are already familiar with simple Ionic Angular apps, if not — do check our other blogs to learn about its setup. We will start with an already set up Ionic Angular application — and ionic commands will be used directly in the project root directory.

Network detection plugin

The below command will install the packages and library required for network detection in the working Ionic project.

$ ionic cordova plugin add cordova-plugin-network-information
$ npm install @ionic-native/network

Using this command we will detect whether we have the network connection or not.

Maintaining user data in the local storage table

Maintaining users' tables in local storage can give an illusion to the application - that the app is working in offline mode. So while login/registering, we will save the user's data in local storage and use that user's data everywhere we need in the application. Be sure not to store secure data like ca_rds_ and passwords in the offline database.

Before that, we have to install the cordova-sqlite-storage plugin & @ionic/storage in our project.

$ ionic cordova plugin add cordova-sqlite-storage
$ npm install --save @ionic/storage

The above command will install the storage plugin and package in the working project and now we have to Import [Line 14, Line 19] and Inject the SQLite and N/W information module [Line 31, Line 39] in app.module.ts

In app.module.ts , we have declared an APP_INITIALIZER which basically runs the load() function (shown below in code) defined in the InitUserProvider service file, during the initial load of the application (Before loading any components). This load() function will check if there is an existing user in the local storage (if any then set it as the loggedInUser ). It will be dependent on network status, if the network exists — then the User will be fetched from the server. And if there is no network, then localUser will be saved as loggedInUser.

async load() {
  if (this.networkStatus) {
    const onlineUser = await this.api.getUserFromServer(this.userid)
    this.api.setLoggedInUser(onlineUser)
  }
  else {
    const localUser = await this.data.getStoredUserData();
    this.api.setLoggedInUser(localUser);
  }
}

And during registering or login flow we can set the user in the local storage using the setUserData () function defined in DataService file (create data service file using the ionic generate service *path/filename*). You can add the below line in your existing login/register logic.

await this.data.setUserData(userData);

In the above line, userData is the user's data fetched from the server or any database. You must be wondering that we are fetching the data from the server then why is offline data saved here? Only at first login, we have to fetch the data from the server after that we simply use the local storage data, every time.

Here in DataService , we use the set and get methods of the storage module. This will store the data in key: value pairs in the local storage. We are done with storing the data and now we can get the Data when the app is offline. To check whether the app is offline or online, we will use the Network module. Below is the code for load () function that will run when the app is initialized:-

Here we first set the Network listener using checkInternetConnection method [Line 16] that will detect whether we have the network or not and on the basis of that we fetch the user's data from the server or from the local storage.

You can modify the above code according to your app structure, as this code will help you to work offline with the user table.

Maintaining API Storage database

In this section, we will explore how can we store the API calls in the local storage. We will define a procedure that will help our application to work in an offline manner, this procedure will help us to save the API data(if there is no network/internet) and call it later when the network is available. Overall we have 2 flows:-

The Application does not have the network/Internet:- In this flow, we will save the HTTP request(API — path and data) in the local storage and then make the HTTP request when network/Internet is available. And once the HTTP request is served, then we will set a completed flag to true. This procedure will help us to store the API and later call that when the network is available.
Application has the Network/Internet:- This will be the normal flow in which we have the network/internet. We first save the HTTP request(API) in local storage and make the HTTP request and make its completed flag to true. Remember we always store the HTTP request in local storage anyway, network is available or not, this makes flow easier to code.

In the above 2 flows, the initial steps are the same but further, they are divided into 2 parts that will be decided on the basis of the availability of the network. We will implement this logic in a separate service file i.e. API-manage r (to create the service file run the below command)

$ ionic generate service services/api-manager

Once the above command is executed the service file will be added to the project, Now we can start to code our main logic:-

Below is the code for the API-Manager (we will explain it later):-

In the above code, we store and make the HTTP request using the storeCallAndRespond() function [Line 96]. In this function, we simply store the API Request in a particular format mentioned below:-

_const_ action: StoredRequest = {
  url: url,
  type: method,
  data: data ? data : null,
  time: new Date().getTime(),
  completed: false,
  response: null,
  header: header,
  id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
};

This Action object contains the parameters that will be used in making HTTP requests like URL, method(type), completed flag, response (set the response when an HTTP request is served), headers, and the unique Id.

Now we can set the API request using storeRequest () method that is defined in API-manager itself :-

storeRequest(_action_) {
  this.storage.get(environment.REQ_STORAGE_KEY).
  then((_storedOperation_) _=>_ {
    _let_ storedObj = JSON.parse(storedOperations);
   if (storedObj) {
    storedObj.push(action);
   } else {
    storedObj = [action];
 }
return this.storage.set(environment.REQ_STORAGE_KEY, JSON.stringify(storedObj));
});
}

The above code will push the existing API request object (action) into the local storage DB. Till this point above two points have the same flow. Now onwards on the bases of network/internet availability, we will differentiate between the flow:- (further logic is contained inside the repeatRequest() method)

async repeatRequest(_action_) {
  return new Promise(async (_resolve_, _reject_) _=>_ {
    _let_ response;
    if (!this.networkStatus) { <-- No Internet
    // No Internet
      resolve(action.data);
    } else { <-- Internet is working
    // Internet is there
      if (action.type === 'GET') {
        response = await this.http.request(action.type, action.url,
        {headers: action.header}).toPromise();
      } else {
        response = await this.http.request(
        action.type,
        action.url,
       {body: action.data, headers: action.header}
        ).toPromise();}
      this.updateActionObject(action, response);
      resolve(response);
     }
});
}

In this flow, we will first check whether the network/internet is available or not [denoted in the above code using ←], and if we have the network — we will make the HTTP request using the action object and make that API stored Object’s( action ) completed flag true and save the response in it.

And if the app doesn’t have the network then we will simply resolve the promise and continue the UI flow, This procedure will make no change in UI rendering and the end-user will not feel like there is no internet/network. After this, once the network is back the flow will call the checkForUnCompleteAPI () method [Line 1 in below Code] that will serve the uncalled(i.e. completed: false) HTTP request.

The above code will check for the API request array in local storage and if any, then passes it to the sendRequests () method that will make the uncompleted HTTP request using the action object:-

sendRequests(_operations_: StoredRequest[]) {

_let_ obs = [];
_let_ oneObs;
for (_let_ op of operations) {
  if (!op.completed) {
  if (op.type === 'GET') {
   oneObs = this.http.request(op.type, op.url, {headers: op.header});
  } else {
   oneObs = this.http.request(op.type, op.url, {body: op.data, headers:
op.header});
  }
  _console_.log('Array res', oneObs);
  obs.push(oneObs);
 }
}
return forkJoin(obs);
}

The above code will check for the completed flag for each API request, and if the completed flag is false then make an HTTP request using the stored action object.

This above-defined code (i.e. API-manager service) will be helpful when our UI is dependent on the API call but we do not have the network, then we store the API call in local storage with all its parameter and once the internet comes back then we try to make that HTTP request at that time.

How to modify HTTP requests in the existing App?

Now we will look at how we add this HTTP API logic to the existing application which earlier has direct API calls:-

Where you have API calls (i.e. HTTP calls) in your application, there instead of directly making that HTTP call we will pass the required parameters to the storeCallAndRespond() function like below:-

updateUser(_id_, _userData_): Promise <_any_> {
return new Promise(async (_resolve_, _reject_) _=>_ {
  _const_ response = await
  this.apiManager.storeCallAndRespond('PUT', ` `${this.url}/clients/${id}`, { Authorization: `JWT ${this.token}` }, userData);
  resolve(response);
 });
}

We will pass the required HTTP options to the storeCallAndRespond () method [Below Code] defined under API-manager. There are 3 arguments that are passed to storeCallAndRespond() method :- 1) Request Method. 2) Request URL. 3) Request Header

storeCallAndRespond(method, url, header, data?): Promise <any> {
  return new Promise(async (resolve, reject) => {
    const action: StoredRequest = {
        url: url,
        type: method,
        data: data ? data : null,
        time: new Date().getTime(),
        completed: false,
        response: null,
        header: header,
        id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
    };
   const Store = await this.storeRequest(action);
   this.repeatRequest(action).then((response) => {
    console.log('Response', response);
    resolve(response);
   })
 });
}

Conclusion

In this tutorial, we have learned how we can covert our Ionic 5 application into an offline working application. So now you are ready to fit this feature in your existing or new application with ease. If you want to know more about different features and methods to handle any of the technology, just go to Enappd Blogs Section.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Integrating Ionic Vue Application with Firebase — Firestore CRUD operations

Vaibhav Gehani — Sat, 25 Jun 2022 06:52:45 +0000

Integrating Ionic Vue Application with Firebase — Firestore CRUD operations

In this tutorial, we will learn how we can integrate the Ionic Vue application with Firebase firestore and use basic database operations. Firebase is one of the best options to opt for when dealing with a small number of users (for unpaid versions). You can add a lot of things using Firebase like push notifications, database providers, authentication methods, Firebase functions, and many more.

What is Ionic?

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

We can use Cordova or Capacitor to build these awesome apps and have native functionalities. With this, we get some amazing native plugins to use like Image cropper, Camera, and many more.

Capacitor — How is it different from Cordova?

Capacitor is very similar to Cordova, but with some key differences in the app workflow

Here are the differences between Cordova and Capacitor (You’ll appreciate these only if you have been using Cordova earlier, otherwise you can just skip)

Capacitor considers each platform project a source asset instead of a build time asset. That means Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time
Because of the above, Capacitor does not use config.xml a similar custom configuration for platform settings. Instead, configuration changes are made by editing AndroidManifest.xml for Android and Info.plist for Xcode
Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like ionic run ios . You will have to run iOS apps using Xcode, and Android apps using Android studio
Since platform code is not a source asset, you can directly change the native code using Xcode or Android Studio. This gives more flexibility to developers

In essence, Capacitor is like a fresh, more flexible version of Cordova.

What is Vue?

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. (If you want to know more about Ionic Vue then read Introduction to Ionic Vue Blog)

Firebase 🔥

If you already know what is firebase — SKIP this section.

Firebase is a popular Backend-as-a-Service (BaaS) platform. It started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and the variety of functionalities available on it.

A lot of quick integrations are available with Firebase. Some of these are listed below:

Real-time Database 🗄️
Firestore Database
Email Authentication 📧
Social logins📱
In-app messages
Push notifications
Analytics 📊
Crashlytics 💥
Remote config

Firebase is quickly growing to become the most popular mobile app back-end platform. And now we got an easy way to handle the firebase project by using the emulator. You can be running a firebase project in the localhost rather than spending bucks on creating a cloud instance, It makes the work easy and clean. And If you want to know more about Firebase Emulator you can to Firebase Emulator Blog.

Connect the Ionic Vue app with Firebase

In this section, we will go through three steps :

Set up the firebase project from the firebase console
Create Ionic VueProject (integrate it with the firebase)
At last, perform the CRUD operation in Cloud Firestore.

Step — 1. Setting up firebase project:-

Firstly we have to create a new Firebase project in firebase Console, then just click on Add Project and enter project details.

Now once the firebase project is created then go to cloud firestore and create a firestore database. And keep in mind you should create the firestore database in test mode (Test mode enables the read, write, update and delete permission for everybody)

Now we are ready to integrate the Firebase with the Ionic Vue, But we have to copy the Firebase Project Config so that we can use that in the Vue Project. To copy the config just go to project settings and copy the firebase project. (We just want project Id)

2. Creating a new Ionic Vue Project and Integrating it with the Firebase project

You can get the completed source code of the Ionic Vue Application HERE. And before Integrating we have to create a new Ionic Vue Project, To create a new Ionic project follow the below steps:-

To create an Ionic Vue project, you have to follow the same steps as for Ionic react or angular. But keep in mind that you have the latest version of Ionic-cli as Vue is updated in the newer version (Ionic-cli V6.12.2 — At the time of blog). You can update ionic-cli using the below command:-

$ npm install -g @ionic/cli

Once the update is complete, Now we can create a new Ionic + Vue application. To create you can run the below command:-

$ ionic start firebaseVue blank --type vue

The above command contains the name of the project after that you can pass template types like ‘blank’, ‘tabs’ to choose the layout of the Ionic Vue project. And at last, we have given vue as the type of framework to use. The command will take some time to create the project, and after that, a new project will be created in the working directory. We are done with creating a new Ionic Vue project, and now we will integrate it with Firebase.

To integrate Ionic Vue with firebase, we have to install firebase in our project using the below command :

npm install firebase

Once the firebase is installed in Ionic Vue Project, we have to create the firebase-service.ts file in the src directory of the Vue Project. src folder structure will look like this:-

firebase-service.ts will contain all of the logic related to firebase like initialization of the firebase project, query related logic. First, we will look at the initialization of the Firebase project in the Ionic Vue project.

In the above code, we first import the installed firebase by using the import statement in firebase-service.ts

import firebase from "firebase/app";

import "firebase/firestore";

Now we will use the firebase instance to initialize the firebase project using its initializeApp () method. To initialize the firebase project, we have to use the projectID (which we have copied from Firebase Config).

You will also need Firebase CLI to use some of the Firebase commands. If you want to know more about how to install firebase/cli you can go here and check the requirements for your OS.

You must be logged in to Firebase. (If not use the firebase login command to login into your terminal, this command will work after installing firebase/cli)

_const_ db = firebase.initializeApp({
   projectId: ' **Your firebase projectID**'
}).firestore();

Now DB instance is created, we will use this DB instance to use the collections and docs in the cloud firestore. firebase-service.ts exports the function that contains the sub-functions which perform the query-related logic. We have taken the example of READING the data from firestore collection. We will explain more in the next section.

_const_ readFromFirebase = async (_collectionName_) _=>_ {
  _const_ FirebaseCollection = db.collection(collectionName);
  _const_ querySnapshot = await FirebaseCollection.get();
  _const_ result = querySnapshot.docs.map((_doc_: _any_) _=>_ {
  return {...doc.data()}
});
  return result;
};

In this code, db.collection(collectionName) will create a instance of the collection/table. And we will use that instance to read the data from the table using get () method of the instance.

3. Adding CRUD operation using Cloud Firestore

We have added the firebase-service.ts file to the Vue project and initialized the firebase project. Now we will create the views using which we will perform the CRUD operations.

Create Operation:-

To perform the CREATE operation, we will build a simple UI that will take the input as the username and password. The given input will be saved into the users collection in the cloud firestore. We will use the Create.vue file to perform the Create Operation.

Once you create the Create.vue file, we will add the UI and related Logic in the file. In the below code, we call the firebase-service createOperation() method [Line 68 in below code] with the User Object. The code is given as below, we will explain the firbase CRUD part later :

Above code UI will render like:-

In the above code, we have created the two input fields (for username and password) and two buttons (for Saving Data and getting the List of Users). To perform the Create Operation, we have defined createOperation()

async createOperation() {
  _const_ userObject = {
    username: this.username,
    password: this.password
   }
  _console_.log('Data', this.username, this.password);
  _const_ UsersData = await firebaseService().createOperation('Users',
  userObject);
},

simply call the create operation() function defined in firebase-service.ts file (Created earlier in the blog) with collectionName and userData as the argument [Line 68 in above code]. And in reading Operation (View Data Button) [Line 29 in above code] navigate to ** Read.vue**

2. Read Operation:-

To perform the Read operation, add the Read.vue file and show the list of users with update and delete buttons. Below is the Code for Read.vue file which consists of the UI rendering and Read Operation related Logic.

The above Code will render UI like this:-

The above code consists of created () method [Line 36 in above code] which is called as soon as the Read.vue page is loaded into the DOM. So in this method, we will call the firebase-service’s method to GET/READ all the users in the Users collection.

created() {
  _const_ usersList = firebaseService().readOperation('Users');
  usersList.then((_data_: _any_) _=>_ {
  this.usersList = data;
  })
}

Now we can render the list of users (i.e. this. usersList ) using the ion-list, and will use the “ v-for ” prop [Line 10 in above code] to render it.

<ion-list>
  <ion-item v-for="(item, index) in usersList" :key="index">
    {{ item.username }}
    <ion-button slot="end" @click="updateOperation(item, index)">update</ion-button>
    <ion-button slot="end" @click="deleteOperation(item, index)">Delete</ion-button>
  </ion-item>
</ion-list>

3. Delete and Update Operation:-

And for delete operation, will call the deleteOperation () method (defined in firebase-service.ts) and pass in the collectionName and users username as the arguments.

deleteOperation(_item_: _any_, _index_: _any_) {
  _console_.log(item);
  this.usersList.splice(index, 1);
  firebaseService().deleteOperation('Users', item.username);
}

For Update Operation method [Line 50 in read.vue file], we just navigate to the Update.Vue page with users' username as the params [passing {id: data.username}] using the router capability.

async updateOperation(_item_: _any_, _index_: _any_) {
  _const_ data: _any_ = await firebaseService().findIdForDoc('Users', item.username);
  this.$router.push({name: 'Update', params: {id: data.username}})
}

4. Update Operation:-

To perform the update operation, we just create Update.vue file. And will add the updated page UI and query-related logic to it. Below is the code for the Update.Vue file.

The above code will render like this :-

We have passed the user's username from the Read.vue file [Line 54 in read.vue file], And will get that in Update.Vue file using the props option. Now we can refer username as this.id in the entire code.

props: ['id']

Now to perform the update operation we define the updateOperation () method. And inside this function will call the updateOperation () method (defined in firebase-service file) and pass in the collectionName and updated user data as the argument.

async updateOperation() {
  _const_ updated = await firebaseService().updateOperation('Users', this.usersData);
  this.router.push('/read');
}

Now we are done with all of the CRUD operations performed in Firebase collections. But to make this code work we have to change the router file defined in router/index.ts

The above code will handle all the routes present in the Ionic Vue application, you can change your index.ts file to this code. We have defined many firebase-service.ts functions on different pages. Below is the complete code for the firebase-service.ts file.

Conclusion

In this tutorial, we have learned how to integrate the Ionic Vue application with Firebase cloud Firestore and along with it learned about a few basics of the Ionic Vue App. You can get the Source Code of this Ionic Vue Application HERE. And if you want to know more about any of the technology or feature you can visit Enappd Blogs.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Integrating Ionic 5 Application with kommunicate Bot

Vaibhav Gehani — Sat, 18 Jun 2022 05:39:17 +0000

Integrating Ionic 5 Application with Kommunicate Bot

Integration of a Bot with the mobile application is one of the most interesting topics we have written on. Many of the developers need to integrate a Bot with the apps for proper handling of customers. Bots can help us reduce staff requirements.

You could integrate a customer support chatbot in your business to cater to simple queries of customers and pass on only the complex queries to customer support agents. Humans react to others based on their moods and emotions, so bots can’t completely replace humans. But can improve the overall efficiency of response.

In this tutorial, we will integrate the Kommunicate bot service with the Ionic 5 Angular application and we can facilitate the user with some prebuild or custom builds Bots using kommunicate.io . First, create an account on this service, and keep that credential with you as it will help you to integrate the Bot.

What is Kommunicate.io?

Kommunicate is the intelligent chat-based support, which provides you the bots or the custom chat windows where you can provide support to your customers. Kommunicate provides the complete solution, As it provides the dashboard which can help us to look at the stats of support we have provided.

The dashboard shows the Incoming / Open / Resolved Conversations, that have been done with the customers. This platform also works as a team management tool, it helps us to assign the conversations between the teammates (i.e. if you use customer support, not the bot service). Below is the Conversations Tab :-

The above is a Resolved Conversation that has been initially assigned to ChatBot and later handled by Human. We have the option that helps us to include both ChatBot and human support. Using this Platform we can list the users which are using the chat services or logged in to the applications. Below is the Users tab:-

The above Users tab helps us to manage the conversations of the User by assigning them to the teammates. And now the most interesting part of our blog is here, we will configure the prebuild Kompose Bots. Below is the Bot Integration Tab:-

We can configure the prebuild bot using Kompose. I f you want to integrate your own Bot — one can be built using IBM Watson or Amazon Lex or any other Bot service. For this tutorial, we will configure our prebuild Bot using Kompose. In the below steps, we will configure the Kompose Bot:-

Step 1:- Initialize your Kompose Bot and enter the basic details:-

In the first steps, we will give a name to our bot with an awesome avatar and we can choose a speaking language for our Bot. Once you save and proceed then you will be asked a question “Should bot hand off the conversation to a human team member when it is unable to recognize any user query”. For now, we will disable this feature:-

Our Basic setup is complete and we will proceed to the advanced setup of Bot like questioning and answering of Bot with Customers. Using Kompose we can set up the Bot in 4 parts:-

Welcome Message:- This is the first part in which we provide the bot with the inviting/welcoming message. The great part is that we can suggest the reply option to the Customers. So that they don’t have to type.

2. Setting up questions and answers:- We can design our own questions and answers that our Bot can face by the customers. And you can also add buttons or texts so that users can reply easily by clicking buttons. You can design any number of questions and answers you want so that the bot can answer more and more questions.

3. Setting Response on Unknown User Input:- You can set a common response for all unmatched Customer Input. To that, you have to simply add up the response in the below tab:-

Now your awesome Bot is all ready to respond to all of the customer queries, if you want to configure more you can do that by adding more questions and features to it. Finally, you will get your Bot ID (that will be used in our application) in the Manage Bot Tab:-

Now we can start integrating our Bot with the Ionic 5 Angular application using some plugins and packages.

Integrating kommunicate Bot with Ionic Application

To integrate the Ionic 5 application with Kommunicate, we have to first install the packages and plugins that are required in this procedure. To install the packages run the below commands:-

$ ionic cordova plugin add kommunicate-cordova-plugin
$ npm install @ionic- **native** /kommunicate

And if you are using a capacitor you can this plugin by running the below command:-

$ npm **install** kommunicate-cordova- **plugin** 
$ npx cap **sync** 
$ npm **install** @ionic- **native** /kommunicate

Now once the packages and plugins are installed, now we have to grab our APP_ID from Kommunicate Dashboard. APP_ID is a unique application ID assigned to your Kommunicate account — remember, APP_ID is different from BOT_ID. You can have many BOT_IDs in 1 account. Finally, we start to Code our own ChatBot.

So first of all we will Import [Line 9] and Inject [Line 20] the Kommunicate Module in the app.module.ts file under the Providers:-

We will move to the Home page, where we will implement our main Logic.

There are two ways the bot can be integrated:- (First under the difference b/w these two methods)

The Different between above two methods :-

First method only have Chat Support (Human to Human interaction), Chat window is provided by the Kommunicate Plugin and Admin can interact with App users through Kommunicate Dashboard.

In Second, we included a Bot (Human to Bot interaction), where we created a Bot in Kommunicate Dashboard and trained it by some question and answers.

The Custom Chat Window:- In this part, a normal chat window is generated by the Kommunicate Module using which the App Admin and Customer will interact (i.e. the Customer will write up through the Chat window, and App Provider/Owner will reply through Kommunicate dashboard).

This method is more of a Support Chat window only , where humans is interacting with humans. One side is handled by Admin (using Kommunicate Dashboard) and another side is handled by Application User. [There is no interaction with Bot]

Now First Import [Line 3] Kommunicate Module to the Home Page and then Inject [Line 20] it into the Page. At this place the APP_ID (i.e. we have copied from Dashboard).

In the above code, we have used the APP_ID [Line 15] and LoggedIn user data to start the custom conversation with the Owner. By calling the initateBot () function [Line 22] the Chat Window will launch up and you can interact with the App Provider/Owner.

Above the screen is the Chat Window screen with Custom chat, where customers can chat with the Humans executives. And executives can respond from the Kommunicate Dashboard like below:-

And keep in mind that, you must save the clientKey (response from conversationBuilder Function [Line 25 in home.page.ts])in the Database or in local storage so that the chat window can be initiated with the same user data. Here Client Key is unique for every user that logs in and chats with Admin. And that’s it for the custom chat window.

2. The ChatBot Window:- In this chat window we will interact with our own Awesome chatBot that we have created through Kompose. To integrate that we have made a few changes to the above Home PageCode.

The only change that has been done is in the Configuration [Line 18] (i.e. change in conversationObject ). In this, we have used the botId attribute that will help us to include our ChatBot in chat windows. You can change the botId to change the Bot used in the Application.

I have tested My Botiya Bot in place of Awesome Bot, You can test any of your bots by changing the BotIds. And If you want to take over / hand off your Bot and assign it to your teammate you can do it from the dashboard Conversations section.

There we can assign the Bot chat to a teammate by switching between the assign to tag. So that's it, this way you can easily integrate your ChatBot with your Ionic 5 application.

Conclusion

So In this tutorial, we have learned how we can integrate ChatBot with our Ionic 5 application. Now you can add this feature to your awesome application which will benefit you in many ways and your Customers will be happy with your services. If you want to explore more about other features, you can go to our Blogs.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Understanding Monorepos and implementing it.

Vaibhav Gehani — Fri, 22 Apr 2022 05:56:04 +0000

In this tutorial, we will understand what Monorepos are? and how to make a monorepo. We are not going to discuss various monorepo management software in this blog, and just leave this blog as an introduction to the term.

Now you must be wondering what is this mono repo? why this is used? How this can be helpful in development and deployment? We will cover each and every query related to monorepo.

When we say ‘repo’ we are considering a repository of code. Like a GitHub repo

What is Monorepos?

Monorepos are the combined repository of different entities of the project/company. You must be familiar with multi repos (i.e. Single Repos for each entity of the project), these combined multi repos under a single repo can be called monorepo.

Monorepos are sometimes hard to handle but due to a single point of dependencies these mono repo help to contribute more to the projects and generate common codes.

Why Monorepos should be used?

If you have any project containing an Android app, iOS app, and dashboard then managing all of them together will be difficult. All these entities will have different repos, will have their separate dependencies, and will be deployed separately. So to manage such cases properly, monorepos are introduced. All of the project entities are under a single repository. Maintaining single repo have the following advantage:-

Single Source of Code:- As different components of projects are under a single repository. So mono repo is the single source of code — which can be shared among the collaborators easily.
Consistency:- Monorepos maintains the code quality standards. Quality of complete repo is maintained as developers can get ideas of coding standards from another subproject. Also common config files for Linting and other clean code mechanisms.
Easier management of dependencies:- All modules required by the different sub-projects are maintained under a single repo, we can reuse the same library in many projects. Also updating the dependency in each project can be easier.
Single Contribution:- All developer contributes under a single repository and it would help the developer to contribute more.
Identical Coding/Directory style:- This helps to achieve good code quality. Coding style can be identified as a developer can access other projects also.
Improve cross-team collaboration:- Here In this several developers can contribute to different projects. Developers can fix bugs for each other as the code base is the same for all.

The above points lead to good collaboration and code can be easily shared, so monorepos have the advantage in some cases. Many of the Big Tech Giants have the mono repos like Google, Microsoft, and many others.

When Monorepos should not be used?

Sometimes monorepo is like a blessing but sometimes it is a curse 😂 . In some cases handling monorepos becomes complex as the repository size becomes larger, then it's hard to manage.

Affected Master Branch:- If in case the master branch breaks, then it's hard to manage the project. It can destroy the project and lead to a state where we have to go for some alternative.
Hard to Understand CodeBase:- It's sometimes hard to understand the code base for new developers, as all the projects are under a single repository.
A larger amount of data:- Adding all the projects under a single repository will tremendously increase the size of the repo. This may affect the processing speed, build times and also affects the cost of storage.
Code Reviewing:- Large number of pull requests and code reviews generated by each project could affect other project developers.
Exposure of Code:- Monorepos contains all the projects under a single repository. If two teams are working on different projects (Under the same repo) and want to hide their code — they can’t. This could not be achieved in monorepos.

How to Create Monorepos?

To implement monorepos, we simply have to move the different project repos under one project folder. In this tutorial, we will take two different projects like 1) React-Native and 2) Ionic Project. Here you can have multiple projects with different languages/technologies. The project structure will look like below: -

These two projects further have their own project structure. like the first project is IONIC Framework project and the second is React-Native Project. Let's consider both are part of the single Business Project.

Now to add this monorepo to Github, we need to run some git commands. But you must have Git installed in your system. (if already installed it's Great, if not go to Git Downloads). Now run the below command to initialize the Git in your local project.

$ git init

Now to add this monorepo to Github, we need to create the repository in Github.com. Once you have created the repository, you can run the below command.

$ git add .
$ git commit -m "Monorepo commit"
$ git remote add origin <your_repo_url>
$ git push origin master

Now you will see that your monorepo contains both of your projects. Developers can contribute to any of the projects and can keep the Coding style the same for a complete Business project.

Is that all?

No, monorepos concepts are evolving and many software are coming for managing the monorepos. Lerna and Nx are very popular these days. This kind of software manage monorepos in many ways :

You can explore the code structure properly
You can only build/test from what is affected in code
You can manage dependency management

We will learn about these in upcoming blogs, this blog just serves as an introduction to the monorepos trend.

Conclusion

Now you know enough about monorepos. You can decide if you want to use the monorepos for your Project implementation or not. According to me if your project needs many similar codebases which can have similar dependencies, then you must try the monorepos. They are easy to maintain and improve the developers' contribution.

Next Steps

If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Capacitor

Basic — Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery
Advanced — AdMob | Local Notifications | Google Login | Twitter Login | Games using Phaser | Play music | Push Notifications

Ionic Cordova

Taxi Booking App example with Ionic, Node, Express and MySQL
Ionic Payment Gateways — Stripe with Firebase | Stripe with NodeJS | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Authentications — Via Email | Anonymous | Facebook | Google | Twitter
Ionic Features — Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL | Sentry Error Monitoring
Ionic messaging — Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase — Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic — Part 1 | Mocks & Spies| Async Testing

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Contacts Plugins In Ionic 5 Application

Vaibhav Gehani — Mon, 11 Apr 2022 04:35:50 +0000

Contacts Plugins In Ionic Angular Application

In this tutorial, we will learn how to implement Cordova’s Contacts Plugin in the Ionic 5 Angular Application on Android Phone (you can use the same plugin on other platforms also). Contact Plugin helps to implement various functionality like getting contact from the Phone’s contact list, and saving new contact info into the phone’s native contact list. Implementing this Plugin is quite simple and easy, only we have to Inject the plugin dependency and use it in the required Pages.

We will be implementing, a simple Contacts App with the below stated features:-

Add contacts from Native Contact List of phone and save it into Local Storage.
Creating new Contact and saving them into the Native Contact List.

What is Ionic?

Skip this section if you know about Ionic.

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

Creating the Contacts App

We will follow some easy steps to implement Contacts Plugin in the Ionic 5 Angular application:-

Creating Ionic 5 Angular Project.
Installing Contacts Plugin in Ionic 5 Angular Application and adding the Contacts Plugin Logic.
Building the application on the Android Platform.

So let's start to code and get our app ready.

Step 1: Creating Ionic 5 Angular Project

To create an Ionic 5 Angular app, we just have to run one command and that’s it (Assuming you already have Ionic CLI set up on your terminal, else read our blogs). The rest of the things will be handled by the Ionic CLI. And in Ionic 5, we have got various options to choose various frameworks like (Angular, React, and Vue). In this tutorial, we will use Angular to build our apps. Run the below command to create the Ionic 5 Angular app.

$ ionic start <appName> blank

Replace appName with the name you want for your project. If you are a beginner and want to know more about Ionic 5. You can go and visit this BLOG. A new project will be created in your working directory with the name you used. Now the Ionic project is created, we can integrate the Cordova Contacts Plugin into the App.

Step 2: Installing Contacts Plugin in Ionic 5 Application

Before installing the plugin we have to add the native mobile platforms in the Ionic 5 application, to install the platform you can run the below command in Command Line/Terminal:-

$ ionic cordova platform add <Platform_name>

You have replaced the Platform_name with the android or ios , whichever you want. In this case, we will add Android as the platform and continue to install the Contacts Plugin.

To install the Contacts Plugin, we just have to run few simple commands in Command Line/Terminal :

$ ionic cordova plugin add cordova-plugin-contacts
$ npm install @ionic-native/contacts

Now the plugin is installed, we are good to go to add the Logic in our Ionic 5 application. First, we will import and inject the Contacts Plugin in app.module.ts [Line 19 at app.module.ts] — Imported Contacts Plugin and at line 37 — Injected Contacts Plugin.

After injecting the Contacts Plugin, we can use it in any of the Page or Components. First, we will implement the reading contact information feature.

1. Getting Contact From Native Contact List using Contacts Plugin:-

To implement the Reading feature, we will use a few buttons which will take the contact from the Native contact list.

To make this page, first, we will add the HTML code in the Ionic 5 application.

We will use the add-contact page to add the native contact to local storage, you can generate the page using the below command (in the Ionic root directory):-

$ ionic generate page add-contact

The above command will add the add-contact page in your working project, now will add the HTML code to add-contact.page.html :-

Above HTML will look like below Image:-

In the above HTML code, we have simply added 2 buttons — +Pick from Contact List & Create Contact button and a form using which we can save contact directly in the Local Storage. Now we will look at the logic placed in add-contact.page.ts:-

In the above code, we have simply injected the Contacts Plugin and used to get the contact from the Native List using contactList() function [Line 36]. This function is attached to the + Pick from Contact List Button. In the contactList () function we have used the pickContact() method [Inside the contactList() method], which will pick the contact (this will ask for permission from the user on phone) from the Native Contact List.

Once the Contact is selected, then the app will ask for the Confirmation using an Alert defined in showConfirmationAlertForContacts() function [line 95]. Once you confirm it, the selected contact will be saved into the Local Storage. Most of the Local Storage contacts logic is defined under Contact Services , to create contacts services you can run the below command:-

$ ionic generate services contact

The above command will create a contact service in the working directory of the Ionic 5 project. Below is the code for the Contact Service file:-

To add the contact in the Local storage, we will call the saveContactToLocal () function defined in contact.service.ts file.

The above command will add the selected contact in the Local Storage with the following (id, contact_name, contact_email, contact_photo, contact_number) attributes.

2. Reading Saved Contact from Local Storage:-

To show the contact that we have read from the local storage. You can add a new page called the Contacts page, by running the below command in the Ionic 5 project:-

$ ionic generate page contacts

The above command will add the contacts page in your working project, now will add the HTML code to contacts.page.html :-

In the above code, we have simply rendered the array of contacts [Line 12 in contact.service.ts file] defined under contact services. The HTML will look like the below image:-

Now we will look at the Logic used in the Contacts page (i.e. contacts.page.ts), below is the code for the contact.page.ts file.

In the above code, we call the getAllSavedContact() [Line 20 in contacts.page.ts] function as soon as the Contact Page gets loaded into the View. To do that we have Ionic lifecycle method ionViewDidEnter() [Line 19 in contacts.page.ts]. This function takes all the Contacts from Local Storage and pushes them into the array.

Now we have implemented reading of contacts from Native Contact List and added the selecting contact list in Local Storage. In Addition, you can save the contact to the Native Contact List as well by using a simple function mentioned below:-

For this, Import the Plugin using the below line:-

import { Contacts } from '@ionic-native/contacts/ngx';

After Importing the plugin, we can inject it into the component using the below code:-

Constructor(private contacts: Contacts) {}

Now we can add the below code to create a new contact into the Phone Contact List.

Constructor Params:-

1) new ContactName(nick_name, first_name, last_name)

2) new ContactField(‘mobile’, mobile_number)

let contact: Contact = this.contacts.create();
contact.name = new ContactName(null, 'Smith', 'John');
contact.phoneNumbers = [new ContactField('mobile', '6471234567')];
contact.save().then(
  () => console.log('Contact saved!', contact),
  (error: any) => console.error('Error saving contact.', error)
);

Step 3: Building the application on the Android Platform.

To add and build the Android application, run the below commands :-

$ ionic cordova platform add android
$ ionic cordova run android

The below video is for a completed application, the same flow can be seen in your application also.

Conclusion

In this tutorial, we have learned about implementing the Contacts Plugin in the Ionic 5 Angular application. Contacts Plugin can be used in any of the business logic applications like taxi app (calling the driver), Data Sharing app (sharing data to contacts), and many more. So now you can integrate this feature in your Ionic app and take it to another level. And if you want to add/learn more features you can visit Enappd Blog.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Deploying Node server(JS) and Flask server(Python) to the Heroku

Vaibhav Gehani — Wed, 16 Mar 2022 04:33:42 +0000

How to Deploy Node Server / Flask Server on Heroku

In this tutorial, we will be covering 2 kinds of server deployment on the Heroku Cloud platform :

Node JS Server
Flask Server

We will also show — how easy it is to write a server code from scratch, deploy it online for the first time and update the server after the first deployments. you can just use the simple git command to deploy the latest code.

Both the Node Server and Flask Server have different steps to get deployed on Heroku. First, we will look at the Node Server and then the Flask server. Before going through the steps, we will take some basic knowledge about these technologies. And will also look at what do we mean by deployment?

What is Deployment/Hosting?

Any web-related app goes through several steps until it is available for the users. Generally, we work on our local system (mostly named as localhost) for coding the server. However, we need to send this code to a server that is associated with a publicly visible URL (not necessarily, it can be private also for some apps). From there we can access this Server’s applications like — webpage, API, or any webhook through a URL. This is called deploying the Server code. Traditionally this was done with the help of a Linux Server, which will run an HTTP Server. This Linux server is used to be associated with a public URL or IP address. All this setup used to take a lot of effort to prepare and manage my own server. But now mostly we will use Cloud Platforms to manage such deployments/hosting.

There are several tools that can be used to deploy any kind of software or application or any site:-

Bamboo.
Heroku.
TeamCity.
AWS CodeDeploy.
Octopus Deploy.
ElectricFlow.
PDQ Deploy.
Ansible Tower.
Chef and more….

Now we know enough about the deployment, we will directly jump to deploying code of NodeJS. Before that, a small introduction about NodeJS, feel free to skip that section, if you already work on NodeJS.

About Node JS

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. Node JS is easily deployable to the Heroku, we only need to run some of the Heroku commands to the terminal and we are good to go to operate the Live server.

Once the server is deployed, we get the deployed URL (Hosted URL) which we can use in any of the Frontend applications to call the server and its APIs.

About Flask Server

Flask is a web framework for Python, meaning that it provides functionality for building web applications, including managing HTTP requests and rendering templates.

Node is more capable as it is a complete JS runtime environment, Flask is just a simple Web Server. The functionality we will use is the same as the Node JS server, the only way of writing code change We will be developing some dummy APIs to check the status of the Server.

Create a Heroku Project

Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. Our platform is elegant, flexible, and easy to use, offering developers the simplest path to getting their apps to market.

There are 2 parts to the Heroku Setup :

1. Settings through Heroku Cloud Dashboard

So before setting up the server scripts, we need to create a new project in the Heroku platform. Go to Heroku and then log in (if you already have an account) or signup (if you do not have the account). Once you logged in you will be taken to the Dashboard screen.

once you click on the new app, then it will ask you for the name of the app and to choose the region. (We will give dummyflaskserver as the app name as it will be required later)

2. Installing Heroku CLI on your local system

Now after creating the app in the Heroku cloud, we just have to install the Heroku CLI (command-line interface) in our system and run some commands to deploy our server. To download the Heroku-CLI just follow the steps mentioned in this Link. After installing you can login to the Heroku through your local system by running the below command (in terminal or CMD):-

$ heroku login

The above command will prompt you to open the login window on the browser, then you can log in and it can automatically login into your system:-

Now we are all set with the Heroku platform and we can start with the scripts for the node server and flask server. So tighten your seatbelts, we are good to go.!

Setting up Node JS Server and Deploying to Heroku

This section will not teach much about NodeJS Server programming, but still, be easy for a beginner to pick up. You must have Node Enviroment already setup on your system — and command line should run “npm” & “node” without any issue.

To create a Node JS script, we will create an index.js file and run npm init in the working directory (this will create the package.json file in the project).

$ npm init

the above command will create the package.json file in the working directory and then you can create the index.js file (All logic will be contained by index file). Once you have run the above command, the project structure will look like this:-

Before implementing dummy APIs, we have to install some of the libraries that will help in implementing node script. To install the libraries run the below command:-

$ npm install _body-parser cors express_

To know more about body-parser, cors, and express you can follow the links. Now we have all the basic requirements to start our node script.

Note — Check your project’s package.json file, it should contain the value stated below in the scripts section:-

Now we will write a dummy API that can be used to check whether the server is deployed properly or not? We will hit the API from the browser using the deployed URL and check its response.

Now we have to initialize a GIT repository, and when we push code into repo it will automatically update the code in Heroku. Important Note:- Heroku creates its own repository parallel to the GIT repository and maintains the latest code into it.

In the above code, we have simply added a /status API that will be used to check the status of the server. If that API responds to the request, then our server is working.

First, create a new Repository in Github, then run the below commands to push the code into the Git Repo.

$ git init
$ git add .
$ git commit -m "message"
$ git remote add origin <repo_url>
$ git push origin master

The above command will push the code in Github repository, now to deploy the code to Heroku run the below command under Heroku-CLI:-

$ heroku git: remote -a <app_name>
$ git push heroku master

If you cannot find your app name (In our case it is dummyappserver ) — you can go to the deploy section under the app, in Heroku Dashboard. The first command, heroku git: remote -a will add a remote path using the app name. And the last command i.e. git push heroku master will push the code to Heroku remote. It will automatically start the build process, generate a node environment in the Heroku platform, and returns the deployed URL. Now we can check our server is working or not by hitting the API using /status endpoint:-

Setting up Flask Server and deploying on Heroku

Please switch to a different Project folder, before starting this section as it has no relation with the NodeJS code or Project.

This section will not teach much about Python Flask Server programming, but still, be easy for a beginner to pick up. You must have Python Enviroment already setup on your system — and command line should run “python” and “pip” or “pip3” command.

Before creating the script, we will create and configure another Heroku app, different from the NodeJS one. To create an app click on create the app

Once a new app is created (with dummyflaskserver as app name), we have to configure i.e. to add the Python build packs in the Heroku platform. You can go to the setting tab to get the option:-

You can find the adding the Buildpacks options in the settings and add the Python package to it.

Click on Add Buildpack, and choose the Python as the option:-

We have configured the Heroku app, now we can start with setting up the flask server. First, we will create a file named app.py that will be the file containing the APIs (Note — choose app.py as the name of the file).

Before continuing you have to keep note, you must have Python preinstalled on your PC. If you have already installed the Python then run the below command to install the flask packages ( pip3 can also be pip in your system):-

$ pip3 install flask
$ pip3 install flask_cors
$ pip3 install gunicorn

once all the packages are installed, then create the app.py in the working directory. Please take care of indentations, as this is Python.

In the above python script, Firstly, A flask app had been initialized and after that CORS has been be enabled in the server. We have added index() function that returns the String “Status OK”. This index function is called whenever someone hits the /status endpoint. We have followed the function-based pattern for the flask script (You can follow a Class-based pattern if you like).

Now to deploy the code to Heroku we have to configure some of the files in the Flask project like Procfile, requirements.txt, and runtime.txt. These files will help Heroku to know more about the project.

Add Procfile to the Project:- In this file, we have to add the below line that will configure the app and help to run the server instance.

web: gunicorn app:app

app: :- this app_name will be the server instance that we have defined in app.py. Ex. ‘web gunicorn dummyflaskserver:app’ ( dummyflaskserver is the app name used in our case).

Add requirements.txt file to the Project:- This file contains the requirements or the packages used by the Flask server. To generate this file use the below command:-

pip freeze > requirements.txt

Add the runtime.txt file to the Project:- This file will let Heroku know which Python version to use in the environment. we have to add the below line to the file.

python-<version>

This version can be 3.7.6 (python-3.7.6)or anything installed in your system, you can check it using the below command (use python3 instead of python command if you have also python 2):-

python --version

After we have added all these files to the Python project, the project structure will look like this:-

Now we have to repeat the same steps to push this code to the Github repository. To push the code to Github, run the below command:-

$ git init
$ git add .
$ git commit -m "message"
$ git remote add origin <repo_url>
$ git push origin master

And now we will push the code to the Heroku remote. By running the below command into the project directory 1) you will add a new remote named heroku 2) push code to Heroku remote:- ( dummyflaskserver is the name used while setting up the Heroku application in the dashboard)

$ heroku git:remote -a dummyflaskserver
$ git push heroku master

Heroku push command will automatically trigger the build process of the cloud. In the end, will return the deployed URL, that can be used in any of the front-end applications or any other servers. We will hit the URL using browser:-

Conclusion

We have learned how to write simple NodeJS or Flask Server codes and deploy them to the Heroku platform. It is one of the important steps after the local development phase. If you want to know more about any of the features or any technology you can visit Enappd Blogs.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App

Firebase Admin SDK setup and functions using Node JS

Vaibhav Gehani — Thu, 10 Mar 2022 08:31:09 +0000

In this tutorial, we will be going through the Admin SDK of firebase. We will set up and use various functions in the Node JS script. Before going through any procedure or implementation, we briefly summarize what is Firebase, Firebase Admin SDK, and Node JS. Feel free to skip these sections, if you are already familiar with all of them.

Firebase 🔥

If you already know what is firebase — SKIP this section.

A lot of quick integrations are available with Firebase. Some of these are listed below:

Real-time Database 🗄️
FireStore Database 🗄️
Email Authentication 📧
Social logins📱
In-app messages
Push notifications
Analytics 📊
Crashlytics 💥
Remote config

Firebase is quickly growing to become the most popular mobile app back-end platform.

What is Firebase Admin SDK?

Firebase is one the most used platform for various services like Databases and other services. If we want to extend these services, especially control them over a backend server, we can do it using Admin SDK that provides various more extended functionalities. The Admin SDK is a set of server libraries that lets you interact with Firebase from privileged environments to perform actions like:-

Read and write Realtime Database data with full admin privileges.
Programmatically send Firebase Cloud Messaging messages using a simple, alternative approach to the Firebase Cloud Messaging server protocols.
Generate and verify Firebase Auth tokens.
Access Google Cloud resources like Cloud Storage buckets and Cloud Firestore databases associated with your Firebase projects.
Create your own simplified Admin console to do things like look up user data or change a user’s email address for authentication.

But to implement the Firebase Admin SDK, you must have a Server Side code in one of the below language environments:-

Admin Node.js SDK — JavaScript/Node.js 10.10.0+
Admin Java SDK — Java 7+ (recommend Java 8+) Java 7 support is deprecated.
Admin Python SDK — Python 3.5+ (recommend Python 3.6+)
Admin Go SDK — Go 1.11+
Admin .NET SDK — .NET Framework 4.5+ or .Net Core 1.5+

We will only discuss the NodeJS environment, but others are also similar in implementation.

What is Node JS?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

In the context of this tutorial, we will use a simple script that will handle the Firebase Admin SDK functions. To integrate Firebase Admin SDK, we will be using firebase-admin package that contains all the functions present in Admin SDK.

We have talked about all the technologies involved and if you want to explore more about Firebase or Node JS you can go to Enappd Blogs.

Firebase Admin SDK Setup — NodeJS

We will now jump to some steps to be taken to implement Admin SDK.

Creating Firebase Project.
Creating Service Account to communicate with Firebase.
Creating Node JS script and implementing Admin SDK functions.

So lets start implementing firebase admin function handlers using Node JS.

Step 1:- Creating Firebase Project

Go to Firebase and create your first project (or use an existing one). Your console should look like this

Note — It’s really easy to create a Firebase project, but if you still face any issues, follow steps 1–4 of this blog.

Step 2:- Creating Service Account to communicate with Firebase

Firebase uses service accounts to operate and manage services without sharing user credentials. When you create a Firebase project, you might notice that a number of service accounts are already available in your project (check the below images). You might also notice that new service accounts are added to your project when you add services or perform certain actions (for example, linking a Firebase product to BigQuery). Some of these service accounts are added directly by Firebase; others are added via the Google Cloud project associated with your Firebase project.

You can view all service accounts associated with your project in the Service accounts tab of your settings > Project Settings in the Firebase console.

After selecting Project Settings you will see various options, you have to choose Service Accounts options.

This will download the file named as -firebase-adminsdk-.json. The file will contain information about the created service account, will contain different attributes defined below:-

This service file will help Node JS to know about the firebase account using the above details. The file will be saved on the server-side (Node JS) and will be used to initialize the firebase-admin.

Now, this step is completed and we have the service account JSON file which will be used in Node JS.

Step 3:- Creating Node JS script and implementing Admin SDK functions

In this step, we will be going through a few steps :

a) Creating Node JS script:-

To create a Node JS script, we will c reate an index.js file and run npm init in the working directory.

$ npm init

The above command will create the package.json file in the working directory. Now you can create the index.js file (All logic will be contained by the index file). Once you have run the above command, the project structure will look like this:-

Before implementing firebase-admin, we have to install some of the libraries that will help in implementing node script. To install the libraries run the below command:-

$ npm install _body-parser cors express firebase-admin_

To know more about body-parser, cors, express and firebase-admin you can follow the links.

Note — Check your project’s package.json file, it should contain the value stated below in the scripts section, else you can add it:-

b) Implementing Firebase Admin SDK functions

To implement firebase Admin SDK functions, we need to add that JSON file (Service account JSON file) that we got from Firebase Console. Simply add the file to the project folder. Once you add the file, the folder structure will look like:-

Now we will initialize several packages and further use them in node script, below is the script that uses generateSignInWithEmailLink() function of the firebase-admin SDK.

In the above code, we have only implemented the Email SignIn verification function , firebase-admin has various more functionalities like:-

Password reset email link

const userEmail = 'user@example.com';

admin.auth()
  .generatePasswordResetLink(userEmail, actionCodeSettings)
  .then((link) => {
    // Construct password reset email template, embed the link and send
    // using custom SMTP server.
    // TODO
    return sendCustomPasswordResetEmail(email, displayName, link);
 })
  .catch((error) => {
    // Some error occurred.
 });

2. Email Verification Link

const useremail = 'user@example.com';
admin.auth()
  .generateEmailVerificationLink(useremail, actionCodeSettings)
  .then((link) => {
    // Construct email verification template, embed the link and send
    // using custom SMTP server.
    // TODO
    return sendCustomVerificationEmail(useremail, displayName, link);
 })
  .catch((error) => {
    // Some error occurred.
});

c) Using the Server Locally:-

Now our Node script is ready, so we can now call the Endpoint defined in the script using the below URL (Line 26 in Script above).

[http://localhost:3000/](http://localhost:3000/)VerificationLink

The above URL can be hit to send the Email SignIn Email to the desired user, If you are using an Angular App then you can simply add the below code in the button click or in any action listener:-

const sendEmail = await this.http.post('[http://localhost:3000/](http://localhost:3000/)VerificationLink', userData).toPromise();

You have to pass in the userData as the Body data, in our case userData is defined as:-

const userData = { 
  name: 'myName', 
  email: 'myName@app.com'
}

These are some basic functions that can be used in firebase-admin SDK, you can explore more on official firebase site and add more and more functionality to your app.

Conclusion

Now you have learned about Firebase admin SDK, you can explore more features for your app. It makes your app or database more customized from backend server. Specially when you desire some control of data from Admin side. If you want to explore any other feature, then you can visit Enappd Blogs.

Next Steps

If you liked this blog, you will also find the following Ionic blogs interesting and helpful. Feel free to ask any questions in the comment section

Ionic Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic Charts with — Google Charts| HighCharts | d3.js | Chart.js
Ionic Social Logins — Facebook | Google | Twitter
Ionic Authentications — Via Email | Anonymous
Ionic Features — Geolocation | QR Code reader| Pedometer
Media in Ionic — Audio | Video | Image Picker | Image Cropper
Ionic Essentials — Native Storage | Translations | RTL
Ionic messaging — Firebase Push | Reading SMS
Ionic with Firebase — Basics | Hosting and DB | Cloud functions

Ionic React Full App with Capacitor

If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using Ionic 5 React Full App in Capacitor

Ionic Capacitor Full App (Angular)

If you need a base to start your next Angular Capacitor app , you can make your next awesome app using Capacitor Full App

Ionic Full App (Angular and Cordova)

If you need a base to start your next Ionic 5 app, you can make your next awesome app using Ionic 5 Full App