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

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

Blog Developer's Viewpoint Lessons Learnt Technology

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 ( 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 Blue-tooth. 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 and we shall answer your queries at earliest.

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

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

Blog Developer's Viewpoint Lessons Learnt Technology

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) ( 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:


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 ( 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 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:


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.

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

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

Blog Developer's Viewpoint Lessons Learnt Technology

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 (

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 ( 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 ( 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 ( 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 (

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.

Unvired for Health Care Applications

Blog Lessons Learnt Mobile Use Case Technology
healthcareMobile 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 unauthorised 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 ( 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 dockcer 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.

Mobilizing the Enterprise–Lessons Learned

Blog Lessons Learnt Viewpoint

In an increasingly mobile world and an age of instant gratification, the enterprise user is demanding the same access to information as the consumer. This is not surprising as in many cases, they are one and the same. At my company, Unvired, we have been implementing mobile solutions for several years now, and I would like to share our insights so that others can benefit. Here goes:

1. The Overwhelmed Enterprise: Unlike consumer mobility, enterprise mobility is yet to really take off. Customers are still defining their mobile strategy. In an age of tight budgets, Mobility projects have to pass the ROI test. Customers are faced with many challenges: worry about mobile security, mobile device management, choice of mobile application development platforms, testing, and support. Software vendors are consolidating, and many seemingly separate components of Enterprise Mobility Management are converging–like device management and applicationdevelopment platforms.

2. Cloud or Not to Cloud: We have found several customers still worried about data security in the cloud. When presented with both an on-premise and a cloud deployment option to build mobile applications, some customers prefer on-premise, even though it is more costly to implement.

3. HTML5 vs. Native: There is a perception that HTML5 will enable “Build Once Run Everywhere” saving development effort and costs for multiple platforms like iOS, Android, Blackberry, and Windows. From our experience, we believe that there is a place for both HTML5 and native apps. For sophisticated complex apps where performance is a premium, native apps may still be the best option.

In my next blog, I will discuss some Business Use Cases for Mobile Applications covering the Consumer Products, Utilities, and Oil & Gas industries.



5 things to consider for a Mobile Direct Store Delivery Implementation

Blog Lessons Learnt Mobile Use Case Viewpoint

Direct Store Delivery

Direct Store Delivery (DSD) is method of selling or distributing products for variety of industries like Food, Beverage, Personal Care, etc. SAP offers a full-fledged module on DSD part of SAP ECC/ERP. DSD has tight integration to SAP SD, MM, FI & Logistics. This makes it one of the preferred solutions across the world which meets most of the requirements of customers’ out-of-the-box. SAP also offers a mobility offering as an optional module for customers who like to avoid the manual paper based approach. There are a few considerations when implementing Mobile DSD in an enterprise.

1. Is the current business process good enough to implement SAP DSD
SAP DSD has some key considerations to get the best results in implementations. These are things like usage of Bill of Material (BOM), Empties management, Single Sales Area for each route. Without these you may be required to limit yourself to some features SAP DSD provides out-of-the-box or have to do custom development to achieve those.

2. Mobile DSD or Paper based DSD
Over the last 6-8 years, there is a lot of demand for mobilizing the DSD process in enterprises. Mobilization completely takes away the manual effort of entering vital order/delivery, cash collection, stock & money checkout, check-in. Customers can be issued with real-time legal invoices with electronic signature capture, PODs, cash receipts etc. at the customer site itself. Mobilization leads to on-the-fly determination of promotions, seasonal discounts which are powerful features of an ERP like SAP ECC. In a summary – faster sales & logistics execution and eliminate pilferage completely.

3. Which scenarios are meant to be driven via Mobile DSD
SAP DSD supports Delivery Driver, Van Sales, Pre-Sales & Mixed scenarios. In an ideal situation keeping a single Mobile DSD solution for all these scenarios give the best benefits and hence ROI. Many times there is an overlap in-term of functions the workforce can perform. Integrating customer, product surveys and checklists has huge advantages to captures vital information at field via same sales workforce. Integration of some field service functions is also a key.

4. A right technology platform to Mobilize DSD
While mobilization is a key in reaping the benefits of a DSD, it’s very important to choose the right platform to enable mobilization. The key parameters are: scalability, multiple device type with native support, offline capability, high volume data handling in the mobile devices, roles/group management, a platform for instant alerting and notifications, geo capabilities, central device administration & remote trouble shooting, seamless online-offline capability of device software.

5. A right device to mobilize DSD
This is a very important decision in an implementation. Typically the thumb-rule is to leverage existing device hardware to run MDSD on it because there is a big cost factor associated to the hardware. Especially in a MDSD world a ruggedized form of device is considered, which mush more expensive than a non-ruggedized device is. In an enterprise where devices have to be acquired, you will end up with a few choices today. For a delivery driver usage scenario, a ruggedized device needs to be considered. Here the choice is either an enterprise ready Windows Mobile based device or an Android device. Even though Windows Mobile is considered to be outdated, it still has an edge over android in-terms of enterprise readiness and easy available peripheral integrations like barcode scanning and printing. Android on the other hand could be giving the better results in terms of application software usability experience. Even custom ruggedized android tablet hardware is an interesting option. For non-delivery driver scenarios, there is plethora of choices today; from iPhone to Windows Phone and tablets. Here the cost of the device would be a primary criteria and a Blackberry device could a good choice as many enterprises have plenty of blackberries rolled out to these workforces and hence it’s all about reusing the existing hardware.

Note: This blog also appeared as a guest blog on Enterprise Mobile Strategies.

Mobile DSD – A requirement

Blog Lessons Learnt Mobile Use Case Viewpoint

In a world of fast changing tastes and instant gratification, my can of favorite beverage had better be on the shelf. If not, the retailer and supplier will have lost a loyal customer. Direct Store Delivery (DSD) is a vital process that brings foods and beverages to the shelf. Mobilizing the DSD process makes the supply chain much more efficient, and ensures that the shopping experience is a pleasant one. In the world of enterprise mobility, mobile DSD is not a luxury—it is a must have.

While SAP and other companies have solutions for DSD, the Mobile DSD (MDSD) area remains ripe for innovation. During our implementations of DSD and MDSD Solutions, customers have shared with us valuable feedback. The usability of MDSD solutions can be improved to enhance sales and productivity of the delivery drivers. The User Interface can be simplified for data entry and screen navigation. In many cases, there is a need to re-engineer the process flow to meet our clients’ needs.

One area to improve is in Sales Order creation. Immediate Sales Order replication to SAP can trigger the follow up leading to faster order fulfillment. Another area to improve is Customer Surveys. During the store visit, the supplier personnel collect customer data via surveys. This survey data can be integrated with CRM systems like SAP CRM, which can be fed into BW and analytics can be utilized to make better decisions.

Another insight from our customers is that it would be good to integrate the MDSD application with Asset Maintenance/Plant Maintenance systems to create and access Notifications. Many times, the drivers are doing multiple things —taking orders, merchandising as well as conducting maintenance and repairs on a variety of assets the supplier has deployed at the retailers – think refrigerators as an example.

Some customers have unique requirements for mobilizing DSD, and only a custom MDSD solution will work. In these cases, we utilize our domain expertise and deliver a custom MDSD solution. We also give our customers the option of either an on-premise or in the cloud solution.

Mobile DSD in conjunction with DSD has benefits for both the CP (consumer products) manufacturer and the retailer. The supplier can better monitor demand on the shelf, be more responsive, and better control merchandising and promotions. New products can be introduced better and innovations increase. The retailer in turn benefits from lower capital outlays and always having fast moving items in stock.

So the next time you grab that beverage, thank the process that enables you to quench your thirst – Mobile DSD.

Note: This blog also appeared as a guest blog on Enterprise Mobile Strategies.