Customer Case Study- Part 3: Integrating BLE in Hybrid Mobile Apps

In Part 1 of this blog, we looked at building Hybrid Mobile Apps and the technologies one could use.  In part 2, we looked at the translation of the app so users can interface with the app in the language of their choice.  In this concluding part of the blog, we will look at peripheral integration in Hybrid Mobile Apps.

The app that we developed connects to a smart pillbox which is essentially a Bluetooth Low Energy (BLE) device. Ionic Native BLE plugin (https://ionicframework.com/docs/native/ble/) comes in handy.

A little background on the data organization in a BLE device:

Every BLE device advertises something called as services. Each service corresponds to a feature. Usually one of these services deals with device discovery, which holds device identifying information in one of its characteristics. Services and characteristics are UUIDs and they are specific to a class of BLE devices that your application supports. Typically, you get this information from your BLE device manufacturer. So, before you start integrating to a BLE device, you should have this information ready.

Some of the best practices for integrating a BLE device:

  1. Always scan for a specific service for connecting to a BLE device. Scanning for all services slows down the discovery process.
  2. Some BLE devices require you to connect with them before they give out device identifying information. In those cases, if you are connected to a wrong BLE device, you should disconnect and continue with the discovery process. Remember that BLE devices can only connect to one device (master) at a time, if you do not disconnect, then this BLE device will not be discoverable.
  3. A very important usability aspect is the information you provide to the user. You need to have the Bluetooth turned on in the device before you initiate any BLE discovery process. As a developer, you need to identify the start of Bluetooth in the device and provide options for the user to turn on Bluetooth. On mobile devices, turning on Bluetooth can only be user initiated, so you can put up messages, possibly navigate to the settings screen where the user can turn on Bluetooth.
  4. Always display the state of the Bluetooth discovery process to the user. The user needs to know if you are searching for devices, whether you discovered any devices or if you are connected to the target device, the battery state of the connected device etc.
  5. It is always a good practice to create a common service/module to deal with Bluetooth connection. Encapsulate all the methods and data in this module so that it can be imported into other apps if required.

If you have any query regarding Hybrid Mobile Apps, please write to us at developers@unvired.com and we shall answer your queries at earliest.

Read More

Customer Case Study- Part 2: Translating a Hybrid Mobile App

In Part 1 of this blog, we looked at building Hybrid Mobile Apps and the technologies one could use.  In this part, we will look at the translation of the app so users can interface with the app in the language of their choice.

To start, you need to add translation support to your app in order to render your app in multiple languages. Here’s how we did it @ Unvired for Hybrid Mobile app.

1. Identify and enable strings for translation:

All user-facing strings need to be translated. However, some strings could be embedded in HTML, while others are in Typescript code. We need to enable strings in both these places for translation. Angular JS provides an internationalization library (i18n) (https://github.com/ngx-translate/core) specifically for this purpose. For enabling translation,

we used a translate pipe in HTML:

<div>{{ “Messages” | translate }}</div>

we used a method call for strings in code:

this.translate.instant(“Messages”)

In both these cases, we are translating the string “Messages”.  The way it works, this library looks up for translation for the key “Messages” in a special strings file (which we will be constructing next), and once located, replaces the “Messages” string with the translated value.

2. Construct Strings file:

Strings file in an ionic app is a JSON file containing key-value pairs. The value containing the translation for the key. We need to add a strings file for every language the app supports. Each of these files should have the translation for all strings which require translation.

We automated the process of extracting all translatable strings onto a strings file with the help of an npm tool called angular-translate-extract (https://www.npmjs.com/package/angular-translate-extract) which can be configured as a grunt task. However, this project was published two years ago and not in active development and was only able to extract strings from HTML and JavaScript code, which we didn’t have in our project. Luckily, this project supported adding of a custom parser which accepts a pattern (Regular expression) for extracting strings. We used this excellent website https://regex101.com and constructed a regex pattern to match the translatable strings in the code. Depending on the number of languages to support, you will need to configure the grunt tasks to generate required output files.  For e.g. en.json (English), es.json (Spanish) etc.

We ran the grunt task and we were able to extract all the strings in the app to the required files.   These json files can then be handed off to the translators to provide the translated strings.  Note that the files need to be saved as UTF8 encoding to ensure the strings are saved correctly.

In the last step, we added a way for the user to select his preferred language.

3. Select preferred language in the app:

We created a new page in the app to select the preferred language and made it as the very first screen of the app. Only after the user selects a language, she can continue with using the app. Once a user selects the language, we made that language as the default language for the app so that all strings get displayed in that language. We also stored this selected language code locally, so that next time the user starts the app she does not have to choose the language again. The app also allows the user to switch languages after login if they desire.

Note that some apps take the approach of using locale to figure out the language to use.  For e.g. German in Germany or French in Paris could be obvious choices once can make in these countries. While this is a very valid approach we feel that it’s better to use this mechanism to default a choice for the user but still permit them to choose their language of choice (for e.g. Spanish in the US) rather than the tie to local.

3. How do we know all strings are covered?

Instead of manually updating strings in json files and verifying, one can generate something called as pseudo-localized strings file. There are various online tools available which can generate this file for you. These tools make the value visually distinguishable from the original by replacing the original characters with accented characters. We replaced our Spanish son file with pseudo-localized strings file and executed the project.

We tested and enabled few other strings for translation. Ran the grunt tool to extract these strings. Re-generated pseudo-localized strings. We did this cycle many times until we were sure that all strings are covered for translation.

4. Translating Dates:

While translating messages can be done by language experts and complete coverage can be achieved, the dates (Month and Day names) were in fact not translated and had to be handled programmatically. We had used Moment.js library for formatting dates and this library supports internationalizing by means of calling a very simple function:

moment.locale(‘es’)

After this point, all day and month names were translated into Spanish.

5. The last mile, let the server know what language to speak:

Few messages that were displayed in the app were sent from the server (this could also be true for errors).  Since all the messages from the server to the user have to be in the user’s preferred language, so we created a new API in the server to accept and store user’s preferred language. We added Internationalization support for all the user-facing strings sent by the server and got it display in the user’s preferred language in the device.  This can be achieved with standard web app internationalization (similar to some of the details above).

Read Part 3 of this blog about Integrating BLE in Hybrid Mobile Apps.

Read More

Customer Case Study- Part 1: Migrating from Native to a Hybrid Mobile App

At Unvired, we were tasked with rebuilding an iOS native app onto an HTML5 Hybrid for a healthcare services company.  The main objective was to target the ever increasing Android market and doing it with a common code base for Android & iOS. This will be a three-part blog dealing with the technologies we use, how we achieve peripheral integration and how we internationalize our apps for all markets. I want to share my thoughts in developing this application and explain why we think building a hybrid mobile app is probably more suited now than ever before.

The advantages of building a Hybrid app over platform-specific native apps are many. On the face it, you get to maintain a single code base across platforms. Writing the code just once and getting it run on multiple platforms is not just cool but also saves a lot of time and money. Effectively, this means you get to market your app faster on multiple devices and don’t need to choose one set of users (or market) over the other.

The various technologies we used for app development:

  • Ionic Framework (ionicframework.com):

Ionic has a rich set of mobile-optimized UI components which when run on a mobile device, offers native look and feel. It also integrates with the Cordova Framework (https://cordova.apache.org) for accessing native capabilities. This basically means you can support any native feature like Camera, custom Hardware integration, Push Notifications etc., from your Hybrid mobile app.

  • Angular JS with Typescript:

Angular JS is an HTML5 technology which lets you manipulate an HTML on the fly.  The latest version of Angular JS (Angular JS 4) uses Typescript (https://www.typescriptlang.org) for app development. Typescript converts to JavaScript under the hood but offers big benefits like object-oriented design, type-checking, ahead of time compilation, all of these which are not available for JavaScript developers.

  • Visual Studio Code IDE:

This is an IDE from Microsoft and offers many developer-friendly features like code refactoring, navigation using hyperlinks, type-checking, built-in source control etc. This IDE checks for syntax errors in the code and the developer can fix the code without having to compile the code in order to spot errors. Source control integration with Git makes it even more compelling.

Under the hood:

Ionic helps realize “near” native look & feel in hybrid. The UI elements in Ionic are so well designed, it’s many times visually hard to distinguish a native app from an Ionic app. This means your users won’t have to adjust to a new UI paradigm when they upgrade to a hybrid version of your app.

On the performance side, Ionic has improved dramatically over last few years. For example, it uses WKWebView when the app is run on an iOS device. WKWebView is a high-performance webpage rendering engine from Apple. Ionic uses the best technology in each of the platforms for delivering the content. Because of all these reasons, the app experience in Ionic is such a breeze.

The app that interfaces with a smart pillbox to help patients take the right medication. Communication with the Bluetooth enabled Pillbox is mission-critical for this app. This calls for tight hardware integration with the native layer and Ionic aces in this aspect.

Ionic has a vast set of native integrations which are called plugins for use by the developers. These plugins tap into the native capability in each of the supported platforms and offer a common interface for interaction through Typescript. Our target platforms of this app were iOS and Android and we used a Bluetooth Low Energy plugin (https://ionicframework.com/docs/native/ble/) for integrating with the smart pillbox. One can find a list of all the native plugins available in the Ionic Website. If you don’t find an appropriate plugin for your requirements, you can develop one quite easily by using the Cordova Framework (https://cordova.apache.org).

Overall, adopting HTML hybrid app has been a rewarding experience so far and it offers great benefits like ease of development, quick time to market the app, great performance and robust integration with native platform. Given all these benefits, it’s probably the right time to make the switch to the hybrid route for developing multi-platform mobile apps.

Note: You are probably aware that React Native has a lot of traction over hybrid in developing mobile apps, React Native though takes a different approach to mobile development.  React is “Learn once, write anywhere” whereas Hybrid is “Build once, run anywhere”.

Read more on React in our blog Part- 2.

Read More

Unvired for Health Care Applications

Mobile access to patient data or Protected Health Information (PHI) is of paramount importance.  While the backend is already digitized using EMR (Electronic Medical Record) systems, the last mile is mostly manual using pen and paper or other offline means of data management.  Modern health care requires that the care team has immediate access to the patient information.
 
PHI is part of the HIPAA Privacy rule and protects most “individually identifiable health information” held or transmitted by a covered entity or its business associate, in any form or medium, whether electronic, on paper, or oral.  This requires that mobile and web applications enabling this access are ultra secure and handle the information accordingly.
 
Unvired recently implemented a Patient Information System on mobile with a backend database to store the PHI data securely.  The key aspects were:
 
 
Mobile Application
 
1.  Data at rest is encrypted on the iOS devices.  Additional data protection is enabled with security mechanisms such as password/PIN to prevent unauthorized access.
2.  Data in transit is transmitted via secure HTTPS/SSL.
3.  Data stored in the backend database is encrypted at rest.  Connections to the database are protected via encrypted SSL connections.
4.  The web application allows online access and all data is invalidated/cleared on session termination.
 
The Landscape
 
The Unvired Mobile Platform (UMP) enabled this offline/online access to the patient information from both Mobile devices and web browser.  While UMP satisfies the security and encryption requirements of HIPAA, Unvired partnered with Aptible (http://aptible.com) to additionally enable a secure environment in the AWS cloud.  Aptible provides a platform on AWS to securely deploy applications and satisfy the regulatory requirements.  UMP was deployed in Docker containers on the Aptible landscape to enable this secure access.  All the docker containers are isolated in an Amazon VPC with restricted access.  Additional logs and audit trails in Aptible ensure that every access to the landscape is recorded.  All data transmitted and received via the platform is logged and audited by the UMP.  Once data is safely delivered to the device, the data is cleared on the UMP and no PHI information is cached.
 
The combination of the secure UMP platform with the Aptible landscape provides a secure and cost-effective platform for customers to deploy mobile and web applications to handle PHI in a secure and compliant manner.  Over the next few weeks there will be a series of follow up blogs delving into more detail on each of the above aspects, do join us for the journey.
 
Contact us to know more about how Unvired can enable a robust health care solution for your institution.
Read More

Developing Apps for Google Glass

A lot of our customers and developers were excited with our primer on Google Glass. Many of our customers wanted to understand the development paradigm for Google Glass. So we created our second eBook on Google Glass to share our knowledge with customers and developers. Click here to download the eBook. Enjoy your Glassware!

Read More