Uncategorized

Intro to Electron|Build Amazing Desktop Apps

Recently I gave a presentation on Electron to the JavascriptLA user group. I had a great time show what Electron can do. The presentation was recorded and you can watch it here.

Advertisements

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!

 

 

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

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.

ConfiGAP updated – 2.0.2

config_announce_small

We released a new version of ConfiGap that now supported auto-updating for OSX users. We also addressed a minor build issue for Windows users. You can download it from http://configap.com/.

What’s next?

We are looking at extending this tool so it will work with non-PhoneGap Build config.xml files. Under the hood, we are looking to migrate the code base to Angular 2 and Angular Material.

If there is a feature you want to be added into ConfiGAP, just let us know.