Ionic

Configuring your Ionic App

In updating my book, Mobile App Development with Ionic, I was exploring ways to globally set various settings for my Ionic applications. As a general rule, much of the styling of the components are meant to be done at the component level. However, you might have several ion-refresh components scattered throughout your application. Instead of defining that component’s spinner in each instance, you can set that property globally. To set these parameters, we can pass in an object of key-value pairs to the forRoot method on IonicModule. For example:

IonicModule.forRoot( {mode: 'ios', })

in the app.module.ts file.

Here are some of the settings that you might want to adjust for you Ionic 4 application:
mode
This will set the overall platform mode of the app. It can be either ios or md.
statusTap
This boolean will enable the ability to tap the device’s status bar to trigger a scroll to the top of the screen.
backButtonIcon
To set the back button icon that the ion-back-button uses, pass in the ion-icon name or path to the icon.
backButtonText
To set the back button text that the ion-back-button uses.
spinner
If you want to globally set the style of the ion-spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.
loadingSpinner
If you want to globally set the style of the ion-loadingController component, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.
menuIcon
If your app uses the sidemenu template, you are probably using the ‘hamburger’ menu icon. If you would like to change it, pass in the ion-icon name or path to the icon.
refreshingIcon
If your app uses the ion-refresher, you can change the refreshing icon by passing in the ion-icon name or path to the icon. This is the value that the pullingIcon attribute references in the component.
refreshingSpinner
If your app uses the ion-refresher, you can change the icon that is shown while the refreshing action is being done by passing in the ion-icon name or path to the icon. his is the value that the refreshingSpinner attribute references in the component.
  
efreshingSpinner
If your app uses the ion-refresher, you can change the icon that is shown while the refreshing action is being done by passing in the ion-icon name or path to the icon. his is the value that the refreshingSpinner attribute references in the component.
infiniteLoadingSpinner
If you want to globally set the style of the ion-infinite-scroll component’s spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.

There are some properties that are related to the tab bar. Since that component just underwent a late-beta change, I was not able to verify them:

  • tabbarPlacement: string;
  • tabbarLayout: string
  • tabbarHighlight: boolean

The IonicConfig list contains other parameters, but I did not explore them all.

Hope this helps you build better Ionic 4 applications.

 

Advertisements

Icons and Floating Inputs: Ionic

I was skimming the Ionic Worldwide Slack channel and saw this post:

Hi all,
i stuck on mixing an `ion-icon` with an `floating label` like in this the *Angular Material Bootstrap Inputs Demo* (https://mdbootstrap.com/angular/components/#).

I tried this:

< ion-item>
< ion-icon slot="start" name="bulb" color="ownred">< /ion-icon>
< ion-label position="floating">name< /ion-label>
< ion-input type="text" [(ngModel)]="newItem.name">< /ion-input>
< /ion-item>

 

But this will center the icon and not align it on bottom, like in the shown picture.

Screen Shot 2018-10-27 at 10.28.41 AM

Do you have any idea?

This got me thinking how to create this. My work machine was being updated to Mojave, so I had a few moments to play around with a solution.

The one I came up with was to break the problem into two parts. I figured that I needed to isolate the icon from the label and input set, so I turned to the ion-grid component to handle that. By using the align properties of Flexbox, I could position the elements how I needed.

In playing with the reference that was supplied, When the input received focus, the icon also changed color. To make that action happen, I add to event handlers on the input for the ionBlur and ionFocus events.

The handler for those events simply toggles a boolean. I use that variable’s state to trigger the CSS class state using [ngClass]={‘activeInputIcon’: isLabelActive}” on the ion-icon. So, when the isLabelActive is true, the activeInputIcon class is applied.

With that, we have rebuilt a sample of the combined icon and floating label input.

demo

Now, this sample is very basic. It does not handle multiple inputs so you will need to create a solution to solve that problem. For a bigger challenge, this entire element could be wrapped into a custom component…but I will leave that up to someone else.

PWA Icons and Ionic Resources

Ionic’s support for Progressive Web Apps (PWAs) continues to improve. Currently, there is one small hiccup in the workflow, the generation of icons. When you run

$ ng add @angular/pwa

a manifest.json file is automatically generated and a set of icons added to the src/assets/icon directory. If you have been using Ionic to generate native mobile apps, then you are probably familiar with this command:

$ ionic cordova resouces

This CLI task will generate a collection of icons that need to be included. Unfortunately, it currently does not generate all the sizes that are referenced in the manifest.json file. To save a little time here is a handy table of the icons a PWA should have and the corresponding icon from Cordova.

PWA Cordova
icon-72×72.png drawable-hdpi-icon.png
icon-96×96.png drawable-xhdpi-icon.png
icon-128×128.png
icon-144×144.png drawable-xxhdpi-icon.png
icon-152×152.png icon-76@2x.png
icon-192×192.png drawable-xxxhdpi-icon.png
icon-384×384.png
icon-512×512.png

You will need to generate three icons to have a complete. There is a 1024×102 icon available that can be downsized quickly.

Ionic Community

The Ionic team recently updated their website to highlight various aspects of the world-wide community. As part of that, they have highlighted various individuals as ‘Ionic Leaders’. I am honored and humbled to be among some great company.

Anyone who follows me knows my passion for mobile development, and in particular Ionic. I don’t recall when I discovered the Ionic Framework, but I do recall seeing that it was built atop Apache Cordova and AngularJS. I had just finished recording two video courses on PhoneGap Build and Apache Cordova but knew very little about AngularJS. As a rule, I had tended to shy away from large frameworks due to the nature of prototype development. Not long after, I saw another component library that leveraged the same base technology stack. Thus, I made the commitment to begin learning AngularJS and the Ionic Framework. I quickly saw the power that these two frameworks offered and was sold on them as my solution.

Now, after all these years playing, building, and helping, I am so convinced that I made the right decision. I am looking forward to the new edition of Mobile App Development with Ionic, as well as, recording new lessons for egghead.io

To Ionic and beyond!

Using Adaptive Icons in Ionic & Cordova

Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. I just released a lesson on egghead.io will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.

Using PhoneGap Build & Ionic

ionic_pgb

Recently someone asked how to use PhoneGap Build and Ionic together. Being slightly familiar with both, I thought a short post on this would be in order. If you are not familiar with PhoneGap Build, it is a service from Adobe that allows you to compile your PhoneGap apps in the cloud. If you have a Creative Cloud account, you have access to this service. The service is fairly straightforward, take your web app, an associated config.xml file, and the app’s icons & splash screens, zip them up, then upload that file to PhoneGap Build. After a bit of work, you have native iOS and Android apps ready to be installed (providing you have your signing keys in order).

Using PhoneGap Build with Ionic based applications requires a few extra steps. First, we need to generate a production-ready version of our application. Normally, the Ionic build scripts that are run by the Ionic CLI handle this for use. But we are not building locally so this won’t help us. Instead, you need to make that call yourself. The command to generate a production ready app is

$ ionic build --prod –release

The Ionic CLI will run a set of commands generating your app in its production-ready state. This output is located in the www folder.

Now, we need to assemble the rest of the items that PhoneGap Build requires. In new folder, first copy over all the assets within that www folder. Next, copy over the config.xml file. If you are not familiar with this file, this is what PhoneGap/Cordova uses to define most of your app’s properties (icons, splash screens, plugins, etc). Speaking of icons and splash screens, we need to copy over the resources directory as well. In the end, you should have a folder that looks like this:

Screen Shot 2018-03-15 at 8.24.31 AM

With all our required elements in place, simply zip this directory and upload it to PhoneGap Build. If you need more help understanding PhoneGap Build, you can check out my Lynda.com course.

Now, alternatively, you can use Ionic’s own Ionic Pro service to do the same thing, with a more integrated workflow.

Hope this helps!

 

 

AngularFire Update: Ionic Book

One of the challenges in writing a technical book is that the content can become outdated as the software undergoes updates. Hence, why we had to release a revised edition of Mobile Apps with Ionic. Recently, AngularFire had an update that affected the sample To-Do app in Chapter 7. This post is going to walk you through the changes. The code has been updated to the GitHub repo.

One first changes you need to make is what you install from npm. In the book, I have you run this command:

$ npm install angularfire2 firebase –save

However, we need to now install one more package, promise-polyfill in order to properly build our application. The new command is:

$ npm install angularfire2 firebase promise-polyfill –save

The first set of changes we need to make is in the app.module.ts file. The capabilities of Firebase (and AngularFire) are growing, as such, they are breaking each of the features into smaller modules. By doing so, our code base only has the elements it needs. No need to have FireBase Auth in our code if we aren’t using it. Our AngularFire imports should now look like this;

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';

We still need to define our apikey, domains, etc in the config object and pass that into the AngularFireModule.initializeApp(firebaseConfig)

We now also need to add AngularFireDatabaseModule  in our imports array as well.

The final item to change is the providers array, you now need to include AngularFireDatabase.

Turning to the tasklist.ts file, we have several items to modify. We now have several new imports:

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

The first brings in the AngularFireDatabase and AngularFireList modules. One of the major changes with AngularFire 5, was moving anay from custom types to more generic types. Hence, why the second import of the Observable package from rxjs.

Next we need to change our variables and their types:

taskList: AngularFireList<Task>;
tasks: Observable<any[]>;

The taskList variable will hold the AngularFire data in its ‘native’ form, while the task variable will have a clean version of the data that our template can reference.

In the constructor, we define the values for both of these variables:

this.taskList = this.af.list('/tasks');
this.tasks = this.taskList.valueChanges();

First, we get the list of to-dos from our Firebase database, and assign that to the tasklist. Next, we call the valueChanges method on the taskList. From the AngularFire docs; it returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.

There are several other data methods available, and you should take the time to review them when you begin working with AngularFire in earnest.

With our data now in different variables, we need to adjust our add, delete, and update calls. Let’s change the add code first. If you grab the source code from GithUb, you will see I have added support for either the native Dialog, as well as the Ionic Alert Controller. The two lines that matter are these:

const newTaskRef = this.taskList.push({ id: '', title: data.task, status: 'open' });
newTaskRef.update({ id: newTaskRef.key});

One of the other changes in AngularFire 5, is moving away from being so key-based. As such we need to store the key within our record now. The actual method to add a record to Firebase is still the same push(). But now we get the result of that action, then immediately update itself with the generated id.

Next, we can adjust the markAsDone function. Migrating from the $key code, our new code is simply:

markAsDone(slidingItem: ItemSliding, task: Task) {
    task.status = 'done';
    this.taskList.update(task.id, task)
    slidingItem.close();
}

Our final method to change is the removeTask function. The code is now:

removeTask(slidingItem: ItemSliding, task: Task) {
    this.taskList.remove(task.id);
    slidingItem.close();
}

The final tweak is to our interface definition for the task. We need to support this new id attribute, so it now becomes:

export interface Task {
  title: string;
  status: string;
  id:string
}

Hope this short post, gets you back on track working with Ionic and Angularfire/Firebase.