Andrew Trice

I’m still “the new guy” on the MobileFirst team here at IBM, and right away I’ve been asked by peers outside of IBM: “So, what exactly is MobileFirst/Worklight? Is it just for hybrid apps?” In this post I’ll try to shed some light on IBM MobileFirst, and for starters, it is a lot more than just hybrid apps. IBM MobileFirst Platform is a suite of products that enable you to efficiently build and deliver mobile applications for your enterprise, and is composed of three parts: IBM MobileFirst Platform Foundation IBM MobileFirst Platform Application Scanning IBM MobileFirst Quality Assurance IBM MobileFirst Platform Foundation IBM MobileFirst Platform Foundation (formerly known as Worklight Foundation) is a platform for building mobile applications for the enterprise. It is a suite of tools and services available either on-premise or in the cloud, which enable you to rapidly build, administer, and monitor secure applications. The MobileFirst Platform Foundation consists of: MobileFirst Server – the middleware tier that provides a gateway between back-end systems and services and the mobile client applications. The server enables application authentication, data endpoints/services, data optimization and transformation, push notification management (streamlined API for all platforms), consolidated logging, and app/services analytics. For development purposes, the MobileFirst server is available as either part of the MobileFirst Studio (discussed below), or as command line tools. MobileFirst API - both client and server-side APIs for developing and managing your enterprise mobile applications. The server-side API enables you to expose data adapters to your mobile applications – these adapters could be consuming data from SQL databases, REST or SOAP Services, or JMS data sources. The Server side API also provides a built-in security framework, unified push notifications (across multiple platforms), and data translation/transformation services. You can leverage the server-side API in JavaScript, or dig deeper and use the Java implementation. The client-side API is available for native iOS (Objective-C), native Android (Java), J2ME, C# native Windows Phone (C#), and JavaScript for cross-platform hybrid OR mobile-web applications. For the native implementations, this includes user authentication, encrypted storage, push notifications, logging, geo-notifications, data access, and more. For hybrid applications, it includes everything from the native API, plus cross-platform native UI components and platform specific application skinning. With the hybrid development approach, you can even push updates to your applications that are live, out on devices, without having to push an update through an app store. Does the hybrid approach leverage Apache Cordova? YES. MobileFirst Studio - an optional all-inclusive development environment for developing enterprise apps on the MobileFirst platform. This is based on the Eclipse platform, and includes an integrated server, development environment, facilities to create and test all data adapters/services, a browser-based hybrid app simulator, and the ability to generate platform-specific applications for deployment. However, using the studio is not required! Try to convince a native iOS (Xcode) developer that they have to use Eclipse, and tell me how that goes for you… If you don’t want to use the all-inclusive studio, no problem. You can use the command line tools (CLI). The CLI provides a command line interface for managing the MobileFirst server, creating data adapters, creating the encrypted JSON store, and more. MobileFirst Console – the console provides a dashboard and management portal for everything happening within your MobileFirst applications. You can view which APIs and adapters have been deployed, set app notifications, manage or disable your apps, report on connected devices and platforms, monitor push notifications, view analytics information for all services and adapters exposed through the MobileFirst server, and manage remote collection of client app logs. All together, an extremely powerful set of features for monitoring and managing your applications. MobileFirst Application Center - a tool to make sharing mobile apps easier within an organization. Basically, it’s an app store for your enterprise. MobileFirst Platform Application Scanning MobileFirst Platform Application Scanning is set of tools that can scan your JavaScript, HTML, Objective-C, or Java code for security vulnerabilities and coding best practices. Think of it as a security layer in your software development lifecycle. MobileFirst Quality Assurance MobileFirst Quality Assurance is a set of tools and features to help provide quality assurance to your mobile applications. It includes automated crash analytics, user feedback and sentiment analysis, in-app bug reporting, over-the-air build distribution to testers, test/bug prioritization, and more. So, is MobileFirst/Worklight just for hybrid (HTML/JS) apps? You tell me… if you need clarification more information, please re-read this post and follow all the links.

The Card UI pattern is a common look used by Pinterest and many other content sites. See how you can make a PhoneGap app with this look.

In a previous post on capturing user signatures in mobile applications, I explored how you capture user input from mouse or touch events and visualize that in a HTML5 Canvas. Inspired by activities with my daughter, I decided to take this signature capture component and make it a bit more fun & exciting. My daughter and I often draw and sketch together… whether its a magnetic sketching toy, doodling on the iPad, or using a crayon and a placemat at a local pizza joint, there is always something to draw. (Note: I never said I was actually good at drawing.) You can take that exact same signature capture example, make the canvas bigger, and then combine it with a tablet and a stylus, and you’ve got a decent sketching application. However, after doodling a bit you will quickly notice that your sketches leave something to be desired. When you are drawing on a canvas using moveTo(x,y) and lineTo(x,y), you are somewhat limited in what you can do. You have lines which can have consisten thickness, color, and opacity. You can adjust these, however in the end, they are only lines. If you switch your approach away from moveTo and lineTo, then things can get interesting with a minimal amount of changes. You can use images to create “brushes” for drawing strokes in a HTML5 canvas element and add a lot of style and depth to your sketched content. This is an approach that I’ve adapted to JavaScript from some OpenGL drawing applications that I’ve worked on in the past. Take a look at the video below to get an idea what I mean. Examining the sketches side by side, it is easy to see the difference that this makes. The variances in stroke thickness, opacity & angle add depth and style, and provide the appearance of drawing with a magic marker. It’s hard to see the subtleties in this image, so feel free to try out the apps on your own using an iPad or in a HTML5 Canvas-capable browser: Simple Sketch Using lineTo Stylistic Sketches Using a Brush Just click/touch and drag in the gray rectangle area to start drawing. Now, let’s examine how it all works. Both approaches use basic drawing techniques within the HTML5 Canvas element. If you aren’t familiar with the HTML5 Canvas, you can quickly get up to speed from the tutorials from Mozilla. moveTo, lineTo The first technique uses the canvas’s drawing context moveTo(x,y) and lineTo(x,y) to draw line segments that correspond to the mouse/touch coordinates. Think of this as playing “connect the dots” and drawing a solid line between two points. The code for this approach will look something like the following: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(a.x, a.y); context.lineTo(b.x, b.y); context.lineTo(c.x, c.y); context.closePath(); context.stroke(); Brush Images The technique for using brush images is identical in concept to the previous example – you are drawing a line from point A to point B. However, rather than using the built-in drawing APIs, you are programmatically repeating an image (the brush) from point A to point B. First, take a look at the brush image shown below at 400% of the actual scale. It is a simple image that is a diagonal shape that is thicker and more opaque on the left side. By itself, this will just be a mark on the canvas. When you repeat this image from point A to point B, you will get a “solid” line. However the opacity and thickness will vary depending upon the angle of the stroke. Take a look at the sample below (approximated, and zoomed). The question is… how do you actually do this in JavaScript code? First, create an Image instance to be used as the brush source. brush = new Image(); brush.src="assets/brush2.png"; Once the image is loaded, the image can be drawn into the canvas’ context using the drawImage() function. The trick here is that you will need to use some trigonometry to determine how to repeat the image. In this case, you can calculate the angle and distance from the start point to the end point. Then, repeat the image based on that distance and angle. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var halfBrushW = brush.width/2; var halfBrushH = brush.height/2; var start = { x:0, y:0 }; var end = { x:200, y:200 }; var distance = parseInt( Trig.distanceBetween2Points( start, end ) ); var angle = Trig.angleBetween2Points( start, end ); var x,y; for ( var z=0; (z<=distance || z==0); z++ ) { x = start.x + (Math.sin(angle) * z) - halfBrushW; y = start.y + (Math.cos(angle) * z) - halfBrushH; context.drawImage(this.brush, x, y); } For the trigonometry functions, I have a simple utility class to calculate the distance between two points, and the angle between two points. This is all based upon the good old Pythagorean theorem. var Trig = { distanceBetween2Points: function ( point1, point2 ) { var dx = point2.x - point1.x; var dy = point2.y - point1.y; return Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) ); }, angleBetween2Points: function ( point1, point2 ) { var dx = point2.x - point1.x; var dy = point2.y - point1.y; return Math.atan2( dx, dy ); } } The full source for both of these examples is available on github at: https://github.com/triceam/HTML5-Canvas-Brush-Sketch This example uses the twitter bootstrap UI framework, jQuery, and Modernizr. Both the lineTo.html and brush.html apps use the exact same code, which just uses a separate rendering function based upon the use case. Feel free to try out the apps on your own using an iPad or in a HTML5 Canvas-capable browser: Simple Sketch Using lineTo Stylistic Sketches Using a Brush Just click/touch and drag in the gray rectangle area to start drawing.