Skip navigation
1 2 3 Previous Next

RhoMobile Blogs

40 Posts authored by: Robert Galvin

Tau Technologies has released a new version of RhoMobile 5.5 that includes many new features, updates and enhancements.

 

New Features Added

● iOS 10 Support.

● Android M Support.

● Android N Support.

● Crosswalk web engine for Android. Version of Crosswalk is 19.49.514.5.

● Android M: app permissions requested at runtime if app built with SDK 23+.

● WebKit web engine for Windows Mobile/CE.

● Android: added openssl-edge and openss.so-edge into rho-tau-extensions. OpenSSL version for this extensions is 1.1.0-stable. You may need this upgraded version to submit application to the Google Play store.

 

Enhanced Features

● Android SDK 23 supported.

● Latest changes in Android build tools supported (like Maven local repository dependencies etc).

● Android Camera API improved.

 

For full details please see:

Release Notes: http://rhomobile.tau-technologies.com/5.5/5.5.0/5.5ReleaseNotes.pdf

Documentation: Rhomobile | Home

I was inspired to write this blog from a recent post about which JS framework should be used for application development nowadays and it got me realizing that I should have written this a while ago. As you may know, RhoMobile has its roots in Ruby and what you get out the RhoMobile box is centered around Ruby views and controllers. You probably have tried our application generator in RhoStudio and you might have noticed that it starts you off thinking that you have to use JQuery Mobile in your application stack. Not only is it wrong to assume that, quite frankly it is wrong that we even suggest JQuery Mobile as the recommended framework. With its last release date of Oct 2014 and other signs of decline, one has to question the current state of JQM in modern hybrid application development. At the same time Ionic Framework has skyrocketed in adoption, growth and overall awesomeness. Even though Ionic is built on top of another hybrid app framework (Cordova), you can still reap the core benefits in your RhoMobile application and easily deliver a performant hybrid application.

 

Isn't the Hybrid vs Native Debate Over Already?

Before we get into the key features of Ionic and how to use it within RhoMobile, let's quickly summarize some of the key pieces that make up a great hybrid app design:

For those who want to jump right into it, clone this repo and you will have 3 starter Rho-onic apps as well as a demo app that I allude to in this article

  • Single Page App Pattern - if you are still treating your application as individual HTML pages, you are doing it all wrong. SPA is arguably the only way to get the most performance of your hybrid application. I strongly urge you to research this concept and understand the premise behind it, especially from a mobile device point of view.
  • Routing - in order to accomplish SPA, you need to have an easy way to break up your application into routes/states so your code can be maintainable and portable.
  • Templating - right along side routing, you need an easy way to build your UI and separate it into views or individual UI components
  • Mobile First Only - This is probably the most important piece. We all want our app to be as fast as possible and for our users not to notice or even care if it was not developed natively. To get that you want a framework that only cares about running on a mobile device and is designed with that in mind. Other frameworks that are trying to be website and mobile at the same time will never be able to give you 100% of what you need. Your app may fit on the screen automatically, but may not perform as well as it can.

Why I Can't Stop Using Ionic

As touched on above, Ionic is built on top of Cordova but is also includes Angular.JS. Cordova gives you the device APIs, but since we are building a RhoMobile application we will be throwing that part away from our stack. Angular is the foundation of the SPA design and gives Ionic the ability to build on top of that offering you not only great UI components, but also some built in directives and services that you can use in your application with ease. If you are not familiar with these terms, for now just think of them as self-contained intelligent components that you can instantly drop into your application. I don't know about you, but I do not like re-inventing the wheel every time I start a new application. As an added bonus, since the Ionic team is 'Mobile Only', they are already handling some of the things us hybrid-developers struggle with. Like how many times have you tried to figure out how to make a super long list of items scroll and perform as if it was native. Ionic has you covered, as we will explain and show some examples of this further along in this article.

Common UI Components

I am not going to spend a lot of time on this topic, any UI framework worth its weight will give you the common UI components that we need in our application like buttons, forms elements, icons, etc. You can head over to Ionic's site and see them in their glory. As with everything else, Ionic has designed these with mobile performance and usability in mind. They even give you great ways to customize the theme and look so that your app does not look like all other Ionic apps. Many of these components also automatically behave differently on Android and iOS to give you the best native like experience possible.

Screen Shot 2015-07-29 at 12.33.08 PM.jpg

Drop in Greatness

One of the best features in Angular that Ionic takes advantage of is the use of Angular Directives. Angular's docs do not really convey how great these are, but think of them as 'smart html markup'. In short, directives tie some self-contained javascript with html tags and attributes to give your application certain behavior without having to write much code at all. To demonstrate this, let's take a very complicated problem and make it dead-simple: large lists. There is so much work involved in making large lists to perform well in a hybrid-app like keeping the dom small enough without losing the scroll speed, or remembering position when navigating back to the list on page change to name a few. Well, Ionic has included a directive that does all of this for you - all in a few lines of code:

<ion-list>
  <ion-item collection-repeat="user in users" class="item item-avatar">
      <img src="{{user.user.picture.thumbnail}}">
      <h2>{{user.user.name.first | uppercase}} {{user.user.name.last | uppercase}}</h2>
      <p>{{user.user.location.city | capitalize}},{{user.user.location.state | capitalize}}</p>
  </ion-item>
</ion-list>

You will notice the <ion- tags and collection-repeat. This keeps my view nice and clean (not to mention super easy application prototyping) and leaves the complexity to the directive that has already been implemented for me. In my demo app that is included in the Rho-onic Git Repo I am pulling a list of 1000 users and using this directive to give you butter smooth scrolling. I dare you to try and reproduce this performance using your own homegrown techniques.

Screen Shot 2015-07-29 at 12.16.03 PM.jpg

Service With a Smile

Angular provides a foundation not only for smart markup, but it also provides the ability to package up intelligence that you may need to use within your controller logic in the form of services. Services are packaged up and named, so that you simply drop in the service into the controller that you need to use it in. Ionic includes several of these services. For example, say you want to provide an set of options when an item is selected in your application, you can drop in $ionicActionSheet and use it in your controller:

.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       return true;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});

Screen Shot 2015-07-29 at 9.30.15 AM.jpg

But Wait - There's More

I have only covered a few goodies that come out of the box with Ionic, there are plenty of good reads and reviews for you to Google. The community has exploded in the past year at adopting to Ionic and you can find other open source directives and services that the community has developed that you can use in your RhoApplication. Keep in mind that if any of them require a Cordova plugin, then those will most likely not be fully usable with RhoMobile. Others that simply provide some ui/js goodness should be able to be used without many issues. Here is a nice roundup of must have directives you should consider which BTW was written by an ex-JQuery Mobile ambassador who now professes a lot about Ionic.

One of my favorites is the ionic-datePicker. After adding the corresponding JS and CSS files for this directive, I can easily add a datePicker to app and bind to a data model without writing a single line of JavaScript:

<ionic-datepicker idate="currentDate" disablepreviousdates="true"  disablefuturedates="false" callback="datePickerCallback" disableddates="disabledDates" title="title" mondayfirst="true">
    <button class="button button-block button-positive"> {{ currentDate | date:'dd - MMMM - yyyy' }} </button>
</ionic-datepicker>

You can see this directive includes some options exposed via HTML attributes. The iDate attribute allows me to bind the value of the the chosen date in the datepicker to the local model I am using currentDate which gets displayed on an Ionic button

Screen Shot 2015-07-29 at 12.16.23 PM.jpg

Bionic RhoMobile Apps with Ionic

Ok, so now that you have a thirst for using Ionic inside your RhoMobile application, lets walk through the steps you need to take. This same concept really applies to other frameworks as well. And again for those who want to jump right to it, I have created a Git repo that contains multiple Rho-Ionic starter template apps based on Ionics starter projects. It also contains a demo app that demonstrates the features I mentioned in this article as well as a demonstration of using RhoMobile api's within the framework.

Be sure to install Ionic (npm install -g cordova ionic) and RhoMobile Suite before attempting these instructions

1. Create a new project with RhoMobile

Screen Shot 2015-07-29 at 12.18.39 PM.jpg

2. Create an Ionic project

Open a command prompt and go to the root of the project you just created. Then use ionic CLI to generate a new project. For this example, I chose to create a sidemenu based application called ionic. This will create a subfolder in my RhoMobile application called ionic so I can keep the two separate

Screen Shot 2015-07-29 at 12.20.15 PM.jpg

3. Replace RhoMobile public Folder

The Public folder acts as your 'web root'. If you look at the Ionic folder structure you will see a www folder that is basically the same concept. This is the folder we want to use in our RhoMobile application. Replace the entire contents of public with the contents of ionic\www

Screen Shot 2015-07-29 at 12.26.09 PM.jpg

4. Change RhoMobile Start Path

Open up the rhoconfig.txt file and look for start_path. By default it is setup to use Ruby views and controllers, which we will not be using in this example. Change it to point to the new start page:

start_path = '/public/index.html'

5. Modify Index.html

Remember that Ionic is built on top of Cordova, so it is including the cordova.js file by default. We want to remove this and replace it with the RhoMobile JavaScript api file. This file will be generated when you build your application (because it depends what extensions you include) and will be found in api/rhoapi-modules.js. Yourpublic\index.html` file should look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="api/rhoapi-modules.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

6. Tweak Default Wrapper Behavior

There are a few things that drive me crazy about our default app generation, but especially on Android we add a Title Bar and Toolbar to the application that just wastes a lot of real estate and does not fit into the design of application I usually am going for.

First I will remove the toolbar, by opening app\application.rb and uncommenting the default Toolbar line:

@@toolbar = nil

Then I will remove the 'Title Bar' that gets inserted by default on top of the Webview container. I do this by opening build.yml and adding a line under the android section:

android:
  android_title: 0

7. Ready To Run on Device

Ok you are all set to run the app on a device. Go ahead and setup a Run Configuration for Android and check out your masterpiece.

Screen Shot 2015-07-29 at 2.31.09 PM.jpg

 

For actual development, you will probably want to do a lot of your UI and prototyping using Ionic's command line and live reload by going into your projects ionic folder we created above:

ionic serve

This will start a local server and load your app in your browser. You can then work on your JS and HTML and the app will instantly reload. Then have at it with your browser dev tools to ensure your app looks and flows they way you want to. When you are ready to either add device or RHoMobile APIs then simply copy your ionic\www folder to you public folder like we described earlier.

Note: I would not use RhoSimulator for this setup. Quite frankly it is using a different/dated Webkit engine than what you will see on your device. Not to mention Chrome Dev Tools are far superior and you also get Ionics awesome live reload when content changes.

Conclusion and Caveats

Like with any development efforts, there are so many choices and paths you can take to get to the same end result. Overall no matter what sets of components you choose for your application stack, you should fully understand how and why it is behaving the way it does and what aspects will effect your end users perception of how well your application is performing. As mentioned before, don't expect any Cordova plug-ins to work in a RhoMobile application using Ionic, but the rest of the framework will give you many opportunities to get your hybrid application started on the right foundation. I am always interested in hearing different options and suggestions for doing things a better way. For those who may be just starting with RhoMobile and possibly Hybrid application development, I hope you find the starter apps and suggested stack described here useful and a positive experience in your getting started journey.

When you are dealing with developing applications that have a large data set, being able to test your application with as much random-as-real-as-you-can-get data is priceless and saves a boat load of time. There are many choices out there, but for some reason I never came across Chance.js. This library packs a punch for various types of data and is drop dead easy to use.

 

Download the library and reference it in your application and you instantly have access to tons of random data:

 

<script src="chance.js"></script>
<script>
    console.log(chance.bool());
</script>





 

 

The library is so intuitive to use you hardly have to consult the documentation. Need a name? No Problem:

 

chance.name();
  => 'Tony Saunders'





 

How about and address?

 

chance.address();
=> '5447 Bazpe Lane'





 

Maybe a French Phone Number:

 

chance.phone({ country: 'fr' });
=> '01 60 44 92 67'





 

Each method usually has some parameters that you simply pass in as an object and it will fine tune the data to exactly what you are looking for:

 

Say you want a random latitude and longitude coordinates, but you need to bound it to a certain area. No problem:

 

lastgeo:  {
           "__type": "GeoPoint",
           "latitude": chance.latitude({min: 35.7332563, max: 35.762792,fixed: 7}),
           "longitude": chance.longitude({min: -78.78245, max: -78.7597049,fixed: 7})
         }





 

It even has some mobile specific randomness like, Android GCM Id or Apple Push Token:

 

chance.android_id()
=> 'APA91HHQyPlWqV2Nu61LRs41eE4vrR4bHLKTs0-Dh5nDLopcWZotLw77NEoJyADNJiq6cwY0jMM02y8aacLs6fe2_ynweFjZJVVevKON-32826v-EFoayyThU3-42YEUY9pCScU_n73yRNSOlTk5W6iPtrDkQ3a6_BvOxRbSYi3E6QEY0ZuIQF0'

chance.apple_token()
=> 'b50edac575bfba07dd019b28b2af7189a3ddda17c806ef14a9abbfd00533f67e'





 

 

There are so many categories included like numbers, strings, people, web, location, time, etc, but it does not stop there. They throw in some helper functions as well. Say you had a list of specific things you wanted to pick from, but you wanted certain items to appear more often than others. Well, check out the weighted function:

 

Provide an array of items, and another array of items specifying the relative weights and Chance will select one of those items, obeying the specified weight.

 

chance.weighted(['a', 'b', 'c', 'd'], [1, 2, 3, 4]);
=> 'c'





 

Will generate a letter from the array but will pick 'b' twice as often as it picks 'a' and will pick 'c' three times as often as it picks 'a' and will pick 'd' four times as often as it will pick 'a' and will pick 'd' two times as often as it will pick 'b'.

 

You can even take it one step further, if you aren't already drooling. Why not extend chance with your own objects so that you can simply call chance with one line of code and get back an object with randomized data. They call this a 'mixin'

 

chance.mixin({
    'user': function() {
        return {
            first: chance.first(),
            last: chance.last(),
            email: chance.email()
        };
    }
});


// Then you can call your mixin
chance.user();


=> {first: 'Eli', last: 'Benson', email: 'gembibuj@dugesan.com'}





 

 

So go ahead and roll the dice and fill your app with a bunch of random data... O yes, they do have a function for 'dice'..It could even be a twenty sided dice for all you dungeons and dragons fans out there:

 

chance.d20();
=> 13





Head over to the download link (Windows, Mac) to download the latest release of RhoMobile Suite. This release is dubbed a service pack because it mostly contains bug fixes that are outlined in the release notes. Other then bug fixes, most notably is official support for a few more platforms:

 

  • Support for iOS8 across the entire Apple product line where iOS8 is supported. Support for the latest XCode 6.1 with iOS 8.1 SDK.
  • Support for MC32 Android Jellybean. Our previous release introduced support for the MC32 CE7 variant, with 5.0 SP1 you can now also target your applications at the entire MC32 product family.

For developers looking to support multiple platforms while using their web skills, cross-platform development continues to rank high as a top strategy. This is why getting face time with the developer community occupies a top spot on the RhoMobile team’s strategy list—so we can ensure developers are getting the most from our RhoMobile platform. It’s one of the main reasons that the RhoMobile team is committed to sponsoring and presenting at Motorola Solutions’ upcoming APPFORUM2014. Because this is the event where developers will be gathering in a few weeks, to meet and greet and share the kind of direct feedback that really shapes the future of a product.

 

When you get right down to brass tacks, some of the biggest value to be derived from AppForum isn’t only about the (admittedly excellent) presentations that our team members will deliver. It’s also about the conversations that we’ll get to have, the one-on-one interactions in the hallway after a session or over drinks at one of the social events, when conference participants tell stories about their successes. Even better, it’s a perfect opportunity for us to learn what the RhoMobile team can do to make a developer’s life easier. We’re always after that particular brand of gold-star feedback that comes directly from the horse’s mouth, and we expect to receive it in spades throughout our time at AppForum.

 

It’s always interesting to witness how creative developers are, especially when they are challenged by the type of sea change taking place in the shipping lanes where Windows Mobile/Desktop, Android, and iOS converge. Give developers some tools to build anything, and they will quickly figure out how to connect the dots to create a killer application that truly solves real-world problems. Some have decided to embrace a truly native path, and that choice may be best for them. But there remains a huge group out there who have invested themselves in becoming web gurus and JavaScript ninjas; these developers have realized that these skills are not limited to being in static websites and that they can be re-used to build native applications without much effort. These native hybrid applications are really becoming indistinguishable from native apps. The UIs have become more flat and cleaner so that it’s no longer necessary to put a tremendous amount of content all in one page in order for all of that information to remain easily accessible via off-screen content, touch-based gestures, and interfaces. RhoMobile continues to provide an avenue to developers with web skills who are looking to deliver applications on Windows Mobile/Desktop, Android, and iOS by giving them what essentially amounts to a mini web server running on a device with special APIs that hook into device capabilities that a standard browser cannot provide.

 

To position itself to be ready for whatever is coming down the pike from platform and enterprise standpoints, RhoMobile has been architected to take advantage of the latest capabilities that HTML5 and Webkit have to offer. These device capabilities can easily be plugged into the framework to so users may take advantage of new device features from Day 1 of a product’s release. And although we are seeing more and more consumer influence into the enterprise, it is the enterprise feature set that still

tends to be unique. Developers typically cannot find interfaces from consumer-focused developer frameworks that they can tap into in order to take advantage of these enterprise features. RhoMobile is Enterprise First—it is mission critical that we provide new enterprise capabilities with every release. We welcome the opportunity to share a bit of this conversation with you at AppForum too.

 

As we look back upon the not-very-distant origins of enterprise mobility, the virtual explosion of apps that has occurred in the development world should generate very little surprise. Many amounted to nothing more than mere flashes in the application pan because they solved a niche need. Others failed because the quality was very low, (an unfortunate but unavoidable consequence stemming from the shockingly low entry barrier that a developer can easily pass to gain entry to the game).

 

The apps that tend to survive are those that truly hit the mark on delivering a solution for a critical need. And the individuals who are creating this new class of application are the developers driving our industry. What we’ll see from these mavericks going forward will be more and more applications integrating with each other and apps behaving less selfishly, as developers come to realize the richer opportunity that can undoubtedly occur when they make the correct partnerships and hook into other applications in order to deliver a complete solution.

 

Let’s continue this discussion at AppForum. The RhoMobile team looks forward to meeting you there.

So you may have seen announcements about our upcoming AppForum Sep 8-11 in Schaumburg, IL - but did you see that you can win your very own Drone.

drone_snow.png

This bad boy is super cool:

 

  • HD Camera. 720p 30FPS
  • Wide angle lens : 92° diagonal
  • H264 encoding base profile
  • Low latency streaming
  • Video storage on the fly with the remote device
  • JPEG photo
  • Video storage on the fly with Wi-Fi directly on your remote device or on a USB key
  • 1GHz 32 bit ARM Cortex A8 processor with 800MHz video DSP TMS320DMC64x
  • Linux 2.6.32
  • 1GB DDR2 RAM at 200MHz
  • USB 2.0 high speed for extensions
  • Wi-Fi b g n
  • 3 axis gyroscope 2000°/second precision
  • 3 axis accelerometer +-50mg precision
  • 3 axis magnetometer 6° precision
  • Pressure sensor +/- 10 Pa precision
  • Ultrasound sensors for ground altitude measurement
  • 60 FPS vertical QVGA camera for ground speed measurement

 

So come on Rho Developers - see you in Schuamburg, get your App on and fly to new heights!!

What is new in this release:

 

  • RhoMobile Suite 5.0 features a completely redesigned licensing model.
    • From 5.0 you no longer purchase licenses to run on a specific device or that are tied to a specific application, instead licenses are purchased on a per-developer basis and integrated with the rebrandedRhomobile.com website, the Rho cloud build solution.
    • Full details of the new license model are available from http://docs.rhomobile.com/en/edge/guide/licensing and that page is worth a quick read before getting started with 5.0.
    • You will need a developer account before you can start building your applications with 5.0.
  • Relaunch of our cloud build solution
    • A complete redesign of our cloud build offering, now branded Rhomobile.com.
    • RhoMobileSuite 4.x builds can now be executed in the cloud.
    • Integration with RhoStudio and our new license model gives seamless transition between cloud building and building locally on your machine.
    • Performance enhancements to our cloud build will greatly decrease the length of time required to build most applications.
  • Runtime and startup performance improvements; you should notice an improvement in application performance when using applications built in RhoMobile Suite 5.0, particularly on Windows Mobile / CE.
  • We continue our beta support for Motorola Solutions' 'SimulScan' product
  • Support for a new device: MC32N0 CE7.0. Support for the Android variant of that platform will be available closer to that product launch
  • New common API for AudioCapture
  • Support for Android KitKat consumer devices. Support for Motorola Solutions' KitKat devices will be available closer to those product launches.
  • Additional bug fixes

TODAY April 23rd - 4.1 New Feature Demo: Printing

Register: https://www2.gotomeeting.com/register/546546650


Rhomobile Suite 4.1 has been shipped and we have scheduled a series of webinars to help you learn about the release and how to use some of the key features.

 

Sign up now and register or Watch the Replays:

 

April 2nd: Introducing RhoMobile Suite 4.1

Replay: https://developer.motorolasolutions.com/docs/DOC-2111

 

April 9th: 4.1 New Feature Demo: Cross Platform Intents

Replay: https://developer.motorolasolutions.com/docs/DOC-2112

 

April 16th:  - TODAY April 23rd - 4.1 New Feature Demo: Printing

Register: https://www2.gotomeeting.com/register/546546650

 


The DPX feature demo webinar has been post-poned and will take place sometime in May.

April 23rd: 4.1 New Feature Deep Dive: DPX - Doc Capture

Whether you are developing applications for consumers looking for the best price on products, or for the retail store associate to manage their daily activities, the future of the retail environment is changing. How will your applications change? Will they deliver a more personalized experience? Will they create a smarter connected shopper? Following the recent Retail Big Show NRF 2014, here is a nice roundup of videos from Motorola Solutions' CTO Paul Steinberg that may give you some insight on new opportunities for your application.

 

 

 

 

ibeacon-sm-screenshot.jpg

Imagine the next time you step inside your favorite big box store and your shopping list is transformed into a personalized map, showing you the deals and products that’ll appeal to you most. Or better yet, you have been a loyal customer for years and that big screen TV you have been staring at for several minutes suddenly drops in price dynamically reduced just for you - right in front of your eyes. All of this enabled by Bluetooth you say? Sounds odd doesn't it, I mean Bluetooth has been around forever - we use it for handsfree talking on our phones while driving and for streaming our music to the stereo. Are we talking about the same Bluetooth? Well actually not quite, this isn’t the battery-draining, why-won’t-it-stay-paired Bluetooth you are use to. Today we have Bluetooth LE - the LE stands for Low Energy and it’s quickly becoming a big deal.


Gaining Momentum

Bluetooth LE was actually first introduced in 2006, but has quickly been gaining momentum now that Apple and Google are pretty serious about it.  Apple's iBeacon introduced in iOS7 lets developers harness the latest Bluetooth LE technology in their apps and we are beginning to see it in action at Apple's retail stores as well as real world pilots by Macy's and Major League Baseball. Although Google still pushes NFC they are starting to see that Bluetooth LE has some significant advantages over it and has baked it into Android 4.3. One advantage is that the technology can pinpoint you–indoors or out–with an astonishing degree of accuracy. Multiple beacons can triangulate your position at distances anywhere from 100 feet down to just a few inches. The beacons themselves are relatively inexpensive and run off a watch battery that can last for two years making in attractive and painless for retailers or venues to install. It also supports “enter” and “exit” events, so it can send different notifications while entering into the range and exiting out of the range. Google and Apple are not the only major mobile manufacturers that are interested, Nokia recently announced that it will be rolling out an update to all of it's Windows Phone 8 devices to enable Bluetooth LE.

 

Déjà vu

What this is really about is connecting you to digital content. This is not a new concept, we have tried this in the past. Remember those QR codes that were plastered all over the place. That was also about connecting you to digital content. Well that has never really taken off, way too much effort, I guess, for someone to take their phones out, figure out which app to load and hold it in front of the sign in hopes it brings you to a meaningful web page. Then you are left standing there figuring out what next to do. Although Bluetooth LE still requires you to have an app installed it is much more passive in nature.The protocol is designed so that all the triangulating happens constantly and quietly in the background. When you pull out your phone, the right content is there waiting for you or notifications will only appear after certain if-then-else conditions happen like standing in front of the display for several minutes. This personalized service is one big advantage Bluetooth now has over clunky predecessors like NFC and QR codes.

 

Beyond Marketing

Most of the examples that are used to demonstrate the power of BLE and iBeacons focus on advertising and commerce. However, with the inexpensive cost of a beacon, there are other areas that iBeacons and BLE could be used in to make our lives easier. For example, what if you placed a beacon on things you always seem to lose like car keys, remotes, bags, etc. They do cost a reasonable amount (about $20 for this type of tag), but could end up saving you more. Home automation is another area that is ideal for BLE since we all seem to carry our phones with us from room to room. Imagine lights going on or off when you are certain distance away or your phone alerting you that you left the oven on.  Another scenario may be a simple app running on an iPad docked in your kitchen, acting as a beacon and personal concierge service. You walk into the room and it knows it is you and serves up your personalized content and automatically plays back messages left from your spouse or kids (all while you get your cup of coffee).

 

It's Always About the App

These BLE beacons and sensors are bound to quickly get smaller, cheaper and be more prolific in our daily lives. At the end of the day the acceptance of these will be driven by the usefulness of the applications that are behind them. And of course developers will have to deal with issues like privacy and retailers will have to resist the urge to bombard us with new hyper-localized notifications with our every step. However there is great potential behind Bluetooth LE and iBeacon like devices. It represents a chance to show off how intelligent your apps can really be.

Last week, 'Black Friday' kicked off the official start of the holiday shopping madness and if you are like me, the credit card barely stayed in the wallet. I think between my wife and I, we wore out the poor mag stripe on the back of our cards. I would be curious to see the stats from banks on orders of replacement cards in early December, because the stats on the amount of purchase seems to be staggering each year. In the midst of all of this shopping madness, I thought I would take this opportunity to talk about how you can easily 'Payment Enable' your RhoMobile application. You probably have been to a store this past weekend and was helped by an associate carrying a mobile device equipped with credit card reader. This category of accepting payments in a mobile fashion has really taken off and will undoubtedly change the way 'cash registers' look in the future. Heck, who carries cash anymore anyway, right?

 

Well some of these mobile payment solution are not very `developer friendly`: no APIs to fully integrate into my app, limited customization and their solution tends to work differently on different platforms. In a lot of cases, that does not matter and their solution is just fine. But if you are like me, you want the experience to be as seamless as possible, especially if you are a provider of software solutions. I want my app to look like my app and not a pieced together solution.

 

Enter Stripe

In my search for a pain-free, developer-centric way to handle purchases in your apps, I came across a service call Stripe. In the old days of online payments, you would have to create a merchant account, sign a long legal agreement, and wait about a week to have your business credentials verified. Stripe does away with all the bureaucracy while still ensuring transaction safety. Perhaps its best feature is that you can create a developer account right away, without verifying any business information. You can start exploring Stripe’s APIs literally minutes after signing up with them.

 

Signing up is a breeze, in fact you can even skip the step of registration and come back to it later.

Screen Shot 2013-11-27 at 11.53.35 AM.jpg

 

You will then be presented with a few getting started guides

 

Screen Shot 2013-11-27 at 11.53.53 AM.jpg

 

Which automatically adjust the demo code to include the API keys that are assigned to your account. I had to do a double take when I came across this, I was expecting it to just be mock demo code, but it was actually the exact code with my API keys that I needed to get started. How simple!

Screen Shot 2013-11-27 at 11.54.17 AM.jpg

Web = Cross Platform

When looking at the guides, you will see native Android and iOS libraries, but for our app we want to still use our web skills and write code that will work on any platform.  So choose the path for 'Website' since we will be using this in our RhoMobile Application and Rho apps are essentially mini web sites running on the device. Using the web approach may be important because some of those mobile payment solutions that I talked about before don't run on all platforms and also requires platform services like Google Play for instance in order for it to work. So going native may give you some unexpected limitations, where as using the web approach along with RhoMobile will allow you to work across any platform.

Screen Shot 2013-11-27 at 11.55.18 AM.jpg

 

2 minute Integration

Stripe's online docs give you a quick way for seeing how their solution works, but I wanted to see how it would work in a RhoMobile app. So I started by creating a brand new default project. And then I added the suggested form code into my index.erb file and ran it in RhoSimulator.

 

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_3Y7Ak1wqSncAFFMak4Np9l0T"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>







 

Viola! After entering the dummy credit card, my app was verifying with Stripes backend and giving me a token back to represent that transaction.

 

Screen Shot 2013-11-27 at 11.54.51 AM.jpg

 

As you will see in the rest of Stripe's documentation, I would use this token to send to my server that would in turn talk to Stripe's backend for the complete secure end to end transaction.  The way this sample code works is actually embedding an iframe of the script and UI that is running on Stripes backend. They give you some basic controls for the image that appears as well as the fields that are presented. This may be good for some cases, but if you want to have that seamless experience I was talking about and if you want to auto populate any of the fields (say from swiping a card using the CardReader on the device), you will have to write a custom form.

 

Custom Form

Luckily Stripe's documentation is well written and they clearly walk you through the steps of doing this. Following these steps, I replaced the Form section I added before with the following code:

 

    <form action="" method="POST" id="payment-form">
        <span class="payment-errors"></span>

        <div class="form-row">
          <label>
            <span>Card Number</span>
            <input type="text" size="20" data-stripe="number" placeholder="4242424242424242"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>CVC</span>
            <input type="text" size="4" data-stripe="cvc"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Expiration Month (MM)</span>
            <input type="text" size="2" data-stripe="exp-month"/>
          </label>
          <span>  Year (YYY) </span>
          <input type="text" size="4" data-stripe="exp-year"/>
        </div>

        <button type="submit">Submit Payment</button>
      </form>







 

Before I could use this form, we have to include Stripe's Javascript library:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>







 

And initialize it with our API key

<script type="text/javascript">
  // This identifies your website in the createToken call below
  Stripe.setPublishableKey('pk_test_3Y7Ak1wqSncAFFMak4Np9l0T');
  // ...
</script>







 

This is the same test API key that we used before with the embedded form.

 

Now we have to handle the event for when the Submit Payment button is pressed

jQuery(function($) {
  $('#payment-form').submit(function(event) {
    var $form = $(this);


    // Disable the submit button to prevent repeated clicks
    $form.find('button').prop('disabled', true);


    Stripe.card.createToken($form, stripeResponseHandler);


    // Prevent the form from submitting with the default action
    return false;
  });
});






 

This essentially sends the details via the form to the be processed by Stripes backend and then sets up a handler function to handle the response. Stripe requires certain fields and know which ones those are by using the data-stripe attribute.

 

<input type="text" size="2" data-stripe="exp-month"/>






 

The stripeRespondeHandler function handles the callback from Stripe's backend. Here is where you would handle errors and if successful submit the form to your back end to complete the transaction. Notice that we inject the token into the form. This is the key piece of information that is needed on the backend. You don't have to send any of the other sensitive information across the wire.

 

var stripeResponseHandler = function(status, response) {
  var $form = $('#payment-form');
  console.log(status);
  console.log(response);
  if (response.error) {
    // Show the errors on the form
    $form.find('.payment-errors').text(response.error.message);
    $form.find('button').prop('disabled', false);
  } else {
    // token contains id, last4, and card type
    var token = response.id;
    // Insert the token into the form so it gets submitted to the server
    $form.append($('<input type="hidden" name="stripeToken" />').val(token));
    // and submit
    alert('Card Accepted: ' + token);
    //$form.get(0).submit();

  }
};






 

Integrated Card Reader

Some of the Motorola Solutions devices may be equipped with a built in MSR reader. Take the MC40 for example, this device optionally has a built-in MSR and it also is supported by RhoMobile's CardReader API. In order to use this API, we have to first include an extension in our build.yml file before building the project.

 

extensions: ["cardreader"] 

 

Now when we build our application, the Rho.CardReader api will be available to us. We will use the Javascript version, so I also need to make sure I include the rhoapi-modules.js file in my layout.erb (this should be there by default, but just double check)

 

<script src="/public/api/rhoapi-modules.js" type="text/javascript"></script>






 

Enabling the CardReader takes just one call to the Rho.CardReader.open method that requires a callback.

 

Rho.CardReader.open(function(d){
                  console.log(d.data);
                  });






 

The callback function will get a response that contains the card details. The callback params will depend on the type of card swiped. There will be a data attribute along with several track data. Below is a sample of that, of course blacking out some of my sensitive information:

 

Screen Shot 2013-12-02 at 10.04.01 AM.jpg

As a side note, you can see above that this output is being shown using a web inspector, but as you know the CardReader API actually needs to run on real hardware. To easily see this, I am using Weinre on my device so I can inspect Javascript objects with ease and test the API before putting it into my app.

 

Parsing the Card Data

When you look at the data you get from the callback, it looks like a very long string of gobbly gook. See http://en.wikipedia.org/wiki/Magnetic_stripe_card for information about the format of track data.  But for this demo I am all about not re-inventing the wheel, and a simple Google search on Javascript credit card track parsing revealed a easy to use library written by GitHub user jpartlow. From looking at the web console debug output and the demo code from this library, I can tell that it is expecting the data that is in the callback field: d.data :

 

Rho.CardReader.open(function(d){
                  console.log(d);
                  cc = new CreditCardTrackData(d.data);
                  $('#payment-form input[data-stripe="number"]').val(cc.number);
                  $('#payment-form input[data-stripe="exp-month"]').val(cc.expiration.substring(2));
                  $('#payment-form input[data-stripe="exp-year"]').val(cc.CENTURY + cc.expiration.substring(0,2));
                });






 

The CreditCardTrackData function of the credit_card_track_parser.js library returns an object with several attributes. I used this object to auto populate the fields on my form just using standard jQuery syntax.

Screen Shot 2013-12-02 at 10.23.22 AM.jpg

 

Sample

The simple application described can be found at: https://github.com/rhomobile/rho-samples/tree/master/RhoStripe

Robert Galvin

Down..Set...Hike!!!

Posted by Robert Galvin Nov 22, 2013

Screen Shot 2013-11-22 at 12.47.17 PM.jpg

So this week in the US, we have our traditional Thanksgiving holiday and besides stuffing myself eating Turkey and all the trimmings, I usually watch my favorite sport; Football. My two sons enjoy the sport as well and I have the privilege of coaching them in their flag football league. The team is made up of a bunch of 9-10 year olds and I usually have a few dads helping me out coaching various aspects. We end up coming with with several basic plays and then try to get the kids to run them. It get's pretty hectic during the game remembering who is playing what position and which plays we would like to call. Last year I ended putting together come powerpoint slides for plays and then printed out small pictures of the kids, along with some velcro, I had a pretty quick way to make sure I had a kid in each position. It worked out pretty well, but this season, I decided to go high-tech and write an app to help me manage the chaos on the field using my iPad. My kids laugh at me every time, because being I always say ' there should be an app for that'. Being in the 'app' business I always try to apply my work to my home life. My last attempt was putting together an app to help me manage my saltwater reef tank -  this time, this app would help me manage a `school` of little kids with a short attention span.

 

Canvas - The unsung hero.

My first challenge was to come up with a way to not only visualize formations and plays, but to be able to design and draw out new plays while we were on the practice field. We end up tweaking quite a bit after getting to know the skills of the kids. Of course I was going to build this using RhoMobile, but I needed a way to draw diagrams with various shapes, colors as well as save the drawing as a thumbnail so I can quickly see the play later on. What a perfect fit for using the HTML5 Canvas feature. Yeah, Canvas has been around for sometime and you probably have never have used it, unless you are putting together some games. I started off just looking at the raw HTML interface for Canvas and then came across this library that did all of the hard work for me: KineticJS.

 

Within no time, I was able to add the features that I wanted to:

  • different shapes for offense and defense positions
  • ability to drag shapes and objects to different areas on the virtual field
  • lines to show which direction to run
  • options to easily change shape, color, line types
  • overlaying pictures on the position so Johnny knew where to run

Screen Shot 2013-11-22 at 12.26.59 PM.jpg

 

Turning a picture into a model

So now that I had the basics of being able to draw a picture, I had to then be able to categorize them so I can easily find the ones I wanted to pull out in the middle of the game to give Johnny that magical moment of scoring his first touchdown. This time it was RhoMobile's turn to be the hero. I developed a 'Formation' model to hold all of this in Rhom:

 

  • name - would be the name of the play I would give - Trips Right was my favorite
  • type - offense, defense, special teams, practice - allowed me to store all of the 'pictures' in one object and acted as the key 'filter' for displaying the list later on
  • stage - this would be the JSON string that KineticJS would output that allowed me to instantly redraw the play so that I could then again drag and re-draw things around. Awesome feature.
  • img - a datauri string that held my thumbnail for the image
  • and other fields that allowed some other filters like if the play was pass, run or one of myfavorite plays

 

I used other models as well to define the players on the team, as well as some play sequences that I wanted to remember to run.

 

Screen Shot 2013-11-22 at 12.30.00 PM.jpg

 

Bootstrap - not just for websites

I turned to my favorite front-end framework, Bootstrap for handling all of my layout. The have some easy ways to display media lists and a nice pilled tab look that I wanted to be able to list all of my plays with thumbnails and be able to easily switch between showing only running or passing plays. FontAwesome is another favorite of my for all of the icons I used in the Navbar and throughout the UI.

 

Screen Shot 2013-11-22 at 12.27.53 PM.jpg

 

Keeping everyone on the same page

As I mentioned before, I had a few dads helping me and I wanted to be able to collaborate with them the plays not only I came up with but if they had some good ideas to share them as well. This time, I turned to RhoConnect for keeping all of our devices up to date. One dad had a Samsung 10" tablet running Android which worked out because I did not have to rewrite any of my code, it just worked. We were all able to tweak plays on each of our tablets and then sync everyone up so we were running the same plays.

 

Screen Shot 2013-11-22 at 12.31.13 PM.jpg

 

A winning moment

So even though we ended up not winning the Pee Wee Bowl, we still had a great time playing. I enjoyed putting the app together and since I never had a reason to use Canvas before, this gave me the opportunity to learn something new and keep it in my toolbox for the next killer 'personal world' app I'll work on.

 

Here is a video demo of the app in action:

angularjs.jpeg.jpg

I have been spending a lot of time lately looking at the variety of JS MVC frameworks and how to use them in my next RhoMobile application. You may have seen the last blog I did on some considerations for selecting the right framework for your app. From that you can clearly see that AngularJS has been gaining a lot of traction in the community. Well I came across this great video that made the lightbulb go off in my head as to why this may be the case. The video walks through the basics and builds concepts as he goes through the fundamentals you will need to get started. I really like how he blends code examples with presentation. Have a look, it is well worth it.

 

Once you get a taste and maybe play around with the framework, take a look at the guide we have on docs.rhomobile.com for using AngularJS with RhoMobile. Stay tuned, I will be updating my JS MVC CRUD demo to include Angular as well. Right now it just has Ember JS as I walked through in a recent presentation.

ft-sm.jpg

 

So you probably have seen a typical RhoMobile demo where after generating an app in RhoStudio, we generate a Product model and RhoStudio generates a set of views along with a controller to give you instant MVC out of the box. In this case, when using RhoStudio to generate this app and model scaffolding, it is using Ruby as the foundation for giving you a MVC based application. Very nice, clean separation of your data from your UI and a controller for application logic. Well if you are a pure JS developer, you may not want to even touch this Ruby code. What to do?

 

Have no fear, Javascript MVC frameworks to the rescue.

You may have seen a blog posts we recently did on Backbone.JS or even checked out the developer guides on docs.rhomobile.com for Angular.JS and Backbone.JS examples. Being a JS developer, you are probably well aware of the myriad of JS frameworks out there like Backbone, Angular, Knockout and Ember to name a few. A simple visit to ToDoMVC.com will give you a quick sampling of choices you have in selecting the right framework for you.

 

So how do I select the right one?

Well there are many factors to consider in selecting the right framework and really no 'one size fits all' solution. In a recent presentation I was preparing for, I went through some of this things you may want consider:

 

  • Community Adoption - good indicator of how established and how fast they are growing
  • Interest Level - lots of interest may indicator available content, sample code, etc
  • Maturity Level - do they have a good amount of reference apps, how long in 1.x+ stage may indicate how buggy or developed the framework is
  • Size - Size of the JS file may indicate how much the frameowkr provides and how much you may need to plug in. is it trully a framework or just a specilaized JS library.
  • Philosophy - Is this framework dictating the rules you need to follow or is it giving you freedom to plug in your own pieces to the puzzle

 

What features do these frameworks offer?

Now you would like to try using these JS MVC frameworks in your app, what are some of the typical features you will find?

 

  • Model Binding - this is the first feature you will notice when looking into these frameworks. A typical demo shows that the UI is bound to the model and when you change data in a input control it automatically updates the bound UI
  • View Templating - driving your UI from data models really needs to have a good programatic way for rendering the data, whether it is a list of simple labels. There are a few ways you can accomplish this using templating engines. Some of the frameworks dictate which one to use, others give you the choice.
  • Routing - Your Single Page App needs to have good routing capabilities to give the most responsive experience as well as give you simple and powerful ways to translate a URL scheme to a corresponding views and controllers.
  • Data Storage - These frameworks are typically focused about communicating with a backend system, normally through REST, where your data will reside. But how does it handle keeping the data persistant in disconnected environments and how easily can it tie into RhoMobile Rhom capablities.

What's Next?

Review the presentation of the above considerations and features of the frameworks/libraries. Try them outside of RhoMobile to get a feel for how easily (or not so easily) it will be to give you what you need. Your app will include a set of html, js, css files that you can place inside of your RhoMobile application (typically inside the public folder of your RhoMobile project). You would ignore all of the app and model generation in RhoStudio and point your app to the starting HTML file through a change in rhoconfig.txt setting.

 

Check out the simple Product CRUD app demonstrated in the presentation where we show both the Ruby MVC and MVC using Ember JS as well as utilizing a Ember Data Adapter for Rhom that can be used in other Ember JS RhoMobile apps. We will have a further deep dive on Ember JS coming up to walk through how this app came together.

 

Screen Shot 2013-11-08 at 10.43.11 AM.jpg

You may have started to look at our upcoming RhoMobile Suite 4.0 release now it beta form and see that we have a strong focus on Javascript as well as making our API set more consistent and less redundant when it comes to hardware level API's - whether you are writing consumer style apps or applications for the Enterprise. One area I have seen beta testers stumbling on is trying to get their JavaScript code running on a device. Usually they try and use the API's, like Barcode, on RhoSimulator or a OS Emulator and it just is not supported. Once this is realized, then then put their application on a device and start to try and sift through the Rholog.txt file. Well this log usually contains a whole bunch of other information from the System and Framework level and can get frustrating to look at if you just want to see your JavaScript specific messages and possible issues.

 

The problem usually falls into the following categories

Build Scenarios

1) rhoapi-modules.js not properly inserted into their HTML/ERB views

2) Not including the right combinations of build.yml settings. Did you know that the rhoapi-modules.js file is dynamically built based on your application settings and target operating system? For example, you may have expected the 'Sensor' API to be included in a default project setup, but you actually have to include 'Sensor' in your build.yml extensions list. If you did not include that, then the rhoapi-modules.js file will not include the Rho.Sensor object and you will get a lot of 'null references' JS errors.

 

Coding Issues

1) Improper use of the API - trying to access a method or callback parameter that does not exist

2) An actual bug in our code - yes it is beta ;-)

 

There is a much better to realize these issues as well as learn about the API's without having to write a lot of code - enter Weinre.

 

Weinre allows you to use the web developer tools that you are most comfortable with for 'typical' web pages...but remotely from your laptop to your device.

Capture.PNG

 

Benefits:

- Remote debugging of your application running on a real device

- Check to make sure you have properly included the Rho JS APIs

- Inspect objects that are returned from callbacks

- Try any API you wish to make sure you have the syntax and expected returns right before you start your coding efforts

 

Setup Overview:

- Install Weinre

- Create a basic project in RhoStudio

- Add one line linking to the Javascript library on the Weinre server in ytour HTML or Layout.erb

- Get your laptop and device on the same WiFi network

- Launch your app on the device and remotely debug/inspect it from your browser running in your laptop.

 

Watch the tutorial on how to use this tool in conjunction with RhoMobile 4.0

Filter Blog

By date:
By tag: