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 Workflow for SAP on Apple Watch

Unvired Workflow for SAP on Apple Watch

Application Blog Technology

Want to announce something exciting, the Unvired WorkFlow application for SAP is now also available with Apple Watch integration.  The new iOS 8 Interactive Notifications are also leveraged for this ( What this means is, for a typical decision maker app like Unvired WF, you can take decisions without having to open the app. In the Unvired Workflow application the users can take decisions on workflow documents like Travel Approval, Purchase Order Approval etc. directly from the notification.

Further, if you are wearing an Apple Watch, then things become super easy. You can take these decisions directly from your Apple Watch as well.

Plus, you get a confirmation of your action from the backend system such as SAP right on your Apple Watch or iPhone, so you can be absolutely sure that the workflow was in-fact successfully executed.

Let’s cut to the chase and see how this works:

Whenever a new Workflow Document is created in the backend SAP system, your iPhone or iPad is notified by a push notification which typically looks like this.

iPad Notification

iPad Notification

If you have holstered you phone and wearing an Apple Watch, the notification directly gets delivered and shows up like this.

Apple Watch

Now, you can do one of two things.
1. Tap on one of the decision buttons and thats it. The decision is made and sent to backend server for processing. Real simple.
2. Want to have a closer, more detailed look at the workflow, just tap on the notification. The app starts automatically on your iPhone or iPad with the corresponding workflow document and you can take decision after reviewing the document.
Key take away is the speed of decision making which is very critical for any successful enterprise.

3 Things to Consider now that iOS 8 is here

3 Things to Consider now that iOS 8 is here

Blog Technology

iOS 8 has arrived, and business users and consumers alike are wondering whether to upgrade to iOS 8 or not. So, here are answers to three questions that could be lingering in your mind:

1. Should I upgrade now or later?

The answer to this question largely depends on the apps in question. Ideally speaking, Apple developed apps should have zero issues when you upgrade to a newer iOS version. You can upgrade to iOS 8 in this case.

On the other hand, if you are using third-part apps (not built by Apple), then it might not be a good idea to upgrade immediately. Although Apple guarantees all existing apps built for iOS 7 to continue to work in iOS 8, the behavior of the app after the upgrade might vary depending on the design of the app. Even though the app may still work, you might expect some weird UI behavior like delayed animation transitions and input fields getting hidden on their own. So in order to be safe, you may want to wait until the developer releases an iOS 8 update for the app.

2. Will my existing apps on iOS 7 or below work?

Apple guarantees that the existing apps built by Apple will continue to run in their newer OS releases. Third-party built apps will work on iOS 8 from a functionality perspective, but with respect to the UI behavior, the same cannot always be true. We tried running our existing apps which were built for iOS 7 on iOS 8, and were faced with some awkward UI behaviors like delays in transition. Most of the other third party apps out there in the market should have similar issues. So the bottom line is that you cannot be sure that all your apps will work 100% when you upgrade.

3.What are the most important new features in iOS 8 from a business perspective?

iOS 8 has a host of features for both business and consumers. Notably on the business side, these are the features to look out for:

Apple Pay:

Apple Pay is a new mobile payment service created by Apple that intends to replace existing Credit Card/Debit Card transactions at merchant outlets with just a swipe of your phone. Although only iPhone 6 users get the direct benefit of using Apple Pay, iPhone 5 users can do this with a new gadget which was released along with iOS 8 (Apple Watch). This is a really crucial feature especially for businesses which always looks to cut down costs. More about Apple Pay here: Access to TouchID for third party apps is also an interesting development

Interactive Notifications:

Till today, Notifications were completely controlled by Apple and it was basically read-only. Notifications in the Notification Center worked closely with the app and you had to open up the app in order to get notifications. But now with iOS 8, app developers can gain limited control of the Notification Centre and can create interesting use-cases like approving a purchase order without having to open up the app. This can potentially save lot of time for the app user.


Thanks to the new iOS 8, app users can start over precisely where they left off in all compatible Apple devices like iPhone, iPad or Mac. This makes writing emails, creating presentations across devices hassle-free and makes sharing of the content across devices easy like never before. Additionally recently used apps and contacts appear on top in the multitasking view for quick access