Speaking on Adobe XD!

BigDesign_340

I am honored to be speaking on Adobe XD at this year’s Big Design Conference in Addison, Texas in September. With my long history of user experience prototyping, Adobe XD is a welcomed addition to my arsenal of tools. Here is the description of the talk:

Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps. In this session, Chris Griffith will show you how to design and prototype a complete experience using the new Adobe XD app. Learn tips and tricks to immediately be more productive creating a great user experience. He will introduce you to the capabilities of this rapid prototyping tool from its repeat grid to the built-in UI kits. He then will go further and show you how to share your work, gain feedback and even view it on your mobile device.

For more information on the event, visit: http://bigdesignevents.com/

Announcing Ionic Native Mocks!

I am excited to announce the first initial release of my Ionic Native Mocks! Recently I was prototyping an Ionic app that required the use of the barcode scanner as part of the initial user flow. But by adding the Ionic Native module and the companion Cordova plugin, I would no longer be able easily to preview and debug the application locally within my browser. I often caution my students and workshop attendees to refrain from adding Cordova plugins until later in the development to avoid this slowdown.

To resolve this issue, I quickly created a mock provider for the barcode scanner, that would match the methods and properties of the actual Ionic Native wrapper. With this mock injected into my app, I could simulate interaction with the barcode scan plugin, and continue my local development.So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.

So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.

Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules. If you don’t know what Ionic Native is, here is the official summary:

Ionic Native is a curated set of wrappers for Apache Cordova plugins that make adding any native functionality you need to your Ionic mobile application easier.

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

Currently Available Mocks

  • actions-sheets
  • barcode-scanner
  • ble
  • bluetooth-serial
  • calendar
  • camera
  • contacts
  • date-picker
  • db-meter
  • device-motion
  • device-orientation
  • device
  • dialog
  • email-composer
  • geolocation
  • globalization
  • image-picker
  • keyboard
  • network
  • social-sharing
  • splash-screen
  • sqlite
  • status-bar
  • toast
  • touch-id
  • vibration

Installation

This project allows developers to use Ionic Native Mocks in place of the actual Ionic Native modules. They can be installed in via to methods.

  1. via npm: Installing these prebuilt mocks is easy but they are not easily customized.
  2. via GitHub and manually added to your Ionic project: Installing this way means the mocks can be customized to return specific data, like a specific parsing of a QR code.

Installation via npm

Run the following command to install an Ionic Native Mock into your project.

npm install @ionic-native-mocks/[plug-in] --save

For instance, to install the camera mock:

npm install @ionic-native-mocks/camera --save

You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.

Documentation

For the full Ionic Native documentation, please visit https://ionicframework.com/docs/native/.

Basic Usage

To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it.

// app.module.ts
import { Camera } from '@ionic-native/camera';
import { CameraMock } from '@ionic-native-mocks/camera';
...

@NgModule({
  ...

  providers: [
    ...
    { provide: Camera, useClass: CameraMock }
    ...
  ]
  ...
})
export class AppModule { }
import { Platform } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({ ... })
export class MyComponent {

  constructor(private camera: Camera, private platform: Platform) {

    platform.ready().then(() => {

      const options: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
      }

      this.camera.getPicture(options).then((imageData) => {
        // imageData is either a base64 encoded string or a file URI
        // If it's base64:
        console.log(imageData);
        let base64Image = 'data:image/jpeg;base64,' + imageData;
      }, (err) => {
        // Handle error
      });
    });
  }
}

Missing a mock? Found a problem?

Let us know or submit a PR! We will be working to add in the rest of the Ionic Native collection in the near future.

Credits

Chris Griffith – @chrisgriffith

Leif Wells – @leifwells

Live Online Training

banner
I am pleased to announce I will be giving another live online training on Ionic 3 through O’Reilly training. The online sessions will be held on September 5 & 6, 2017 from 10:00 am – 1:00 pm PDT.
By the end of this live, online course, you’ll understand:
  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores
And you’ll be able to:
  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores
Here is the course outline:
The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introduction to Ionic (20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on Exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on Exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on Exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on Exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

DAY 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on Exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring Ionic.io, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

I hope to see you there.
To sign up for the course, visit Safari Online.

What is the Ionic Framework?

I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.

ionic-slide

The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

More Ionic CLI Updates

In preparation for my Safari Online Training, I was checking all the course instructions and discovered a surprise. With version 2 of the Ionic CLI, we could generate new Ionic apps based on external URLs, like GitHub repos. This is exactly what I did for two of the apps in my book. But, with the latest release of the Ionic CLI, this functionality has been disabled. Here are the steps you need to take to get back on track for each of those sample apps in the book.

IonicParks

Instead of just using the start command in the CLI, now we will need to manually overwrite the src directory with our new starter.

$ ionic start IonicParks tabs

In the IonicPark directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Parks to another location. Unzip these files, then copy this src directory into the IonicParks directory. You should now be ready to work your way through the chapter.

IonicWeather

The same procedure for this application.

$ ionic start IonicWeather sidemenu

In the IonicWeather directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Weather to another location. Unzip these files, then copy this src directory into the IonicWeather directory. You should now be ready to work your way through the chapter.

 

 

AngularFire 2 Updates

As I warned in the book about “everything in beta” (a phrase my friend Leif Wells loves to quote), some recent updates to AngularFire 2 impact the To Do application in my book.The reason behind these changes is by breaking AngularFire into smaller modules, your app will load and run faster (always a good thing). For example, if you don’t need the user auth module in AngularFire, no need to load it.

There are just a few minor changes, so let get started…

First, make sure you have installed the latest versions of AngularFire2 and Firebase. Check your package.json and check the version numbers:

"angularfire2": "^4.0.0-rc.0",
"firebase": "^3.9.0"
If you are referencing an older version, update the version numbers and update your node modules.
Next, in the app.module.ts file you need to now import this additional module:
import { AngularFireDatabaseModule } from 'angularfire2/database';

and then include it within the imports array:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule
]
The tasklist.ts file will also need two changes. The first is to change
import { AngularFire, FirebaseListObservable } from 'angularfire2';

to

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

The AngularFire variable will need to be typed to AngularFireDatabase.

constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dialogs: Dialogs) {...}

Finally, our reference to the data is now just:

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

And with that, your Ionic2Do app will run with the latest AngularFire.