Ionic 4 + React + Capacitor: Publishing Your Apps

Since I don't have Apple Store Developer Account yet, I can only publish on Android, of which at Google Play Store. Head up if you are ready.

Before you start. Here is my development tools/environment.

1. VS Code 

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T17:58:38.338Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.2.0


2. OSX Catalina with zsh (I am not using Bash)


3. Samsung A50 running Android

Steps to publish your first Apps on Google Play.

1. Check your installation
           Command to check your NPM version

       % npm -v

       6.13.4

           Command to check your ionic version

       % ionic -v

       5.4.13

2. Test your apps on Android devices by running the following command on your command prompt
    ionic serve --devapp

   > ionic integrations enable cordova

   [ERROR] Ionic doesn't support using Cordova with @ionic/react projects.

        

        We encourage you to try ⚡️ Capacitor ⚡️ (https://ion.link/capacitor)

If you come across the above error, no worries. This is because your app is Ionic + React and Cordova does not support this. You need to add capacitor to it. If you already configure it with capacitor before, you don't need to run the command.

Run the following command.
      % ionic integrations enable capacitor
Once completed, you will see the following
     🎉   Your Capacitor project is ready to go!  🎉

    Add platforms using "npx cap add":

    npx cap add android

    npx cap add ios

    npx cap add electron

    Follow the Developer Workflow guide to get building:

    https://capacitor.ionicframework.com/docs/basics/workflow

     

    [OK] Integration capacitor added!

Next, initialize your apps to use the capacitor by running command npx cap init [appname] [appid]. The appname and appid are available in file capacitor.config.json.

Once done, run ionic build command. You shall see similar to following

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

...

354 B     build/static/js/5.c9486a88.chunk.js

The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.

For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.

You may serve it with a static server:

  npm install -g serve ##this command is to install static server

  serve -s build       ##this command is to run the static server

Find out more about deployment here:   

Give it a try by running the last two command shown above. I did and the following appeared. Give it a try and use any other computer to browse your apps.

   ┌───────────────────────────────────────────────────┐

   │                                                   │

   │   Serving!                                        │

   │                                                   │

   │   - Local:            http://localhost:5000       │

   │   - On Your Network:  http://192.168.1.123:5000   │

   │                                                   │

   │   Copied local address to clipboard!              │

   │                                                   │

   └───────────────────────────────────────────────────┘

Voila!! You are halfway go from releasing your apps. BUT damn, you get few more errors when you try running command npx cap add android
   [error] The web directory ([some folder of your apps]) must contain a "index.html".

    It will be the entry point for the web portion of the Capacitor app.

What is next? If you google it, you will only be directed to https://github.com/ionic-team/capacitor/issues/116 or few which won't resolve your problem. Just go to your project folder, find where index.html is located. For mines, it is located in the folder public.

So, change your capacitor.config.json to point the webDir to the folder that holds the index.html. In my case, it will look like below

"npmClient": "npm",

"webDir": "public",

Finally, run ionic build and followed by npx cap add android.
Once done, you will see the following message.

✔ Installing android dependencies in 18.77s

✔ Adding native android project in: /YourProjectPath/android in 77.66ms

✔ Syncing Gradle in 107.10s

✔ add in 125.95s

✔ Copying web assets from public to android/app/src/main/assets/public in 7.90ms

✔ Copying native bridge in 1.21ms

✔ Copying capacitor.config.json in 4.62ms

✔ copy in 24.10ms

✔ Updating Android plugins in 3.01ms

  Found 0 Capacitor plugins for android:

✔ update android in 14.69ms

Now you can run npx cap open android to launch Android Studio

So go ahead run the command npx cap open android 
The command will open your android studio, update your Gradle and build your apps. It shall tell you where your APK is released.

Once done, observed on Gradle Sync Issues. Any Red or Orange, please do resolve it first.
Test your apps by running it.

NOTE: If you still face a problem; for instance, you have blank screen, Follow the following steps:
Ionic 4 + React + Capacitor — The right way of building mobile apps with these three https://link.medium.com/uHL1APKDx2 or http://malaysiandeveloper.blogspot.com/2019/12/ionic-4-react-capacitor-right-way-of.html

3. Test your apps by running it on emulater.
4. Before you publish your apps, create your splash screen. You can follow the steps shown here. I do it manually; that is by changing all icons in all folders located at android/app/source/main/res using Adobe Photoshop. Then I added the following in my capacitor.config.json file

"plugins": {

"SplashScreen": {

"launchShowDuration": 3000,

"launchAutoHide": true,

"backgroundColor": "#000000",

"androidSplashResourceName": "splash",

"androidScaleType": "CENTER_CROP",

"androidSpinnerStyle": "large",

"iosSpinnerStyle": "small",

"spinnerColor": "#ff9900",

"showSpinner": true

}

}

That shall do it.

5.  If you change the config and add new files, just recompile your code (start at step 2 again) and rebuild your APK.

6. Finally, you are ready to publish. If you are using Ionic 4 + React + Capacitor, skip step 7 to 10.

7. Create your key (if you have yet to do so). Follow the following step

(base) % keytool -genkey -v -keystore [yourkey.keystore] -alias [aliasname] -keyalg RSA -keysize 2048 -validity 999999

Enter keystore password:  

Re-enter new password: 

What is your first and last name?

  [Unknown]:  [Your Name]

What is the name of your organizational unit?

  [Unknown]:  [Your Company]

What is the name of your organization?

  [Unknown]:  [Your Company]

What is the name of your City or Locality?

  [Unknown]:  [Your current Local]

What is the name of your State or Province?

  [Unknown]:  [Your State]

What is the two-letter country code for this unit?

  [Unknown]:  MY

Is CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY correct?

  [no]:  Yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 999,999 days

for: CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY

[Storing my-release-key.keystore]

8. Signed your Unsigned APK (or your successful compiled/debug APK). Normally, your APK is located at android/app/..../debug/
- Run the command

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore /android/app/build/outputs/apk/debug/app-debug.apk [your-alias-name-given-during-key-generation]

Enter Passphrase for keystore: 

 updating: META-INF/MANIFEST.MF

....

Warning: 

The signer's certificate is self-signed.

No -tsa or -tsacert is provided and this jar is not timestamped. Without a timestamp, users may not be able to validate this jar after the signer certificate's expiration date (4757-11-17).

(base) % 

Note: Don't worry about the warning as you are signing using your own certs.
If you face problem of jarsigner error: java.time.DateTimeException: Invalid value for MonthOfYear (valid values 1 - 12): 0
Don't worry, just change your Java Environment/JDK to higher version. For example, I'm using Java 9 during the signing process, I just switch to JDK10 using JEnv. and it works

9. Next, align your APK or in other words, compile for final release using the Zipalign command.

(base) % zipalign -v 4 [your-signed-apk].apk [yourfinalnameapps].apk

please make sure you include the path to your APK and path to zipalign. Zipalign is located in android folder; for instance, mine is located at ~/Library/Android/sdk/build-tools/29.0.2/

10. Once done, you should be able to release it to Google.

11. For Ionic + React + Capacitor, you must perform few edits before you can begin.

• Change your appId and appName at capacitor.config.json. Please ensure it was not pointing to io.ionic.start.
• Change your package name so that it will not refer to io.ionic.starter (follow https://abhiandroid.com/androidstudio/how-to-change-package-name-android-studio.html)
• Remove all permissions (If you don't need that). Take a look here -> https://facebook.github.io/react-native/docs/removing-default-permissions or  https://stackoverflow.com/questions/41234205/warnings-your-apk-is-using-permissions-that-require-a-privacy-policy-android-p
• Once remove permission, add this in your manifest https://stackoverflow.com/questions/55334431/facing-below-error-toolsnode-associated-with-an-element-type-uses-permission
• Finally, change your version number (if you had tried to publish before). Check here https://stackoverflow.com/questions/24772407/upload-failed-you-need-to-use-a-different-version-code-for-your-apk-because-you

12. Then run the command npm run build, followed by npx cap copy android or npx cap sync android.

13. Open your Android Studio and rebuild the projects.

14. Use your Android Studio to perform the following:

• Build APK and Bundle APK
• Signed the Bundle APK (Check https://developer.android.com/studio/publish/app-signing)

** Note: Please create key using Android Studio to ease in publishing the apps

15. Touch down. Open your Google Play Dashboard and start your publishing process.

The full documentation is reachable at https://ionicframework.com/docs/publishing/play-store and https://ionicframework.com/docs/v1/guide/publishing.html and https://support.google.com/googleplay/android-developer/answer/7159011

Read More

Improving and Managing the Applications Performance

I was developing my personal resume mobile apps using Ionic Framework + React and Capacitor. It is using a few JSON files so that I can easily manage it in the future.

It works perfectly when I run npm start or ionic serve command. However, when I move it to mobile apps, there start a problem. It is lagging despite running on an emulator or even on my devices and I'm just using local files.

After days of googling and try-n-error, I found a good solution to it. Used

• Lazy
• Suspend
• Error controller

And it should solve it.

Here it is done:

1. Lazy & Suspend

import React, {lazy, Suspense, Component} from 'react';

//import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const AboutPage = lazy(() => import('./AboutPage'));

class Abouts extends Component<any, any> {

constructor(props: any) {

super(props);

this.state = {

details: true

}

}

showDetails() {

this.setState({ details: true });

}

renderLoader = () => <div className="loader">Loading About & Credit...</div>;

render() {

const { details } = this.state;

return (

<div className="divLoading">

{ details &&

<Suspense fallback={this.renderLoader()}>

<AboutPage />

</Suspense>

}

</div>

);

}

}

export default Abouts;

2. Error controller

class ErrorBoundary extends React.Component<any, any> {

constructor(props: any) {

super(props);

this.state = {hasError: false};

}

static getDerivedStateFromError(error: any) {

return {hasError: true};

}

render() {

if (this.state.hasError) {

return <p>Loading failed! Please reload.</p>;

}

return this.props.children;

}

}

.....

#part of your code

<ErrorBoundary>

<Suspense fallback={this.renderLoader()}>

<ThePageToLoad />

</Suspense>

</ErrorBoundary>

All is based on the following resources. Credit goes to them who help me to solve it:

1. https://web.dev/code-splitting-suspense/
2. https://codesandbox.io/s/7zx3jlrry1?from-embed
3. https://www.freecodecamp.org/news/how-to-optimize-react-applications-with-lazy-loading-232183e02768/

Read More

Ionic 4 + React + Capacitor - The right way of building mobile apps with these three

React is supported in Ionic starting from Ionic 4. And this is the issue if you started to develop ionic react apps by running command ionic start [appsname] --types=react.

I started with that command and it becomes issues of which it took me 3 days and still it won't work. Few issues found was:

1. You cannot build or compile into mobile apps with normal ionic cordova add android, etc commands. It will stated that it is a react apps and you need to use capacitor instead.

2. So you start to install capacitor and follow many steps. You will be succeed in building and compiling.

3. But, upon running the apps on emulator or your devices, you'll get blank screen. 

How to solve that? I've followed many steps including changing the default href in index.html, remove and add capacitor and rerun it. Yet it failed. 

How do I solve that? Here is the steps:

1. Remove everything

(base) % npm uninstall -g ionic    

up to date in 0.05s

(base) % npm uninstall -g capacitor

up to date in 0.045s

(base) % npm uninstall -g cordova  

up to date in 0.047s

(base) a% npm cache clean -f        

npm WARN using --force I sure hope you know what you are doing.

2. Update your NPM modules

(base) % npm i -g npm              

3. Install ionic with capacitor

(base) % npm install -g ionic capacitor

4. Create your apps

(base) % ionic start yourapps tabs --type=react

5. Run NPM install to install any modules required upon completed. For any additional modules, run npm install to ensure required modules is updated.

(base) % cd yourapps 

(base) % npm install

6. Run your apps to test it out

(base) % ionic serve

7. After doing your development, build it using npm run build or ionic build

(base) % npm run build

8. Next, build for your platform. Once build is completed, please ensure your www or public folder exist. Then add the required platform. In my case, I'm developing for android.

(base) % ionic cap add android

9. Open IDE. If succeed, proceed with opening the apps on XCode or Android Studio (depend on your chosen platform)

(base) % ionic cap run android

10. Once your IDE is opened, compile/build and run it on emulator or devices.

It shall do it.

Read More

Each child in a list should have a unique "key"

When you are developing apps using Ionic Framework (and probably using React), you may implement

• IonList
• IonItem
• IonGrid
• IonRow
• IonCol
• etc

and when you successfully compiled and displayed on web, you may or may not realize that there is a warning (unless you are using chrome and turn on Developer Tool) like I did. To those who did, you will have similar like I have below:
index.js:1375 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ThePage`. See https://fb.me/react-warning-keys for more information.
    in ForwardRef(IonItem) (at PublicationPage.tsx:72)
    in PublicationPage (created by Context.Consumer)
    in Route (at App.tsx:63)
    in View (created by StackManager)
    in ViewTransitionManager (created by StackManager)
    in ion-router-outlet (created by IonRouterOutlet)
    in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (created by StackManager)
    in StackManager
    in Unknown (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (at App.tsx:52)
    in div (created by IonTabs)
    in div (created by IonTabs)
    in IonTabs (at App.tsx:51)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:50)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:49)
    in App (at src/index.tsx:6)

Searching through the web won't help much. Especially when the warning message is not helping at all.

What you need to do is to ensure for each item you used (list, row, col, grid, etc), you need to assign a key to it. For example, as shown below; whereby for each child within the list, I declared key to it.

certs.Lists.map( ( cert, index ) => {

return (

<IonItem key={1 + '' + index}>

<IonGrid key={1 + '' + index +'0'}>

<IonRow key={1 + '' + index + '' +1}>

<IonCol size="12" style={{backgroundColor:'lightgreen', color:'black'}}><strong>{cert.Certification}</strong></IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +2}>

<IonCol size="4">Cert. No:</IonCol>

<IonCol size="7">{cert.CertificationNo}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +3}>

<IonCol size="4">Certified By:</IonCol>

<IonCol size="8">{cert.Trainer}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +4}>

<IonCol size="4">Validity:</IonCol>

<IonCol size="8">{cert.Validity} since {cert.Since}</IonCol>

</IonRow>

<IonRow key={1 + '' + index + '' +5}>

<IonCol size="4">Expired:</IonCol>

<IonCol size="8">{cert.Expired}</IonCol>

</IonRow>

</IonGrid>

</IonItem>

);

Once you did that, voila, the warning disappears.

If you don't know where is Developer Tool, it only applies to Chrome Browser as below.
Go to three '.' on the top-right of Chrome, click it. Then go to More Tools and select Developer Tools

Select Developer Tool

The Developer Tools

Read More

Useful resources to learn Flutter

I started to learn Flutter and Dart due to 'given' free time. So, to fill up my free time, besides reading some articles and play games with my kids, I add new things to my knowledge and Flutter it is.

As I've left programming quite some times, I had to do lots of searches and found a few best sites to learnt and perform what we do best; i.e. CTRL+C and CTRL+V.

Here are the usefull list and will try to add as I found more.

1. Flutter Dev
2. An open list of apps built with Flutter
3. Flutter Tutorials Handbook
4. AppDividend
5. A collection of Flutter examples and demos
6. FB Flutter Development - Maintained by fellow Malaysian
7. FB Flutter Dev
8. Flutter Master
9. Flutter Community @ Medium and their code sharing
10. Dart and Flutter Command
11. Flutter Command Cheat Sheet
12. List of Widgets for newbies by Annsh Singh

Enjoy programming

Read More

Flutter problem with MacOS Catalina

Apple has just released it's latest OSX known as Catalina. At the time this is written, there is still bugs or problem faces by developers especially when developing other than swift (or any apply proprietary) programming language. One of these problematic languages is Flutter by Google.

There are no shortcut on this. When you enable/allow one, few more will surface. Just be patient and continue to verify the problem as shared via these two link

1. https://github.com/flutter/flutter/issues/42302
2. https://medium.com/codespace69/flutter-idevice-id-cant-be-opened-because-its-integrity-cannot-be-verified-44ad2b313a0e

Read More

Is JP contributors to low ridership?

I was thrown a question on this and was also told the reason for low ridership. I am curious about it when it does not make sense to me. The two reasons shared to me are:
1. Ridership goes down because there is no Journey Planner
2. The customer doesn't need real-time data. They just want to have information about the services. It can be 3 minutes ago of information as long as we stated that the information is true 3 minutes ago.


It actually raised a few questions in my mind.
1. Was it really because of JP? or there are different factors.
2. If the information true 3 minutes ago, and I was standing in from of station or stops getting information that was updated saying that the bus or train is at 1 km away 3 minutes ago, will there be bus now (after 3 minutes) or has the bus pass through me 1 minutes ago because the information I get is delay 3 minutes. If I'm doing the planning right now, how can I plan with previous 3 minutes data? Should I add 3 minutes and assume the location of the bus upon receiving the info?

So, to answer my question, I do a quick review of many studies done earlier as listed below.

1. https://www.edmonton.ca/city_government/documents/RoadsTraffic/transit_factors_ridership.pdf
2. https://www.researchgate.net/publication/282656951_Factors_Affecting_to_Public_Bus_Transport_Ridership_A_Case_of_Capital_Colombo
3. https://pdfs.semanticscholar.org/d3f0/63f546d97e676029dc1267ae1c09d9d298c3.pdf
4. https://www.researchgate.net/publication/298371532_Factors_Affecting_Bus_Ridership_With_Respect_to_Passenger_Demography_A_Case_Study_of_Seberang_Perai_Pulau_Pinang_Malaysia
5. http://www.reconnectingamerica.org/assets/Uploads/ridersipfactors.pdf
6. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.683.858&rep=rep1&type=pdf
7. https://fas.org/sgp/crs/misc/R45144.pdf
8. http://www.ncarpo.org/uploads/1/3/8/1/13819061/factorsaffectingridership_20181004.pdf
9. https://la.streetsblog.org/2016/01/29/what-factors-are-causing-metros-declining-ridership-what-next/

Findings:
1. From all papers, only 2 mentioned about information availability as one of the factors impacting ridership.
2. From the two papers, 1 mentioned real-time info is required but it is not one of the key factors. It is 1 out of many factors.
3. On the other papers (studies on bus ridership in Penang) - the author stated that the availability of information only accounts for 12% of the total factors contributing to low ridership.
4. The biggest factors contributed to low ridership are:
4.1 Service availability & reliability
4.2 Drivers behavior
4.3 Fare
4.4 Access to the services
4.5 Disruptor - e-hailing services

Further review on trip planning in new york based on the following two papers revive a few interesting facts.

1. https://dl.acm.org/citation.cfm?id=2811271.2811272
2. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.888.1033&rep=rep1&type=pdf

1. Despite was told that in new york, the information display shown is updated 3 minutes ago, I found out that it is actually a real-time update. Just that it stated updated 3 minutes ago because there is no new information at that time of the query.
2. The above two papers clearly state the importance of real-time information and it must be reliable info.

Conclusions:
1. JP is not the main key factors contributing to low ridership but JP availability can affect the decision of the public to use available services.
2. Service availability & reliability is the biggest contributor. If the OTR is reduced, definitely there will be a reduction of riders compared before OTR reduced.
3. e-Hailing has played a significant role in low ridership too. I believed, if Gojek successfully landed here in Malaysia, it will play a vital role in lowering the ridership too.
4. Real-time information and real-time update of information is the key to provide reliable info.

Recommendation:
1. JP is something needed but the information displayed in it shall be reliable and trustworthy. Thus improving the information relay process shall be the main focus.
2. Service availability and reliability shall be improved.
3. Implementation of BOS to complement each other for the benefit of the public.


* it is updated with a recommendation as many have shared their opinion on the post.

Read More

NPM and Ionic failed to run - EACCES and EISDIR error

You create new project using ionic framework. And suddently it says that there are new update either ionic update or npm update. You run the npm -i g ionic or npm -i g npm.. and your nightmare starts. You have

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/@ionic/discover-b2d9d3b9/dist'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/readable-stream-4416b49f/lib'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/diff-4b455008/lib/util'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/source-map-848434cb/lib'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/string_decoder-e05a13c4/lib'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/source-map-848434cb/dist'

WARN tar EISDIR: illegal operation on a directory, open '/usr/local/lib/node_modules/.staging/rxjs-db639a40/_esm2015/internal-compatibility'

and EACCES error popping out.

Then suddenly your ionic serve command failed.

Definitely you will try to:

• Remove the installation
• Reinstall ionic or npm
• Clean the cache
• and so on...

with or without administration privileges (sudo).

AND still you can't run the ionic serve command.

Be cool, I've spent few hours too to figure out that problem. And finally, I found the most reliable method.

Below is the steps taken directly from https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

1. Back up your computer.
2. On the command line, in your home directory, create a directory for global installations:

    mkdir ~/.npm-global
   

3. Configure npm to use the new directory path:

    npm config set prefix '~/.npm-global'
   

4. In your preferred text editor, open or create a ~/.profile file and add this line:

    export PATH=~/.npm-global/bin:$PATH
   

5. On the command line, update your system variables:

    source ~/.profile
   

6. To test your new configuration, install a package globally without using sudo:

    npm install -g jshint
   

Instead of steps 2-4, you can use the corresponding ENV variable (e.g. if you don’t want to modify ~/.profile):

    NPM_CONFIG_PREFIX=~/.npm-global

and you shall be able to run your ionic serve command again.

Read More

Downloading and Formatting data for PDF output using Ionic, Angular, Cordova and TypeScript

It has been a while I did not focus and wrote anything on this blog and it is good to be back on track.

Lets kick start with writing PDF on your mobile apps. You may have data retrieve and your client require you to download the data as PDF. I've done that on Excel and it was way easy to do that.

Now lets start for PDF. It is pretty much easy too. We are going to use PDFMaker library.

If you follow the steps shows here, it shall be sufficient.

https://ionicacademy.com/create-pdf-files-ionic-pdfmake/

and you can read the entire library here

http://pdfmake.org/#/gettingstarted

You need to download and install three libraries for it to work
# Install Cordova Plugins
1. ionic cordova plugin add cordova-plugin-file-opener2
2. ionic cordova plugin add cordova-plugin-file

#Install NPM packages
3. npm install pdfmake @ionic-native/file-opener @ionic-native/file
Once complete, declare it in your apps.module.ts. The link above shall guide you with the sample.

The link above shows how it was done in a single page.  I, on the other hand, create a service provider to ease me in sharing the service between the apps. Below is the snapshot of my code... and Yup, I'm using Promise to ensure I can control the outcome and catch any error.

#the import

import { Platform } from 'ionic-angular';

//import { Http } from '@angular/http';

import { Injectable, Component } from '@angular/core';

import pdfMake from 'pdfmake/build/pdfmake';

import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

import { File } from '@ionic-native/file';

import { FileOpener } from '@ionic-native/file-opener';

#the control

createPdf( isMin: boolean ): Promise<any>{

return new Promise ((resolve,reject) => {

if( isMin ){

this.createPdfMin()

.then((data) => {

return resolve( data );

})

.catch( (error) => {

return reject( error );

})

} else {

this.createPdfMax()

.then((data) => {

return resolve( data );

})

.catch( (error) => {

return reject( error );

})

}

})

} //end createPdf

#partial code to create pdf

createPdfMin(): Promise<any>{

//let docDefinition = null;

return new Promise((resolve) => {

let docDefinition = {

// a string or { width: number, height: number }

pageSize: 'A4',

// by default we use portrait, you can change it to landscape if you wish

pageOrientation: 'potrait',

// [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins

pageMargins: [ 10, 30, 10, 30 ],

content: [

{ text: 'The Header', style: 'header' },

{ text: new Date().toTimeString(), alignment: 'right' },

//SPA Section

{ text: 'Sub Header', style: 'subheader' },

{ text: 'Sub Sub Header', style: 'subheader2' },

{

columns: [

{

text: 'Intial data'

},

{

width: '*',

text: theValue.toLocaleString('en-US', {

style: 'currency',

currency: 'MYR',

})

}

],

// optional space between columns

columnGap: 10

},

{ text: '---------------------------------------------------', style: 'subheader2' },

],

styles: {

header: {

fontSize: 18,

bold: true,

},

subheader: {

fontSize: 14,

bold: true,

margin: [0, 15, 0, 0]

},

subheader2: {

fontSize: 12,

bold: true,

margin: [0, 15, 0, 0]

},

story: {

italic: true,

alignment: 'center',

width: '50%',

}

}

}

this.pdfObj = pdfMake.createPdf(docDefinition);

return resolve( this.pdfObj );

});

} //end createPdfMin

#code to download the pdf

downloadPdf(pdfObj, type:string):Promise<any>{

console.log('fileCreator.downloadPdf()');

return new Promise((resolve) => {

if (this.plt.is('cordova')) {

pdfObj.getBuffer((buffer) => {

var blob = new Blob([buffer], { type: 'application/pdf' });

// Save the PDF to the data Directory of our App

this.file.writeFile(this.file.dataDirectory, 'file_' + type + '.pdf', blob, { replace: true }).then(fileEntry => {

// Open the PDf with the correct OS tools

this.fileOpener.open(this.file.dataDirectory + 'file_' + type + '.pdf', 'application/pdf');

})

});

} else {

// On a browser simply use download!

this.pdfObj.download();

}

return resolve("success");

})

} //end function downloadPdf

#how it is called from other page or file

this.fileCreatorProvider.createPdf(true)

.then((data) =>{

//download the file for min

this.fileCreatorProvider.downloadPdf(data,'type')

.then((data) => {

if ( data === 'success'){

this.presentAlert('Download Complete','Successfully download the file','success');

} else {

this.presentAlert('Download Error','Fail to download the file','error');

}

})

.catch((error) => {

this.presentAlert('Download Error','Fail to download the file. Catch ' + error,'error');

})

})

.catch((error) => {

this.presentAlert('Download Error','Fail to download the file. Catch ' + error,'error');

})

and you shall be ready.

By the way, it is just snapshot. It shall give you brief idea on how to do that.

Happy Coding!!!

Read More