Mobile

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.

Learn Apache Cordova

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!

Hiking Guide: Sedona released!

sedona_site_hero

After some unforeseen hiccups, we have finally released our first paid app, Hiking Guide: Sedona! It is available for both iOS and Android for $1.99. The app contains over 130 hikes in the Sedona region. You can find a wide range of hikes; from easy to hard, from short to long, the perfect hike is a few taps away.

The app contains USGS topographic maps that outline each trail’s route, as well as providing descriptions of the trail and directions to the trail head.

We hope you enjoy the app and use it explore the many hikes in Arizona’s Red Rock Country.

 

Ionic Training at HTML5DevConf!

html5devconf

I am pleased to announce that I will be conducting a full day training on Ionic Framework at the upcoming HTML5DevConf Autumn 2015! This full day training will be on Thursday October 22nd.

AngularJS, Cordova and Ionic are a perfect blend of technologies for building hybrid applications that behave like a native app across multiple mobile platforms. In this course, you will learn how to build an Ionic application from scratch using the Ionic CLI and explore its various components. We will also examine how to architect the AngularJS foundation of services, controllers, and views. Finally, we will extend our application to leverage some mobile specific capabilities.

Presenting on the Ionic Framework

ionic-logo

I will speaking at the next North County JS Monthly Meeting on the Ionic Framework! What is the Ionic Framework? The Ionic Framework combines Google’s AngularJS with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android. In this talk I will explore Ionic, show how to install it, and finally build a quick and dirty app and deploy it to both iOS and Android.

When: Tuesday, May 26, 2015 @ 7:00 PM
Where: WalmartLabs | 1530 Faraday Avenue, Carlsbad, CA

The slide are available here. Thanks to the Ionic Team for having a ‘starter’ deck available (and the stickers!)

PhoneGap Developer App for Windows Phone 8

Windows 8

The PhoneGap team announced that the PhoneGap Developer App is now available on the Windows Phone Store. It supports not only Windows Phone 8, but also the upcoming 8.1 update!

For newcomers, the PhoneGap Developer App aims to lower the barrier of entry to creating PhoneGap apps. You can immediately preview your app on a device without installing platform SDKs, registering devices, or even compiling code. Plus, you have full access to the official PhoneGap APIs.

Possibly the most exciting aspect of this announcement is that you can now develop your apps on an OS X machine and preview on a Windows Phone device. Cross-platform, indeed!

I somehow missed posting this correctly, but that I would go ahead and post it even though it is a bit late.

Edge Animate & PhoneGap Build: part 2

In a previous post I wrote on how to convert the audio playback that Edge Animate uses into some that PhoneGap is able to use.

It that post I had this function:

function getPhoneGapPath() {
   var path = window.location.pathname;
   path = path.substr( path, path.length - 10 );
   return 'file://' + path;
};

There a first a slight error that I introduced. When finding the path name, I stripped out 10 characters. This was based on the test case being based on index.html. So if you happen to bring this function into another page with a different file name it would break. Rookie mistake. Actually more like too much prototyping and not enough ‘real’ coding…

Also we actually don’t need the entire path, so based on the platform we can locate our ‘root’ directory and go from there. Here is a revised version of the function:

function getPhoneGapPath() {
  var devicePlatform = device.platform;
  if (devicePlatform === "iOS") {
    path = "";
  } else if (devicePlatform === "Android" || devicePlatform === 'android') {
    path = "/android_asset/www/";
  }
return path;
};

Now two things to note here. 1) I am ignoring other platforms, so if you need to support one of the other platforms that PhoneGap does support, add in the proper if clause. 2) Every time this function is called, I query the device.platform. Now using your phone is actually a Transformer, this value is not going to change. I would recommend making this query once, say upon deviceReady() and storing the value in a variable and referencing it within this function. Also note that you will need to make sure you also include the device plugin in your PhoneGap app as well.

 

Cordova: What’s Next

The Cordova team just released a What’s Next guide. This guide contains the following topics:

  • Best Practices
  • Handling Upgrades
  • Testing
  • Debugging
  • User Interface
  • Keeping Up
  • Getting Help

They dive into some additional topics like Click versus Touch and CSS Transitions versus DOM Manipulation.

So if you are doing PhoneGap/Cordova development, spend some time reading over it, there is a lot of great information.

Cordova 3.5.0 was released!

Apache_Cordova_3_5_0

A few days ago, the Cordova team released version 3.5!

There are a whole host of items that were updated, and you can read them in all their glory here.

Some of the bigger items was dropping support for iOS 5 and gaining support for arm64. This will also be the last release with support for Windows Phone 7.

I would expect to see support for it in PhoneGap Build in a few weeks. As always I will be updating ConfiGAP to target this new version shortly as well.

Apache Cordova 3 Programming

Apache Cordova 3 Programming

I recently finished reading Apache Cordova 3 Programming by John M. Wargo. The quick summary is this book is a great introduction to the Cordova/PhoneGap platform for both novice and experienced Cordova developers.

The book’s topics include:

  • How to install and use the Cordova CLI and associated tools
  • How to configure the Android developer tools (ADT) to run, test, and debug your Cordova applications for Android
  • How to use Xcode—Apple’s development tool for iOS development—to run, test, and debug Cordova applications for iOS devices
  • How to use the Safari browser to debug Cordova applications on iOS devices
  • How to use the Microsoft development tools to run, test, and debug Cordova applications for Windows Phone 8
  • How to set up and use the PhoneGap Build service to package Cordova applications and share those applications with others
  • How to create Cordova plugins for both Android and iOS

Filled with lots of examples and code, the book includes includes complete coverage of Android, iOS, BlackBerry 1.0 and Windows Phone development for Cordova.