Tutorial

Case Study: Stone Fest 21 – PWA

Living in San Diego, we are surrounded by over 140 craft breweries. Once a year, Stone Brewing hosts an annual celebration, where they invite a bunch of their brewery friends to town and showcase their brews. I have been attending for a number of years, and one of the challenges in attending was having to find the beer on Untappd and check-in. So this year I thought I would whip up a quick Progressive Web App (PWA), that would allow me to quickly locate my beer and check in. Here is a link to the working Stone Fest 21 app.

After assembling the data set of the breweries, the beers, their logos (thanks, Untappd!), I generated the actual Ionic application. Since my buddies were on both iOS and Android, I knew the web was my only publishing option. But before I uploaded the code from Ionic to my server, there were some additional steps required to improve the performance of the PWA. Here is a list of the changes I made to project:

Enable gzip

By default, my Dreamhost account that I hosted Stone Fest 21 on did not have this enabled. So, I had to create a .htaccess file and enable it on the server.

# BEGIN GZIP
< ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
< /ifmodule>
# END GZIP

Improving iOS support

Since PWA support on iOS is not on par with Android was to include some Apple specific meta tags in the head of the index.html file:

< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="apple-mobile-web-app-status-bar-style" content="black">
< meta name="apple-mobile-web-app-title" content="Stone Fest 21">

For more on these tags, see the Apple documentation.

App Icons

Although the manifest.json defines our app icon, not all platform understand this. So as a backup, I add this snippet in the index.html file to assist with that issue:

< link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
< link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
< link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
< link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
< link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
< link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
< link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
< link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
< link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">

I used the $ ionic cordova resources command to generate them, then renamed the manually. Since the $ ionic build command will wipe out the www directory, I added them directly to the server.

Updating the BODY tag

One of the items that the Lighthouse test measures is “First Meaningful Paint”. For those who don’t know this term, First Meaningful Paint is the time when page’s primary content appeared on the screen. I added inline CSS to the body tag, so that the browser would render something while the app was starting.

< body style="background-color: #1c1b17; background-image: url('assets/imgs/logo.jpg'); background-position: center; background-repeat: no-repeat;">

Handling the no JavaScript case

Lighthouse also checks what you do if JavaScript was disabled by the user. Remember, this is a Progressive web app. In my case, there was not a lot you can do without JavaScript, but I included this tag to meet the requirement:

< noscript>
< h1>Stone Fest 21 requires JavaScript< /h1>
< /noscript>

Removing Cordova

When you generate an Ionic application, Cordova plugins are automatically integrated, specifically the Splash Screen and Status Bar plugins. Since we are deploying to the web, we can remove Cordova and these plugins from our project. Using $ npm uninstall @ionic-native/splash-screen and $ npm uninstall @ionic-native/status-bar

Edit the app.module.ts to remove the import statements for these two plugins and remove them from the providers array.

In the app.component.ts file also remove the imports. Also, you will remove the injected imports from the arguments in the constructor, as well as the two references to the plugins in the platform.ready check.

If you generated your Ionic application with Cordova integration, there are other plugins and modules that you should remove as well. If you open your package.json file you will several references to cordova-* items. Go ahead and use npm to uninstall them:

  • cordova-plugin-console
  • cordova-plugin-device
  • cordova-plugin-splashscreen
  • cordova-plugin-statusbar
  • cordova-plugin-whitelist
  • and ionic-plugin-keyboard

Depending on what platforms you may have installed, you might also have these modules:

  • cordova-ios
  • cordova-android

Remove them as well.

Finally, we can also remove @ionic-native/core, as we have now scrubbed our Ionic application of any Ionic Native code.

Image Paths

As I checked my Lighthouse score, I noticed that it was flagging how my brewery logos were being called, as well as an accessibility issue around them. To quickly solve this, I adjusted the img tag to reference the full path to the logo and added the alt attribute

< img src="https://aj-software.com/apps/stone/assets/breweries/{{brewery.logo}}" alt="Company Logo">

Enabling the Serviceworker.js code

By default, this code block is commented out in the index.html. Uncomment this block of code and you have a nicely configured service worker ready to go.

if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('service-worker.js')
 .then(() => console.log('service worker installed'))
 .catch(err => console.error('Error', err));
}

Updating the manifest.json file

The last tweak is updating some of the items in the default manifest.json file.

  1. Update the name and short name. Note: the short name should not be more than 12 characters in length.
  2. Ensure there is an icon available in the proper directory and of the proper size.
  3. Update the theme and background colors to something that matched our app.
  4. Add an orientation value of portrait
{
 "name": "Stone Fest 21",
 "short_name": "Stone Fest",
 "start_url": "index.html",
 "display": "standalone",
 "icons": [{
 "src": "assets/imgs/logo.jpg",
 "sizes": "512x512",
 "type": "image/jpg"
 }],
 "background_color": "#1c1b17",
 "theme_color": "#1c1b17",
 "orientation": "portrait"
}

Summary

After implementing these steps, the Stone Fest 21 app received  the following Lighthouse score:

pwa_score

Hopefully, these guidelines can help you create better PWA using Ionic. Until stencil.js is ready, this is about a good as I can make an Ionic-Angular’s performance. I will be porting this application to stencil shortly and will update this post with the results. The source code is available on my GitHub account.

Advertisements

Customizing Ionic Native Mocks

By design, the Ionic Native Mocks I wrote are very generic. They just return the bare minimum amount of data for them to function. But for them to be more useful in your project, you probably will want to customize them. In this blog post, I will show you how to do this. For this example, we will customize the BarcodeScanner mock, in part, as it is was the plugin that inspired the project.

In your existing Ionic project, first import the actual Ionic native module:

$ npm install --save @ionic-native/barcode-scanner

And the actual Cordova plugin as well,

$ ionic cordova plugin add phonegap-plugin-barcodescanner

Before we update the app.module.ts file, let’s install the mock first. Although the mocks are available via npm, we want to get the code directly from GitHub and the source typescript code (https://github.com/chrisgriffith/ionic-native-mocks/tree/master/src/%40ionic-native-mocks/plugins/barcode-scanner).

In your project, create a new directory named mocks, and create another directory named barcodescanner. Within that directory, download the index.ts file from Github into this directory.

Now let’s adjust out app.module.ts file. Like all Ionic Native modules, we need to import it.

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

Also import our plugin mock as well.

import { BarcodeScannerMock } from '../mocks/barcodescanner';

Instead of including the Ionic Native plugin directly into the providers array, we instead tell Angular to provide a mapping to our mock. This allows us to keep the rest of application referencing the real Ionic Native module, yet use the code from the mock instead.

{ provide: BarcodeScanner, useClass: BarcodeScannerMock }

At this point we could build our app, making calls to the barcode scanner plugin without needing to install on an actual device. But, out of the box, the barcode scanner is going to return an empty string.

But, let’s have it return something that we might want our user to scan. For my original app, it was a QR code on our packaging. Open the index.ts file within our project and change the scan function to

scan(options?: BarcodeScannerOptions): Promise {

  let code='Your Custom Response Here';

  let theResult:BarcodeScanResult= {format:'QR_CODE', cancelled:false, text:code };

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

    resolve(theResult);

  });

}

Save the file, and run the application. Now when you call the barcode scanner, it will return your custom data.

When you are ready to use the real plugin, change the provider and remove the import of the mock. And there you have a basic guide to customizing your Ionic Native Mocks.

Vertical Tabs in Ionic

Recently I started thinking about designing some Ionic applications specifically for larger physical screens (tablets and desktop). I wanted to have a layout much like Slack or Flickr for my iPad.

IMG_1364

The basics of this layout are to have a fixed series of icons (tabs) displayed vertically on the left side of the window, and the rest of the window displays that tab’s content. However, currently, the Ionic Tab component can only be positioned horizontally at the top or bottom of the window. To solve this I turned to the SplitPane component.

This component allows me to have two separate containers (a sidemenu container and the main content container) that I can adjust and populate with content. However, the sidemenu will typically respond to various screen widths. Since I want the element to always be visible regardless of the width, I just needed to include the ‘when’ attribute to the ion-split-pane component and set its value to ‘xs’. See the documentation for the other allowable values.

By default, the width of the sidemenu is between 270px and 28% of the window. Since I just wanted a single row of touchable icons, I need to override this. When I first began playing with this component, those values were not directly exposed, but after filing a GitHub issue, they are now available as Sass variables.

In the variables.scss file, is simply add the following variables:

$split-pane-ios-side-min-width: 70px;
$split-pane-ios-side-max-width: 70px;
$split-pane-md-side-min-width: 70px;
$split-pane-md-side-max-width: 70px;

Adding my Tabs

With the container ready, I could move on to the next step, creating the tabs themselves. Each tab was going to be a simple button component like this:
< button ion-button large block clear icon-only>
  < ion-icon name="md-list">
</ button>

I repeat this for the other tabs I wanted to display. Since I was not using the Tab component, the state management was going to become my responsibility. To handle the visual feedback, I add the following code to each button:

[color]="isList ? 'primary' : 'light'"

This code will set the color of the button based on the boolean state of the variable isList. If it is true, Ionic’s primary color will be used, otherwise, the light color will be applied. I added this to each of the remaining buttons, changing the variable for each button.

The final piece was to add a click handler to each button so I could switch the main content.

(click)="togglePage('List')"
In the app.component.ts file, I added that function. For this demo, it handles the state swapping and basic page navigation:
togglePage(whichPage: string): void {
  this.isList=false;
  this.isLocation=false;
  this.isSelf=false;
  this.isNotifications=false;
  this.isSearch=false;
  this.isCamera=false;

  letnewTab:string='';

  switch (whichPage) {
    case'List':
      this.isList=true;
      newTab='PhotosPage';
      break;
    case'Location':
      this.isLocation=true;
      newTab='LocationsPage';
      break;
    case'Self':
      this.isSelf=true;
      newTab='SelfPage';
      break;
    case'Notifications':
      this.isNotifications=true;
      newTab='NotificationsPage';
      break;
    case'Search':
      this.isSearch=true;
      newTab='SearchPage';
      break;
    case'Camera':
      this.isCamera=true;
      newTab='CameraPage';
      break;
   }

   this.nav.setRoot(newTab);
}
Note: You do need to include the @ViewChild into your component and the proper imports as well.
Now, I have a basic working tab system!

Centering the Tabs

I decided to challenge myself a little further and wanted to have the tabs be vertically centered. Since we can safely use Flexbox, this is actually straight forward.
Rather than adjusting an Ionic tag directly (and possibly some unknown cascade), I wrapped my buttons in a new div and gave it a class of ‘centervert’. The CSS is:
.centervert {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
The trick to making this work is to set the height of the div to be 100%. This tells the webview how to calculate the proper positioning.  Here is what the app looks like:
VertialTabsIonic

Vertical ‘Tabs’

I did add a Footer component to have App settings and Log Out button be anchored to the bottom of the column. The content pages are just Ionic generated stubs. I have posted the source for the shell of the application on my GitHub repo. Have fun!

Ionic Split Pane – Part 2

In this post, I am going to dig a little deeper into working with the new Ionic Split Pane component. I explored it some in this post. There are three elements I want to explore: a full header design, understanding how to navigate pages, and handling resizing.

Full Header Design

Several readers asked about how you might achieve this design:

full_header

A full header Ionic Split Pane

After playing around with different variations of the component structure and encountering some navigation troubles, I settled on using a basic CSS approach to this design.

The app.html is a standard component (sorry spacing with the brackets, blame WordPress):

This should look very close the documentation from Ionic. All we need to do is update the app.scss file with two changes:

The first change removes the line that divides the two headers. This line actually runs down the entire right side of the pane. So, with the second change, we restore the line back to the default style of a solid 1-pixel line of medium gray.
We still have two headers, but by not including any visible text in the main header, we initially have the illusion of a single header.

Handling Resizing

Here is where I encountered one of my first issues. The design worked fine in desktop sizes, but when I reduced the width below its breakpoint, my pane would disappear and along with it, my title.
The component has an event listener for when a pane state change is triggered. So, I changed my < ion-split-pane > tag to include (ionChange)=”updateTitles()”.
Now, I just needed to manage what the visible state of the pane is, and the broadcast this state to my other pages, so they could replace the empty title with my pane’s title.
Here is my app.componet.ts code:

We define a menuToggleState boolean to hold our pane’s visible state. This variable is set once the platform is ready. We have hard code the breakpoint to match the split panes. If you change that value, you will need to update it here as well.

The key to this solution is using the Ionic Events module to broadcast this value upon a state change triggered by the IonChange event. When that event occurs, we check the new width, and determine of the pane is now showing or not. Then we publish our custom event throughout our Ionic app.

In each page that is shown with the main content, I adjusted a few items. First, I had the title component is bound the title variable.

When we do not want a title visible, we set this variable to hold a space, rather than an empty string. The reason for this is, without content in the node, Ionic did not properly display any header icons. We also include a button that will auto display our hamburger menu icon when the split pane is hidden, giving us access to that content.

In the component’s code, we need to add the event listener for our custom event we broadcast from the resize action. Here is the full code:

This is for the Project Mercury page, each NASA project page has the similar event subscriber included in its constructor. For this sample, I did not rework this into a custom component to properly encapsulate the code as to not need to repeat so much of it across all these pages. The basic structure of the code listens for the event from the master component and depending on the state updates the title variable.

Now when I resize the window smaller than the breakpoint, the title is updated on the main content pages. Here is what it looks like when resized:

panesmall

and the menu being displayed:

pane_sidemenu

Page Navigation

Another tricky part of working with the split pane is understanding how to navigate pages. It was this issue that forced me to abandon several other attempts at a full header design. The heart of updating the main content from the pane is to use the @ViewChild.

Within the class for the app, we define our ViewChild to come from our root NavController using @ViewChild(Nav) nav: Nav;

Now, we can properly reference it in our component, and navigate correctly. Our list of manned NASA projects will call the projectSelected function when clicked and pass along which page to navigate to:

This function tells the nav that we referenced with the @ViewChild to set it’s rootpage to the project component we stored within our array and that is passed into this function. We also use the MenuController, to automatically close the pane if it is being shown like a normal sidemenu.

Navigation within the Main Content

If you want to have navigation with the main content to a new page, the normal navigation methods work just fine. In the sample, if you click on the NASA meatball logo, it will navigate to a new page showing the NASA worm logo. Clicking the worm logo will return you to the meatball page. However, you can now see the UX issue of having the hamburger menu and the back navigation control. But, the purpose of this exploration with just to get the core functionality working, and not worry about the UX issues. That is left to you and whatever your app’s design might be.
worm
Hopefully, this brief look further into the Split Pane component is useful. The sample code can be found in my GitHub repo. If you are wondering why I picked NASA as my sample, you can visit my other blog, https://spacequest.wordpress.com/ to learn why.

Ionic Split Pane Component – Part 1

Update (March 8, 2017)

Ionic has released version 2.2 of the framework! In addition, to support Angular 2.4.8, the split pane component is now included! Details on this upgrade see the release notes.

Update (February 28, 2017)

The component has been renamed from ion-split-panel to ion-split-pane. I will the GitHub repo soon. Also, note you will need to use this build of Ionic: npm install –save ionic-angular@2.1.0-201702281739
Recently the Ionic team released a preview of the split pane component in this blog post, I want to take a look at it in a bit more depth. For those not familiar with this visual design pattern, it is very similar to the side menu layout. The main difference is that menu usually remains onscreen. Gmail is a great example of this layout pattern. As Ionic begins to expand from the mobile space into progressive web apps and even the desktop, this layout is a common pattern.
Since this component is similar to the side menu layout, let’s scaffold our app using that template.
$ ionic start splitPaneDemo sidemenu --v2
Once the project is ready, go ahead and change the working directory to splitPaneDemo. Since the component is still under development, we need to swap out the release version of Ionic for the nightly build.
$ npm install --save ionic-angular
With our copy of Ionic replaced, go ahead and open app.html. There are just a few things we need to do to convert our side menu template to use the split pane layout.
< ion-split-pane >
  < ion-menu [content]="content" when="xs" >
    < ion-header >
      < ion-toolbar >
        < ion-title >Menu< /ion-title >
      < /ion-toolbar >
    < /ion-header >

    < ion-content >
      < ion-list >
        < button menuClose ion-item *ngFor="let p of pages"    
         (click)="openPage(p)" >
        {{p.title}}
      < /button >
      < /ion-list >
    < /ion-content >

  < /ion-menu >

  < ion-nav main [root]="rootPage" #content swipeBackEnabled="false" >< /ion-nav >
< /ion-split-pane >
We need to tell the component when the ‘menu’ should be displayed. The typical UX flow is to have the split pane hide when the screen or viewport become reduced. The component has the following breakpoints defined:
label min-width
xs 0px
sm 576px
md 768px
lg 992px
xl 1200px
never  –
By passing one of these strings to our when attribute we can control when our menu is shown. Another item to note, the min-width our split pane is 270px and it set to be no larger than 28% of the viewport. All these values are defined within the components SASS files.
< ion-menu [content]="content" when="xs" >
The last adjustment we need to denote the ‘main‘ content for the split pane. For this, just include the main directive to
< ion-nav main [root]="rootPage" #content swipeBackEnabled="false" >
 Running $ ionic serve, will produce this:
screencapture-localhost-8100-1487963384735

The sidemenu template being rendered as a split pane layout.

If you include menuToggle on the header of the main pages, the split pane will understand that directive and use it when the split pane is hidden.
Now, this initial sample is not much more than sidemenu with the expose-aside-when value that was available in v1. Let’s explore a more complex sample.
In this sample, we will enable the split pane to have its own navigation stack that it independent of the main content’s navigation stack. This was a design pattern that I was never able to build using Ionic v1. I had several app ideas that would have been a perfect match for it (yes, I am starting to flesh those apps out now).
First, let’s generate a collection of new pages using the Ionic generate command:
$ ionic g page Main
$ ionic g page SideNav
$ ionic g page SideNav2
$ ionic g page View1
 Next, make sure you update app.module.ts to import these new views. In addition, take note of setting both the root and sideRoot variables, as well as setting myApp within the @NgModule.
import { NgModule, ErrorHandler, Component } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MainPage } from '../pages/main/main';
import { SideNavPage } from '../pages/side-nav/side-nav';
import { SideNav2Page } from '../pages/side-nav2/side-nav2';
import { View1Page } from '../pages/view1/view1';

@Component({
 templateUrl: 'app.html'
})
export class myApp {
 root = MainPage;
 sideRoot = SideNavPage;
}

@NgModule({
 declarations: [
 myApp,
 MainPage,
 SideNavPage,
 SideNav2Page,
 View1Page
 ],
 imports: [
 IonicModule.forRoot(myApp)
 ],
 bootstrap: [IonicApp],
 entryComponents: [
 myApp,
 MainPage,
 SideNavPage,
 SideNav2Page,
 View1Page
 ],
 providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Next, let’s adjust the app.html file for our new structure. Instead of directly defining the content of the split pane, we are now just including an element and setting its root property to sideRoot. We will use this reference to populate the content.
< ion-split-pane when="sm" >

  < ion-menu [content]="content" >
    < ion-nav [root]="sideRoot" >< /ion-nav >
  < /ion-menu >

  < ion-nav [root]="root" main #content >< /ion-nav >

< /ion-split-pane >

Since both of these containers had their own navigation stack, we can move through our application independently. Let’s give our various pages some content first so we can see all this in action.

Change side-nav.html to:

< ion-header >

< ion-navbar >
< ion-title >Components< /ion-title >
< /ion-navbar >

< /ion-header >


< ion-content >
< ion-list >
< button menuClose ion-item *ngFor="let p of pages" (click)="displaySubNav(p)" >
{{p.title}}
< /button >
< /ion-list >
< /ion-content >

and side-nav.ts to

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { SideNav2Page } from '../side-nav2/side-nav2';

@Component({
 selector: 'page-side-nav',
 templateUrl: 'side-nav.html'
})

export class SideNavPage {
 pages: Array<{ title: string, component: any }>;

 constructor(public navCtrl: NavController, public navParams: NavParams) {
 this.pages = [
{ title: 'Action Sheets', component: SideNav2Page },
{ title: 'Alerts', component: SideNav2Page },
{ title: 'Badges', component: SideNav2Page },
{ title: 'Buttons', component: SideNav2Page },
{ title: 'Cards', component: SideNav2Page },
{ title: 'Checkbox', component: SideNav2Page },
{ title: 'DateTime', component: SideNav2Page },
{ title: 'FABs', component: SideNav2Page },
{ title: 'Gestures', component: SideNav2Page },
{ title: 'Grid', component: SideNav2Page },
{ title: 'Icons', component: SideNav2Page },
{ title: 'Inputs', component: SideNav2Page },
{ title: 'Lists', component: SideNav2Page },
{ title: 'Loading', component: SideNav2Page },
{ title: 'Menus', component: SideNav2Page },
{ title: 'Modals', component: SideNav2Page },
{ title: 'Navigation', component: SideNav2Page },
{ title: 'Popover', component: SideNav2Page },
{ title: 'Radio', component: SideNav2Page },
{ title: 'Range', component: SideNav2Page },
{ title: 'Searchbar', component: SideNav2Page },
{ title: 'Segment', component: SideNav2Page },
{ title: 'Select', component: SideNav2Page },
{ title: 'Slides', component: SideNav2Page },
{ title: 'Tabs', component: SideNav2Page },
{ title: 'Toast', component: SideNav2Page },
{ title: 'Toggle', component: SideNav2Page },
{ title: 'Toolbar', component: SideNav2Page }
];

}

 displaySubNav(thePage:any) {
  this.navCtrl.push(thePage.component);
 }
}

Next, let’s change the side-nav2.html file to be this:

< ion-header >

 < ion-navbar >
  < ion-title >Details< /ion-title >
 < /ion-navbar >

< /ion-header >

< ion-content >
 < p >New content< /p >
< /ion-content >

We don’t need to change the side-nav2.ts for this simple demo. Let’s change our main.html file this:

< ion-header >

 < ion-navbar >
  < ion-title >Main< /ion-title >
 < /ion-navbar >

< /ion-header >

< ion-content padding >
 < button ion-button primary (click)="goNewView()" >Go View 1< /button >
< /ion-content >

and the main.ts to:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { View1Page } from '../view1/view1';

@Component({
 selector: 'page-main',
 templateUrl: 'main.html'
})
export class MainPage {

constructor(public navCtrl: NavController, public navParams: NavParams) { }

ionViewDidLoad() {
 console.log('ionViewDidLoad MainPage');
 }

goNewView() {
 this.navCtrl.push(View1Page);
 }
}

Save the files, and try it out.

split-panel-demo

Independent Ionic navigation in the split pane layout.

The source code for this demo is available at my GitHub Repo.

Learn PhoneGap Build

473880-636021952776340473_338x600_thumb

PhoneGap and its open-source sister Apache Cordova simplify cross-platform app development. You can code an app once, and then compile it to run anywhere: iOS, Android, or Windows Phone. PhoneGap Build is the cloud-based version, which allows you to take apps built with HTML, CSS, and JavaScript and compile them into native, store-ready mobile apps. All without any SDKs.

In this course, Chris Griffith introduces the PhoneGap ecosystem and the basics of PhoneGap Build. He shows how to set up an account for development and create, configure, and compile your first project with PhoneGap Build. Once you’ve mastered these fundamentals, Chris shows how to extend your app plugins, debug your app, and then prep it for release in the App Store, Google Play store, or Windows Store.

Duration: 1 hr, 24 minutes

Check it out!