Forem: Abhijeet Rathore

How to Generate and download PDF in Ionic 5 apps

Abhijeet Rathore — Tue, 24 Aug 2021 16:50:37 +0000

In this tutorial we will learn how we can generate PDF in an Ionic app, and download it to the device. You might have ordered food or any item from some e-commerce application and after ordering you must have downloaded the invoice/bill for it as a proof. Similarly there are several other scenarios where your app might need a PDF generation and download facility.

We will understand this feature through Enappd’s Grocery Application workflow, where we order some items, then generate an invoice/bill and download it in the form of PDF. You can follow the same steps to create the PDF generation feature in your own Ionic app.

To know more about Grocery Shopping Platform you can read Enappd’s Grocery Shopping Platform Blog or check the feature video. Before moving on, we will understand ordering flow of Grocery Application, so it will be easy for us to implement our Invoice task.

Ionic —&hairsp;Introduction

If you are reading this blog, you are probably already aware of Ionic, Cordova and Capacitor frameworks. While Ionic is the front-end wrapper framework for mobile UI, Cordova is the build framework that converts Ionic code into a device (Android /iOS) compatible code.

Capacitor is another option in place of Cordova to build apps using Ionic. While Capacitor is born couple of years ago, Cordova has been around for a decade. That’s the reason Cordova has more community made plugins for various unique features, but Capacitor is quickly catching up as well.

Item Ordering Flow&hairsp;—&hairsp;Grocery Platform

The flow is same as what you might have encountered while ordering items in any other app. We simply add items to the Cart and Checkout with selected Address (Here’s a video of the flow). In the Grocery Platform, the items are then automatically added to the ‘My orders’ tab and from there you can download the Invoice/Bill for our ordered Items, as shown below.

Enappd’s Grocery shopping platform PDF generation

In above screens you can see items in My Order Tab which we have ordered. From this we can generate Invoice and later download it as PDF, as shown below.

Downloaded PDF in Enappd’s Grocery shopping platform

You can see the Invoice contains the delivery address, ordered products with price, grand total and many other information. The information in the PDF corresponds to the logged in user, and can be easily changed as you wish.

Now let’s start the flow to implement PDF generation in our Application. We will create a blank Ionic app with dummy item list and related item details, and ‘My Order’ page UI from where we’ll download the invoice.

Structure of the post

We’ll follow these steps to implement the feature

Create a blank Ionic app
Create the required UI and dummy data for demo purpose
Setup PDF generation plugin
Setup PDF content and styling
Test on device

Step 1&hairsp;—&hairsp;Create a blank Ionic app

Generally in all our blogs, we start with creating blank Ionic app, so a new comer or beginner can also try the feature. To create an Ionic Angular Project you just have to run one command and that’s it ! Rest of the things are handled by the Ionic-CLI. Run the below command in you terminal.

$ ionic start pdfgen blank --type=angular --cordova

The --type=angular told the CLI to create an Angular app. And --cordova tells the CLI to integrate Cordova support.

( My environment for this blog is&hairsp;—&hairsp;Node 14.x, Ionic 5.5, Angular 11.x, NPM 7.x, Cordova 10.0 )

This will create an empty ionic project in the working directory of your pc. For more details on creating a new Ionic app from scratch, check out our blog on Ionic Apps here.

Step 2&hairsp;—&hairsp;Create the required UI and dummy data

You can create the required UI as shown in the images for Enappd’ Grocery Platform, though it’s not mandatory. For demo, you can implement the PDF generation feature just on a simple button, using the dummy data same as a genuine full scale Grocery app.

We’ll use a JSON of dummy order data, which will populate our HTML like the actual app. This JSON can be added and accessed from environment.ts , but in the actual app you’ll have this data coming from server anyway.

Dummy order data for PDF generation

With this dummy data populated in our UI, here’s how my UI looks

UI for My Orders page— PDF generation in Ionic apps

Here’s the HTML and CSS for the UI if you want

We can see in above html code we have mapped through array of products using *ngFor=”let product of order.products”. Note, the dummy data is coming from environment.ts for this demo, but for your actual app it should come from the server.

Step 3&hairsp;—&hairsp;Setup PDF generation plugin

Let’s install the PDF generation plugin and the npm packages in our application. We will use Cordova PDFGenerator Plugin to implement this feature

$ ionic cordova plugin add cordova-pdf-generator
$ npm install @ionic-native/pdf-generator

This above command will add the PDFGenerator to the plugins folder. Once the plugins are installed, add the PDFGenerator Module to app.module.ts like below

...
import { PDFGenerator } from '@ionic-native/pdf-generator/ngx';

@NgModule({
... ,

providers: [PDFGenerator, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],

...
})
export class AppModule { }

This will provide the PDFGenerator instance available to the complete application and we can use the Plugin in any of the app pages.

Step 4&hairsp;—&hairsp;Setup PDF content and styling

Generating a PDF starts from a properly styled HTML. You can either

Have same HTML show in the app’s page, AND be printed as PDF, or
Use a different HTML to show in app, and different to print in PDF

Here’s how we’ll generate PDF (Method 1) —

Click on INVOICE button in My Orders page → Opens a Modal where the order invoice will show up → If you see the details are correct, you can download the invoice usingDOWNLOAD button

Create PDF Download Modal

To create the Modal Component, you can run the below command :-

$ ionic generate component components/invoice

This above command will add a component in path “components/invoice” like in below folder structure :-

Add the Modal component to app.module.ts

...
import { InvoiceComponent } from './components/invoice/invoice.component';

@NgModule({

declarations: [AppComponent, InvoiceComponent],

...
})
export class AppModule { }

We will open this modal from openInvoice function ofhome.page.ts , here’s how the code will look, including the dummy data inclusion from environment.ts

PDF Download Modal UI

For PDFs, we have to work with traditional table , <tr> , <td> etc elements. So we design our Invoice page with these tags, while using our Angular *ngIf etc.

IMPORTANT: You need to add all CSS inline for PDF styling to work.

Here’s how the HTML code looks for the modal + PDF

In above snippet, we have the id named PrintInvoice from where our PDF content will start (means complete element/div is content for PDF). We will click on Download Invoice button to run the downloadInvoice() method defined in invoice.component.ts

Here’s how the Modal will look like with the order details

Download PDF modal&hairsp;—&hairsp;PDF generation in Ionic apps

Download Logic

In openInvoice method of home.page.ts, we passed the order object through Modal Controller. We receive this value in invoice.component.ts using @Input() order; and we used this order object to show the complete Information in modal. Here’s the logic for invoice.component.ts

The downloadInvoice method will be called once you click on the download Invoice button. The method contains the :-

this.content = document.getElementById('PrintInvoice').innerHTML;

This will capture the whole content of the Invoice/bill which have the Id of PrintInvoice in our html page and save it to the content class variable. And further we can also specify the options for generating PDF like below

let options = {
  documentSize: 'A4',
  type: 'share',
  fileName: 'Order-Invoice.pdf'
};

Here we can specify the file name by which it will be saved in your system/Mobile and specify the file size like ‘A4’ or ‘A3’ etc. After this the main code that generates PDF out of the HTML is :-

this.pdfGenerator.fromData(this.content, options).then((base64) => {
   console.log('OK', base64);
}).catch((error) => {
   console.log('error', error);
});

fromData is the method defined under PDFGenerator Plugin which will convert the HTML => PDF, This method takes the HTML content and options as the argument and returns the base64 URL.

Step 5&hairsp;—&hairsp;Test on device

If you haven’t added any platform you can run below command to add Android platform and build app

$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova run android // device should be attached

This will add the android platform and required plugin in project like below :-

Added Android Platform and Plugin

Clicking on DOWNLOAD INVOICEbutton will lead to the following OS PDF handler, where you can download the PDF using that highlighted button.

OS PDF Handler&hairsp;—&hairsp;PDF generation in Ionic apps

Here’s the full flow of downloading your invoice in your own Grocery Shopping App in Ionic

PDF generation in Ionic apps

Conclusion

In this tutorial we saw how we can generate a PDF for dynamic data, in Ionic apps. Also we learnt how we can design our own PDF and then download it. You can do a lot of designing to make your PDF look cool-er. The limitation being it has to stick to standard HTML tags like <table> , <tr> etc. and the CSS needs to be written inline.

You can now add this amazing PDF generation feature to your Ionic e-commerce or shopping apps, wherever you need to generate invoices.

Stay tuned for more awesome tutorials ! And get complete code for the tutorial by signing up below.

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&hairsp;—&hairsp;Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps
Advanced&hairsp;—&hairsp;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&hairsp;—&hairsp;Stripe with Firebase | Stripe with NodeJS | PayPal | Apple Pay | RazorPay
Ionic Charts with&hairsp;—&hairsp;Google Charts | HighCharts | d3.js | Chart.js
Ionic Authentications&hairsp;—&hairsp;Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features&hairsp;—&hairsp;Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation
Media in Ionic&hairsp;—&hairsp;Audio | Video | Image Picker | Image Cropper
Ionic Essentials&hairsp;—&hairsp;Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing
Ionic messaging&hairsp;—&hairsp;Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase&hairsp;—&hairsp;Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic&hairsp;—&hairsp;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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

PayPal Payment Integration using Braintree in Ionic 5 apps

Abhijeet Rathore — Mon, 23 Aug 2021 18:12:46 +0000

In this tutorial, we will go through PayPal payment using Braintree in Ionic 5. Previously Paypal supported the Cordova PayPal Plugin, which is no more maintained by PayPal, hence it has issues while making payment 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 —&hairsp;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 several tokens and 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 Ionic app using HTTP client.

We will follow below steps to implement PayPal integration using Braintree.

Steps to Implement PayPal Integration Using Braintree :-

Create Braintree sandbox account and get the required keys
Setup Ionic 5 project
Setup Node JS project
Creating Node JS API’s for Braintree
Braintree/PayPal integration in 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 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 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 in an iOS or Android device. Cordova/Capacitor is the build 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 purchase 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 same functionality. 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 in websites as well as mobile apps. In this blog we’ll learn how to integrate PayPal payment gateway in Angular/Capacitor Ionic 5 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 steps is required to proceed further, we will be needing several keys to integrate PayPal in Ionic 5 app as well as in Node JS script. To get these keys go to Braintree Sandbox Account. Once you login, you can go to settings and select API.

Braintree Sandbox settings to get API keys

In 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

Public Key and Private Key in Braintree settings
Braintree Merchat ID

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

Step 2&hairsp;—&hairsp;Setup Ionic 5 project

In this part, we will create and configure Ionic 5 Project and also setup new Node JS Script.

Creating and configuring the Ionic 5 application.

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

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

This will create blank app in the working directory and if you want to know more about creating the Ionic 5 project, go to Ionic 5 Beginners Blog. Now once we have created the Ionic app, we can configure the app for Braintree, to do that flow the below steps.

a) Add CDN to index.html file
How will Ionic app know we want to use Braintree ? Currently there is no Cordova or Capacitor plugin for Braintree. Hence we will add the CDN to parent file i.e. index.html, below is the CDN for Braintree JavaScript SDK.

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

By adding this SDK CDN, Braintree will be available throughout the application. We can simply use it in any of the pages in our Ionic app.

b) Using Braintree variable in Ionic 5 application
Once we import the SDK CDN, we can use the Braintree variable in any page by using below defined syntax

declare const braintree;

Now later in Payment-gateway page, we will use this variable to setup the Client side application for successful payment.

Step 3&hairsp;—&hairsp;Setup Node JS project

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

$ npm init

Above command will ask few basic questions and creates the package.json file in working directory. Now you can create the index.js file (All logic will be contained in index file because we’re making a simple server).

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 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&hairsp;—&hairsp;Check your project’s package.json file, it should contain the value stated below in scripts section. If it doesn’t, just add manually :-

package.json file for node server

Step 4&hairsp;—&hairsp;Creating Node JS APIs for Braintree

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

const braintree = require("braintree");

Now using 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 transaction.

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

Braintree Payment flow with Ionic app and node server

First our Ionic application will call the Node JS API that will return the CLIENT ID generated using 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 Ionic app using HTTP Client (later we will see in step 4). Once client side (Ionic app-side) gets the token it will setup the Braintree using setup call (will see in step 4). After setup, client will initiate payment using Pay with PayPal button. Clicking PayPal button will open In App Browser and sandbox will create a random user and provide info containing nonce (token string used in making transaction successful).

For making transaction, 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 above API nonceFromTheClient and paymentAmount will be passed through Ionic 5 app and using gateway object will make a transaction. This will return a transaction status containing complete info about customer, payment and also contains 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 in the 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 Braintree server, you will be able to see that in 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 local system, the APIs will have a localhost URL. You can test web payments directly in local system. For phone payments you might have to deploy the node server on a cloud.

Step 5&hairsp;—&hairsp;Braintree integration in Ionic 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 Ionic app (stated in step 2).

declare const braintree

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

async getClientTokenForPaypal() {
 return await
this.http.get('http://localhost:3000/brainTreeClientToken').toPromise();
}

Now we can setup Braintree using below code. Notice that the .setup is the function which 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 ngOnInit() or ionViewWillEnter() methods).

initalizeBrainTree() {
  const that = this;
  this.getClientTokenForPaypal().then((res: any) => {
    let checkout;
    braintree.setup(res.clientToken, 'custom', {
      paypal: {
        container: 'paypal-container',
      },
      onReady: function (integration) {
        checkout = integration;
      },
      onCancelled: (obj) => {
        console.log('Cancelled', obj);
        checkout.teardown(() => { checkout = null });
      },
      onPaymentMethodReceived: (obj) => {
        checkout.teardown(() => {
          checkout = null;
          that.handleBraintreePayment(obj.nonce);
        });
      }
   });
  });
}

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

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

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

This will render the Paypal button in Page view and will look like 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 sandbox will handle the payment and users info. This will return the nonce value in the callback defined in setup call.

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

onReady: function (integration) {
  checkout = integration;
},

Below is the callback that will handle the nonce token and pass on to other 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 console the final response after payment.

async handleBraintreePayment(nonce) {
  this.api.makePaymentRequest(this.payableAmount,    nonce).then((transaction) => {
  console.log('Transaction', transaction);
  })
}

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

async makePaymentRequest(amount, nonce) {
  const paymentDetails = {
    paymentAmount: amount,
    nonceFromTheClient: nonce
  }
  return await   this.http.post('http://localhost:3000/checkoutWithPayment', paymentDetails).toPromise();
}

Above function will contain the paymentAmount and nonce value and will passed 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 server. This will complete the PayPal Braintree integration from both client side and server side.

Step 6&hairsp;—&hairsp;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 how the payment flow looks

PayPal payment in Ionic app using Braintree

To test it in 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 !

Troubleshooting

>> braintree is not defined

Check if you included the Braintree script in index.html

>> Authentication error in API

Check if you have entered correct API keys and Merchant Id in node server. Also check if you are using Production keys in Sandbox, or vice versa

Conclusion :-

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

You can make payments using both PayPal account 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&hairsp;—&hairsp;Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps
Advanced&hairsp;—&hairsp;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&hairsp;—&hairsp;Stripe with Firebase | Stripe with NodeJS | PayPal |PayPal with Braintree| Apple Pay | RazorPay
Ionic Charts with&hairsp;—&hairsp;Google Charts | HighCharts | d3.js | Chart.js
Ionic Authentications&hairsp;—&hairsp;Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features&hairsp;—&hairsp;Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation | Network Detection
Media in Ionic&hairsp;—&hairsp;Audio | Video | Image Picker | Image Cropper | Sounds and Vibrations
Ionic Essentials&hairsp;—&hairsp;Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing | PDF generation
Ionic messaging&hairsp;—&hairsp;Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase&hairsp;—&hairsp;Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic&hairsp;—&hairsp;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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

Google login in Ionic Capacitor app with Angular

Abhijeet Rathore — Sun, 22 Aug 2021 16:32:19 +0000

In this post, you’ll learn how to implement Google login in your Ionic Angular Capacitor apps. We will also retrieve user name and profile photo to show after login. We will test the authentication on Web, Android and iOS.

Since Google login is applicable in a lot of app frameworks, it is possible you landed here by (SEO) mistake. If you are looking for Google login in

Ionic Angular (Cordova) apps —&hairsp;Please check this post
React Native&hairsp;—&hairsp;Please check this for Android and iOS
Ionic React Capacitor Apps —Check this post
Ionic Angular Capacitor Apps&hairsp;—&hairsp;Continue reading 🙂

As you can see from above, there are several options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on Ionic framework with Angular as the front-end framework, and Capacitor as runtime and build environment.

Let’s see a brief intro to each of the included frameworks:

Ionic
Capacitor

What is Ionic ?

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

It is important to note the contribution of Capacitor in this. Ionic is a UI + functionality wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Capacitor is the build 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 etc.

Capacitor&hairsp;—&hairsp;How is it different from Cordova ?

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

You might be familiar with the popular hybrid technology Cordova. So why are we using Capacitor? Cordova helps build Ionic web app into a device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.

Here are few differences between Cordova and Capacitor

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
Since platform code is a source asset, you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers. We will do some similar changes for Google login as well.
Capacitor has great PWA support in-built
Capacitor CLI is locally installed, so different apps can have different Capacitor versions in your system

You can read more about Capacitor vs Cordova in this article by Ionic.

Plugins

Capacitor has its own set of plugins available in the core itself, or with @capacitor-community, but it can also support Cordova plugins. For Google login functionality, we’ll use the CapacitorGoogleAuth plugin by CodetrixStudio.

Capacitor plugins require a bit of configuration editing in Android and iOS files, but you don’t need any Android and iOS native expertise for that. Just follow along with the tutorial and you’ll find it very easy to implement Google login in Capacitor.

A word on Google authentication

We will use the CapacitorGoogleAuth plugin by CodetrixStudio to authenticate the user. Once the login is done, we receive user profile information in auth response itself. Hence, there is no need to fetch user’s profile information separately.

This Google Auth plugin supports 2 functions, across web, Android and iOS

Login
Logout

Also note that this plugin only helps you to login and logout using Google Auth. As you’ll see, the process of Google login involves creating a Firebase project etc. but this plugin does not connect your authenticated user directly to Firebase project.

In other words, there are two ways you can use Google login

Confirm user’s authenticity from Google login, and then save the user info in your own Database. This is true if you already have a server and DB defined for your project
Confirm user’s authenticity from Google login, and then save user info in the same Firebase project itself. It is a convenient and faster way. More about this in Step 2 and further

Structure of post

I always go step-by-step for readers of all experience level. If you know certain steps, feel free to skip them

Step 1: Create a basic Ionic Angular Capacitor app

Step 2: Create a Google project for authentication

Step 3: Setup Google Login Plugin and functions

Step 4: Prepare and Test on Web

Step 5: Build and Test your app on Android

Step 6: Build and Test your app on iOS

Let’s get started with Ionic Angular Capacitor Google login !

Step 1&hairsp;—&hairsp;Create a basic Ionic Angular Capacitor app

Here’s my environment

Node 14.x+
Capacitor 3.0+
Angular 12+
NPM 7+

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

Creating a basic Ionic-React app is not much different or difficult from creating a basic Ionic-Angular app. Start a basic blank starter using

$ ionic start IonNgCapGoogleLogin blank --type=angular --capacitor

The CLI options are pretty self-explanatory.

Run the app in browser using

$ ionic serve

You won’t see much in the homepage created in the blank starter. Let’s modify this page to include a button, icon and a title for login. Also, I have created a LandingPage, where the user is redirected after successful login. The user profile information in this page comes after login and single API call.

Attach Capacitor to existing app

Note: Unlike earlier, now you don’t have to attach Capacitor separately to your Ionic apps. When you run the ionic start command with --Capacitor option, it attaches Capacitor to the app automatically.

If by change you forgot to attach Capacitor which creating the app, it can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run

$ ionic integrations enable capacitor

This will attach Capacitor to your Ionic app. After this, you have to init the Capacitor app with

$ npx cap init

It will ask you the app name and ID. Give app name whatever you want. App ID is the domain identifier of your app (ex: com.example.app). Note this ID as this will be required later when you create app in Google developer console. In my case, the ID is com.enappd.IonNgCapGoogleLogin ( too long, I know)

Step 2&hairsp;—&hairsp;Create a Google project

To implement a Google login, you will need a Google app/project. A Google project can serve as a single point of control for your Google login, analytics, AdMob, push notifications, API keys for Map and several other services etc.

2.1 Create new project

Create a project in Google Developer console or create it in Firebase Console (recommended). Both consoles are essentially integrated with each other.
More details about creating a Firebase project can be found here.

Create a project in Google Developer console

2.2 Requirements for different project types

Web

As soon as you make a Google project in either Google Developer console or Firebase console, a web-client-ID is automatically generated. For web-login, you only need this web-client-ID

Android

To implement Google Login in Android, we will have to create an Android app inside our Google project. In this Android app’s settings, we’ll get google-services.json file. This files essentially contains the API keys and IDs for the project.

We’ll also have to attach SHA-1 key from our build system in our Google project’s Android app.

2.3 Google-services.`plist`

In your Firebase console (of the same project), create a new iOS app. During creation process it will ask you the app bundle ID. Use the bundle ID you used to initialize Capacitor in section 2 (com.enappd.IonNgCapGoogleLogin). In next step, download the google-services.plist file.

If you already have an existing project, download the google-services.plist from the Project Settings page.

Download google-services.plist from your Firebase iOS project

2.4 Web-client ID

When you create a Google project, a web client ID is automatically created. You can find this web-client ID in Google Developer console. Note that the web client ID says (Auto created by Google Service). You DO NOT need to create an Android or iOS app in the Google Project to create this web client ID.

Client IDs in Google Developer Console.

If you create Android/iOS app in Firebase, you can get web-client ID from the downloaded google-services.json or google-services.plistfile.

To use web-client ID on ionic serve or on your website for web login, you need to make sure you include the origin URL in the Web Client ID’s settings

Add Javascript origins to this list to enable login on web platforms

2.5 Web API Key

Required only for making a REST API call to get user profile info. Web API Key can be obtained from the Firebase console. It appears after you have at least once entered the Authentication module of Firebase console.

Obtain Web API key from Firebase console

2.6 SHA-1 key

For web implementation of Google login, nothing is required in our Google project. But for Android implementation, we need to add Android app in the project. Also, make sure the app ID (com.something.something) you provide when making the Android app in Google project, is the same as your app ID. (Double check in capacitor.config.json and capacitor.config.ts )

Add an Android app in Google Project (Firebase Console)

Now create a SHA-1 key of your system. This key is specific to

Your system (laptop/PC)
Your app’s .keystore file

Use following commands to generate SHA-1 key

$ keytool -list -v -keystore <<YOUR_APP_KEYSTORE_PATH>> -alias <<KEYSTORE_ALIAS>> -storepass <<PASSWORD>> -keypass <<KEY_PASSWORD>>

All the above info (alias, keystore, passwords) should be same as the one you used when creating the Keystore file.

Add this SHA-1 key in Android App setting of your Google project

Add SHA-1 key in your Google Project’s Android App

Step 3&hairsp;—&hairsp;Setup Google Login Plugin and functions

To setup Google login in the app, we’ll do following things

4.1 Install CapacitorGoogleAuth plugin by CodetrixStudio.

4.2 Setup plugin functions for login

4.3 Navigate and Send data between two pages of the app

4.4 Sign Out

4.5 Detect already logged in users

4.1 Install Capacitor Google Auth plugin

Install the plugin using

$ npm i --save @codetrix-studio/capacitor-google-auth

Add the following info in your capacitor.config.json

Note: Capacitor 3.0+ uses capacitor.config.ts by default. You’ll have to create the capacitor.config.json in root folder, and copy the content from the .ts filem and add the following info. This is plugin specific

...
"plugins": {
 "GoogleAuth": {
  "scopes": ["profile","email"],
  "serverClientId": "160012889513-qkxxxxxxxxxxxxxxxxxxxxxxxxkgubrp5ve.apps.googleusercontent.com"
}
}
...

serverClientId is basically the web-client ID itself. Import the plugin in app’s pages using

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';

4.2 Setup plugin functions for login

We have to setup few functions for Google Auth functionality

init&hairsp;—&hairsp;GoogleAuth.init()&hairsp;—&hairsp;Initializes the plugin, required only in Web. This can be called at the page load. Avoid on device, or it will throw error.
signIn—GoogleAuth.signIn()&hairsp;—&hairsp;Signs you in with a popup on web, and native functionality in device. This should be called after init(). The success of this function will given user profile data as response. Based on this response you can navigate user in your app.
signOut&hairsp;—&hairsp;GoogleAuth.signOut()&hairsp;—&hairsp;Signs you out from Google. Based on success of this method, you can navigate user out of your app.
refresh&hairsp;—&hairsp;GoogleAuth.refresh()&hairsp;—&hairsp;At app start (or at any point), it can check if you are already logged in. This can be helpful if you want to auto-login users who have logged in once.

I believe you can handle the HTML and CSS part of the pages yourself. The login code for Home.page.ts looks like this

4.3 Enable routing between two pages of the app

The user data from Auth response can be sent to Landing Page using NavigationExtras . Here’s what you need to add to home.page.ts for navigating with data (where user is the response object from GoogleAuth.singIn)

import { Router, NavigationExtras } from '@angular/router';
....

export class HomePage {
  constructor(private router: Router) { }
  ...

goToHome(user) {
 let navigationExtras: NavigationExtras = { state: { user: user } };
 this.router.navigate(['landing'], navigationExtras);
}

In landing.page.ts, you can receive the data as follows

This way, you have logged in, and received the profile info of the user 🎉

4.4 Sign out

Once user is successfully logged in, we redirect user to Landing page. And when user logs out, we want to come back to Home page.

Sign out can be implemented with the following code on button click

signOut() {
 GoogleAuth.signOut().then(() => {
  this.router.navigate(['home']);
 });
}

4.5 Detect already logged in user / Auto-login

In most of the apps, if you have logged in once, next time you open the app, you don’t have to login again. This can be done with our plugin as well.

We can detect already logged in user with GoogleAuth.refresh() method, Here’s the implementation and the resulting full code for home.page.ts

So, on button click we check if user is already logged in using checkLoggedIn() . If user is logged in, we send the user to Landing page with corresponding data. If not logged in, we go through the normal sign in route.

Once the user is detected as already logged in, we send the app user to Landing page with accessToken . This accessToken can then be used in a REST API call to get user’s profile info. Here’s the full code for landing.page.ts including getting the user’s profile info with REST API Call.

Here, YOUR_WEB_API_KEY is your web API key of Google project, which you obtained in Step 2.5

The https://www.googleapis.com/oauth2/v2/userinfo end-point gives us the user’s profile info.

Note : I have used Capacitor Http plugin to make the API call. This is because this plugin can make API calls from all platforms while avoiding CORS and other issues. You can learn more on the plugin page

Step 4: Prepare and Test on Web

To implement Google Auth in web app with Capacitor, add this meta tag to head in index.html file.

<meta name="google-signin-client_id" content="{your client id here}">

With all the above code in place, web Google login can be tested in ionic serve itself. Here’s how it will work on browser

Normal login -> Navigates to Landing page -> Signout -> Back to home page
Normal login ->Navigates to Landing page | Refresh app on home page to simulate existing login on app start -> Takes you directly to Landing page

Google login on Web&hairsp;—&hairsp;Ionic Capacitor Angular app

The response object user will output all auth info of the user as shown in following image

Auth response object on Google Login

As you can see, you get all the required info in this response object. The response object obtained on the REST API call (as explained in Step 4.5) looks a little different. The profile photo comes under the property picture instead of imageUrl

Step 5&hairsp;—&hairsp;Build and Test your app on Android

Create and configure platform

To build the app on Android, run these commands

// Add android platform
$ npx cap add android
// Copy all changes to Android platform
$ npx cap sync
// Open the project in Android studio
$ npx cap open android

Also, add the following in your strings.xml file in Android Project

<resources>
  <string name="server_client_id">Your Web Client ID</string>
</resources>

Note: As of Capacitor 3.0, you do not need to add the plugin in the MainActivity.java file

Avoid unimplemented methods

Build the app on Android device using Android studio. Make sure you detect the platform of device and NOT run GoogleAuth.init() and GoogleAuth.refresh() methods. These are currently not implemented in the plugin. Directly use GoogleAuth.singIn() . Something like this needs to be added

import { Platform } from '@ionic/angular';
....
export class HomePage {
 constructor(private platform: Platform, private router: Router) {
  this.isWeb = !this.platform.is('android') &&    !this.platform.is('ios');
 }
 checkLoggedIn() {
  if(this.isWeb){
   //run web implementation with init() and refresh()
  }
  else{
  // direct GoogleAuth.signIn()}
  }
 }
}

Make sure

You have added SHA-1 key to your Google project’s Android app settings as per Step 2.6
Your app ID is same as the one you added in Google project’s Android app (and in capacitor.config.json)

With these settings, your Google login should work fine in Android. Following GIF shows the login flow in my Android device.

Google login in Ionic Angular Capacitor App&hairsp;—&hairsp;Android

Step 6&hairsp;—&hairsp;Build and Test your app on iOS

Create and configure platform

To build the app on iOS, run these commands

// Add android platform
$ npx cap add ios
// Copy all changes to iOS platform
$ npx cap sync
// Open the project in XCode
$ npx cap open ios

Place your downloadedGoogleService.plist in ios/App/App folder
Find REVERSED_CLIENT_ID from the GoogleService.plist and add it as a URL scheme in info.plist of Xcode

Add REVERSE_CLIENT_ID as URL scheme

Make sure

You have created iOS app in Google Project as per Step 2.3
You have added GoogleServices-Info.plist in ios/App/App folder. Cross-check by checking in XCode
You have added required URL scheme as mentioned is last paragraph

Make sure XCode shows the GoogleServices-Info.plist added

Build the app on iOS device or Simulator using Xcode. You should be able to login via Google, and reach the inner page where you see the user information. Following GIF shows the login flow in my iPhone simulator

Google login in Ionic React Capacitor App&hairsp;—&hairsp;iOS

Conclusion

In this post you learnt how to implement Google login in your Ionic Angular Capacitor app. Social logins are very important part of your apps, as they make users trust your apps more. It is also easy to use, and users don’t have to remember any passwords. You can always link the Social logins with your server as well.

We also tested the Authentication on all three devices&hairsp;—&hairsp;Android, iOS and Web. This creates a complete set of devices a user can use with your app.

Google Login is a complex one among social logins. Make sure you follow all the steps very carefully.

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&hairsp;—&hairsp;Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps | Google Login (Angular)
Advanced&hairsp;—&hairsp;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&hairsp;—&hairsp;Stripe with Firebase | Stripe with NodeJS | PayPal |PayPal with Braintree| Apple Pay | RazorPay
Ionic Charts with&hairsp;—&hairsp;Google Charts | HighCharts | d3.js | Chart.js
Ionic Authentications&hairsp;—&hairsp;Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features&hairsp;—&hairsp;Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation | Network Detection
Media in Ionic&hairsp;—&hairsp;Audio | Video | Image Picker | Image Cropper | Sounds and Vibrations
Ionic Essentials&hairsp;—&hairsp;Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing | PDF generation
Ionic messaging&hairsp;—&hairsp;Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase&hairsp;—&hairsp;Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic&hairsp;—&hairsp;Part 1 | Mocks & Spies| Async Testing

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

Capacitor Full App with huge number of layouts and features

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 5 React Full App in Capacitor from Enappd

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

Ionic Full App in Cordova, with huge number of layouts and features

How to make API calls in Ionic Capacitor Apps

Abhijeet Rathore — Thu, 19 Aug 2021 21:10:48 +0000

In this post, we will learn how to make REST API calls from an Ionic Capacitor app. This might sound very trivial feature but it actually becomes confusing because of a lot of options available and even becomes an issue because of origin restrictions and CORS issues.

We will explore various options to do these API calls in Ionic (Capacitor) apps, and test the same in Web, Android and iOS apps. Although I’m using a Capacitor app for demo, the solutions are applicable on Cordova as well.

Frameworks

All the options we explore in this post are equally applicable to any of the front-end framework, be it Vanilla JS, Angular, React or Vue. For demo purpose we will use Angular front-end here.

Also, for build environment we will stick to Capacitor. But we’ll see that Capacitor can use Cordova plugins as well.

REST API call issues

Before we explore the options to do http API calls, we need to understand why different options exist and how they are different.

When we make REST API calls to a server, we often encounter CORS (Cross-Origin Resource Sharing) issues. This happens because our REST API calls contain the information of the request’s origin. E.g. If we are making the call from ionic serve , the origin will be http://localhost:8100 or similar. The server receiving the request decides whether it will allow an API call from this origin or not. More info in Ionic’s documentation.

Similarly when you make API calls from Ionic Capacitor Android or iOS app, the origin is capacitor://localhost and http://localhost respectively. For Cordova it is ionic://localhost in iOS, and http://localhost for android. These origins, again, will not be allowed in standard server like Firebase cloud, wooCommerce or Payment gateways etc.

Case 1 —&hairsp;If you have your own server, OR the server has no origin restriction

Life’s good then. If you have your own server where your API calls are ‘hitting’, you can make changes to allow these origins in the requests and problem solved. This can almost exclusively happen only if you are deploying the front-end and back-end yourself.

If the server is not in your control, AND the server has no origin restriction, your API calls will still go through without any issue.

In this case, we can use Angular Http Client for making REST API Calls. We’ll explore more on this in next section.

Since not every server is relaxed in origin restrictions, we need some other solution to avoid CORS issues.

Case 2— You don’t have control over the server

This is the case most of the times. You need to make sure your requests are going through some kind of proxy (outside the webview), even if the request is actually made from the native app or localhost.

This old blog sheds some light on possible options to avoid CORS issues in Ionic. But there are some new methods we can implement for this issues

Choices in Ionic Capacitor apps for Http API calls

For making REST API calls, we have following options

Fetch&hairsp;—&hairsp;Default API to make Http calls
Angular HttpClient (Since we are using Angular for Demo. Similar options might be there in React as well) —This is Angular’s default way of making Http calls. If doesn’t fix CORS issues, but has few advantages over fetch API. You can check the advantages in this comparison.
@ionic-native/http plugin&hairsp;—&hairsp;Works with cordova-plugin-advanced-http&hairsp;—&hairsp;Works only on device, so development is difficult. Fixes the CORS issues.
Ionic Native Http Connection Backend&hairsp;—&hairsp;This package combines the above two. Essentially Angular HttpClient will work in browser, and will switch to @ionic-native/http when on device. Fixes CORS issue.

Option #3 looks good for our case, but involves Cordova plugins. This is OK if your app uses Cordova, but for Capacitor you might wanna avoid Cordova plugins. This leaves us with the final option

5. Capacitor/Http plugin&hairsp;—&hairsp;Works in browser, Android and iOS. Fixes CORS issue. This plugin essentially does the same as Option#3, but with less number of dependencies.

Let’s explore all these options with code samples and see their limitations.

Demo Server

We will make a Firebase server (local) using firebase serve and use it for the testing purpose. This is a standard method to run Firebase server locally, OR you can use Firebase Emulator, which is an advanced version of firebase serve . Here’s a short blog on how to run Firebase Emulator locally.

Once the server is up, we will access it from all three platforms&hairsp;—&hairsp;Web, Android and iOS.

How to access locally run server from device

You might be wondering how to access a locally run server (running on localhost:XXXX) from your device when you build the app.

First you need to make sure your device is on the same WiFi as your server system
You need to know the IPv4 of your system. For mac, find it with ifconfig , for windows ipconfig . It will be something like 192.168.x.x which is standard for local systems using a WiFi router
Instead of default serve, you need to use firebase serve -o YOUR_IP , replace YOUR_IP with your actual IPv4 address
When calling APIs, use this IP as the server address, with firebase serve port number, which defaults to 5000

Firebase functions

Firebase functions essentially behave like view in Django, or API methods in node (Firebase is node!). Following code shows the 4 standard methods and 4 CORS wrapped methods. (If you are new to Firebase functions, check this blog for Firebase Cloud functions with Ionic)

Note that there’s not much being done in the methods, like fetching some data from DB, or writing a new entry. All those functionalities lay ahead of this point, and these bare methods will serve to prove the point of CORS / restriction which we are trying to understand, with different libraries.

The API method URL i.e. http://192.168.0.7:5000/ionic4fullapp/us-central1/getData in my case, will be output in terminal when you run firebase serve or emulate command.

Testing Methodology

We will

Make API calls to a sample Firebase server which has 4 methods&hairsp;—&hairsp;getData(GET), postData(POST), putData(PUT), deleteData(DELETE) which allows all origins and, 4 methods _getData(GET), _postData(POST), _putData(PUT), _deleteData(DELETE) which put CORS restrictions (by default Firebase feature).The “unrestricted” APIs are basically wrapped in CORS module, which has the setting to allow all origins.
We’ll explore both these API servers from localhost (web) and device (Android/iOS)&hairsp;—&hairsp;all calling the same server. When using localhost (web), you can firebase serve normally as well (without IP info)
We will test these methods for all 5 options we mentioned in Choices section above.

Demo App for Http Calls

We will make a demo Ionic Angular Capacitor app to test the above. Creating the app is very simple. Run

$ ionic start httpTester sidemenu --type=angular --capacitor

The app name is httpTester , type is sidemenu and it incorporates Angular and Capacitor.

My environment is —

Ionic:
Ionic CLI : 6.16.3
Capacitor: 3.0.2

Utility:
cordova-res : 0.15.3
native-run  : 1.4.0

System:
NodeJS : v14.15.4
npm    : 7.17.0
OS     : macOS Big Sur

I have made custom UI to display the behavior across all options. Here’s a sample Page for Fetch API

Demo app UI for testing Ionic Capacitor Http calls

You can see the ❌ and ✅ marks for success and error in API calls. We’ll perform this routine on all

Restricted and non-restricted API calls
Platform wise behavior
Behavior for each library / plugin
Behavior for each method type i.e. GET, POST, PUT, DELETE

and finally overlap the results to see which library is best for our usage.

Note: The behavior of GET, POST, PUT, DELETE methods for a particular set of variables remain same in all cases. In other words, if one fails, all will fails, if one succeeds, all will.

Running the app

Once you install the required libraries for a particular option (We will see how to install each library in individual sections), you can simply run the app with following options :

Web

For web testing, you can simply run the app with

$ ionic serve

Android / iOS

For Android and iOS, you will have to build the app , open the corresponding native IDE and build the app. Here are the steps

// Create platform
$ npx cap add android // replace android with ios for iOS

// Build app
$ ionic build // replace android with ios for iOS

// Sync data with native app 
$ npx cap sync // replace android with ios for iOS

// Open native IDE to build app
$ npx cap open android // replace android with ios for iOS

After every change in the app, you need to run ionic build and npx cap copy to reflect changes in Android /iOS build.

Let’s start with the libraries/plugins one by one

1. Fetch API

Let’s start with web default Fetch API. You don’t need to setup anything to use Fetch. It’s the default for JS.

Here’s the sample code for the unrestricted set of methods (the restricted set will be exact same, with only change in API method name). Here’s how the code looks

Ignore the variables and changeStatus method. These are only for displaying the ❌ and ✅ in the UI for better visualization of results.

For Fetch API, here’s the overall result for Web, Android and iOS

Ionic Capacitor API call results&hairsp;—&hairsp;Fetch API

2. Angular HttpClient

Angular HttpClient comes with Angular setup in form of the @angular/common/http package. It can be imported in any .ts file and used as http client. Just add this in the page’s module.ts file

import { HttpClientModule } from '@angular/common/http';

....
 @NgModule({
  ...
  imports: [HttpClientModule],
  providers:[..]
})

Here’s how the code looks for HttpClient

For Angular HttpClient, here’s the overall result for Web, Android and iOS

Ionic Capacitor API call results&hairsp;—&hairsp;Angular HttpClient

3. Ionic Native Http Plugin (Cordova)

Install the Ionic Native Http Plugin by running

$ npm install cordova-plugin-advanced-http
$ npm install @ionic-native/http

Also, in the page’s module.ts file , add

import { HTTP } from '@ionic-native/http/ngx';
....
 @NgModule({
  ...
  imports: [...],
  providers:[HTTP]
})

Since this is a Cordova plugin, it will not work on Web. But note that we can use this plugin in a Capacitor app, as Capacitor supports Cordova plugins.

Also post install, you’ll have to run npx cap sync for Android and iOS. Here’s how to code looks for this plugin

For Ionic Native Http, here’s the overall result for Web, Android and iOS

Ionic Capacitor API call results&hairsp;—&hairsp;Ionic Native Http

4. Ionic Native Http connection backend

For this options, you’ll need another plugin which combines the power of httpClient and Ionic Native Http plugin. Install this plugin using

$ npm install --save ionic-native-http-connection-backend

// In some cases, it might ask to install a dependency cordova-plugin-file

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

Again note that we can use this plugin in a Capacitor app, as Capacitor supports Cordova plugins.

You’ll need to take few extra measures here:

Add NativeHttpModule, NativeHttpBackend and NativeHttpFallback into the module where you are using the plugins. If you plan to use it throughout the app, add these in app.module.ts

Here’s how the code will look for calling APIs using this module

Notice we haven’t added import { HTTP } from ‘@ionic-native/http/ngx’; in this page, but that is automatically attached to API calls when run on device.

For Ionic Native Advanced Http, here’s the overall result for Web, Android and iOS

Ionic Capacitor API call results&hairsp;—&hairsp;Ionic Native Advanced Http

5. Capacitor Http

This plugin will run only in a Capacitor app. Install the plugin using

$ npm install @capacitor-community/http

No additional configuration required for Android and iOS. You can use it in the page as

For Capacitor Http, here’s the overall result for Web, Android and iOS

Ionic Capacitor API call results&hairsp;—&hairsp;Capacitor Http

Conclusion

We saw several options to call APIs in an Ionic Capacitor Angular app. We saw how the plugin can behave differently in Web vs Android/iOS environment, and also if the server is allowing all origins or not.

Here’s a gist of which library to use when

Fetch&hairsp;—&hairsp;Use it when you are making an app where you can control the server Allow-origin behavior. You can sent the server to accept your app’s origins, and then Fetch will work for all scenarios
Angular HttpClient&hairsp;—&hairsp;Same as Fetch
Ionic Native Http&hairsp;—&hairsp;Can by-pass allow-origin restriction on Android/iOS device. But it cannot run on web, so development is difficult
Ionic Native Advanced Http&hairsp;—&hairsp;This allows you to run the APIs in web, android and iOS, but still cannot run origin restricted APIs on web
Capacitor Http&hairsp;—&hairsp;This allows you to run the APIs in web, android and iOS, but still cannot run origin restricted APIs on web

In conclusion, Capacitor Http and Ionic Native Advanced Http plugins will provide the same level of functionality for Ionic apps. Only difference being the nature of build environment —

While Ionic Native Advanced Http can run both in Cordova and Capacitor apps, Capacitor Http runs only in Capacitor environment
While Capacitor Http can run on Ionic-Angular, Ionic-React and Ionic Vue frameworks, Ionic Native Advanced Http Ionic Native Advanced Http can be used only in Ionic-Angular

So in essence it’s a tie ! 🤜 🤛 I personally like Capacitor Http, as it is just one plugin to be installed instead of 4 packages in Ionic Native Advanced case.

Hope this post will clarify few of your Http call doubts.

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&hairsp;—&hairsp;Geolocation | Barcode & QR code | Facebook Login (Angular) | Facebook Login (React) | Icon and Splash | Camera & Photo Gallery | Debugging with browser|Theming in Ionic apps | Google Login (Angular)
Advanced&hairsp;—&hairsp;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&hairsp;—&hairsp;Stripe with Firebase | Stripe with NodeJS | PayPal |PayPal with Braintree| Apple Pay | RazorPay
Ionic Charts with&hairsp;—&hairsp;Google Charts | HighCharts | d3.js | Chart.js
Ionic Authentications&hairsp;—&hairsp;Via Email | Anonymous | Facebook | Google | Twitter | Via Phone
Ionic Features&hairsp;—&hairsp;Geolocation| QR Code reader | Pedometer| Signature Pad | Background Geolocation | Network Detection
Media in Ionic&hairsp;—&hairsp;Audio | Video | Image Picker | Image Cropper | Sounds and Vibrations
Ionic Essentials&hairsp;—&hairsp;Debugging with browser| Native Storage | Translations | RTL | Sentry Error Monitoring | Social sharing | PDF generation
Ionic messaging&hairsp;—&hairsp;Firebase Push | Reading SMS | Local Notifications
Ionic with Firebase&hairsp;—&hairsp;Basics | Hosting and DB | Cloud functions | Deploy App to Firebase | Firebase simulator
Unit Testing in Ionic&hairsp;—&hairsp;Part 1 | Mocks & Spies| Async Testing

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

Capacitor Full App with huge number of layouts and features

Ionic Capacitor Full App (React)

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 5 React Full App in Capacitor from Enappd

Ionic Cordova Full App (Angular)

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

Ionic Full App in Cordova, with huge number of layouts and features

Implement Signature Pad in Ionic 5 apps

Abhijeet Rathore — Sun, 16 Aug 2020 11:40:42 +0000

You might have seen the delivery guys taking your signature on the phone, or someone scribbling their handwriting on their phone. It looks pretty cool, and in this post, you’ll learn how to integrate a Signature pad functionality in Ionic 5 apps and PWA.

By signing on your phone you can do (among many) following things

Sign on a document and email/share
Scribble your signature and save as an image for later
Get signature from a user on delivery / trip completion etc.

Getting hand signature on phone is a major addition to your app’s authenticity

We’ll implement this functionality in an Ionic 5 Angular Cordova app. We will learn how to sign on the phone and then save the signature in phone’s gallery as a png.

What is Ionic ?

(Just for the sake of beginners)
Ionic is a hybrid mobile app development SDK. It 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 or Capacitor environment.

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 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.

Signature Pad functionality

Scribbling signature pad is not at all different from writing on an image, which we all do regularly in our Whatsapp, Facebook etc. image shares. Essentially, we create a Canvas in the app, and let the user draw on the Canvas.

Canvas is a very powerful tool in HTML/Javascript. You can draw/scribble on a designated area, resize it, change colors, put a picture in background and write on it etc. Canvas can even cater to PDF and other files, but we’ll stick to images for this post.

Due to Ionic being platform agnostic, there are different types of Ionic Apps you can build for same functionality. Most popular ones are :

Front-end: Angular | Build environment : Cordova ✅
Front-end: Angular | Build environment : Capacitor
Front-end: React | Build environment : Capacitor
Front-end: React/Angular | as PWA ✅

Canvas can be implemented in any of the above, but for our example I’m choosing Angular Cordova framework. Besides having dedicated plugins for a lot of integrations, Cordova also has a huge community backing.

We’ll implement the Signature functionality in both PWA and apps.

Structure of post

As always, I’ll go step-by-step in the post. If you are an experienced dev, you can just skip over the known stuff and jump to the section you need

Step 1 — Creating a basic Ionic 5 Angular app

Step 2— Install required plugins

Step 3— Implement Signature pad functionality on web

Step 4— Save the created signatures in Android gallery

Step 5— Test on Android

Let’s dive right in !

Dive …… better

Step 1— Create a basic Ionic Angular app

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

(My node version at the time of writing the blog is 12.14.0)

Creating a basic Ionic-Angular app. Start a basic tabs starter using

$ ionic start ionicSign tabs --type=angular --cordova

The --type=angular told the CLI to create an Angular app, not a React app !!

Run the app in browser using

$ ionic serve

You won’t see much in the homepage created in the starter. I have modified the homepage a little to test our Signature functionality. To make wider space for signatures, I have kept the orientation landscape.

My homepage looks like this

Basic UI to test Signature pad functionality in Ionic 5

HTML code for tab1.page.html is given in Step 3

Step 2 — Install required plugins

Signature Pad npm package

We’ll use the Javascript signature_pad package for our functionality. Over the years, many angular and ionic plugins have used this package to create signature pad plugins, but at the time of this post none of them is actively maintained. So it is better to use the core package itself.

$ npm install --save signature_pad

Import the plugin in your tab1.page.ts

import SignaturePad from 'signature_pad';

In tab1.page.html , we’ll create a canvas element,

<canvas class="signature-pad-canvas" #canvas width="900" height="400" style="touch-action: none;"></canvas>

which can then be referenced in the JS file with

export class Tab1Page implements OnInit, AfterViewInit {

@ViewChild('canvas', { static: true }) signaturePadElement;
.....

The signature pad is rendered with

this.signaturePad = new SignaturePad(this.signaturePadElement.nativeElement);

Base64toGallery Plugin

Our Canvas signature pad will output the signature in png format, but in base64 encoding. To save this in phone’s gallery, we can either

Save the base64 data as a blob using FileWrite (you can use it in PWA), OR
Use base64toGallery Ionic Native Plugin, which does the above for us in an easier fashion

Install the plugin using

$ ionic cordova plugin add cordova-base64-to-gallery

$ npm install @ionic-native/base64-to-gallery

Import the plugin in app.module.ts

import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';

@NgModule({
 ...
 providers: [
  ...
  Base64ToGallery,
  ...
})

Import the plugin in tab1.page.ts

import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';

constructor(private base64ToGallery: Base64ToGallery){}

Android Permissions Plugin

To save images in Android gallery, you need permission to read/write external storage. Android Permissions plugin will help ask the user for permissions. Install the plugin using

$ ionic cordova plugin add cordova-plugin-android-permissions

$ npm install @ionic-native/android-permissions

Import the plugin in app.module.ts

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
 ...
 providers: [
  ...
  AndroidPermissions,
  ...
})

Import the plugin in tab1.page.ts

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

constructor(private androidPermissions: AndroidPermissions){}

Step 3 — Implement Signature pad functionality

Following the above steps, you’ll have a canvas where you can scribble. Here’s the code for tab1.page.html and tab1.page.ts . We’ll go walk through the code step by step

tab1.page.html

tab1.page.ts

First, we referenced the canvas element from the HTML as signaturePadElement, using @ViewChild
init() — In this function, we are setting width and height for the signature pad area. This is called on page load, as well as on each window resize
In ngAfterViewInit , we create the SignaturePad and set the pen color to a specific RGB value. At this point, you can start scribbling text or your signature on the screen
clear() — method clears the canvas of all content
undo() — method clears out the very last stroke from the canvas
In the save() method, we use toDataURL() This method outputs the canvas content as an image in base64 encoded data. You can then go ahead and save this in gallery using base64ToGallery plugin’s base64ToGallery method

Note : toDataURL() method outputs PNG format as default. You can give image/jpeg as an argument to get JPEG data as well. However, the base64ToGallery plugin is explicitly coded only to handle PNG data. Hence, if you try to save JPEG data from the canvas, the data will not be saved.

Here’s how the signature pad works

Signature Pad functionality in Ionic 5

So we have our own signature pad functionality built in Ionic 5 web app, with Undo and Clear functionalities.

The Save() method will not work on ionic serve as it is dependent on a Cordova plugin. Once you build the app in Android (Step 5) , when you try to save the signature in gallery, you’ll see an error

error in saving image

(Well ! that’s very informative !!)

This happens because we don’t have enough permission to write to the device’s storage.

Step 4 — Save signatures in Android gallery

To get permission to write on device’s storage, we’ll use Android Permissions plugin. Install and import the plugin as shown in Step 2. After that, add/modify the following in your tab1.page.ts file

The save() function now first checks if the app has permission to save on device storage. If not, it calls requestPermissions function , where the app requests a permission using a user prompt.

Once the permission is granted, the image is saved in device’s gallery. 🎉

The Gotcha: If you’re keeping your signature pen color black, and saving image in gallery, make sure you gallery’s background color is not black. If it is, you won’t see anything but black in the image in gallery, because it is a PNG with transparency. Similar result for other color match.

Request permission to save image in gallery

Step 5 — Test in Android

If you haven’t already, build the app for a test run in Android using

$ ionic cordova platform add android

$ ionic cordova run android

This will build and run the app in your default emulator or a connected device.

Remember, you can test the ‘Save to gallery’ functionality only on a device.

Here’s how the app functions in an android device

Signature Pad functionality in Ionic 5 App — Android Test

Congrats ! you just learnt how to sign in an Ionic 5 app, and save it in the gallery as PNG.

Conclusion

This post describes how to implement a signature pad functionality in Ionic 5 apps and PWA. You can save these signatures as PNG and use those at a later time. You can also load any image in the canvas and mark/write over the image. This can work on PDF content as well, but that is for a later post.

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 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| Signature Pad
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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

Facebook login in Ionic 5 Cordova apps using Firebase

Abhijeet Rathore — Sun, 16 Aug 2020 11:29:49 +0000

In this post, you will learn how to implement Facebook authentication in Ionic 5 apps using Firebase 🔥.

We’ll cook a sample app 👨‍🍳 , where users can login using their Facebook account. After login, users can see their basic profile information on the home page, and sessions are saved in Firebase. On repeat app start, users can auto-login using Firebase session.

Social logins — What and why

It’s helpful to use social sign-in with Ionic for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you. Plus, in mobile apps, the Facebook login is automatically done with the pre-installed Facebook app.

Facebook login — What and why

There are several reasons why you should use a Facebook login in your app

Ease of use — When a new user uses your app, only two buttons clicks are required to login using Facebook. In other scenario, user will have to type in an email/password and login.
No “forgot password” — When your app uses Facebook login, the user does not have to worry about forgetting password for your app’s login.
No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Facebook login will always have a valid email/phone number associated.
Single solution — Facebook login can allow your users to use single login credentials across multiple devices.
Facebook integration — If your app uses Facebook authentication, you can use Facebook APIs inside your app as well. This can include fetching user tweets etc.
Trust — Nowadays, people generally trust social logins moreover custom email logins. Social logins follow standard privacy protocols and hence are more reliable for information sharing.

Ionic Authentication

The ionic framework has been around for around 5 years and has been very popular among developers for its ease of usage over Swift / Java. Also in Ionic 5, you get to keep a single source code for both Android and iOS app.

What more can a developer ask for!

Ionic 5 is the latest version (at the time of writing this post) of Ionic and is much more reliable and robust than previous versions.

There are several ways of Authentication in Ionic 5 apps

Social logins — Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.
Create your own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over user authentication. But this method is the most time taking one as well.
Back-end as a Service (BaaS) — You can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you with a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms.
Firebase is the most popular among these for mobile apps, which we’ll study in the next section.

Firebase

Firebase is a 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 a variety of functionalities available on it.

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

Real-time 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.

Firebase Authentication Options

Firebase not only provides ready-made email authentication but also provides authentication using a variety of social logins. You can see the authentication options available with Firebase.

Authentication options available in Firebase

We will use Firebase to store user profile information once the Facebook login is done. This is the preferred method, as it is reliable for both apps and PWA.

Steps for Facebook authentication

We will follow these step-by-step instructions to create our Ionic 5 app with Facebook authentication

Step 1: Setting up a latest Ionic CLI

Step 2: Creating an Ionic 5 app

Step 3: Facebook Developer Console — Create your app

Step 4: Add your Platforms to Facebook

‌Step 5: Enable Facebook Sign-In in Firebase project

‌Step 6: Install the Cordova Facebook Plugin to connect your app with Firebase

Step 7: Authenticate Users using Facebook

Step 8: Store the Facebook auth tokens in Firebase

Step 9: Use Firebase to auto-login the user

Step 10: Test your app for Android

Step 1: Setting up a latest Ionic CLI

Make sure the latest version of the Ionic CLI is installed. Get the installed version by running ionic --version

My node version for this post is 12.13.1. See Node & npm environment setup.

(At the time of writing the blog, my node version is 12.13.1)

Step1.1: Installation

The Ionic CLI can be installed globally with npm:

$ npm install -g @ionic/cli

And you are good to go. Check your environment information using

$ ionic info

This will display your runtime environment, something like following (Android SDK tools and XCode will require separate installations)

Development environment information

Step 2: Creating an Ionic 5 app

For the purposes of this post we’ll create an app using the below command:

$ ionic start facebook-login sidemenu

For now, we only need to know that this command creates a sidemnu layout app with the following structure.

Folder structure

Step 3: Facebook Developer Console

The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application.

For that, you’ll need to go to F acebook developer console and create a new app.

Select the type of Application Facebook Developer console
Create new app in Facebook Developer console

Once we finish creating our app, we will go to Facebook app dashboard and pick App Id from there. It will be required in installing Facebook plugin in the app.

Facebook Developer Console — App ID on top-left

Step 4: Add your Platforms to Facebook

We need to let Facebook know which platforms we’ll be using (if it’s just web, iOS, or Android).

‌In our case, we will add all platforms iOS and Android.

To add the platforms, go ahead inside your Facebook dashboard and click on Settings, then right below the app’s information you’ll see a button that says Add Platform, click it.

You’ll see several options for the platforms you’re creating

Options to create platforms

Add Platforms in Facebook dashboard

Let’s start with iOS:- You’ll see a form asking you for some information, right now we just need the Bundle ID.

Create an iOS app in Facebook console

If you don’t know where to get the Bundle ID, it’s the same as the package name when you create an Ionic app, it’s inside your config.xml file:

<widget id="io.ionic.sociallogin" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Once you add the Bundle ID, just follow the process to create the app.

Android:- The difference is that instead of Bundle ID, Android calls it “Google Play Package Name”.

Create an Android app in Facebook console

Step 5: Enable Facebook Login in Firebase.

Now that everything is set up on Facebook’s side, we need to go into our Firebase console and enable Facebook authentication for our app.

‌To enable Facebook, you’ll need to go to your Firebase Console and locate the app you’re using (or create a new Firebase project)

‌Once you’re inside the app’s dashboard, you’re going to go into Authentication > Sign-In Method > Facebook and are going to click the Enable toggle.

It will ask you App ID and App secret. Copy it from your Facebook console, under your app’s settings.

Step 6: Install the Facebook Cordova Plugin

Open your terminal and type

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="FACEBOOK_APP_ID" --variable APP_NAME="myApplication"

You’ll need to replace the values or FACEBOOK_APP_ID and APP_NAME with your real credentials. You can find both of these inside your Facebook Developers Dashboard.

You’ll see a warning from Ionic saying they prefer Capacitor over Cordova now. But that is ok, you can proceed with Cordova itself. If you want to implement Facebook login with Capacitor, check my other blog.

Process to install Facebook Plugin

Open your terminal and run this command‌ to install Facebook package from Ionic Native.

$ npm install --save @ionic-native/facebook

Also, we need to install AngularFire2 npm module and Firebase, which actually connects the Firebase functionality to Ionic app. To install the module, run

$ npm install firebase @angular/fire --save

Also, include environment ,AngularFireModule and AngularFireAuthModulein app.module.ts

Notice that Firebase is initialized in your app with

AngularFireModule.initializeApp(environment.firebaseConfig)

where environment.config is the Firebase config you picked from Firebase project.

Details of this step can be found in our blog How to connect Firebase with Ionic 5 App

To connect your app to Firebase, you first need a Firebase project. From the project, pick up your Firebase config parameters and include them in an environment.ts file at the root of your Ionic project. The environment file will look like following.

Firebase config params in environment file

You can create two different environment files for development and production environments — environment.ts and environment.prod.ts

Step 7: Authenticate Users.

The first thing we need to do is to get the authorization token from Facebook. To do that, we need to import Facebook plugin from Ionic Native and ask our user to log in. The import and login functions will be as follows:

This function will give you Facebook Token and from this token, we will login user to Firebase app.

Step 8— Store the Facebook auth token in Firebase

In the previous step, the authentication is done via a Facebook app on your phone. Once logged in, you will receive a token response. This info will be used to connect to Firebase in the success of Facebook login.

So, in short, we have logged in via Facebook and created a Firebase user using the Facebook auth token. From now on, Firebase can handle your login/logout in the app. After we store the token in Firebase, we navigate to a Profile page.

Get user profile info

In the Profile page, we will get the profile information of the user using the Firebase Auth Module again.

User Profile Page

Note:- If you want profile image with better resolution you can check Facebook graph API

Logout function

Since Firebase is now handling the login/logout, the logout function in profile.page.ts the logout code will look like following.

Step 9— Use Firebase to auto-login the user

At this point, we have covered the following points

Login with Cordova Facebook plugin
Pass Facebook auth token to Firebase
Fetch user profile info via the Facebook plugin
Logout using Firebase

Now, if the user does not logout and leaves the app, we want the app to auto-login the next time user starts the app. For this, we will use Firebase’s onAuthStateChanged function at the start of the app. If there is a valid user logged in, it will return the user’s information. Our app.component.ts the file will look like following

Step 10: Test your app on Android

To test this app you’ll need to run in a real device. You can do it generating an APK using the command ionic cordova run android . Here we’ll use the first method.

So, run the below commando to generate your APK.

$ ionic cordova build android

Gif Demo

Note: If your app still in Development Mode then it throws an error like below image.

Developer Mode ON error

Follow these steps to make it live:

Login to Facebook developer account https://developers.facebook.com/
Goto you app dashboard
Switch on to change status live (before that you just need to fill privacy policy URL and etc. in basic setting).

Enable Live Mode

Conclusion

In this post, you learnt how to implement Facebook login in your Ionic 5 app. You also learnt how to auto-login your user using info stored in Firebase. The Firebase integration done for Authentication, can be used for various purposes like Database CRUD operations, push notifications, analytics etc.

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 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| Signature Pad
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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

How to use RTL (right-to-left) in Ionic 5 apps and PWA

Abhijeet Rathore — Sun, 16 Aug 2020 11:16:56 +0000

RTL is a very specific feature desired by people whose language is written from right to left. In this post you’ll learn how to implement RTL in Ionic 5.
I will also show how various Ionic components look in an RTL layout.

All the layouts used in this blogpost can be found in Ionic 5 Full app starter

What is RTL (Right to Left)

LTR (left-to-right) and RTL (right-to-left) are the two major layout patterns based on various languages in the world. The major difference between LTR and RTL language scripts is the direction in which content is displayed:

LTR languages display content from left to right
RTL languages display content from right to left

RTL content also affects the direction in which some icons and images are displayed, particularly those depicting a sequence of events. For example, ion-item component has a left-to-right flow by default, whatever element is added inside it. But making the content RTL makes the whole layout mirrored.

In general, the passage of time is depicted as left to right for LTR languages, and right to left for RTL languages.

LTR and RTL layout comparison for a simple form

In the above image, notice the

Change in text alignment
Change in position of * on the words
Position of down arrow for the dropdown
Change in position of Hamburger menu and filter icon in header

This will give you a basic idea of RTL layouts.

Notice that since both the images above have English as the language, you still see the actual sentence going from left-to-right. But when you are writing in an RTL language, the text will start from right to left.

What is Ionic 5

I know most of the readers reading this blog will know what is Ionic 5, but just for the sake of beginners, I explain this in my every blog.

You probably already know about Ionic, but put this section in every blog just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. 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.

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. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

How to implement RTL in Ionic 5 apps

Implementing RTL in Ionic 5 apps is very easy. It can be done in two ways

Using dir="rtl" attribute in HTML tags
Using direction= rtl in css

All implementations revolve around these two methods. Following are the ways you can implement RTL in your Ionic 5 app.

1. Using HTML tag

If you want to convert the complete app into RTL layout, then use dir="rtl" on <html> tag itself. For Ionic 5 apps, the parent HTML is index.html in src folder

Global RTL setting on <html> tag

2. Using router-outlet or ion-app

Editing HTML tag with dir="rtl" is not a good solution if you want to change the layout dynamically from a setting inside the app.

In such case, you can make use of ion-router-outlet or <ion-app> tag which is the parent of all the pages in Ionic 5 apps. Use dir="rtl" on <ion-router-outlet> or <ion-app>tag, and all the pages under that will get RTL layout

RTL implementation on ion-router-outlet

One thing to notice here - when you apply RTL on ion-router-outlet , the sidemenu behaves opposite to how it behaves with dir="rtl" on <html tag

Notice in both cases, the Hamburger menu icon in header is on right, but the menu opens in different way for both implementations.

3. Using CSS at global level

You can also convert the complete app to RTL using CSS in global.scss

:root {
direction: rtl;
}

This will apply RTL to all pages and components. Again, sidemenu in this implementation behaves a little different from Method 1

So RTL at root css level and dir="rtl" on <ion-app> tag have same effect.

4. Using CSS at Page level

If you only want to convert a particular page to RTL, then you can make use of CSS at the page level. Just add direction: rtl; on a page level class, and you’ll get the page in RTL layout.

Ionic 5 components in RTL (right-to-left) Layout

Now let’s take a good look at how different Ionic 5 components and pages look in RTL.

All the layouts used below can be found in Ionic 5 Full app starter

Instagram Layout — Ion-item ✅

Whatsapp Layout — Header and Ion-item ✅

Youtube layout — Ion-item ✅

Horizontal Sliders ✅

Horizontal slider in LTR
Horizontal slider in RTL

Segments ✅

Ion-item ✅

Notice how both the left-side and right-side icons have shifted in RTL layout

Content-loaders (Skeleton text) ✅

Skeleton text changes as per RTL layout as well.

Chat Layout 🤔

As you can see, the chat layout is an edge case for RTL. You really need to know if the users of your RTL language are habitual of seeing their text on the right or left. Accordingly, you’ll have to change the CSS of your chat layout

Date pickers 🤔

You can see most of the Date picker input fields adjusted as per RTL, but the floating type input couldn’t. Also the ticker shown for picking value does not change as per RTL.

Action sheet ✅

Alert and prompts ✅

Range selectors ✅

Notice the minimum and maximum value of range selectors get swapped in RTL, and so is the movement of slider to increase value.

Grid layout

These two almost look the same, but if you look closely, you’ll notice that the first product in the grid starts from the right in RTL layout.

Buttons ✅

Notice how the button icons shift in RTL layout. The text centered in the button stays centered.

Filtering List ✅

Conclusion

We looked at various methods of implementation of RTL in Ionic 5. We also had a look at various layouts and how they look in RTL layout.

This is not an exhaustive list of all Ionic components and what all combination are possible. But all these example give us an idea of how the app will look and behave if we use RTL layouts.

All the layouts used in this blogpost can be found in Ionic 5 Full app starter

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 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| Signature Pad
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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

PayPal payment integration in Ionic 5 Apps and PWA

Abhijeet Rathore — Fri, 31 Jul 2020 18:39:36 +0000

In this post, you’ll learn to integrate PayPal payment in Ionic 5 apps and PWA, so you can accept payment both on mobile and desktop devices.

PayPal is one of the most widely used and easiest payment gateway to integrate in your website or app. Plus it is spread all over the globe, and supports a wide variety of payment options. PayPal can take care of almost all your payment requirements, so you don’t have to go all

Not a great way of making payments 😝

What is Ionic ?

Ionic and Payment Gateways

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

Front-end: Angular | Build environment : Cordova ✅
Front-end: Angular | Build environment : Capacitor
Front-end: React | Build environment : Capacitor
Front-end: React/Angular | as PWA ✅

As you see, PayPal can be integrated in websites as well as mobile apps. In this blog we’ll learn how to integrate PayPal payment gateway in Ionic 5 apps and Ionic 5 PWA.

Ionic 4 and PayPal make a great team

Structure of post

In this post we will learn how to implement Paypal payments for an Ionic 5 PWA and mobile app. We can break down the post in these steps:

Step 1— Create a PayPal developer account and configure it for integration

Step 2— Creating a basic Ionic 5 Angular app

PWA integration

Step 3 —Configure PayPal web integration

Step 4 — Run the PWA on ionic serve to test web payments

App integration

Step 5 — Integrate Ionic Native plugin for PayPal

Step 6 — Build the app on android to test app payments.

Step 7 — Going Live

Step 1 — Create PayPal developer account and configure it for integration

To configure PayPal payments in your Ionic app or PWA, you need to create a business PayPal account. But for testing purposes, you have to use the Sandbox test accounts. Sandbox testing will look exactly like live payments, but it won’t deduct any money from your account or Credit Card.

To obtain your Sandbox credentials follow the steps below:

Go to Sandbox - Accounts and create a sandbox business and personal test accounts.
Go to My Apps & Credentials and generate a REST API app, and link it to your sandbox test business account (by default you have a business and personal sandbox account in developer dashboard).When your app’s PayPal SDK is running in Sandbox mode, you cannot make payments with an “actual” PayPal account, you need a Sandbox account. So, the personal sandbox account “pays” and business sandbox account “receives” the money.

Create new app in PayPal account

Also note down your Client ID from the app details. This is mostly what you need to integrate PayPal in your app / PWA and test payments.

Obtain Client ID from PayPal sandbox

Country specific gotchas

Being a payment gateway, PayPal has to respect different countries rules. E.g. In India, PayPal users can only pay and receive payments done from India in INR. So if you are testing from India, and your Sandbox accounts are created with India as country, you’ll have to make payments in INR. Similar restrictions may exist for other countries.
Sandbox payment credit cards are also currency sensitive. If you are facing issue making payments with the default sandbox credit card, generate a new one using Credit Card Generator from the left menu. Make sure you keep the country same as the sandbox account. Add this card with the Add new card option when you are making a sandbox payment

Generate a new sandbox credit card for PayPal payments

Step 2— Create a basic Ionic Angular app

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

(My node version at the time of writing the blog is 12.14.0)

Creating a basic Ionic-Angular app. Start a basic blank starter using

$ ionic start PayPalIonic sidemenu --type=angular --cordova

The --type=angular told the CLI to create an Angular app, not a React app !!

Run the app in browser using

$ ionic serve

You won’t see much in the homepage created in the starter. I have modified the homepage a little to test our PayPal functionality — basically you can do away with just a button for PayPal payments.

My homepage looks like this

HomePage UI for PayPal PWA implementation

Overall PayPal-web.page.html code looks like this

Step 3 — Configure PayPal web integration

We can’t use the PayPal Cordova plugin in an Ionic Progressive Web App (PWA). But we can use the PayPal front-end Javascript SDK in such case.

Warning : In websites or PWA, it is recommended to use payment gateway functions in back-end, because front-end implementation can reveal your client-ID, secret etc

Add PayPal Javascript SDK to index.html

For website/PWA front-end implementation, PayPal provides Payment Buttons (the yellow button in the above image). These are pre-configured PayPal buttons + functions, attached to a JS file we import in our PWA’s index.html as :

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&amp;currency=USD"&gt;&lt;/script>

Replace YOUR_CLIENT_ID in above script call with your own client ID, and change the currency as per your sandbox/live account currency. Client ID is what attaches the Payment with your PayPal REST API app, so do not get it wrong.

SDK Parameters

PayPal JavaScript SDK uses default values for parameters you don’t pass in the imported script. You might want to override these default values depending on your functionality. A few common parameters you might override:

currency - The PayPal JavaScript SDK defaults to USD
intent - The PayPal JavaScript SDK defaults to capture, which results in the capturing the funds immediately. If you want to authorize funds immediately but capture the funds later, you have to explicitly pass authorize as the intent for the transaction

Now, PayPal official documentation tells you to code the remaining part of the logic in index.html itself. But the default implementation is good for two reasons

Ionic app takes time to compile and load in the webview environment, so the render function cannot find the button container
We need to pass variables like amount, currency etc to the functions. So it makes more sense to keep the functions inside the page.ts file of PWA

Render Payment Buttons

In the HTML template, we replace the ion-button with

<div id="paypal-button-container"></div>

This id is used to identify the button, and attached correct render and payment functions to the button.

Payment Functions

createOrder — This function is called when the buyer clicks the PayPal button. This button

Calls PayPal using actions.order.create() to set up the details of a one-time transaction, including the amount, line item details, and more
Launches the PayPal Checkout window so the buyer can log in and approve the transaction on paypal.com

onApprove — This function is called after the buyer approves the transaction on paypal.com. This function:

Calls PayPal using actions.order.capture() to capture the funds from the transaction.
Shows a message to the buyer to let them know the transaction is successful.

onApprove function carries out the success or error part after a transaction. Here, you can call your server with a REST API and save a successful payment in your database.

Here’s the full code of PayPal-web.page.ts

You can also try different styles of payment buttons at PayPal Payment Button demo page

Step 4 — Test payments in PWA

Run the PWA on browser using ionic serve

When you click on the Payment Button, PayPal script automatically pops-up a modal with required functionality. Remember, this PayPal popup is attached to your PayPal REST API app, based on the Client ID you provided.

PayPal web script launches modal for login and payment

Login with your Sandbox account, and you’ll see payment options just like a normal PayPal transaction. Add a new credit card as I mentioned in Step 1, if you are getting an error saying Your bank was not able to verify your card . This is generally a mismatch in currency of the app, sandbox account or the credit card.

Remember, you cannot login with a non-sandbox PayPal account for testing

Payment options in your sandbox account — PayPal web implementation

Select the appropriate method, and your payment is done.

Sometimes, there will be an additional verification step involved, imitating a 3D secure password for real transaction. As you can see, being a Sandbox transaction, the password is mentioned as the Personal message.

Additional verification step

Once the payment is done, the response object will look like this

Response from PayPal web payments

You can easily use the response to determine if the payment was successful.

Step 5 — Integrate Ionic Native plugin for PayPal

To implement PayPal payment in Ionic Mobile apps, install PayPal Cordova plugin first

$ ionic cordova plugin add com.paypal.cordova.mobilesdk
$ npm install @ionic-native/paypal

Import PayPal in app.module

Import and include PayPal in the list of providers in your app.module.ts file.

import { PayPal } from '@ionic-native/paypal/ngx';

Import PayPal in app.module.ts

Import PayPal in your page

Create a separate folder for PayPal app implementation.

$ ionic generate page paypal-mobile

Import PayPal in your paypal-mobile.page.ts same as app.module.ts

import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';
....
export class PaypalPage {constructor(private payPal: PayPal) { }

Modify the page’s UI a little to match the phone payment functionality

HomePage UI for PayPal App implementation

Here’s the paypal-mobile.page.html code, in case you need

PayPal payment function

Invoke the payment function to initiate a payment. As mentioned earlier, You will require your client_id from your PayPal account. (How to get my credentials from PayPal account). This function will be attached to Pay with PayPal button we saw earlier in the app screenshot.

Here’s the complete code for PayPal mobile app implementation

In the payWithPaypal() function, you start by initializing the PayPal object with the PayPal environment (Sandbox or Production) to prepare the device for processing payments. Βy calling the prepareToRender() method you pass the environment we set earlier. Finally, you render the PayPal UI to collect the payment from the user by calling the renderSinglePaymentUI() method.

Notice the PayPalEnvironmentSandbox parameter. This is used for Sandbox environment. For production environment, it will change to PayPalEnvironmentProduction . Of course, do not forget to replace YOUR_SANDBOX_CLIENT_ID with your Sandbox Client ID .

Also notice, for the sake of a sample, we have taken PaymentAmount andcurrency as static in the logic, but these can be easily dynamic as per your app’s requirement.

Static amount and currency for sample purpose

Once payment is done, PayPal SDK will return a response. A sample sandbox response is shown in the gist above. One can use this response to show appropriate Toast or Alert to app users.

Step 6 — Build the app on android to test app payments

To build the app on android, run the following commands one after another

$ ionic cordova platform add android

$ ionic cordova run android

The final command will run the app on either default emulator, or an android device attached to your system. Once you click the Pay with PayPal button, you will see the PayPal payment screens

PayPal payment options screen

You can choose to

Pay with PayPal — using your PayPal account, OR
Pay with Card — This will use your’s device’s camera to help read your credit card (to avoid typing your card number, expiry date etc)

1. Pay with PayPal

You will need to login to your Sandbox Account to make a payment (because, remember, you are in a sandbox environment)

Once you are logged in, you’ll see the checkout options

Payment options in your sandbox account

Select one option, and pay for the dummy amount.

2. Pay with Card

In this case, your apps’ camera will open up to scan your card.

Scan your card

Once it is done scanning, it will confirm the card number, expiry date and ask for your CVV details etc. Lastly, it’ll show you a confirmation screen, and you proceed to pay the amount.

Confirm payment with PayPal card payment

In both payment cases, you should receive a successful payment response like the following

Successful payment response on Chrome console

This completes the Mobile app part of PayPal payment.

Going Live

After testing on app and PWA, when you want to go live, you will need to perform following steps

Copy the production client-ID from your PayPal account and use it in your app

Get your live client-ID for production usage

In app implementation, change the PayPalEnvironmentSandbox to PayPalEnvironmentProduction in prepareToRender function
In web-implementation, change the script import with

<script src=”https://www.paypal.com/sdk/js?client-id=LIVE_CLIENT_ID"> </script>

You’re all set now to make and accept payment from your Ionic app and PWA. Go enjoy, homie !

Let it rain !!!!

Conclusion

In this post, we learnt how to integrate PayPal in an Ionic app, as well as in an Ionic progressive web app. Testing can be performed easily using Sandbox accounts, and we can go live by simply changing sandbox client-ID with live-ID.

Leave comments if you face any issues in the implementation. I’ll be happy to help.

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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

Translate in Ionic 5 using apps and PWA

Abhijeet Rathore — Fri, 31 Jul 2020 18:21:55 +0000

In this post you’ll learn how to translate text in Ionic 5 apps and PWA. You will also learn how to get device specific language and convert your app’s text to the same language / locale.

Ionic has a variety of app types nowadays (Angular/React/Vue , Cordova/Capacitor). This post will explore the Ionic apps made in Angular Cordova, but the same process can apply in Angular Capacitor apps as well.

Translation in Apps — how is it done ?

Multi-language translation, OR internationalization is a growing need for every app that wants to target international customers. Till date, majority of apps have been developed in English, no surprise ! But with growing apps users, every app is now focusing on translating to local languages.

First we need to understand the steps involved in the process. Translations, thanks to Google, look very easy, but they are a bit involved in case of apps and websites, in our case Ionic 5 apps. There are 3 major steps in the translation process in an app —

1. Translation Language — Detect the language you want to translate into. This can either be done automatically by detecting phone or browser’s language (Globalization), OR, can be done with user actions (say, by using a dropdown).For our use case, we will detect device’s language using both Cordova Globalization plugin and Browser’s Internationalization API.
2. Prepare Language Text — You need to have a pre-translated dictionary (or JSON file) which stores the translations of all your app’s text in the Translation language. There are several ways to do this, as we’ll see in following steps. This is mostly a manual process for smaller apps, but you can use online tools like this for quick translations, or like POEditor for more standardized workflow.
3. Translate — After the above two steps, you finally translate your app’s text to the intended language. We will use ngx-translate library for translating our texts as we are talking about only Angular Ionic apps in this post

Structure of the post

So the development outline of this blog will be

1. Create a starter Ionic 5 tab app
2. Prepare multiple language JSON files in assets
3. Implement ngx-translate library to detect and translate AND Implement Cordova Globalization plugin or browser Internationalization API to detect device language
4. Test translations on browser
5. The Directive Gotcha
6. Setup stand alone translations
7. Test translations on Android / iOS

We will translate English text in 2 languages — French and Spanish

Sounds pretty easy, right ? Well, let’s dive right into it.

Step 1— Create a basic Ionic Angular app

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

Here’s my environment for this blogpost

Ionic:
Ionic CLI                     : 6.10.1 
Ionic Framework               : @ionic/angular 5.3.1
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics    : 9.1.12
@angular/cli                  : 9.1.12
@ionic/angular-toolkit        : 2.3.0

Cordova:
Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)

System:
Android SDK Tools : 26.1.1 
NodeJS            : v12.14.0
npm               : 6.13.4
OS                : macOS Catalina
Xcode             : Xcode 11.5 Build version 11E608c

Creating a basic Ionic-Angular app. Start a basic tabs starter using

$ ionic start ionicTranslate tabs --type=angular --cordova

The --type=angular told the CLI to create an Angular app, and --cordova tells the CLI to integrate Cordova in the app.

Run the app in browser using

$ ionic serve

You won’t see much in the homepage created in the starter. I have modified pages ( tab1 and tab2) to align it to our translation functionality.

My tab pages look like this

Tab UI for translation

HTML and SCSS file code for the above UI, if you want to just get started

Step 2 — Prepare multiple language JSON files in assets

We will create these JSON files in src/assets/i18n folder. The assets folder remains in the root even after a production build, so the path does not break. We will create three JSON files en.json (English), fr.json (French) and es.json (Spanish).

Folder structure for i18n files

en.json

{
"TITLE": "Hello sir",
"TITLE_2": "Hello {{value}}",
"description": "Ooohh .... did you just translate this text ?",
"data": {
  "name": "My name is {{name_value}}"}
}

fr.json

{
"TITLE": "Bonjour Monsieur",
"TITLE_2": "Bonjour {{value}}",
"description": "Ooohh .... vous venez de traduire ce texte?",
"data" :{
  "name": "je m'appelle {{name_value}}"}
}

es.json

{
"TITLE": "Hola señor",
"TITLE_2": "Hola {{value}}",
"description": "Ooohh .... acabas de traducir este texto?",
"data": {
  "name": "Me llamo {{name_value}}"}
}

Note, the value and name_value are kind of variable/constants we can pass from our component. This can be used to

Replace the variable with a user input or a value depending on the situation OR
To give translations not supported by the library OR
Keep a word constant across translations

STEP 3: Implement ngx-translate library and Cordova Globalization plugin

Cordova globalization plugin is used to detect device’s default language/locale. Unfortunately, this plugin is deprecated, but it is still supported by Ionic. Hence, you can opt to use it. However, the latest way of detecting the language / locale of the browser is by using browsers’s default Internationalization API.

Install Cordova globalization Plugin using

$ ionic cordova plugin add cordova-plugin-globalization

$ npm install @ionic-native/globalization

Install ngx-translate library

ngx-translate is the internationalization (i18n) library for Angular. Since our app has Angular under the hood, we can use this library for app as well as progressive web apps.

// Install core library
npm install --save @ngx-translate/core

// Install http loader
npm install @ngx-translate/http-loader --save

http-loader is used for loading the translation files (JSONs in our case) via Angular’s HttpClient module.

Note the versions of ngx-translate you should have as per your Angular version

Use appropriate version of ngx-translate based on your Angular version

Setup the translation library and http-loader

We need to define a function that loads the external JSON files to the app using http-loader. Add the following function to app.module.ts

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

where we have provided the external path of our JSON files to the function.

We need to add the translation and http-loader modules in our root module app.module.ts. This is how the file looks after setup.

Pay attention to TranslateModule.forRoot() This is used in case of a Tabbed application, or general non lazy-loaded module. For a tab child, however, we will have to use TranslateModule.forChild() . We will see later how this will affect our functionality.

Setup the translate library in child component

Let’s say, we want to implement the translation in Tab1. As mentioned previously, src/app/tab1 folder contains all the files for this page. We will import the translationService in tab1.page.ts file using

import { TranslateService } from '@ngx-translate/core';

The completed tab1.page.ts file will look like this

Let’s break down the code to understand a bit more

On page load we check if we have default browser internationalization API by checking window.Intl . We then get default browser language using navigator.language . We also set a fall back on Cordova globalization plugin (deprecated) and set a default language if neither browser nor Cordova plugin works.
Then we use this._translate.use(this.language) to tell the translation service which language to translate to. If the app has just loaded, it should default to your browser’s default language OR en (english)
Important: Usethis._translate.get('TITLE').subscribe() function from translateService to asynchronously fetch translations. Here,- get() is the function to fetch translations.- TITLE is the key to search for in the JSON files. If the data is in a nested JSON, then we use the dot notation to fetch e.g. data.name- subscribe is used for asynchronous fetching (no need to use timeouts)
changeLanguage is called from user action. This function will use the previous two steps to translate to the intended language

Step 4— Test translations on browser

Run the app on browser using ionic serve and test the translations using the dropdown. Here’s a GIF to show the functionality on browser

Translate in Ionic 5 using ngx-translate

Notice that the text loads in English by default in my browser. You can change your browser language from browser settings and check if the initial text loads in your default language. For chrome, the settings can be found here

Change your browser language to load app text in default language

And now my text loads default in French …. Bonjour !!

Step 5 — The Directive GOTCHA 😎

If you have followed the above steps exactly, you might not get the exact result as shown in the above GIF.

You will realize that the translation works in places where you have used

this._translate.get('TITLE').subscribe((res: string) => {           
this.title = res;
});
this._translate.get('description').subscribe((res: string) => {           
this.description = res;
});

to get the translation, and shown it in the HTML using the local variable like this

<h1>{{ title }}</h1><p>{{ description }}</p>

BUT, the translation does not work in places where you have used a directive like either of the following

<h1 translate>TITLE</h1><p [translate]="'description'"></p>

This is because in our Ionic 5 tab app, the tab pages are lazy-loaded. In lazy-loaded modules, you need to import the translation module in child modules as well for everything to work correctly.

Let’s go to our tab1.module.ts file, and import the translation and http-loader modules similar to our root module. But this time, we will use TranslateModule.forChild . The complete module file looks like the following

Now, if you run the app again, the directive translations will also work fine. 😎 😎 😎

directive method is preferred for bigger apps with lots of code, since this method results in smaller code size and no need of local variables.

Step 6— Setup stand alone translations

The process of setting up separate language file in assets for each language is the standard way of translation in Angular. But sometimes it becomes a little cumbersome, especially when you don’t have that much data to translate.

In case you want to quickly translate in the component itself, so that there is no spill over on other components, you can declare the variables in the components itself instead of reading them from the JSON files from assets

Let’s do these changes in tab2, so it doesn’t affect the global translations in tab1

HTML and SCSS

Similar to tab1.page.html , just remove the usage of variable data from the HTML. You can keep the styling same

tab2.page.ts

Stays pretty much same as tab1.page.ts . Just add the following in the constructor

_translate.setTranslation('en', {
 "TITLE": "Bye sir",
 "TITLE_2": "Bye {{value}}",
 "description": "Thanks for translating this text"
});
_translate.setTranslation('fr', {
 "TITLE": "Au revoir Monsieur",
 "TITLE_2": "Au revoir  {{value}}",
 "description": "Merci d'avoir traduit ce texte"
});
_translate.setTranslation('es', {
 "TITLE": "Adiós señor",
 "TITLE_2": "Adiós {{value}}",
 "description": "Gracias por traducir este texto"
});

Here, you are defining the translations locally in your component itself. Also, to let angular know that these are standalone translations, you use isolate:true in your tab2.module.ts

....
TranslateModule.forChild({
 loader: {
  provide: TranslateLoader,
  useFactory: HttpLoaderFactory,
  deps: [HttpClient]
 },
 isolate: true
}),
....

Now run the app in browser and test translations. Your translations will be picked from the local component itself

Translation in Ionic 5 apps using component level translations

Notice, the directive method and variable also work well with the local definitions.

Step 7 — Test translations in iOS/Android

To build the app on android, run the following commands one after another

$ ionic cordova platform add android

$ ionic cordova run android

The final command will run the app on either default emulator, or an android device attached to your system. Here’s the translation running on my android device

Ionic 5 Angular app — Translation and Globalization

Interesting fact: In device, the language id may be different from browser. For me
- Device default language comes out to be en-US
- Browser’s default language comes out to be en

Hence, you need to be careful to detect all variations of a language. Accordingly, you’ll need to have JSON file named accordingly.

Conclusion

In this post we learnt how to detect device / browser language, create multiple language files, and implement translation using different methods in Ionic 5 apps.

The only limitation of using the ngx-translate library is that you will need to define your language texts on each page of your application beforehand. These will be stored as country code titled JSON files (i.e. en.json, jp.json, it.json etc) within the src/assets/i18n/ directory. You can’t dynamically generate the language translation on the fly using this library so if you require that type of functionality you’ll need to look into using the Google Translate API or something similar.

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 5 React Full App in Capacitor from Enappd

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

Capacitor Full App with huge number of layouts and features

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

Ionic Full App in Cordova, with huge number of layouts and features

Implement AdMob in Ionic React Capacitor Apps

Abhijeet Rathore — Sun, 19 Apr 2020 19:07:04 +0000

This post is done on a special request from one of our thousands readers. If you have more requests, let me know in the comments

In this post, you will learn how to implement AdMob functionality, i.e. Google advertisements, in Ionic React Capacitor apps. We will implement this in a simple Ionic App and test on iOS simulator and Android device.

What is Admob?

As we all know, advertisements are the major source of income for all tech giants like Google, Facebook, Twitter etc. Google ads are one of the most popular ads out there, and the mobile version of Google ads is what they call AdMob.

An example of Google AdMob ad. The ad is prompting user to install certain app

Type of AdMob ads

Banner: A basic ad format that appears at the top & bottom of the device screen.

Interstitial: Full-page ads appear at natural breaks & transitions, such as level completion. Supports video content.

Rewarded: Full page Ads reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users. Supports video content.

Native: Customizable ad format that matches the look & feel of your app. Ads appear inline with app content. Supports video content. For now, Native ads are only possible in Native apps, not in hybrid apps like the ones based on Ionic or React Native.

Let us look at the underlying frameworks for this post. If you are conversant with Ionic and Capacitor, skip these sections and go to the code segment of the post.

Disclaimer

Since this post is a mix of three frameworks, it is possible you landed here by mistake. If you are looking for AdMob login in

React Native — Please check this post
Ionic React (Capacitor) apps — Continue reading 😎

As you can see from above, there are more than one options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on Ionic framework with React as the front-end framework, and Capacitor as runtime and build environment.

Code for this tutorial is available on Github repo ionic-react-capacitor-admob

Let’s see a brief intro to each of the included frameworks:

Ionic
Capacitor

What is Ionic ?

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a hybrid mobile app development SDK. It provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. 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.

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 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)

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.

Plugins

Cordova and Ionic Native plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be incompatible with Capacitor. For Admob functionality, we’ll use the Capacitor Admob plugin

Post structure

We will go in a step-by-step manner to explore the AdMob feature implementation. This is my break-down of the blog

STEPS

Create a basic Ionic Capacitor app with React
Build the app in Android with Capacitor
Setup your AdMob account
Setup AdMob plugin
Implement different types of Ads in your App
Build the app on iOS simulator and test
Build the app on Android device and test

So let’s dive right in!

I made you laugh … didn’t I ? 😆

Step 1 — Create a basic Ionic Capacitor app with React

Create a basic app from Ionic starters itself.

$ ionic start ionic-react-admob tabs --type=react

This will create a basic Ionic app in React. I have chosen tabs starter so I can use different tabs for different Ad types.

We’ll create a simple UI with few buttons that will trigger Ads. For interstitial ads, these triggers are generally completion of a level in a game app etc. Banner ads are generally triggered on page load itself. Reward ads are shown where user can earn a reward by watching the ads.

My basic UI for the ad pages looks like this

Basic UI for AdMob implementation in Ionic React Capacitor Apps — iOS

Step 2 — Build the app in Android with Capacitor

To build the apps for device / emulator, we need to attach capacitor to the app. Run

$ ionic integrations enable capacitor

At the time of this post, I have node 12.14.0 and I have opted for Capacitor 1.x, although Capacitor 2.0 is also released. The reason is to avoid updating Xcode to read apps made by Capacitor 2.0. Although I have tested the functionality in Capacitor 2.0 with Android and it works

By default if you run the above command, it will install Capacitor 2.0. Apps built with Capacitor 2.0 will require latest Android Studio and latest Xcode. If you have these, perfect ! But if you don’t, stick to Capacitor 1.x for the tutorial and you can update later. I have used “@capacitor/core”: “1.2.0”, and “@capacitor/cli”: “1.2.0” for this post.

Add platforms and build the app in device as a test

// Add android platform
$ npx cap add android
// Add iOS platform
$ npx cap add ios
// Build web assets to copy to platforms
$ ionic build
// copy the build assets to platforms
$ npx cap copy
// open android studio to build app
$ npx cap open android
// open xcode to build app
$ npx cap open ios

At this point, you can run the app in either iOS / Android device or simulator using Xcode / Android Studio . You’ll see the UI running fine in the device.

Step 3 — Setup your Admob account

This step is common for any app. Since Admob is a Google service, independent of app platform, you can have one account and use it in every type of app. I use the same AdMob app in every AdMob example post.

Follow these steps to create your Admob account and Admob app

Signup then Sign in to your AdMob account at https://apps.admob.com.
Click Apps in the sidebar.
Click Add app to add a new app or click View all apps to search a list of all of the apps you’ve added to AdMob.
In the App Settings options, you can see your App ID. This is the ID you will need to connect your app to Google AdMob in your app.

Note down your App ID from App Setting in Google AdMob

In the Ad Units section, you can add multiple types of Ad units. For more details on adding Ad Units, check out the following detailed step-by-step instructions for

— Banner Ads

— Interstitial Ads

— Reward Ads

AdMob has a ton of other settings for how, when and where your ads should show up, but all that for later. In this post, we’ll limit the discussion to “How to display basic ad units in a Ionic React Capacitor app”

Step 4 — Setup AdMob plugin

For this post, as I explained earlier, we are using Capacitor Admob plugin. Also, since capacitor does not inject necessary platform specific variables while building the app, we’ll have to make small changes when we build apps

4.1 Install Capacitor AdMob plugin

In your existing app, add the plugin using

$ npm install --save capacitor-admob

4.2 Build in Android

Since we have only added a plugin, just sync the dependencies using

// copy the build assets to platforms
$ npx cap sync

In Android Studio, open your AndroidManifest.xml file and add this meta-data line and replace the value by the actual App ID of your app

<application>
  <!-- this line needs to be added (replace the value!) -->
  <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713" />
  <activity>.....</activity>
</application>

Open your Ionic Capacitor App in Android Studio, Now open MainActivity.java of your app and Register AdMob Capacitor Plugin.

// Other imports...
import app.xplatform.capacitor.plugins.AdMob;
public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{<br>      <strong class="markup--strong markup--pre-strong">add(AdMob.class);</strong>  // Add AdMob as a Capacitor Plugin<br>    }});
  }
}

Build the app once on device. If there is no error, your Android app is ready to show ads

4.3 Build in iOS

Once again, just sync the dependencies using

// copy the build assets to platforms
$ npx cap sync

Open your App/App/Info.plist file and add this plist value line and replace the value by the actual App ID of your app

<key>GADIsAdManagerApp</key>
<true/>
<key>GADApplicationIdentifier</key>
<!-- replace this value with your App ID key-->
<string>ca-app-pub-6564742920318187~7217030993</string>

Build the app once on device/simulator. If there is no error, your iOS app is ready to show ads.

Step 5 — Implement different types of Ads in the app

Once everything is setup, let us implement different types of Ads in the app. For all types of Ads, you’ll need to import the plugin and initialize.

import { AdOptions, AdSize, AdPosition } from 'capacitor-admob';
const { AdMob, Toast } = Plugins;

In the constructor, initialize AdMob using

// replace with your own App ID
AdMob.initialize('ca-app-pub-3940256099942544~3347511713');

Banner Ad

Banner ads are implemented in Tab1. You’ll also need an Ad Unit ID for the banner ad from your AdMob account.

Once you have the UI in Tab1.tsx file, we’ll implement four methods

showBanner
pauseBanner
resumeBanner
removeBanner

The names of the methods are self-explanatory. The code for the full page will look like this

Banner ad implementation in Ionic React Capacitor app

You can get test ad IDs from Google for testing as well. DO NOT use a test ID in your production app, and DO NOT use your production Ad Unit ID while developing the app

Interstitial Ad

Interstitial Ads work on a trigger. Because these are full page ads, they are not always visible as Banner Ads.

To implement interstitial ads, import the plugin, initialize and follow the code below

Interstitial ad implementation in Ionic React Capacitor app

Interstitial ads need to load before they can be shown. In you productions apps, it would be a good practice to load these ads on page load itself, and then show whenever required.

Reward Ad

Again, reward Ads are similar to interstitial ads in the trigger mechanism. To implement, import the required dependency and follow the code below

Reward ad implementation in Ionic React Capacitor app

Again, TestIds.REWARDED is a test ID. Replace it with production Ad ID when releasing the app.

.prepareRewardVideoAd() method loads the ad. This ad takes some time in loading. That is why .showRewardVideoAd() should be called after a delay, or on success of loading.

Step 6: Testing the app on an iOS simulator

To build the code on iOS, just run these

$ ionic build
$ npx cap copy

Once done, build your app from Xcode, and run the app. Let’s see how the ads will look in iOS.

Banner Ad

The resulting ad looks like this on iOS

AdMob Banner ads in iOS — Ionic React Capacitor app

Interstitial Ad

The ad on full screen looks like following on iOS

AdMob Interstitial ads in iOS — Ionic React Capacitor app

Reward Ad

The reward ad will look like this on iOS

AdMob Reward ads in iOS — Ionic React Capacitor app

Step 7: Testing the app on an Android device

Just like iOS, the same code will show ads in Android as well. This video link here will show how the ads will show up on android device (just for the sake of completion of the post)

Tada ! You have learnt how to implement AdMob ads in your Ionic React Capacitor app. 🎉

Conclusion

In this blog, we learned how to implement Google AdMob functionality in Ionic React Capacitor app. AdMob functionality is a must for an app where user wants to earn some revenue from ad clicks. This comes in handy when your app has a large number of users, and you do not charge users for anything in the app. So ads become your direct revenue source. You can also combine the interstitial ads and rewards ads with in-app rewards like a level up in a game, extra lives etc.

Code for this tutorial is available on Github repo ionic-react-capacitor-admob

Next Steps

Now that you have learnt about setting up AdMob in Ionic React Capacitor apps, here are some other topics you can look into

Ionic React Capacitor

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

Ionic 4 React Full App with huge number of layouts and features

Ionic Angular Capacitor

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

Capacitor Full App with huge number of layouts and features

Ionic Angular Cordova

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

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

Ionic 5 Full App with huge number of layouts and features

Implement AdMob in React Native with Firebase

Abhijeet Rathore — Tue, 14 Apr 2020 03:04:21 +0000

This post is done on a special request from one of our thousands readers. If you have more requests, let me know in the comments

In this post, you will learn how to implement AdMob functionality, i.e. Google advertisements, in React Native apps. We will implement this in a simple React Native app and test on iOS simulator.

An example of Google AdMob ad. The ad is prompting user to install certain app

Type of AdMob ads

Banner: A basic ad format that appears at the top & bottom of the device screen.

Interstitial: Full-page ads appear at natural breaks & transitions, such as level completion. Supports video content.

Rewarded: Full page Ads reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users. Supports video content.

Let us look at the underlying frameworks for this post. If you are conversant with React Native and Firebase, skip these sections and go to the code segment of the post.

What is React-Native

Before we move into the blog, let’s first clarify what framework we are using. We are using React Native, which is one among many hybrid app frameworks available. The closest rivals of React Native are Flutter and Ionic.

TLDR; — React Native (RN) apps are more “native” than web-view apps made by Cordova / Ionic. React Native crates actual Java and Swift codes for apps, unlike the web-view apps which essentially run in a … web-view.

React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React Native applications render using real mobile UI components, not web-views, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. Facebook, Palantir, TaskRabbit etc are already using it in production for user-facing applications.

What is Firebase

If you don’t know much about Firebase … you need to catch up with latest tech news. Firebase is the popular stuff in the market today. One can use Firebase to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.

Some of the quick integrations available with Firebase are

Email Authentication
Social logins
Real-time database
Analytics
Crashlytics
Push notifications
In-app messages
Remote config

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

So, why use AdMob with Firebase ?

Umm, well it’s not really necessary to use Firebase for AdMob. You can integrate AdMob in your app independent of Firebase. I am using Firebase connected AdMob for two reasons

I have been using Invertase React Native Firebase plugin for quite some time. They have great documentations and so, I have trust in their products. Their AdMob dependency, in-turn, depends on React-Native Firebase. Hence.
With Firebase and AdMob connected, you can view great insights about your AdMob campaign. For explanation refer to the video here.

As an alternative, you can use other React-Native AdMob dependencies for showing ads in your React Native app. I will probably cover one of those in my blogs later.

Enough of story-telling, let’s dive into — how to implement AdMob in React Native apps

Post structure

We will go in a step-by-step manner to explore the AdMob feature implementation. This is my break-down of the blog

STEPS

Create a Firebase project and get required information
Create a simple React Native app
Setup your AdMob account
Setup AdMob dependency
Implement different types of Ads in your RN App
Build the app on iOS device and test

So let’s dive right in!

I made you laugh … didn’t I ? 😆

Step 1 — Create Firebase project

For Admob implementation, all we need from Firebase project is — GoogleService-Info.plist file (for iOS) or google-services.json file for Android

Follow these steps

Login into Firebase Console
Create Firebase Project
Add an iOS app (or an Android app), register the Bundle ID, and give your app a name
Download GoogleService-Info.plist . We’ll need this file later in the project

Follow this video for the above steps if you need.

Step 2 — Create basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.62 & node 12.14.0

Create a blank react-native app

$ react-native init AdMob

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

We’ll create a simple page with few buttons that will trigger Ads. While banner ad generally doesn’t need a trigger, interstitial ads and reward ads need a trigger. These triggers are generally completion of a level in a game app etc. My basic UI for the ad page looks like this

Basic UI for AdMob implementation in React Native — iOS

Step 3— Setup your Admob account

Signup then Sign in to your AdMob account at https://apps.admob.com.
Click Apps in the sidebar.
Click Add app to add a new app or click View all apps to search a list of all of the apps you’ve added to AdMob.
In the App Settings options, you can see your App ID. This is the ID you will need to connect your app to Google AdMob in your React Native app.

Note down your App ID from App Setting in Google AdMob

In the Ad Units section, you can add multiple types of Ad units. For more details on adding Ad Units, check out the following detailed step-by-step instructions for

— Banner Ads

— Interstitial Ads

— Reward Ads

Step 4 — Install AdMob dependency and implement

For this post, as I explained earlier, we are using AdMob with Firebase. The dependency we are using for this is React-Native Firebase. This main dependency contains several service modules, AdMob is one of them.

4.1 Install React-Native Firebase for iOS

In your existing React Native app, add the main dependency using

$ yarn add @react-native-firebase/app
# For iOS 
cd ios && pod install

4.2 Import Firebase config file in Xcode

Next, open the project (/ios/{projectName}.xcworkspace) in Xcode editor. Add your GoogleService-Info.plist file to the project by right clicking on the project name and “Add files” to the project, as demonstrated below. Ensure the ‘Copy items if needed’ checkbox is enabled.

4.3 Initialize Firebase in Xcode

Open the AppDelegate file within your project /ios/{projectName}/AppDelegate.m. At the top of the file import the Firebase module:

#import <Firebase.h>

Within the didFinishLaunchingWithOptions method, add the configure method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if ([FIRApp defaultApp] == nil) {
  [FIRApp configure];
} 
....

Rebuild your project by running commands

$ cd ios/
$ pod install --repo-update

4.4 Install AdMob dependency

Install the module using

$ yarn add @react-native-firebase/admob
# For iOS
cd ios/ && pod install

Once completed, re-run your project in iOS device using

$ react-native run-ios

or run using Xcode.

The above steps often lead to some small mistake. If the app doesn’t start up fine, check these

Clean your project and build again
Make sure you have latest CocoaPods version
Make sure your PodFile mentions the dependency as

pod ‘RNFBAdMob’, :path => ‘../node_modules/@react-native-firebase/admob’

4.5 Adding your AdMob App ID

The AdMob module needs to be hooked up to your own Google AdMob account using the App ID we noted down in Step 3

Add the ID to your root level firebase.json file (create one) under the react-native object like following

{
"react-native": {
  "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
  "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx" 
 }
}

Rebuild your application for the changes to take effect.

Step 5 — Implement different types of Ads in the app

Once everything is setup, let us implement different types of Ads in the app.

Banner Ad

Banner ads are implemented as a <BannerAd> tag itself. You can place it in your React Native app just like any other tag. Make sure you import the dependency

import { TestIds, BannerAd, BannerAdSize} from '@react-native-firebase/admob';

I imported the Banner ad at the bottom of the page, in a View positioned absolute as follows

<BannerAd
 unitId={TestIds.BANNER}
 size={BannerAdSize.SMART_BANNER}
 requestOptions={{<br> requestNonPersonalizedAdsOnly: true,}}
 onAdLoaded={() => {
 console.log('Advert loaded');}}
 onAdFailedToLoad={(error) => {
 console.error('Advert failed to load: ', error);}}
/>

Here, I have used a test ID TestIds.BANNER . This uses a default test ID provided by AdMob. You will replace this with your production Ad unit ID when you release the app

DO NOT use the test ID in your production app, and DO NOT use your production Ad Unit ID while developing the app

The resulting ad looks like this

AdMob Banner Ad in React Native app

Interstitial Ad

Interstitial Ads work on a trigger. Because these are full page ads, they are not always visible as Banner Ads.

To implement interstitial ads, import the required dependency and follow the code below

Interstitial Admob Ads in react native app

Again, TestIds.INTERSTITIAL is a test ID. Replace it with production Ad ID when releasing the app.

.load() method loads the ad. This ad takes some time in loading. That is why .show() is called on the LOADED event. If you call the .show() method immediately after .load() the app with crash.

Finally .show() shows the ad on full screen, like following

Admob interstitial ad in React Native app

Reward Ad

Again, reward Ads are similar to interstitial ads in the trigger mechanism. To implement, import the required dependency and follow the code below

Again, TestIds.REWARDED is a test ID. Replace it with production Ad ID when releasing the app.

Reward Ads also have a .EARNED_REWARD event, which is called when the reward ad throws a callback (generally when user has seen the required length of the ad). After this callback, you can provide user with the reward.

Finally .show() shows the ad on full screen. The reward ad will look like this

Admob reward ads in React native app

Step 6: Testing the app on a device

To run the iOS app, you should specify simulator

$ react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first (or connect a device), either via Android Studio or adb , then call

$ react-native run-android

Tada ! You have learnt how to implement AdMob ads in your React Native app. 🎉

Conclusion

In this blog, we learned how to implement Google AdMob functionality in React Native app. AdMob functionality is a must for an app where user wants to earn some revenue from ad clicks. This comes in handy when your app has a large number of users, and you do not charge users for anything in the app. So ads become your direct revenue source. You can also combine the interstitial ads and rewards ads with in-app rewards like a level up in a game, extra lives etc.

Complete source code of this tutorial is available in the react-native-admob

Next Steps

Now that you have learnt about setting up AdMob in React Native apps, here are some other topics you can look into

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

Implement Local Notifications in Ionic 5 with Capacitor

Abhijeet Rathore — Tue, 14 Apr 2020 02:36:24 +0000

For an Ionic 4 Cordova implementation of Local Notifications, check out this blog

Ionic 5 is here ! And so is Capacitor 2.0 (beta). In this post you are going to learn how to implement local notifications in Ionic 5 app with Capacitor. We will see a variety of notification types that can be generated using Local Notifications. We will use a simple Cordova plugin, that works for Capacitor as well, and test the functionality on an Android and iOS app.

Complete code of this blog post can be found at this github repo — ionic-5-local-notifications

What is Local Notification ?

We have all heard of notifications, and push notifications mostly. These are the notifications app servers send to apps for regular reminders. For example, a chat app server sends notification to user to update of a latest message. These notifications are received in closed app, minimized app or open app.

`Push notifications ….. necessary evil

Push notifications cause burden on Server, as well as, cost you money if you are using a service like OneSignal etc. Hence, for each action or reminder, you might not want the server to send push notifications to all users. Especially if you have millions of users.

This is where Local Notifications come in handy. These look and feel exactly like push notifications, but are not sent from server. Instead, they are generated locally on your device. E.g. If you want an app to remind you of your tasks at a certain time of the day, it makes sense that the app does so using the in-built clock or timer in the device. The app then sends you Local Notification, which looks same as a push.

You don’t feel the difference between Local and Push notification, and the server saves a lot of overhead.

In this post, we will learn how to implement Local notifications features in Ionic 5apps. First, let’s see what Ionic 5 is all about.

What is 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.

Ionic’s latest version — Ionic 5, was released in March 2020, and is what we are using for this blog post.

Capacitor — How is it different from Cordova ?

Cordova helps build Ionic web app into a mobile device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.

Here are the differences between Cordova and Capacitor

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 Corodva.

Plugins

Cordova and Ionic Native plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be incompatible with Capacitor. For Local Notification functionality, we’ll use the cordova-plugin-local-notifications.

Structure of the post

I will go ahead in step-by-step fashion so you can follow easily

Create a basic Ionic 5 Capacitor app
Install Local Notification plugin and make imports
Implement your first Local Notification, use data from notification
Build your app on iOS and Android and test
Implement various types of Local Notifications

Let’s start with creating a simple Ionic 5 app

Step 1 — Create a basic Ionic 5 app

To create a basic Ionic 5 Capacitor app, follow these steps

Make sure you have node installed in the system (I used V10.15.3 at the time of this blog post, but latest stable version is 12.x)
Install ionic cli using npm (my Ionic CLI version is 5.3.0 and Ionic Framework is V5.0.5)
Create an Ionic app using ionic start

You can create a blank starter for the sake of this tutorial. On running ionic start ionic-5-local-notifications blank —-capacitor , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

The app will launch on browser. You can go to Inspect → Device Mode to see the code in a mobile layout.

The --capacitor flag attaches Capacitor to your Ionic app automatically. If you forget to do it while creating the app, you can do it later by running

$ ionic integrations enable capacitor

You can create a basic layout for triggering Local Notifications. All the real action will happen when we build the app for device (iOS).

The layout here is taken from Ionic 5 Full App from Enappd 🙏

Next we’ll add the Local Notifications plugin to our app.

Step 2 — Install Local Notification plugin and make imports

To implement Local Notifications you need to add cordova-plugin-local-notifications plugin to the app. Add the plugin using

$ ionic cordova plugin add cordova-plugin-local-notification 
$ npm install @ionic-native/local-notifications

This will install the plugin in your app. Next, import the plugin in app.module.ts and in the pages you want to use it.

import { LocalNotifications} from '@ionic-native/local-notifications/ngx'

Also, include LocalNotifications in @ngModule providers list.

@NgModule({
....,
providers: [
...,
LocalNotifications,
...],
})

Now you are ready to implement Local notifications in your Ionic 5 app.

Step 3 — Implement your first Local Notification

Local Notification implementation is very easy once you import the plugin correctly. Head to your home.page.ts created with the app. Create a function to schedule your first local notification like this

Super easy, right ? This will create a local notification and it will appear in your device’s status bar as an icon. You can check the full notification in your device’s notification tray.

Local notification in Ionic 5 app — Android implementation

Let’s dive deeper into the details of the notification object, and learn what all options are available

id — ID of the notifications
title — Title of the notification, shown in larger font. If no title is provided, app’s name is shown as title
text — Message of the notification. Shown in smaller font. It can be of multiple lines as well. Can be an array of messages as well. We’ll see that in later section
sound — location of sound file to be played with notification
data — additional data you can send along with notification in JSON format
icon — location or URL of icon shown with the notification
silent — (boolean) whether notification should be silent or not
trigger — custom trigger time of notification, can be given in various formats. We’ll see this in later section
attachments — Attached images to be sent with notification
progressBar — progress-bar options for Local notifications
group — define the group name to group similar notifications together
summary — summary of grouped notifications
smallIcon — Small icon shown for group notifications or custom notifications
sticky — whether the notification should be sticky or dismissible
autoClear — If yes, make the notification automatically dismissed when the user touches it (Android only)
lockscreen — If set to true the notification will be shown in its entirety on all lock-screens. If set to false it will not be revealed on a secure lock-screen. (Android only)
channel — Specifies the channel the notification should be delivered on (Android only)
foreground — If the notification should show up on app’s foreground
timeoutAfter — Specifies a duration in milliseconds after which this notification should be canceled, if it is not already canceled (Android only)
launch — Specifies whether a click on the notification causes the app to open in foreground
priority — Integers between -2 and 2, whereas -2 is minimum and 2 is maximum priority
led — to set LED options of the device. You can set color , on and off properties
vibrate — (boolean) — Whether notification should vibrate the device
color — RGB value for the background color of the smallIcon (Android only)
badge — The number currently set as the badge of the app icon in Springboard (iOS) or at the right-hand side of the local notification (Android). Default: 0 (which means don’t show a number)

… and few more options. That’s a lot !!!

This is a really powerful and detailed plugin. You can make very good use of the plugin to supplement push notifications, and make your app interactive.

Step 4 — Build your app on Android and test

If you have carried out the above steps correctly, Android build should be a breeze.

Run the following command to create Android platform

$ ionic cordova platform add android

Once platform is added, run the app on device (Make sure you have a device attached to the system).

$ ionic cordova run android

Once your app is up and running on the device, you can start testing all the functions. The GIF shown above is taken from a real Android device 😎

Step 5 — Implement various types of Local Notifications

The GIF in previous section might not have impressed you a lot. So let’s have a look at the variety of notifications and actions you can perform with this plugin

Local notification in foreground

Just add foreground:true in notification trigger call, and your notification will show up in the foreground, just like Whatsapp !

Foreground Local Notification in Ionic 5 app — Android
Foreground Local Notification in Ionic 5 app — iOS

Get Data from Notification Click

As we saw earlier, the data field of notification contains certain data in JSON format. We can extract this data using notification events . For our purpose, we will use click event.

I will subscribe to the click event before scheduling the notification. Then on clicking the notification, the event will be triggered and we will get data in console. I will also show the data in an alert, just for demo. After the alert, we will unsubscribe from the listener. The complete code for this will be

The sequence will look like this

Local notification with event triggered on click

Multiple Notification at once

Just send multiple local notifications in an array inside the schedule

Multiple Local notification at once — Ionic 5 Capacitor Android app

Delayed Local Notifications

You can also delay a notification or send it at a particular time. This way, you can even schedule notifications daily, weekly etc.

E.g. For demo purpose, we’ll trigger a notification after 5000 ms of button click, but it will be taken as a date object. Just add the following option in notification options

trigger: { at: new Date(new Date().getTime() + 5000) },

Notification shows up after 5 second — Ionic 5 Capacitor Android app
Notification shows up after 5 second — Ionic 5 Capacitor iOS app

Local Notification with Progress Bar

You can also display a local notification with a progress bar. This is useful in cases like when you are performing a long background task.

Just add following to notification options object (will show a 20% progress)

progressBar: { value: 20 }

Local notification with progress bar — Ionic 5 Capacitor Android app

iOS progress bar notification are not that impressive though

Local notification with progress bar — iOS

Local Notification with multi-line message

You can make the notification message multi-line by adding new line characters. E.g.

text: '4:15 - 5:15 PM\nBig Conference Room'

Local Notification with Multi-line message —Android
Local Notification with Multi-line message —iOS

Local Notification with Image and Action buttons

To add a large image, you can add this to the notification options (yes, kitten photo 😛

attachments: ['http://placekitten.com/g/300/200']

For action buttons, you can add this to the options

actions: [
{ id: 'yes', title: 'Yes' },
{ id: 'no', title: 'No' }
]

An action generally has the following structure —

id?: string;
title?: string;
foreground?: boolean;
launch?: boolean;
ui?: string;
needsAuth?: boolean;
icon?: string;
choices?: string[];
editable?: boolean;
submitTitle?: string;
type?: ILocalNotificationActionType;

This will create a notification with YES and NO buttons

Local Notification with Action buttons and Image — Android

I was not able to get the photo in iOS, probably because of http, though the action buttons do appear and work

Local Notification with Action buttons — iOS

Local Notifications with Input

You can also generate local notification accepting input text in notification tray itself. This comes in handy in chat applications. This is all you need to add to the notification options

actions: [{
id: 'reply',
type: ILocalNotificationActionType.INPUT,
title: 'Reply'
}]

To use ILocalNotificationActionType , you will have to import it first in the page using

import { ILocalNotificationActionType } from '@ionic-native/local-notifications/ngx';

The result will look like this

Local notification with Input text— Android
Local notification with Input text —iOS

Local Notifications with Grouping

At times, you receive many notifications from the same app. E.g. your email app, or chat app. You would like to group these together so as to not take a lot of space in notification tray. You can do this easily with local notifications using the following option

this.localNotifications.schedule([
{ id: 0, title: 'Design team meeting' },
{ id: 1, summary: 'me@gmail.com', group: 'email', groupSummary: true },
{ id: 2, title: 'Please take all my money', group: 'email' },
{ id: 3, title: 'A question regarding this plugin', group: 'email'},
{ id: 4, title: 'Wellcome back home', group: 'email' }
]);

The group:'email' creates a group with similar notifications which have group:email . Here’s how it looks

Local notification with grouped notifications —Android

You see the four emails grouped together, with one as a header. Other notification is shown as separate notification. Same for iOS

Local notification with grouped notifications —iOS

The group notification do come in annoyingly though in iOS 🙈

Grouped notification in iOS come one after another

Conclusion

In this post, we learnt how to use Local Notification in Ionic 5 Capacitor apps to generate a lot of different types of notifications. These include action buttons, input text, images, multiple notifications, grouping etc. With local notifications, you can save a lot on server push notifications. Plus it gives you the ability to schedule regular notifications as well.

We tested the apps on Android device and iOS simulator to validate the working. I think this is an awesome plugin, and you should definitely use it in your apps if possible.

Complete code of this blog post can be found at this github repo — ionic-5-local-notifications

Next Steps

Now that you have learned the implementation of Local Notifications in Ionic 5, you can also try following blogs. These are written for Ionic 4, but will work nicely for Ionic 5 as well.

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

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

Ionic 5 Full App starter from Enappd

Forem: Abhijeet Rathore

How to Generate and download PDF in Ionic 5 apps

Ionic —&hairsp;Introduction

Item Ordering Flow&hairsp;—&hairsp;Grocery Platform

Structure of the post

Step 1&hairsp;—&hairsp;Create a blank Ionic app

Step 2&hairsp;—&hairsp;Create the required UI and dummy data

Step 3&hairsp;—&hairsp;Setup PDF generation plugin

Step 4&hairsp;—&hairsp;Setup PDF content and styling

Create PDF Download Modal

PDF Download Modal UI

Download Logic

Step 5&hairsp;—&hairsp;Test on device

Conclusion

Next Steps

Ionic Capacitor

Ionic Cordova

Ionic React Full App with Capacitor

Ionic Capacitor Full App (Angular)

Ionic Full App (Angular and Cordova)

PayPal Payment Integration using Braintree in Ionic 5 apps

Steps to Implement PayPal Integration Using Braintree :-

What is Braintree ?

What is Ionic ?

Ionic and Payment Gateways

Step 1 :- Create Braintree sandbox account and get the required keys

Step 2&hairsp;—&hairsp;Setup Ionic 5 project

Creating and configuring the Ionic 5 application.

Step 3&hairsp;—&hairsp;Setup Node JS project

Step 4&hairsp;—&hairsp;Creating Node JS APIs for Braintree

Payment Flow with Braintree

Step 5&hairsp;—&hairsp;Braintree integration in Ionic App using Node JS APIs

Step 6&hairsp;—&hairsp;Testing

Troubleshooting

>> braintree is not defined

>> Authentication error in API

Conclusion :-

Next Steps

Ionic Capacitor

Ionic Cordova

Ionic React Full App with Capacitor

Ionic Capacitor Full App (Angular)

Ionic Full App (Angular and Cordova)

Google login in Ionic Capacitor app with Angular

What is Ionic ?

Capacitor&hairsp;—&hairsp;How is it different from Cordova ?

Plugins

A word on Google authentication

Structure of post

Step 1&hairsp;—&hairsp;Create a basic Ionic Angular Capacitor app

Attach Capacitor to existing app

Step 2&hairsp;—&hairsp;Create a Google project

2.1 Create new project

2.2 Requirements for different project types

Web

Android

2.3 Google-services.plist

2.4 Web-client ID

2.5 Web API Key

2.6 SHA-1 key

Step 3&hairsp;—&hairsp;Setup Google Login Plugin and functions

4.1 Install Capacitor Google Auth plugin

4.2 Setup plugin functions for login

4.3 Enable routing between two pages of the app

4.4 Sign out

4.5 Detect already logged in user / Auto-login

Step 4: Prepare and Test on Web

Step 5&hairsp;—&hairsp;Build and Test your app on Android

Create and configure platform

Avoid unimplemented methods

Make sure

Step 6&hairsp;—&hairsp;Build and Test your app on iOS

Create and configure platform

Make sure

Conclusion

Next Steps

Ionic Capacitor

Ionic Cordova

Ionic Capacitor Full App (Angular)

Ionic React Full App with Capacitor

2.3 Google-services.`plist`