Monday, March 30, 2015

New Leaflet control: Credits

Lately, I've been polishing up more of these old Leaflet Controls that I've created over the last year. Here's another one.

https://github.com/gregallensworth/L.Control.Credits

This one's pretty simple: supply text and a URL and an image, and it generates a cute interactive icon in the lower-right corner. There are various ways to make credits in your Leaflet map, this is the one used by GreenInfo Network and it's quite nice.


Book Review: Phonegap for Enterprise, by Kerri Shotts

Kerri Shotts is a member of the Phonegap mailing list, who quite frequently posts helpful advice. I appreciate her contribution to Cordova/Phonegap community. She's even written a few books, such as PhoneGap 3.x Mobile Application Development Hotshot which I have. So a few weeks back, I jumped at the opportunity to get a free copy of Phonegap for Enterprise, on condition that I review it.

One of the best parts about reading someone else's perspectives on programming, is that they have different angles and use different tools. As a result, I may not use their techniques but will learn about some tool that fits a need better than my current tool. And as far as I'm concerned, every "Oh, I didn't know that!" moment is a gem. And this book had plenty of those.

Super Short Summary


A good book, including an overview of technology choices and general and specific notes about how to make your application more secure... but also more likeable. It's definitely not a cookbook nor a how-to, as much as considerations and options which may apply to your application.

It's full of outside-the-box ideas, and full of options and links to other resources so you can take those ideas and run with them in your own direction. Phonegap for Enterprise is a worthwhile read regardless of your Cordova skill level.


Openings


The book opens with the usual What is Phonegap? sort of introduction. It then moves quickly into a discussion of how to store your backend data and options for where to put your business logic, and an overview of what goes into an application. This isn't novel stuff, if you've written web services before... until she brings up some alternative angles on business logic and on database storage.

She mentions a database-in-cloud service called Parse, and considers doing business logic in the database (PL/SQL) as opposed to in external code (PHP or Node). Leveraging you're database server's PL instead of using a second-layer language? It's certainly an interesting approach, and she does describe the balance of the two approaches. Definitely food for thought here.

She wraps up this introductory chapter with discussion of planning out the application: what fields do a Task and a Person have, and what Persons can view and edit what Tasks? If you're new to web services then thinking this stuff out beforehand is something that really helps a lot, and yet it's a phase often skipped - it's good to see someone advocating for that.

Security


Chapter 3 puts the carriage before the horse a bit, to touch on security. It's rare that anyone discusses security in the opening, and I appreciate that she does.

This chapter touches on security, considering the usual concepts such as using SSL but then worse-case scenarios such as man-in-the-middle attacks, and forged copies of your app. She touches on novel ideas such as hardcoding a certificate fingerprint into the app for better security, and even really-crazy stuff like calculating HMACs for your requests so the server can ensure that they requests are likely to be from your app instead of an AJAX trawlbot or a session replay. She points out the impossibilities of protecting your source code, the possibilities of someone falsifying your app and hijacking your user's network, and more.

Individually you can take or leave each idea, and some you can't really do anything about. But as a whole they present a rich and thought-provoking set of considerations which a busy developer often skips over until the end... when they forget to do it at all!


Building Foundations


Chapters 4 and 5 proceeds to the building of your web service. Kerri describes the basics of REST and also some of the realities of how we do things instead of true REST, then gets into some code bites to get started on setting up your URL routing and authentication.

This part I found somewhat baffling and dense. It jumps around a bit, and leaves out details of authentication beyond mentioning the benefits of using a third-party service such as OAuth yet stating that we had settled on using a local password hash using PBKDF2

But getting past that, Kerri does illustrate the beauty of Passport. The details of session.createSession() are implemented inside Passport and you could just as easily be using an OAuth service to generate those tokens which you're later validating with Passport. And again with considerations as being a theme here, the benefits of a dedicated OAuth service over a local password database are discussed.

Now, her specific take on REST as following the HATEOAS concept feels a bit overwrought to me, as if she's trying to reinvent SOAP. Given that any API change would implicitly come with app changes to both the UI and the programming, it's not the case that the app could auto-configure itself if endpoints change anyway. So ultimately I'm not convinced that this is the way I would do things.

But though HATEOAS is over-the-top for this application, Kerri's coverage of it is still food for thought, if we intended to construct web services which are subject to change and intended to be consumed by something other than an app which we control. You don't even need a mobile app in the works for this to have interesting possibilities.


Cordova Considerations and UI Considerations



Chapters 5, 6, and 7 get really into the Cordova-specific considerations and techniques for your app. And this is some good stuff.

The device can lose and regain its network status. Your device could be backgrounded and then terminated before you had a chance to save state to LocalStorage. You can store stuff in SQLite and encrypt it. There are freemium services to both act as Push Notification gateways and Push Notification SDKs. And she covers these expertly: succinct and yet thorough with good advice.

Mobile UIs have different expectations than desktop UIs, and Chapter 8 really tries to cover it all.  It includes a tutorial on MVC, and observer-based data-binding frameworks. She points out UI considerations and modern HTML5 tags, and mentions a few options for charting. (she forgot to mention Highcharts, my favorite.) It's a bit scattered since a complete discussion of options could fill a lifetime, but as usual rich in provocative thoughts and in options to find your own way.

This set of chapters was my favorite of the whole book (as was Chapter 3), in terms of gems of wisdom.  The brevity of my review of this whole one third of the book, really doesn't do it justice. There's way too much for me to summarize, so buy the book and read it yourself. ;)

All In All


It's a bit dense at the start, but it's not meant to be a cookbook. It's about ideas and considerations you that may not have crossed your mind when you did your first apps. It's so rich with "Other Resources", that if you think her specific ideas aren't for you, give thought to the considerations she brings up, then read those other resources and do it your way.

Phonegap for Enterprise a worthwhile and educational read, for people of any skill level with Cordova.

Monday, March 23, 2015

More Github and leaflet awesomeness: L.TileLayer.Cordova

What a busy week! Found a cool Leaflet plugin, wrote a new Leaflet plugin, ... and finally put the polishing touches and refactoring onto a pet project from almost two years ago!

https://github.com/gregallensworth/L.TileLayer.Cordova
This Leaflet layer plugin extends L.TileLayer to add on-device caching of tiles, then the ability to switch between online mode (from web using the URL given) and offline mode (the on-device stash). Utility functions are provided to calculate tile pyramids, to accept arbitrary lists of XYZ ordinates,to view the cache usage, and to empty the cache.

If you make Leaflet maps for use with Cordova or Phonegap, you'll be interested in this!

Friday, March 20, 2015

Another neat Leaflet control: L.Control.BoxZoom

Yesterday,  I was also asked by a client to create a box-zoom tool. Their end users don't know about using the Shift key, and at any rate they prefer the visual aesthetic of a visible, clickable button to make a one-time box zoom.

I was quite surprised to find no ready-to-deploy ones. And I was pleased with Leaflet for making subclassing L.Control so darn easy! About 90 minutes later, I had this:

https://github.com/gregallensworth/L.Control.BoxZoom

Not a lot to say about it. It's a single button, clicking it will let you perform a box zoom one time, at which time the control will turn itself off again.

Cosmetically, you could configure the HTML a bit. The default one on Github, simply uses a background-image and a included SVG icon. The live, deployed one for this client uses a FontAwesome <i> tag, and your own could use Twitter Bootstrap icons or whatnot.


Enjoy!

Thursday, March 19, 2015

Neat Leaflet plugin: History

A client today asked for a History tool in Leaflet. The idea, is that some Forward and Backward arrows are on the map, and these will track back through the "history" of your map extent: pan, zoom, pan again, ... then back up to that previous extent.

It doesn't come up often, but this particular client had it on a prior project I did and they really like it. But does it exist... for Leaflet?

Yes, it does! Thanks to Chris Scott there's a History control for Leaflet. It's tiny and functional, has no frills and no surprises.

Thursday, March 5, 2015

Weinre and GapDebug


Weinre Is Awesome

For the last year-plus I have been using weinre (Weinre website) for debugging my Cordova apps.

Basically it's a UI very similar to Chrome's F12 tools: DOM browsing, CSS editing, JavaScript console, etc. ... for use with remote mobile apps. You insert a line of JavaScript into the client code and it loads a whole bunch of hooks and behaviors, which you can then talk to via that UI in your browser. Voila: type alert('Hello') into your browser, and your app has a popup alert.

Unlike the remote debuggers provided with various SDKs, it is not platform-specific. The very same browser window can debug apps on Windows Phone, Android, iOS, ... And that's pretty slick.

Weinre is about the greatest thing since Firebug, for figuring out why your Cordova app is misbehaving. For Cordova-based apps in particular, an online actively-on-the-phone debugger is important, since JavaScript failures just do nothing.

But Now There's GapDebug

The down side of weinre, is that it's a network thing. You need a server running weinre, and both your phone and your browser connect to it. If your phone is using its mobile network and your PC is on your home wifi, then you need a third-party server e.g. at work or on an EC2 instance. If you're running both the phone and your PC on the LAN, Windows Firewall can be a nuisance and prevent the phone from connecting (the only symptom being that your phone never shows up on the list of remote connections).

Genuitec embraced the cable, with GapDebug. (Genuitec Website)

It's basically the same idea as weinre: a local service that communicates with your phone and app, with a browser-based UI featuring a CSS editor and JavaScript console and all. It's all the awesome of Chrome's F12 tools.

The first big difference from weinre is that GapDebug works over the cable. I have my phones plugged in via cable anyway, so I can push code updates and also not have the battery conk out, so adding a cable is nothing new.

The second big difference, is that weinre requires that you place a <script> tag into your HTML, then remember to remove it for production. GapDebug uses the android:debuggable flag in AndroidManifest, so I'm equally likely to forget... but then again I make changes to AndroidManifest less often than to index.html so an outstanding change there is noticeable.

The third big difference, is that GapDebug works over the cable... and not over the Internet. Weinre's ability to work over the Internet makes it fill a slightly different niche, when the need arises.

Why Choose?

So, weinre is obsolete? Well, no. They hold slightly different places.

For my day-to-day debugging on my own phones, plugged in via cable anyway, GapDebug is my tool of choice.

But what if I want to debug someone else's phone? Then I stick the weinre <script>tag into the HTML, ship to the beta tester, then open up my browser. Their copy of the app calls home to weinre, and I can work with it right there. If she fires up Skype, I can even talk with the beta tester and see her phone while I fuss with it remotely. Can't do that over a three-foot cable!

My advice: Use both. :)