Ionic

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!

Advertisements

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.

 

 

 

 

Ionic App Generator

I am happy to announce the release of a new utility for generating Ionic-based applications, Ionic App Generator (macOS and Windows). The goal of this app is to allow you to completely configure all the aspects of a new Ionic application through one single appliction.

Ionic Generator-1

The general screen exposes the main settings of the Ionic CLI’s start command.

Beyond the general settings, you can also define the manifest.json file used by Progressive Web Apps.

Ionic Generator-2

PWA’s manifest.json screen

Leveraging my experience in writing ConfiGAP, I exposed some of the key settings within the config.xml for Cordova applications.

Ionic Generator-3

Config.xml editor

The full collection of Ionic Native plugins are available to be installed in your application as well.

Ionic Generator-5

Once you have configured your application’s settings, just click the generate app button, and the tool will go through the process of generating the app.

This app is built on Electron and use Ionic for its user interface (of course). I will be writing up some discoveries I learned while building this utility shortly.

You can download it for both macOS and Windows.

Enjoy!