Hybrid Mobile Apps with Ionic 2

rc_cat
I am excited to announce the early access release of my new book, Hybrid Mobile Apps with Ionic 2! For anyone looking to learn about this powerful mobile framework, this book aims to get you up and running. Here is overview:

The book itself provides a solid overview of hybrid mobile development before diving in and walking you through building 3 different applications. In it, I also cover Angular 2, TypeScript and Apache Cordova.

The core of the book focuses on building three applications, each that showcase different aspects of the Ionic Framework; the Ionic CLI, their starter templates, its component library and more.

Now, this is an early release version of the book, meaning there might be an error or two. Plus, Ionic 2 is not quite done yet, so something might break. I will keep a careful eye on its progress and flag anything that might arise. In the meantime, I will be pushing forward on the rest of the book as its technical dependencies allow.

You can pick up your digital copy from O’Reilly’s website now! I hope you enjoy reading it.

Angular 2 CSS Validator

I am working on a new Angular 2 application and one of the inputs allows you to define a CSS color. This is an interesting input to validate.

Valid input includes the standard hex code value (#ff2112), but named colors (rebeccapurple) are also valid.

For the hex code, we can use a standard regular expression to validate directly in-line, but that won’t let us also validate against the CSS names.

RegEx for CSS colors:
/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i

To validate both the hex code and the name we need to use a custom validator.

The basic flow of a validator is to take the input, perform the test(s), and then return the validity.

Create a new file named cssColor.validator.ts and save it within a directory named validators. I like to keep all my custom validators in a validators directory.

We need to import the FormControl module from @angular/forms

import { FormControl } from '@angular/forms';

Next, we need to declare the export function that we can call to validate our input

export function validateCSSColor(c: FormControl) {

Into this function, we will pass in the reference to the form. Now it is a simple matter of performing the tests. We will define the COLOR_REGEXP, then see if the input matches:

let COLOR_REGEXP = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i;
if (COLOR_REGEXP.test(c.value)) {
  return null;
 }

If the input is valid, the validator should just return a null value. Since this is the more probably input type by the user, I opted to test it first.

Next, if the input does not match this regex, we can see if is one of the custom CSS names. The full list of these names can be found here.

let validColors: Array<string> = ["black", "silver", "gray", "white", ...

With our array defined (and properly typed), we test if the input:

if ( validColors.indexOf(c.value.toLowerCase() ) == -1) {
  return { validateCSSColor: { valid: false } };
 } else {
  return null;
 }

Here is where we handle the case where the input matches neither a valid hex code nor a valid CSS name. In this case, we need to return a custom object. This object has one property, which is the name of the validation function (in our case validateCSSColor), and its value also, an object: { valid: false }.

Now our standard Angular validation directives will function, just like the built-in validators. The full code of the validator can be seen here.

With the validator written, we can now reference it within our code. In your component’s .ts file, import the validator:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule } from'@angular/forms';
import { validateCSSColor } from'./validators/cssColor.validator';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
 pwaForm: FormGroup;
 themeColorCtrl: FormControl;
 title = 'Angular 2 Custom Validator Demo';

 constructor(private fb: FormBuilder) {
 this.themeColorCtrl = this.fb.control('', [Validators.required, validateCSSColor]);
 this.pwaForm = this.fb.group({
 themeColor: this.themeColorCtrl,
 });
 }
}

The key addition to this simple component is passing in our custom validator as part of the validator array when we declare the themeColorCtrl.

Let’s set up of HTML file for a simple input for the CSS color, and some feedback. Here is the snippet:

<input type="text" label="Theme Color" formControlName="themeColor" />
<div *ngIf="pwaForm.controls.themeColor.errors">Invalid CSS Color</div>

Now, we have linked our <input> to our component’s FormControl through the formControlName attribute. Then we can test if there is an error by querying ‘pwaForm.controls.themeColor.errors’ and display some feedback to the user.

For a complete example, see the GitHub repo.

Learn PhoneGap Build: The Basics

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!

Ionic 2 Full Swipe

Note: I will be updating this to RC0 shortly. I do know there is a minor issue with the button’s width not responding to the expanded space.

While working on my upcoming book on the Ionic framework from O’Reilly, I was reading over the blog post about some new additions to the <ion-item-sliding> component supporting a full swipe gesture. I hopped over to the docs to see if they explained how to enable it. Unfortunately, they did not have anything posted yet, so I began to deconstruct it from the code sample. Here is the sample:

<ion-item-sliding>
  <ion-item> Item 1 </ion-item>
  <ion-item-options side="left">
    <button>Mail</button>
  </ion-item-options>
  <ion-item-options side="right" (ionSwipe)="saveItem(item)">
    <button danger>
      Trash
    </button>  
    <button secondary expandable (click)="saveItem(item)">  
       Save
    </button>  
  </ion-item-options> 
</ion-item-sliding>

To support this interaction, two things must be added to our<ion-item-sliding>. First, we need to add the expandable directive to the button.

<button secondary expandable (click)=”saveItem(item)”>

This allows for the visual feedback of the button growing as the user swipes across the item.

swipe_demo

Typically this is attached to the item that is closest to the end of the row. To listen for the swipe gesture, we only need to include an ionSwipe event listener to the <ion-item-options> component. This listener should call the same function as if the user tapped on the item. Here is a simple Plunker showcasing it.

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.

Learn Apache Cordova: The Basics Released!

lynda-cordova

Apache Cordova is the open-source version of PhoneGap, the leading tool for cross-platform app development. It’s a write-once, run-anywhere solution specifically designed for mobile. But to ensure a smooth cross-platform workflow, it helps to know some setup and configuration basics. In this course, Chris Griffith introduces Apache Cordova and the PhoneGap ecosystem, including the two command-line interface (CLI) tools and the PhoneGap desktop app. He shows how to set up your local system and how to create, configure, and build your first project with the Cordova CLI. Once you’ve mastered the fundamentals, Chris shows how to extend your app with native and third-party plugins that enable features such as QR code detection and geolocation, and debug your app, preview it in an emulator or on an actual device, and then prep it for release in the Apple Store or on Google Play.

Duration: 1 hr, 24 minutes

Check it out!

ConfiGAP 2.0a released!

Leif Wells (@leifwells) and I are proud to release the new version of ConfiGAP! This version was a complete rewrite of the entire application. We moved off using Adobe AIR and Flex as our technology stack, onto one based on Electron and AngularJS.

advanced_settings

There were a lot of learning pains along the way, but that was part of the reason to migrate, to learn a new set of skills.

icon_settings

The development took a bit longer than expected, in part, some additional technology migrations. Our early efforts were based on using nwjs as our desktop shell, but as that project seemed to slow in its development, we shifted over to the Electron shell.

Also, our initial UI layer was built using Bootstrap, but we opted to explore using Zurb for Apps instead. Although we got the job done with Zurb, we are now looking to migrate again, this time to Angular Material. In addition, we are also planning to upgrade from Angular 1.x to 2.

advanced_settings

There are some additional features that we will be adding in coming weeks (Better Windows Platform support).

We hope you find ConfiGAP useful in your PhoneGap Build workflow. Drop us a line if you find an issue or want a feature. Download it from configap.com.

-Chris & Leif