I had a great time presenting the PhoneGap Day workshops with Michael and Holly last week in San Francisco. In the afternoon, I ran an AngularJS/Ionic workshop based on this tutorial. At the end of the workshop, I showed a more complete version of the application with additional UI polish and better code organization. A number of people asked me to share that version, so here it is…

Source Code

The complete version of the application is now available in this repository on GitHub.

Hosted Version

I also deployed a version of the application on Heroku. You can run the application here.

Getting Started

Replace the www folder of the Ionic project with the www folder in this repository

Create a Facebook app here: https://developers.facebook.com/apps. In the advanced settings, make sure you declare a “Valid OAuth redirect URI”. For example, if during development you access your application from http://localhost/openfb/index.html, you must declare http://localhost/openfb/oauthcallback.html as a valid redirect URI. Also add https://www.facebook.com/connect/login_success.html as a Valid OAuth redirect URI for access from Cordova.

Copy the Facebook App Id and paste it as the first argument of OpenFB.init() in the run() function in app.js.

To run the app in the browser: Load index.html from a location that matches the redirect URI you defined above. For example: http://localhost/openfb/index.html

To run the app in Cordova: Build the Ionic project and run it as a Cordova app on your device

Many consumer apps provide a Facebook Login option, as well as other Facebook integration features such as posting to your feed, getting your list of friends, etc.

Cordova has a Facebook Plugin that makes that integration easy. Internally, the plugin uses both the Native and the JavaScript implementations of the Facebook SDK, and historically, it has sometimes been hard for the plugin to keep up with new versions of these SDKs, as well as new versions of Cordova.

In a recent Cordova project, I integrated with Facebook without using the Facebook Plugin, and in fact without using the Facebook SDK at all. I implemented a traditional OAuth workflow to log in (as described here), and made direct HTTP requests to Graph API endpoints to retrieve and post data.

I encapsulated that logic in a micro library that I called OpenFB, and decided to share it in this article. Here are a few code examples…

The approach used in OpenFB (plain OAuth + direct requests to Graph API endpoints) is simple and lightweight, but it is definitely not perfect.

Pros:

No plugin dependency and no uncertainties when new versions of Cordova or the Facebook SDK are released.

Works for all platforms, including platforms for which a version of the plugin doesn’t exist.

Works for both browser-based apps and Cordova apps.

Cons:

Not full-fledged, less out-of-the box features.

Integration not as tight. For example, no native dialogs, etc.

Browser and Cordova Apps

The library works for both browser-based apps and Cordova/PhoneGap apps. When running in a browser, the OAuth URL redirection workflow happens in a popup window. When running in Cordova, it happens inside an “In-App Browser”.

Try it here

You can try the sample app here (My sample Facebook app is called Sociogram). This application is intentionally simplistic to keep the code readable and focused on the Facebook integration. The same app works inside Cordova.

Source Code

Getting Started

To run the sample on your own system:

Create a Facebook app here: https://developers.facebook.com/apps. In the advanced settings, make sure you declare a “Valid OAuth redirect URI”. For example, if during development you access your application from http://localhost/openfb/index.html, you must declare http://localhost/openfb/oauthcallback.html as a valid redirect URI. Also add https://www.facebook.com/connect/login_success.html as a Valid OAuth redirect URI for access from Cordova.

Copy the Facebook App Id and paste it as the first argument of the openFB.init() method invocation in index.html.

Load index.html, from a location that matches the redirect URI you defined above. For example: http://localhost/openfb/index.html

Summary

No rocket science here. The Facebook Plugin is still the best technical solution because it provides a tighter integration with Facebook (using native dialogs, etc). However, if you are looking for a lightweight and easy-to-set-up solution with no dependencies, or if you are targeting mobile platforms for which an implementation of the plugin is not available, you may find this library useful as well. I’d love to hear your feedback, and learn how you are integrating with Facebook.

]]>http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/feed/178Building Interactive Mobile Dashboards with D3 and other Charting Librarieshttp://coenraets.org/blog/2014/02/interactive-mobile-dashboard-d3-charts/
http://coenraets.org/blog/2014/02/interactive-mobile-dashboard-d3-charts/#commentsWed, 19 Feb 2014 15:33:04 +0000http://coenraets.org/blog/?p=7419Tablets offer a great way to visually explore data using touch-based interactions. I’ve recently been looking at HTML/JavaScript charting libraries from a Mobile perspective, and I thought I’d share the sample application I used to experiment with different options.

Sample Application

It’s Olympic season, so I decided to create an interactive dashboard to explore the results of the last five Winter Olympics. I had three key requirements for my simple Olympic dashboard:

Charting Libraries

There has traditionally been a number of free (Flot, Flotr2, jqPlot, etc.) and commercial (amCharts, Highcharts, FusionCharts, etc.) options in the charting library landscape. In the last couple of years, d3.js (D3) has emerged as a de-facto standard for data visualization, and enjoys fast-growing adoption. D3 is based on Web standards (SVG, JavaScript, HTML, and CSS), and its fairly low level APIs give you complete control over the final result. D3 also has a broader scope than the charting libraries mentioned above (examples here).

Based on the requirements mentioned above, I eliminated a few options. For example, the Chart.js charts look good, but a quick look at the documentation indicates that “If you are looking to add interaction as a layer to charts, Chart.js is not the library for you…”. Different applications have different requirements, and these requirements may lead to different choices. One lesson I learned is to test on device early: some charting libraries may work great in your computer’s browser, but not so well on mobile devices, especially when it comes to touch-based interactions.

Implementation

I tried different libraries as part of my experiments, and I’ll share two implementations below. This doesn’t mean that other options are not as good: I just didn’t have time to fully implement the dashboard with every single library. If you use one of the other libraries, I’d love to hear what you think. Also feel free to fork the repo and implement the dashboard with your favorite library, or submit a pull request to improve the implementations below. It would be great to see additional implementations.

ChartJS

ChartJS (different form Chart.js mentioned above) has good looking and mobile-ready components out-of-the box, and allowed me to build a prototype quickly.

Note: ChartJS is a commercial product but has a “free for non commercial use” option. This is by no means an endorsement of the product.

D3

As mentioned above, D3 has become a standard for data visualization. There are also libraries built on top of D3 (dimple, NVD3, xCharts, Rickshaw, …) for people looking for higher level APIs. I used xCharts for some of the charts in my D3 implementation.

Summary

Because of its broader scope and lower level API, D3 has a steeper learning curve compared to other charting libraries. However, it gives you complete control over the final result and it’s definitely worth the time investment. It also has a fast growing community, and an impressive list of examples you can learn from. If you are looking for an out-of-the-box solution with higher level APIs, you may also consider one of the other free or commercial options mentioned above. As always, evaluate the options based on your own background and your own requirements. I’d love to hear about your own experience building interactive mobile dashboards.

Source Code

The source code for the ChartJS implementation is available in this GitHub repository.

The source code for the D3 implementation is available in this GitHub repository.

In the ever evolving quest for the best mobile application development stacks, I’ve recently been looking at Ionic. Ionic is a library that provides mobile-optimized UI components to build “native-feeling” hybrid applications.

Where does it fit?

Ionic fits in the UI layer. But unlike other libraries in that space (Twitter Bootstrap, Foundation, Ratchet, Topcoat and others), Ionic is not agnostic in terms of the underlying architectural framework you are using. Instead, Ionic is built on top of AngularJS to provide a complete solution for developing applications that are both well architected and native-feeling. That’s great news if you are an Angular developer. If you use another architectural framework, you can still use the Ionic CSS stylesheets, but you won’t get the powerful UI interactions, gestures, and animations.

I’ve been impressed with the number and the quality of the components and interactions available in Ionic. My employee directory sample app (below) may never have felt that close to native.

Cordova Integration

Another thing I like about Ionic is its integration with Cordova. In fact, the Ionic CLI is built on top of the Cordova CLI. Here is how you install the Ionic CLI, create a seed project, and run it in the emulator or on a device:

Sample Application

To further experiment with Ionic, I created an Angular/Ionic version of my employee directory application with the seed project as a starting point. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app. You can also run a hosted version of the application here.

Source Code

The complete source code for the application is available in this repository on GitHub.

]]>http://coenraets.org/blog/2014/02/sample-mobile-application-with-ionic-and-angularjs/feed/43Proxxi, A Proximity-Based Social Apphttp://coenraets.org/blog/2014/01/proxxi-a-proximity-based-social-app/
http://coenraets.org/blog/2014/01/proxxi-a-proximity-based-social-app/#commentsThu, 30 Jan 2014 17:04:45 +0000http://coenraets.org/blog/?p=7119For the last few months, Greg Wilson and I worked nights and weekends on a little side project that we called Proxxi. The idea of Proxxi came from personal experiences, being in situations where we wished there was an easy way to communicate with people around us. For example:

Is there anybody at the Marriott up for a 7:30am run tomorrow?

Is there anybody on this Eurostar who can lend me a US to UK adapter?

What’s the guest WIFI password at Logan airport?

Got a snow blower. Let me know if you need help digging out this morning.

There is a big difference between building demo and production apps, and Proxxi was also the opportunity for us to go deeper with some products, libraries, and services like Cordova, Node.js, MongoDB, and several cloud services.

What is Proxxi?

Proxxi is an app that connects you with people and things around you, wherever you are. Instead of “following people”, you “follow your location” and you automatically become a member of the ad hoc community made of people near you. You see what’s happening around you and you can actively participate in this proximity-based community. Your location is never shared unless you explicitly choose to share it, so your privacy is protected.

Proxxi lets you communicate with other users either publicly by commenting on a post, or privately using a safe, anonymous email relay service. When using the private email option, Proxxi assigns temporary email addresses to let you exchange emails with other users using your normal email app, but without revealing your real email address.

Here are some other examples of messages people could post on Proxxi:

Will pay $50 to swap my middle seat for an aisle seat on UA433.

How’s traffic on I95 south?

Anybody up for a drink at Terminal B?

Will remove snow from your driveway this AM for $40.

Huge garage sale at 10am tomorrow.

The Buckhorn Elementary school bus is running 15min late this morning.

Selling Chemistry II book 3rd edition. Will be in student union until 2pm.

Looking for study group for Mr. Wilson’s Calc IV class.

Looking for tickets for tonight’s game.

Proxxi Architecture

The mobile app was built with Cordova, Backbone.js, RequireJS, and Topcoat. At the server side, we used, Node.js, Express, and MongoDB running on EC2. We also use S3 and CloudFront for the photo sharing part of the application.

Here is a high-level architecture diagram.

Chicken and Egg

Apps like Proxxi are only as good as the information users share, the questions they ask, the answers they get, etc. So there is definitely a chicken and egg challenge at launch. So, if you think this application can be useful and fun, we count on you to start sharing!

The workshop was well received, and I thought the materials could be useful to a larger audience. So, I beefed up the workshop instructions to make them suitable for a self-paced tutorial. The tutorial goes beyond the basics with a special focus on architecture, best practices, and performance.

In recent months, I have been sharing different versions of the Employee Directory sample application built with different technology stacks, different frameworks, and different back-end (REST services) implementations. Recent versions include:

This presentation was built as a PhoneGap application with the Keypoint HTML presentation framework I blogged about yesterday. Because it is a Web application, you can view the presentation here. You can also get the code on GitHub and run it on your mobile device as a PhoneGap application to enjoy the full experience (I usually present on an iPad).

]]>http://coenraets.org/blog/2013/10/top-10-performance-techniques-for-phonegap-and-hybrid-apps-slides-available/feed/4Keypoint: PhoneGap-Based HTML Slide Deckshttp://coenraets.org/blog/2013/10/keypoint-phonegap-based-html-slide-decks/
http://coenraets.org/blog/2013/10/keypoint-phonegap-based-html-slide-decks/#commentsTue, 29 Oct 2013 19:49:39 +0000http://coenraets.org/blog/?p=6412I’ve been using HTML slides instead of Keynote or Powerpoint for a while now. Since I’m doing a lot of PhoneGap/Cordova presentations, it also occurred to me some time ago that I could go one step further and package my HTML slide decks as PhoneGap applications. That way, I can demonstrate the PhoneGap APIs within my presentation, instead of constantly switching back and forth between my presentation and a demo app: My slides are the demo app.

To enable this, I built a simple presentation micro-framework that I called Keypoint. Keypoint uses Matteo Spinelli’s SwipeView as the swipable container. It is resource-conscious and fast, with only three slides in the DOM at any given time.

Because it is a Web application, you can also run your presentation in a browser on your laptop and navigate with the arrow keys. You’ll just not be able to use the PhoneGap specific capabilities.

A number of people have asked me to share the framework and my presentations. So here is a first one: The PhoneGap + Backbone.js presentation that I delivered last week at HTML 5 Dev Conf. You can view the presentation here. You can also get the code on GitHub and run it on your mobile device as a PhoneGap application to enjoy the full experience (I present on an iPad).