Cross-Platform Development of Smartphone Application with Rhomobile

Masaryk University Faculty of Informatics

Cross-platform development of smartphone application with RhoMobile

Master’s Thesis

Bc. Adam Melkus

Brno, Spring 2016

Masaryk University Faculty of Informatics

Cross-platform development of smartphone application with RhoMobile

Master’s Thesis

Bc. Adam Melkus

Brno, Spring 2016

Declaration

Hereby I declare that this paper is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source.

Bc. Adam Melkus

Advisor: Ing. Mgr. et Mgr. Zdeněk Říha, Ph.D.

Acknowledgement

I would like to thank my supervisor Ing. Mgr. et Mgr. Zdeněk Říha, Ph.D. for enabling me to write this thesis and being patient with my erratic progress. I would also like to express gratitude to my technical consultant with Y Soft Mgr. Juraj Michálek and Mgr. Jaroslav Klech for the frequent insightful consultations, valuable advice and guidance. And finally thank you to my loving family and girlfriend.

iii Abstract

The aim of this thesis is to develop a showcase application to demonstrate the possibilities RhoMobile cross-platform development framework offers. Other goals include evaluation of the support, quality of documentation, community, and overall viability for commercial use.

iv Keywords

smart phone, Android, iOS, Windows Phone 8, RhoMobile, cross- platform

Contents

1 Introduction 1

2 Cross-platform Development of Mobile Applications 3 2.1 Motivation and Caveats ...... 3 2.2 Approaches ...... 4 2.3 Overview of Frameworks ...... 5 2.3.1 Hybrid Application Frameworks ...... 5 2.3.2 Native Application Frameworks ...... 6

3 RhoMobile Suite 7 3.1 Introduction ...... 7 3.2 History ...... 7 3.3 Components ...... 8 3.4 Pricing ...... 9 3.5 Framework Architecture ...... 10 3.5.1 Requirements for Development ...... 10 3.5.2 Device Requirements ...... 11 3.6 Setup ...... 11 3.6.1 Windows ...... 12 3.6.2 OS X ...... 12 3.6.3 Target Platform Specific Configuration . . . . 12 3.7 Support ...... 14 3.8 Security ...... 15 3.9 Rhodes development activity ...... 16 3.9.1 Future of development ...... 18 3.9.2 Tool for Gathering Data from GitHub ...... 18 3.10 Documentation ...... 19

4 Rhodes Application 23 4.1 Application Basics ...... 23 4.1.1 Languages and Technologies ...... 23 4.1.2 Creating an Application ...... 24 4.1.3 Configuration ...... 24 4.1.4 Running an Application ...... 25 4.1.5 Application Architecture ...... 27 4.2 Rhodes functionality ...... 29

vii 4.2.1 NFC ...... 30 4.2.2 Camera ...... 31 4.2.3 Barcode Scanner ...... 32 4.2.4 Geolocation and Mapping ...... 33 4.2.5 Device Data Storage ...... 35 4.2.6 Notifications ...... 38 4.2.7 Inter-application Communication ...... 39 4.2.8 Native Extensions ...... 40

5 YSoft SafeQ Application 43 5.1 Design ...... 43 5.2 Embedded Terminal API ...... 44 5.2.1 Authenticate ...... 45 5.2.2 Logged User Info ...... 45 5.2.3 List All Jobs in Folder ...... 46 5.3 Start Screen ...... 47 5.4 Sign In Screen ...... 48 5.5 Job List ...... 49 5.6 Job Detail Screen ...... 50 5.7 Screens in RTL Mode ...... 50

6 Conclusion 53

Bibliography 55

Index 57

A Charts of monthly commits 57

viii List of Tables

3.1 Pricing table 9 3.2 Supported platforms 11 3.3 Time periods and current owners of the RhoMobile suite 16 3.4 Top 10 Rhodes contributors 19

List of Figures

3.1 Latest working build tools 13 3.2 Example of rhobuild.yml 14 3.3 Commits per month to the master branch 17 4.1 Sign in screen on Windows Phone 8 24 4.2 Structure of the application skeleton 25 4.3 Web view with the application 27 4.4 MVC diagram 28 4.5 Basic controller 29 4.6 Basic action 29 4.7 Basic layout 29 4.8 Push message flow chart 39 4.9 Structure of a native extension 42 5.1 Start screens 46 5.2 QR reader screen 47 5.3 Additional screens 49 5.4 Screens in right to left mode 51 A.1 Commits per month, RhoMobile, Inc. 57 A.2 Commits per month after acquisition by Motorola Solutions 57 A.3 Commits per month after acquisition by Zebra Technologies 58

1 Introduction

Mobile devices are more common and accessible then ever. People tend to use them daily and for many different tasks besides just mes- saging and calling. The modern mobile phone became a powerhouse of functionality and as a result people want to use their phones for everything. Be it paying for things like they would with their credit card or controlling their home. These trends made tools for developing applications on many different platforms more popular. It is important for developers to reach large number of user as efficiently as possible and these tools make it possible. Goal of this thesis is to showcase an application that serves as an accessory for printing while using the aforementioned tools. And in doing so, evaluate one of these cross-platform frameworks named RhoMobile. The application was developed in cooperation with Y Soft Corpo- ration. The company was founded in the year 2000 as part of a student project at Masaryk University. In the beginning it was focused on providing printer user authentication and was the first company in the world to provide precise charging system for printing and copying. Throughout the years the company kept improving their core products and introducing new ones such as Print Roaming and Mobile Printing. It has grown to be an international corporation with offices all over the world. In 2014 Y Soft bought majority stake in 3D printing company called be3D, which makes 3D printers, it also set up an in- vestment company Y Soft Ventures focused on assisting and investing into interesting startup companies. Y Soft also heavily cooperates with universities providing topics for bachelor and master theses such as this one, and also offering part time jobs and internships to students.[1] The next chapter focuses on an introduction of cross-platform development concepts and classifications followed by some alternatives to the RhoMobile. Third chapter describes what the suite contains, what are paid only parts, and what is freely available. It explains the history of the company that created the framework. Covers the subject of support and then it goes on to analyze the history of development and its developers. The fourth chapter explains how RhoMobile applications are created, their architecture and design. Then it goes into to

1 1. Introduction detail about selected functions and illustrates their usage with code samples. The fifth and last section focuses on the application prototype, documents the APIs1 it uses for communication with server. I also describes each screen of the application user interface and what part of the framework is used to create it.

1. API - Application Programming Interface

2 2 Cross-platform Development of Mobile Ap- plications

Cross-platform development is a popular method of developing software, because creating a piece of software that can be deployed/run on multiple different platforms without major modifications is anat- tractive concept. Using this technique even small developer teams or individuals have the opportunity to reach large number of users. The most notable and popular example is Java and Java Virtual Ma- chine, using these tools developers can write and execute code on almost all operating system and platforms. The rise of modern user-friendly mobile operating systems starting in the year 2007, and the subsequent releases of iPhone OS 2.0 and Android 1.0 in the year 2008, caused the inception of new cross- platform development frameworks focused on these mobile platforms. The operating systems released in 2008 allowed running third party applications.

2.1 Motivation and Caveats

The main motivator behind cross-platform development is cost re- duction. Put into a very simplified example: Application needs to support 2 platforms (Android, iOS), this means either two developers are needed each developing for one platform, or one developer who can develop for both Android and iOS. But in both of these cases the cost would be the same, paying 2 developers or one developer for double the time. When utilizing some cross-platform framework ideally one developer would be able to create the application for all of platforms simultaneously, thus reducing the cost by reducing the required number of developers and development time. Testing times are however not greatly affected, to deliver good user experience the application has to be tested on all platforms and as many various devices as possible. Cross-platform frameworks inherently reduce the number of possible errors in the written code because only one code- base needs to be maintained. Code maintainability is another possible advantage of these frameworks. This can also be helpful when a new

3 2. Cross-platform Development of Mobile Applications member joins the developer team, as it means less code to go through and understand. While there are seemingly a lot of great benefits to using such frameworks, there are also some potential complications and things to look out for. It is important to do a thorough research to find the right tools for the particular job. Using a 3rd party software introduces a middle man between the developer and producer of the target platform. That means not all new features can be accessible through the 3rd party framework right after releasing a new version of the OS. Or the application might not even run due to some incompatibilities. Major updates to the operating systems are usually released ahead of consumer release as developer previews, so the companies making cross-platform frameworks have plenty of time to get their product ready. Researching the support level that comes with the framework and the community around it is also crucial. Bugs can and do appear within the frameworks therefore the speed of resolving issues plays a big role in choice process as well.

2.2 Approaches

There are couple of possible approaches to developing cross-platform mobile applications.

∙ Web Application - This is the simplest and most restricted form of application. It a web page optimized for good viewing experience on small screens. It can be accessed using directly the web browser on the device or it can be distributed via the respective application markets as a simple web view directed to the web application. This approach however doesn’t enable access to the various hardware and software functions of a device.

∙ Hybrid Application - More capable then the previous type, hybrid application are still web applications at core, but have more access to the device and its functions. They can usually utilize all of the device’s capabilities (depends of the used framework) while using web technologies to present the user interface. Rho- Mobile suite belongs to this classification.

4 2. Cross-platform Development of Mobile Applications

∙ Native Application - This is often considered to be a platform specific application made using the1 SDK only for that platform. But in context of cross-platform development native application still has one code-base, but instead of using HTML for the user interface it uses some other format (XML) that is then compiled to native UI.

None of these ways is objectively the best one, it always depends on the needs and resources of the developer.

2.3 Overview of Frameworks

This section covers some examples of frameworks with focus on hybrid and native applications.

2.3.1 Hybrid Application Frameworks Apache Cordova/PhoneGap Formerly know as PhoneGap it was introduced in the year 2009. In 2011 it was bought by Adobe which donated the code base to Apache Software Foundation. It eventually was renamed to Apache Cordova. Both products remain active and PhoneGap still uses the open-source Cordova as its core, but is essentially product of Adobe, with added functionality and tools. [2] The framework is used to develop HTML applications with access to native device APIs. It supports large number of platforms including Android, iOS, Windows Phone 8, Windows, and Ubuntu. Applications are written purely in HTML, JavaScript, and CSS. Due to a fairly large and active community there are a lot of plugins extending the core functionality, right now there are about 1200 additional plugins. Cordova is focused more on providing the infrastructure for building applications rather then on user interface. For this reason many additional tools came to existence, utilizing Cordova as its core for accessing native functions while focusing on the user experience. To name few Ionic, Framework7, Kendo UI.

1. SDK - System Development Kit

5 2. Cross-platform Development of Mobile Applications

SAP Mobile Platform While Cordova is meant for more general purpose applications, SAP Mobile Platform is oriented towards enterprise environment. Created by SAP a company developing business management and intelligence software. Their mobile application development suite was designed as an extension to their already exiting services. Applications created using this framework can be deployed via the SAP management console. It allows for developing hybrid application and native application. Using this platform is recommended mainly for developing applications for existing SAP environments. In May 2016 Apple announced a partnership with SAP to bring more enterprise oriented applications to the iOS platforms [3].

2.3.2 Native Application Frameworks Xamarin Development of Xamarin began around 2011 and after some initial doubts about its inception[4] it managed to raise total of $82 million dollars by August 2014 [5]. Using C#, developers are able to create native applications across most of the platforms. At first there was no way do develop the application to have the same UI everywhere, but with introduction of Xamarin Forms in 2013 developers now have the options to use cross-platform user interface widgets. In 2016 Xamarin was acquired by Microsoft and made available for free.

NativeScript Relatively new framework first announced in June 2014 created by company with long history of cross platform development and development in general Telerik. It brings features similar to Xamarin, but developers can use JavaScript instead of C# as their main programming language. User interface is declared using XML files and styled by CSS. All of this code is then compiled to native so everything user sees is running native in their device and not in a web view.

6 3 RhoMobile Suite

3.1 Introduction

RhoMobile suite is a collection of tools for cross-platform development of mobile applications based on web technologies.[6] Allowing developers with knowledge of technologies such as HTML, CSS, JavaScript and Ruby to create applications for the most popular mobile platforms. These platforms include iOS, Android, Windows Phone 8, Windows CE and Windows 8 although not all of them are supported equally. The core of the whole suite is called Rhodes which is an open source project. It is capable of scaffolding an application and is responsible for building and packaging the sources for each of the supported platforms. Other parts include RhoElements a collection of APIs, Rho- Hub for managing Rhodes application and RhoConnect for creating back-end services.

3.2 History

The company that created RhoMobile suite was founded by Adam Blum in the year 2008. Development of the Rhodes framework started in October 2008. In 2009 the RhoHub component was first launched as a part of RhoMobile suite. After winning numerous awards, it was acquired by Motorola Solutions in 2011. In October 2014 acquisition of Motorola Solutions by Zebra Technologies was finalized. They have since then taken over development and continued to ship updates to the suite regularly. Since it was taken over by Zebra Technologies the licensing model changed from perpetual licenses to subscription plans with 3 tiers. As of second quarter of 2016 Zebra Technologies decided to open source the project. The company is claiming it will keep providing support to current customers and users of the current version of the suite (5.4 at the time of writing). But not all of the suite will be open sourced, the hosted services will still be accessible only through the subscription plans. A representative states that there will be no new versions provided by Zebra Technologies [7], instead users that want new functionality and support of new mobile platforms should use

7 3. RhoMobile Suite the open source version of the product and contact Zebra partners, namely Tau Technologies Inc.1 and Kutir Technologies2. The former will become new maintainer of the Rhodes framework and the latter will be providing application development and training [8]. More about the future of RhoMobile can be found in section 3.9

3.3 Components

RhoMobile suite consists of multiple components. Their availability in the subscription levels can be seen in table 3.1. RhoElements and RhoConnect are being open-sourced as a part of the RhoMobile’s move to open-source.

RhoElements RhoElements is a set of ready to use APIs. It contains useful tools for instance bar code reader and NFC.

RhoConnect RhoConnect acts as a bridge between already existing back-end services and Rhodes applications. It should reduce time spent testing and debugging the communication between the application and back-end. This service can be deployed to custom server or hosted on Heroku3 which is provided as a part the Silver and Gold subscription tiers.

App Gallery App Gallery serves as an alternative way to distribute Rhodes applications. It can be used for beta testing.

Cloud Build Cloud Build is a service for building Rhodes applications in the RhoMobile cloud independently of developers platform. It allows building applications for Android, iOS, Win32, Windows Mobile (not Windows Phone). It was successfully tested with Android and iOS. Note that only applications that don’t have any custom native extensions can be build using this service.

1. http://tau-technologies.com/ 2. http://www.kutirtech.com/ 3. Heroku is a services for hosting web applications. https://www.heroku.com/

8 3. RhoMobile Suite

The Cloud Build and App Gallery are a part of a web service for managing applications called RhoHub. It serves as a control center to manage users account subscription and applications. The developer can start cloud builds from here.

Free Silver Gold RhoStudio Rhodes (local build) RhoElements (local) Cloud Build (Rhodes/RE) Visual Studio Plug-in Sync (RhoConnect) a b Push a b App Management (local) a b Support (call center) c d Price free $299 - $2,995 $995 - $9,995 a limited to 1,000 devices b unlimited devices c (9-5) - 1 day response d (24/7) - 4 hour response

Table 3.1: Pricing table

3.4 Pricing

Zebra offers 3 pricing tiers starting with a free tier, which includes only the open source Rhodes framework and RhoStudio, any of the more advanced features are not included. Also there is no support service, so the only resource for troubleshooting is the community forum. Silver tier costs $299 per month and $2,995 annualized and comes with all the available features. Some of the hosted components like RhoConnect and App Management are limited by a number of devices. This tier also includes guaranteed support with response time of one business day.

9 3. RhoMobile Suite

Gold tier is the most complete one with cost of $999 per month and $9,995 annualized. There are no limitations on the hosted services and the online support is 27/4 with response time of 4 hours. There is also a perpetual license available, but it only applies to an older version of the suite. This is due to Zebra Technologies acquiring RhoMobile suite. They changed the licensing model to a subscription based model after the acquisition.

3.5 Framework Architecture

A Rhodes application is basically a web application that is running locally on a mobile device. At its core lies a Ruby interpreter based of Ruby version 1.9.3, but only a subset of features and libraries (also known as Gems) is available for use. User interface is presented with built in web browser and uses HTML and CSS. JavaScript can also be used for development, which gives the developer quite a bit of flexibility as most of the available APIs are accessible both through Ruby and JavaScript.

3.5.1 Requirements for Development Applications can be developed on any operating system that supports Ruby. Building and running is subject to rules created by platform vendors.

∙ iOS applications can be created only on a Mac running OS X with Xcode installed. ∙ Windows applications can be compiled only on a PC running Windows with the Windows 8 SDK installed. ∙ Android applications can be build and run on any PC or Mac if Android SDK and NDK are installed.

Ruby version 1.9.3 is also required to be installed on the development machine, because Rhodes build tools and scripts are distributed as Ruby Gems4. Any other version of Ruby is not supported, also note

4. Gems are self contained libraries of Ruby code, https://rubygems.org/

10 3. RhoMobile Suite

Platform Supported Versions iOS iOS 6, iOS 7, iOS 8, iOS 9 Android 2.3 - 5.1 Windows Mobile/CE WM6.x Pro, WM 6.0 Std, WinCE 5, WinCE 6, WinCE 7, WinXPe Windows Windows 7, Windows 8, Windows 8.1

Table 3.2: Supported platforms

that the version installed on the development computer is not the same nor functionally equivalent with the one that is being used inside the applications. Any code editor or IDE5 can be used for development. Debugging can be only done using the Eclipse based RhoStudio IDE. It offers di- alogs for creating projects and configuring development environment, but none of those features are exclusive to the IDE. As a matter of fact all build tasks are controllable from a command line interface using a tool called Rake6.

3.5.2 Device Requirements The table 3.2 shows which platforms are supported, it was copied from the official documentation. It is most likely not properly updated, because there is no Windows Phone support. But building for Windows Phone 8 is in fact supported by the framework.

3.6 Setup

Zebra provides installations packages for Windows and OS X operating systems and although installation is possible even on Linux it is not officially supported. The packages can be download fromthe RhoMobile Suite website[6]. For Windows it comes in a form of executable installer. For OS X it is a disk image containing installation scripts and application packages.

5. Integrated Development Environment 6. Ruby Make - http://rake.rubyforge.org/

11 3. RhoMobile Suite

3.6.1 Windows The installer is around 400MB and makes the process of getting the framework operational fairly easy. It contains all the necessary tools for creating the applications, many of which Windows doesn’t have by default unlike OS X. These tools include GNU Make, Ruby, DevKit (for building native Ruby extensions), Git and Node.js. Besides the universal tools it installs all the RhoMobile specific programs: the Rhodes gem, RhoStudio IDE, RhoConnect and package full of useful samples. After the installer finishes all of the executable tools are added to system PATH to ensure they can be access and run from command line. The whole installation requires 1.3GB of free space.

3.6.2 OS X Installation is not as easy as it is on Windows. The RhoStudio IDE is a regular OS X app package which can be easily dragged over to the Applications folder. To install rest of the framework developer needs to run installation scripts for Rhodes gems and RhoConnect which are present in the disk image. The Rhodes installation script checks whether GNU Make7 and JDK8 are present, if they are not, they must be manually installed. Also the script requires RVM9 to be installed, since OS X comes with a version of Ruby that is not suitable for RhoMobile development. RVM is used to select the proper version of Ruby to which the Rhodes gems should be installed. The gems themselves are located in a hidden folder in the root of the disk image called .gems. They can all be installed manually without running the installer script, avoiding the need to use RVM. After this procedure the framework is ready to be used.

3.6.3 Target Platform Specific Configuration Each of the target platforms require some degree of configuration.

7. https://www.gnu.org/software/make/ 8. Java Development Kit, http://www.oracle.com/technetwork/java/javase/ downloads/jdk8-downloads-2133151.html 9. Ruby Version Manager, https://rvm.io/

12 3. RhoMobile Suite

Figure 3.1: Latest working build tools

iOS For iOS there is the least of configuration necessary. Developer must first install Xcode from the Mac App Store. At the time of writingthe newest supported version is 7.3. At this point Developer should be able to compile applications of iOS.

Android For Android development the developer needs to download and configure Android SDK10 and Android NDK11 both available from the Android Developers site[9]. The important thing to note is that the latest version of either of these is not supported. The image 3.1 shows which are the latest supported versions of build tools. As for the NDK the documentation states that the old version r9d, released in March 2014, should be used. With these build tools installed, Rhodes needs to know the paths to them. There are couple of ways this can be configured, but the easiest is to run command "rhodes-setup" which will guide the developer through the process of setting the paths.

Windows Phone 8 To be able to compile for Windows Phone 8 developer must download and install SDK from the legacy section on Windows SDK site[10]. After that is finished, configuration of paths must be done as wasthe case for Android. This unfortunately can’t be done using the setup tool,

10. Android Software Development Kit 11. Native Development Kit

13 3. RhoMobile Suite env: paths: java: C:/Program Files/Java/jdk1.8.0_60/bin android: D:/Development/Android/android-sdk-rhomobile android-ndk: D:/Development/Android/android-ndk-r9d cabwiz: msbuild: > C:/Program Files (x86)/MSBuild /12.0/bin/msbuild.exe vcbuild: > C:/Program Files (x86)/Microsoft Visual Studio/vcpackages/bin/vcbuild.exe

Figure 3.2: Example of rhobuild.yml instead user must edit rhobuild.yml file located in the frameworks installation location12. The file must be modified to point msbuild and vcbuild entries to corresponding executable programs as can be seen in the example 3.2.

3.7 Support

There are couple of places one could get help with issues for free, one being a Google group13, which serves more like an archive as it is inactive since 2014 and the other one is Launchpad Developer Community14. The community at Launchpad is nearly non existent, although asked questions do usually get a response. Most of the time not by other community members, but by some framework development team member. Attempts to contact sales team in order to obtain evaluation license were at first unsuccessful. After posting to the community forum in- quiring on why there was no answer they responded with apologies for getting the email flagged as spam. They offered a one month eval-

12. Usually that is ROOT_INSTALLATION_FOLDER/ruby/lib/ruby/gems/1.9.1/ gems/rhodes-5.4.0/rhobuild.yml 13. https://groups.google.com/forum/#!forum/rhomobile 14. https://developer.zebra.com/community/rhomobile-suite

14 3. RhoMobile Suite

uation period of the Silver subscription plan. There were some issues with redeeming the token, but a representative solved it promptly after the communication channel was established. Having the subscription enabled couple options on the RhoMobile website. The important one for this section is the ability to contact the paid support. In case of the Silver subscription the personal has 1 business day to respond. They usually responded right after they received the ticket.

∙ First support request was about getting an application running on a physical iOS device. The documented ways were not working. All the responses were very prompt suggesting various fixes and workarounds. Unfortunately none of the suggested ways worked But after some tinkering running the application was successful (more in section 4.1.4). The request was closed and the issue was forwarded to the engineers for fixing.

∙ Second request was regarding push notifications crashing the application on both Android and iOS. It eventually turned out to be a mistake in implementation of the sample application. They sent a followup message to check if the issue was resolved or not, when they didn’t get any response to the advice.

3.8 Security

There isn’t much information on security capabilities of the framework. The networking stack can use HTTPS automatically and the web view component automatically uses certificates that are in the certificate store of the operating system, however there is no ability to add additional certificates from within the application. The application runs and stores its files in a sandbox which should be accessible only to itself, but in reality there are exploits available on many systems which can grant the user administrator privileges, thus gaining access to the private storage of the application. As a paid feature, developer can enable database encryption, which can protect some of the application data. Although there is no documentation on how this feature works and if it actually offers increased protection.

15 3. RhoMobile Suite

Period Owning Company September 2008 to October 2011 Rhomobile, Inc. October 2011 to April 2014 Motorola Solutions April 2014 to present Zebra Technologies

Table 3.3: Time periods and current owners of the RhoMobile suite

Client authentication is not supported by the framework. There is one documentation page15 mentioning planned support for it.

3.9 Rhodes development activity

The repository with the open source part of the suite, Rhodes, can be found on GitHub16. The first commit to the repository was made on September 19th, 2008. This section focuses on analysis of contributions, contributors, and history in regards to development activity of Rhodes. Since its inception in 2008 the repository has seen more than 10 000 commits. Following plot 3.3 and additional plots in the appendix (A.1, A.2, A.3) demonstrate how many commits have been made to the master branch during certain periods of time. Time intervals have been selected based on significant moments in framework’s history, specifically major acquisitions of the RhoMobile suite as can be seen in table 3.3. It is apparent from the charts that development activity was never drastically affected by the various acquisitions. Since 2013 commit frequency has been declining, with a few peaks a year, until the end of 2015 where the development activity seems to be stopping. This is due to the decision to make RhoMobile suite open source and Zebra’s focus on supporting current customers only, instead of developing new features. There are still some active branches other than master on which there were changes within past two months, but these are likely for fix-

15. http://docs.rhomobile.com/en/5.4/guide/using_certificates 16. https://github.com/rhomobile/rhodes

16 3. RhoMobile Suite

Motorola Acquisition Zebra Acquisition 300

200

100

0 2008 2009 2010 2011 2012 2013 2014 2015 2016

Figure 3.3: Commits per month to the master branch

ing certain customer issues given their naming (Spr29120, SPR_29532, SPR29394)17. But looking at the table (3.4) of top contributors it can be seen that the contributions of the original developers have definitely been affected. Many of them continued working on the framework asem- ployees of the new companies, but number of their commits decreased. These are some of the top 10 developers based on total number of commits18.

∙ genywind - Evgeny Vovchenko was a Development Manager of the Rhomobile team. He kept the same position even after the acquisition by Motorola. He did not continue under Zebra’s leadership and moved on to a different project.

∙ dmitrys - Dmitry Soldatenkov was a developers on the Rhomo- bile team. He continued working on the project both with Mo- torola and Zebra. In July 2015 he co-founded Tau Technologies the company providing support for their own fork of Rhodes framework.

17. https://github.com/rhomobile/rhodes/branches/active 18. All the information was gathered from their respective LinkedIn profiles

17 3. RhoMobile Suite

∙ timashev - Albert Timashev, similarly to Dmitry he continued working on the framework until June 2015, but hasn’t worked on it since.

∙ larsburgess - Lars Burgess was a co-founder of Rhomobile, he continued working on it as an employee of Motorola until April 2014. Since then he moved on to a different project (same one as Evgeny).

∙ rognar - Konstantin Rybas same as Dmitry and Albert worked in all three companies. He was head of development for the framework after the Motorola acquisition. He is the main founder of Tau Technologies.

3.9.1 Future of development Framework development continues under the wing of a new company Tau Technologies which comprises of some the former RhoMobile developers and even the creator of RhoMobile Adam Blum[8]. This company plans on being the primary maintainer of the framework. In their road map there is currently no mention of creating services similar to Cloud Build and App Gallery, which will not be open source[11]. The interesting thing about these developments is that most of the original RhoMobile development team (original meaning they were in the company before the big acquisitions) have quit their jobs around the same time to form Tau Technologies to return to work on a project they initially stated with. Road map for development stretches to 2018, but during the year 2016 they want to focus on getting the platform up to speed with support for the latest operating systems, adding support for modern web technologies such as Node.js, and improving the build system. The plan for 2017 is packed with adding more features like support for Cordova plugins and upgrading the required version of Ruby. Whether any of these plans work out remains to be seen.

3.9.2 Tool for Gathering Data from GitHub GitHub offers some statistics and charts for commits and contributors, but this data is not easily accessible in the presented form. To create

18 3. RhoMobile Suite

GitHub user name Rhomobile Motorola Zebra Total Solutions Technologies genywind 2223 1121 20 3364 dmitrys 366 479 168 1013 timashev 183 559 132 874 larsburgess 749 41 0 790 lexis-t 173 515 78 766 rognar 233 242 34 509 mmalinin 0 219 263 482 alex-epifanoff 0 272 138 410 StanislavVolodarskiy 0 255 109 364 dipspb 37 142 9 188

Table 3.4: Top 10 Rhodes contributors

the charts in this section a custom tool was written in Ruby. It connects to the GitHub public API and downloads raw data about the Rhodes repository, then it splits the data to the time periods specified earlier and exports this data as comma separated values. It also sorts the commits by contributors constructing a list of top contributors and number of their commits in the specified time periods. With some modifications the program could be upgraded to work on any GitHub repository, with any time periods. The source code can be found in repository on GitHub19.

3.10 Documentation

Documentation20 is split to 3 section. One is the API reference. Second one contains various guides and the third one has guides focused on developing the web back-end.

19. https://github.com/adusak/GithubTools 20. http://docs.rhomobile.com/

19 3. RhoMobile Suite

API Reference This section contains list of all available classes and their methods and properties. For each class there might be some examples but these examples are not very extensive and often have no context, sometimes there are even mistakes as they might not be updated for some time.

RhoMobile Guides In this section developers can find a lot of resources ranging form the initial setup guides to data handling to native extension development. It contains roughly around 70 guides so it is quite an extensive resource. And although it feels disorganized and outdated, it contains most of what a developer would need to create applications.

RhoConnect Guides These guides are focused on the RhoConnect back-end server development. They cover the topics of setting up push notifications infrastructure and also other hosted services provided by RhoMobile suite, such as cloud build and deploying web application to Heroku.

Other Resources Documentation also contains some old videos uploaded to a channel on YouTube 21. Most of the videos are outdated and are over 2 years old. And given that they are mostly over an hour long, they don’t serve very well for quick information access. Bundled in the installer package (also available in GitHub repos- itory22) are code samples for various functions and features of the framework. They are fairly extensive and can serve as a great guide when trying to use functions not well documented in the main documentation. These examples contain even proprietary APIs that are a part of RhoElements such as bar code scanner and NFC reader.

Many of the links in the documentation are dead or lead to something else than they should. The guides are all mixed up. Often there

21. https://www.youtube.com/user/rmswebinarstemp 22. https://github.com/rhomobile/rhodes-system-api-samples 20 3. RhoMobile Suite are multiple different examples of some code, but not all of them are up to date. This makes a bad impression on any developer that might try to research the framework for potential use. But even with these issues the documentation proved to be usable.

4 Rhodes Application

4.1 Application Basics

4.1.1 Languages and Technologies

RhoMobile allows writing application code either in Ruby, JavaScript or both at the same time. Ruby however has clearly better support, because it is the main language of the platform and all of the documented APIs are accessible from it. JavaScript APIs are generated directly from the Ruby code and act just as a bridge to calling their Ruby counter- parts[12]. It is also important to add that not all of the APIs have this JavaScript bridge the most notable are NFC and Bluetooth. Developer has the option to remove all Ruby from the application and use only JavaScript (preferably with some 3rd party application framework), but then the ability to access some of the APIs is lost. It is also possible to avoid using any JavaScript, but to get most out of the framework it is best to use combination of both. Because the application runs within a WebView all of the UI elements can be created with HTML and styled by CSS. This is the standard approach for Rhodes application, but there are some cases were a native view might be a necessity, such as displaying a map, or a complex animation. The framework supports extending the application with custom native views. This options should be used only for special views and not creating the whole application interface, because the view must be made for each supported platform separately. On top of this there is even the option to use only some native elements in combination with the web view, these include a tab bar, menu bar and navigation bar, these do not require any usage of platform specific code. Considering that HTML and web applications in general are rapidly gaining in popularity it allows the developer to easily choose some mature framework for handling only the UI aspect of the application. RhoMobile includes jQuery Mobile (outdated version 1.3.1) for this purpose, but it can be replaced by anything else. Downside to using HTML and CSS to create application UI is fragmentation of supported options in the web view component. The

23 4. Rhodes Application

Figure 4.1: Sign in screen on Windows Phone 8 differences are most apparent when comparing how application looks on a Windows Phone device to how it looks on a system with WebKit based browser (Android, iOS). Windows Phone uses Internet Explorer as its web view and this can cause major differences and even breaks as demonstrated in figure 4.1.

4.1.2 Creating an Application After completing the steps from the setup section 3.6 developer can start using the framework to develop applications. With the following command an application skeleton can be generated. It contains some basic views so it is easy to start working on the project. The skeleton also comes with couple of JavaScript libraries and CSS styles, which can be used but the developer is free to replace them with anything else. $ rhodes app name_of_the_app

4.1.3 Configuration Rhodes application can be configured two ways, there is build-time configuration which is evaluated in the compilation process. It canbe changed using the build.yml file in root of the project folder. There are

24 4. Rhodes Application

/ app ...... application logic and Ruby code helpers...... generated helper classes Settings ...... example of MVC application.rb ...... main application file index.erb ...... default landing page layour.erb...... main HTML layout file icon...... launcher icon images production ...... images for iOS App Store public...... JavaScript, CSS and static images AndroidManifest.erb ...... template manifest file build.yml ...... built-time configuration rhoconfig.txt ...... run-time configuration

Figure 4.2: Structure of the application skeleton

common and platform specific options. Some of the common are name, vendor, version, Rhodes SDK version and so on. There is even section where developer must specify loaded extensions. Not all extensions are available for all platforms so it is necessary to list only those that are. This is because for instance there is no NFC support on iOS so the NFC extension must be specified only for Android, because the project wouldn’t compile for iOS with the extension set as global. Platform specific options require developer to specify which version of SDK to use for compilation to the target platform, additional extension and device capabilities. Run-time configuration is evaluated while the application is running and therefore can be modified even between application launches. These options can be changed in rhoconfig.txt, there are couple of important settings such as locking screen orientation, setting the main landing page and changing splash screen images. Other options are for changing the verbosity of application log and some platform specific settings.

4.1.4 Running an Application Application can be run from a command line using Rake, the project comes with multiple options for building running and deploying applications. Command shows all the available tasks. $ rake -T

25 4. Rhodes Application

The options are to run application on an emulator/simulator, device or RhoSimulator. The former two options are straightforward, they build the native package and then deploy it to either a physical device or an emulator. There are some limitations with iOS, the application can be run using the rake command only in a simulator, to install it on a device an Xcode project must be generated (done using following command "rake build:iphone:setup_xcode_project") and then can be run directly from Xcode on a device. The other option is to use RhoSimulator which is bundled with the framework. It is a tool for quickly running and debugging application. Since RhoMobile applications are similar to Ruby on Rails they can be run locally on a computer to some extent. It is limited by some native functionality like Camera access or configuration. Its useful- ness lies mainly in its speed, starting an application directly on the target platform can take quite a lot of time. It can also be run with the platform preset, that means that the simulator can act as an Android, iOS or Windows Phone system. This is only a cosmetic thing because it changes only the User-Agent1 of the simulator. RhoSimulator consist of two windows, one is a web view 4.3 show- ing the interactive application interface. The other on is a console window, it is useful for inspecting HTML and CSS and debugging JavaScript code.

Running Application on iOS Device This paragraph covers how to compile and run applications on a physical iOS device. This needs further clarification, because the command for launching on a device is not working properly and is currently a known issue reported to support 3.7. Running on a simulator using command "rake run:iphone" and even the command to build a production ready package "rake device:iphone:production" runs fine but the application is still not executable in the default settings state. But when trying to follow the official guide on running on iOS devices the build process fails when trying to run the application from within Xcode. The communication with support personal leads to a workaround, it is necessary to configure the build.yml file with iOS

1. User Agent should identify the what platform is the browser running on. For more details see http://whatsmyuseragent.com/WhatsAUserAgent 26 4. Rhodes Application

Figure 4.3: Web view with the application specific configuration, namely provisioning file and signing certificate, and then the project would build. The configuration of those settings is something that is supposed to be done by Xcode by default. Although this workaround was found the cause of this issue remains unknown.

4.1.5 Application Architecture Rhodes applications use the model-view-controller architecture, it is a well known and widely used technique for separating data, pre- sentation and application code. Basically, models are responsible for representing the application data, views are the user interface pop- ulated by data from models using the controller. Controller handles user interactions. This is not a strict definition of the concept so there might be multiple explanations and different setups, but in general it can be visualized as in figure 4.4.

27 4. Rhodes Application

MODEL

UPDATES MANIPULATES

VIEW CONTROLLER

SEES

USES

USER

Figure 4.4: MVC diagram

In case of Rhodes applications the models are Ruby (or JavaScript) classes that use the Rhom API more about that in section 4.2.5. Con- trollers are written in Ruby and they take care of binding the data from models to the views and routing to specific action within the controller. Views are simple ERB templates which is Ruby’s system for handling HTML templates. Basically it is HTML (+ JavaScript) mixed in with Ruby code. Most of the application code is located in the app folder (shown in 4.2) and for each controller there must be a sub-folder with the controller’s name. The folder must also include a view for each action specified in the controller. In the basic controller example (4.5) there is only one action named index. For this action to work properly there must be file named index.erb in the folder. An instance variable message is set in the controller and then it can be used in the index.erb to display data to user (4.6). Usually the action view contains only part of the HTML code, because including the whole HTML page would lead to code duplication and bad maintainability. Most of the common code is concentrated in layout.erb file located in the app directory. The

28 4. Rhodes Application class VeryBasicController < Rho::RhoController # This is considered as an action def index @message= "Hello Everybody" end end

Figure 4.5: Basic controller

<%= @message %>

Figure 4.6: Basic action

file contains HTML head, directives for displaying content on amobile screen, styles and common scripts. The action view is contained in the content variable of the layout file 4.7.

4.2 Rhodes functionality

Mobile devices offer many various hardware features and an important part of any framework is whether they provide access and if they do how simple it is to work with these features. This section covers working with capabilities such as NFC, Camera and other sensors and describe how well they can be controller using the interface pro-

Application <%= @content %>

Figure 4.7: Basic layout

29 4. Rhodes Application vided by Rhodes. Not every available API is covered in this section . Also there are mentions of some features (such as a barcode scanner) which are not necessarily a standalone hardware feature but rather a convenient set of APIs provided by the closed source part of the suite RhoElements. Note that in the examples presence of the required hardware will always be assumed, that is to keep the snippets as short as possible. For each of the mentioned APIs there are methods to determine whether they are actually available or not.

4.2.1 NFC Near Field Communication unlike the camera or Bluetooth is not as wide spread and there are a lot of devices without this hardware. It is used for communication between devices on very short range for exchange of small messages. Best example of NFC usage are probably contactless payment cards. The framework enables access to NFC only for Android. There was no NFC hardware present on iOS devices prior to iPhone 6 and even thought that now these devices have this capability is it not at the time of writing publicly available to developers. It is used only internally for Apple Pay. The NFC API was tested successfully with various types of NFC cards and stickers. Tests were conducted using Google Nexsus 6P, which has a NXP PN548 chip inside [13]. The tests conducted were basic read tests and they worked with following technologies: NTAG213, NTAG 203, NTAG 210, NTAG 215, NTAG 216, MIFARE 1 and 2, MI- FARE DESFire and MIFARE plus.

Usage It is quite simple to use NFC in the application. The following code snippet covers a basic scenario of reading an NFC tag however the API allows even for writing to NFC tags and sending messages. There are explanatory comments throughout the code. class NfcController < Rho::RhoController def index

30 4. Rhodes Application

# first we set the method which will get # called when a tag is detected Rho::NFCManager.set_nfc_callback( url_for(action: :nfc_callback)) Rho::NFCManager.enable end # the callback serves only as a notification that # the tag was detected actual reading is done by # calling get_current_Tag function def nfc_callback # @params is a parameter of the callback messages= @params[’messages’] Rho::Notification.showPopup(message: messages.to_s, buttons:[’OK’]) # this is how the tag is read tag= Rho::NFCManager.get_current_Tag end end

This only shows how to enable the NFC adapter and get the tag. Reading the contents of the tag is a more lengthy procedure. First we must determine which kind of technology it uses and then we can start parsing the actual message. There is a more extensive example in the documentation [14]. All other settings required by Android for making this work are taken care of by Rhodes.

4.2.2 Camera No license is required for using this API. Camera is one of the most used functions of any smart phone so it is only natural to expect a cross-platform framework to have competent support for all the features. Rhodes makes working with camera very simple, it provides support for both front and back cameras, if they are present. It allows for developer to specify desired photo resolution before hand, and its takes care of resizing and saving the picture. Developer can also specify whether the picture should be saved in to the device’s picture gallery or just locally for some use-cases where the image should not

31 4. Rhodes Application clutter user’s device. The developer is also given a choice to use camera UI bundled with the framework or use the system native camera UI. After some testing it is apparent that the native camera is more reliable than the Rhodes version of the UI. The issues found were mainly distorted viewfinder (picture upside-down) and no support for auto focus and tapping to focus on a specific area. Besides all the picture taking functions this API also enables picking a picture from the device gallery.

Usage class CameraController < Rho::RhoController # taking a picture using the system application def picture_system_viewfinder Rho::Camera.takePicture({useSystemViewfinder: true, fileName: "sample"}, url_for(action: :picture_taken)) end # callback for when the picture has been taken def picture_taken # path to the picture is contained in this variable @params[’imageUri’] end end

As you can see the API is quite straightforward, but it is also highly customizable with help of the camera options hash passed as the first argument to the takePicture method. Developer can change the output image format, enable or disable flash.

4.2.3 Barcode Scanner Closely related to camera is the barcode scanner API. It offers code scanning and recognition using the device’s camera. There is even 1D/2D scanner hardware support for some special devices created by Zebra Technologies. For consumer grade devices all the scanning is done only by camera. What codes can the scanner recognize can be determined via a function call. This API like NFC is available only as

32 4. Rhodes Application

a part of RhoElements and is usable only on iOS and Android, there is no version for Windows Phone.

Usage The following example shows the simplest way to scan all recognizable codes using the built in scanner interface. Another way how to scan could be to use the camera API to take a picture an then pass it to the bar code scanner. This way however is less convenient for the end user, because if the scanner doesn’t decode the image the user must take another clearer picture. The built in in interface does live scanning and displays the result immediately after the code has been decoded. class BarCodeController < Rho::RhoController # invoking the scanner is similar to camera API def scan_barcode Rho::Barcode.take({}, url_for(action: :code_scanned)) end # callback for when the code has been scanned def code_scanned # this contains status of the scanning # if this is not ok then scanning was canceled @params[’status’] # this contains the decoded content @params[’barcode’] end end

4.2.4 Geolocation and Mapping Another basic feature is geolocation and for location based applications this is a crucial part of a framework. Developers can also use provided MapView class to display native map view to user. The framework even allows for multiple map data providers, though the simplest to setup and most commonly used is Google Maps. One caveat with using geolocation is that the more precise and frequent the queries for location are the more battery is drained. It is therefore very important to optimize this usage and use it only when the application needs it and not waste any resources. Simple example is to turn

33 4. Rhodes Application off the location change notification once we leave the view where the updates are required. These APIs are provided for Android and iOS, unfortunately Windows Phone is not supported at the moment.

Usage - geolocation class GeoController < Rho::RhoController def start_geolocation # second parameter is a custom tag and optional # third parameter is the interval for updates GeoLocation.set_notification(url_for(action: :update), ’’, 10) end # callback that gets call after location update def update # if the user left page on which location is required # we must disable the updates if WebView.current_location !~ /GeoLocation/ GeoLocation.turnoff return end # successful location update must have ok status @params[’status’] # the location is in these variables @params[’longitude’] @params[’latitude’] end end

Usage - native maps To use for instance Google Maps developer must generate and set and API token using the Google Developer Console, otherwise no actual map will be show to the user. Optionally developer can add annotations to the map. There are even various properties of the map that can be modified such as the initial region on which themap is focused. Enabling the visualization of user location, fix the map viewport so the can’t be zoomed and others.

34 4. Rhodes Application

class MapController < Rho::RhoController def start_map options={provider: ’Google’, settings: {}, annotations: {}} MapView.create options end end

4.2.5 Device Data Storage

This section consists of two part, one describes how the Rhodes applications handle files and the other one is focused on database storage.

File Handling

The application files are divided into two groups, source code located in the app folder and various static assets such as CSS styles, JavaScript, images and data files. These should be located in the public folder. The static files can be accessed through code, but the most common use is to reference them from the views. There is only one location guaranteed to be usable as file storage and that is the user folder, any other folder might not be writable. It is also strongly recommended to only use the provided methods for accessing the various folders through code and never hard-code any paths. All the files saved to the user folder are actually contained within the application’s secure storage. This approach is normal for iOS, but for Android this could cause some issues. The way storage works on Android is different from iOS and it is not completely common to keep files in the secure storage of the application. Many Android applications save their files to an external storage which is basically an SD card (it can be simulated) and has usually more storage available than in the application storage. The other issue is that on some versions of Android files stored in this location can’t be simply shared as if they were in a public location. There is a way to open them in other applications but currently it is not supported in Rhodes. More on this issue in section 4.2.8.

35 4. Rhodes Application

Example

# the only writable folder folder= Rho::Application.userFolder # constructing a file path path= Rho::RhoFile.join(folder, ’my_sample.txt’) # Files are manipulated by the following class # example of writing to file file= Rho::RhoFile.new(path, Rho::RhoFile.OPEN_FOR_WRITE) file.write(’Hello’) file.close

Database Storage

The framework comes bundled with an ORM2 library. This storage is used for the models described in the architecture section 4.1.5. The library is called Rhom and it makes handling data very easy. In its storage layer it uses SQLite database and if the developer chooses it handles all the table definitions and SQL queries automatically for them. There are two ways to define a model, either with a fixed schema or as a property bag. The main difference is that in fixed schema allthe model’s properties must be defined beforehand and can’t be simply changed dynamically. The property bag model doesn’t require any definitions, properties can be added at any moment and the library handles all the details. While the property bag approach might be more convenient for the developer it might also cause more troubles such as data inconsistency. Objects of the same class might have all different attributes, but this depends more on the developer’s usageof the database rather than any problem with the design. The practical differences are shown below. The choice between these two approaches is left to the developer, they must choose whichever suits their need the best. One is not better than the other.

2. Object Relational Mapping

36 4. Rhodes Application

Property bag Fixed Schema

∙ Dynamic attributes ∙ Requires fixed attribudes

∙ No migrations required ∙ Database migrations

∙ Larger foot print ∙ Smaller footprint

Model Examples # property bag model definition definition class Job include Rhom::PropertyBag end # fixed schema model definition class FixedJob include Rhom::FixedSchema # attribute definitions with types property :name, :string property :pages, :integer property :date_added, :date property :time_printed, :time end

The library provides a way to easily create and save these models without writing any SQL queries. This applies to data retrieval as well, there are ways to access data with support for ordering, filtering and fetching only some of the attributes. The paid subscription allows to set database encryption. Another important characteristic is that the Rhom library can be used either from Ruby or JavaScript, but not both, unfortunately this is a technical restriction of the current version. A basic use-case in which developer might want to use both is if they are loading data in Ruby and they want to update the UI without refreshing the whole page. But this restriction can be worked around by creating a Ruby method which returns the desired database content in JSON format then calling it from JavaScript and processing the JSON data. It requires additional code which can be prone to errors, but it is the next best thing to calling the Rhom JavaScript bindings directly.

37 4. Rhodes Application

4.2.6 Notifications

There are two types of notifications: local and push. Local notifications are as the name suggests local to the device. They can be pop up messages in the application or they can be even vibrations and sounds. Generally these are triggered by something that happened in the application. Push notifications are used for notifying user about events happen- ing elsewhere. These work in conjunction with web services, when something happens in the service it can send a message directly to selected device. They require more work and configuration than local notifications. As image 4.8 demonstrates setting up the notification consists of multiple steps. First the application must register with the notification service and in turn it gets a unique token which servesas an identifier for the application installation3. This token must then be saved to some web service back-end which will be sending the messages. The service then sends the message payload to the notification service which will deliver it to the application specified by the token. The blue lines in the image indicate setup process and the red lines depict the message deliver process.

Usage - Local Notifications # this method accepts only wav and mp3 files Rho::Notification.playFile path_to_file, media_type

Rho::Notification.vibrate duration

# Only some options # the full list can be found in the documentation properties={ message: ’Hello’, title: ’Title’} Rho::Notification.showPopup(properties, url_for(action: :callback))

3. There can be multiple application which required push notifications so the token identifies a specific application install and not the device.

38 4. Rhodes Application

Figure 4.8: Push message flow chart

Usage - Push Notifications Using the push notifications is straight forward. def start_receiving Rho::Push.getDeviceId url_for(action: :token_callback) Rho::Push.startNotifications url_for(action: :callback) end

def token_callback # Take the token and send it to the back-end server end

def callback # Process the notification end

4.2.7 Inter-application Communication There are a lot of cases where applications need to communicate with each other or even share some data. This can span from simple things like starting a phone call when tapping on a phone number to more advanced like opening a downloaded PDF file adding some

39 4. Rhodes Application annotations and then sending it via email or uploading it to some shared web storage. There are big differences in approaches to this matter from platform to platform. For instance iOS doesn’t have a shared accessible file system so up until version 8 there was no way how to locally share files between applications. Android is more open in this regard, some parts of the storage are publicly accessible to all the applications, also Android’s Intent4 system was designed with delegating various tasks to various applications in mind. It basically means developer can specify certain intent and if any installed application can handle the intent it is launched. And as a result can return data to the application that created the intent. Rhodes has support for Intents, but it is just a layer on top of the Android Intent system and doesn’t extend to any of the other supported platforms. The simpler aforementioned tasks are however enabled on all the systems.

Usage - Launching Other Applications # opening various application can be done via this method System.openUrl url There is an issue using the provided API to share files that are in the application folder on Android. The folder is readable only for the application and no other application. So when trying to share some file the receiving application will not be able to open it and will probably show some error message. A workaround for this issue is described in the next section.

4.2.8 Native Extensions Not all the of the required functions are always available in cross- platform frameworks, or it could be poorly implemented. For these cases it is important for the framework to enable some extensibility. Cross-platform frameworks usually do this by defining some structure for native extensions. These are pieces of code responsible for handling

4. Android Intent System - https://developer.android.com/guide/ components/intents-filters.html

40 4. Rhodes Application

one task, usually the best practice is to create each of extensions to do one thing to keep them simple. The extension must contain specific code for all the supported platforms, or at least the ones that the developer wants their application to run on. And if the single extension was responsible for multiple distinct functions it would with time get very hard to maintain and fix issues. Rhodes framework includes robust extension support and is itself build using these extensions. There is one big extension called CoreAPI, this is main part of the framework and handles all the basic application functions like routing, navigation, displaying the web view and making calls to the native device functions. And there are other extension (not required to run the application) for things like the camera and UI localization. Many of the additional functions are accessed via native extension.

Extension Structure Extension template can be generated using the command line interface for Rhodes with following command.

$ rhodes extension MyExtension

This command must be executed in the root of the application and it generates an example extension called MyExtension in the extensions folder. The structure is quite complex and figure 4.9 is just a basic overview. Implementation of the extension for each platform is contained in the ext/platform folder in their respective sub-folders. The interface for using the extension is declared in the XML file. It must specify all properties and methods including parameters and return values with data types. It also used to generate documentation so there are specific fields for descriptions. If this file is modified the aforementioned command must be executed again to generate proper implementation stubs based on the modified declaration.

Example As was mentioned in the previous section on inter-application communication, Android’s implementation of sharing files is not working out of the box. This is due to sharing files located in unreadable location.

41 4. Rhodes Application

MyExtension ext platform android iphone . . shared ShareExtension.xml...... Interface definition public...... Generated JavaScript API bridge ext.yml ...... Extension definition and settings

Figure 4.9: Structure of a native extension

Following example show how to work around the issue with native extensions. The example shows only snippets of code, for the complete source code please see the attachments. The extension has a simple purpose and that is to open files in external applications. if Rho::System.getProperty(’platform’) == ’ANDROID’ Rho::ShareExtension.openFile local_file end

The if statement is to ensure that the code is being executed on the Android platform, because the extension was implemented only for Android. And the call to the native extension is as straight forward as calling the desired method with the absolute file path as an argument. When the extension is called it moves the file from the private storage to public storage, where it can be read by other applications, after moving, the file is opened using the Android Intent system. Useris presented with a system dialog to choose the appropriate application. The implementation of this particular extension is lacking, because after user is done with the file it remains in the external location. This could be improved by deleting the file after the external application is closed, or even moving back to replace the original file if modifications are possible. The point was to demonstrate that native extensions can be easily used to overcome the potential lack of features or even some platform related issues.

42 5 YSoft SafeQ Application

The prototype application is meant to test the capabilities of RhoMobile for use as a mobile print terminal. The application communicates with a server via a REST API. It can use either QR scanner or NFC to identify the printer to use as an endpoint for printing. After the user logs in he can preview job setting and send the print job for printing.

5.1 Design

Application design was based on the mock-ups created by Mgr. Ondřej Chrastina as part of his master thesis [15]. The icon was created with the help of a free icon template 1 and images prepossessed by Mgr. Jaroslav Klech 2. The design tries to follow the orange-white-black color scheme found in production SafeQ terminals. All of the UI elements (with one exception on iOS) are HTML elements styled using custom CSS styles, there are no differences in the design on iOS and Android, while it is possible to load a different style sheets for each platform to make it look more native, it is not always the desired effect. In case where usability and familiarity with the application is crucial it is more useful to unify the design for all platforms. One of the purposes of this prototype was to test the possibilities of customization of the user interface. Since it is all defined by HTML the customization options are vast it allows in combination with CSS and JavaScript modification of the look and behavior of any element tothe designers liking. This is however subject to the installed browser as was noted in section 4.1.1. This approach, although flexible, requires a lot of testing in various versions of browsers, to ensure it looks and behaves the same everywhere. This application uses couple of third-party libraries to make design- ing and manipulating the user interface easier. First one is jQuery 3, it is mainly used to manipulate DOM4 and change the look of the inter-

1. https://appicontemplate.com/ 2. https://github.com/xklech/titanium_safeq 3. https://jquery.com/ 4. Document Object Model - https://www.w3.org/TR/WD-DOM/introduction. html

43 5. YSoft SafeQ Application face without reloading the whole page. It is also used to make AJAX5 calls within the application. Other library is called Titon Toolkit 6 and is a collection of components like tabs, buttons, drop-down menus and so on. It comes with some basic styles for the components, but they can be overridden. This framework was chosen because for its proclaimed support right-to-left layouts, more about that in section 5.7.

5.2 Embedded Terminal API

The application communicates with the server using the Embedded Terminal API, which is documented on a Apiary documentation site7. The API is complex and offers many other functions that are not used by this prototype, so they have been removed from the definition file to keep it simple. Only the 3 following methods are used in the prototype, Authenti- cate, Get Logged User Info and List All Jobs in Folder. The URL consist of server, version of the API, Terminal ID, method name and possibly some parameters.

http://server.com/et/v1/100000000027/jobs/?folder=folder

All of the methods require HTTP headers to be set, otherwise the server responds with an error message.

{ "Content-Type": "application/json", "Accept": "application/json", "Auth-SQTA-Token":"" }

The first two headers signify what kind of content is being sent as parameters to the server and what kind of content can the application receive as response from the server. In this case both are JSON.

5. Asynchronous JavaScript and XML - http://www.wrox.com/WileyCDA/ Section/id-303217.html 6. http://titon.io/en/toolkit 7. rhomobile.apiary.io

44 5. YSoft SafeQ Application

’Auth-SQTA-Token’ header is required as it contains an authentication token assigned by the server. The token is changed with every request so the application must ensure it always keeps the latest one.

5.2.1 Authenticate Authentication is done by send a POST request to the auth method. The ’Auth-SQTA-Token’ header must be empty when authenticating. The print all option in the body indicates to the printer whether to print all pending jobs.

Request URL {terminalId}/auth Request Body { "printAll": false, "credentials":{ "username": "john", "password": "secret" } } If the supplied user name and password are correct the server sends a response with 302 HTTP code which usually indicates redirection, but in this case it means a successful authentication. Within the response header is also the authentication token, which must be saved for future requests.

5.2.2 Logged User Info This methods is used to retrieve current user information. Method returns user’s name, balance of the account, billing code and the list of user’s entitlements. The request is a simple GET request without any parameters.

Request URL {terminalId}/auth/loggedUserInfo

45 5. YSoft SafeQ Application

(a) Start screen on device with NFC (b) Start screen on iOS device

Figure 5.1: Start screens

5.2.3 List All Jobs in Folder The name of this methods explains it purpose, it returns the list of jobs in the specified folder. Parameters for this method are folder, startAt and pagesSize. Folder specifies which jobs to list, the options are waiting, printed, favorite. The parameter startAt specifies the first job to be listed and pageSize controls number of jobs returned. The parameters are numbered 0, 1, 2 in the following example.

Request URL {terminalId}/jobs/?folder={0}&startAt={1}&pageSize={2}

46 5. YSoft SafeQ Application

(a) Android (b) iOS

Figure 5.2: QR reader screen

5.3 Start Screen

When the application is opened user is greeted with the start screen. To launch in to the job interface a QR code or a NFC tag containing the terminal ID must be scanned. Not all devices have NFC so the screen is show according to availability of the hardware. Figure 5.1a show how the screen looks on an Android device with NFC and figure 5.1b demonstrates how it is displayed on an iOS device. The NFC is already active and ready to receive a message from the tag. After the tag is read a pop-up window is show with any message the tag may contain. When the dialog is dismissed user is taken to the sign in screen. In the prototype this happens regardless of what the tag

47 5. YSoft SafeQ Application contains, because the terminal ID is hard-coded in the request URLs. For the QR scanner it is the same, the goal was only to demonstrate that these features are available and work. QR scanner can be launched by pressing the QR code image. User will be taken to the QR scanner screen, which is different on both platforms. Figure 5.2a is a screen shot form the Android version of the QR reader. Rhodes uses ZXing8 library for the code scanning component and this limits the scanning viewfinder to be only in landscape mode, iOS doesn’t have this limitation as can be seen in figure 5.2b. Despite this the scanners are equal in functionality on both platforms, they both have live scanning with preview of the content, once some code is detected. And the ability to scan some other code without having to relaunch the scanner component.

5.4 Sign In Screen

Screen 5.3a is shown to the user only before the first authentication or if the user has previously signed out of the application. When signing in, it first validates whether the user name and password have been filled and if not it displays an error message highlighting the invalid field. The notable part about this screen is that when the user tapsthe sign in button a JavaScript asynchronous call is made locally within the application. A method, that is written in Ruby as part of the start controller, is called to sign in the user. It returns a response saying the authentication failed or succeeded. Meanwhile in the UI form is swapped for a loader animation and user is aware that the application is working. After the process is done user is redirected to next screen or the loader is swapped back to a form with a message as to why the sing in procedure failed. When the procedure is successful user access information is saved in to the database for future unobtrusive singing in. And right after the authentication is finished the server is queried for more specific information about the user that was specified in section 5.2.2 and this information is added to the user in the database.

8. ZXing - https://github.com/zxing/zxing

48 5. YSoft SafeQ Application 5.5 Job List

This screen uses the Tab component from Titon Toolkit. When the page is first loaded, jobs that are already saved in the database are displayed in the corresponding tab and new jobs are simultaneously loaded from the server. The Tab component has a lazy loading option, which means that the section content is loaded only after the respective tab has been pressed. This is achieved with the same technique as on the sing in screen, but this time it is handled by Titon library including updating the content with new data. The bottom row displays the current user’s name and account balance. There is also an option to sing out, which will redirect the

(a) Sign in screen (b) Job list screen

Figure 5.3: Additional screens

49 5. YSoft SafeQ Application user to start screen and delete the associated object and all other information related to current user. It also send a request to the server announcing the user’s sign out. User can mark favorite jobs by tapping on the star. When one or more jobs get selected using the check box a print button appears in the lower right corner.

5.6 Job Detail Screen

This screen just a lists of the job properties. The preview image is loaded by Titon Toolkit it also uses lazy loading, in this case it means that the image is downloaded only after it scrolls in to view. More interesting is usage of a native element on this screen. Since iOS devices don’t have a hardware back button it is supplemented by a native toolbar with a back button. It is ensured that the toolbar is shown only on iOS, because it would be redundant on a device with any other operating system.

5.7 Screens in RTL Mode

Right to left language and layout support was mentioned in the design section. HTML has RTL support built in and all plain elements are displayed accordingly to the selected mode. The word plain is what is important, because once the element is stylde by CSS, for example to be aligned left or to float left, it doesn’t get automatically changed to right when the page is being rendered with the RTL option. Titon Toolkit framework was chosen, because it was advertising this feature as supported, unlike other libraries (at the time of writing) such as Twitter Bootstrap or jQuery mobile. Unfortunately even when using the style classes provided by the framework the UI doesn’t get completely flipped. Meaning that when some text aligned to the leftit stays aligned to same side even when user has a RTL language, which is not the desired behavior. Despite this inconvenience the framework does a relatively good job of flipping its components so that it complies with the RTL layout. Example can be seen in figures 5.4a and 5.4b. In the first one theorder of the tabs got automatically reversed and the default tab selected is

50 5. YSoft SafeQ Application

(a) Job List screen in RTL mode (b) Job detail in RTL mode

Figure 5.4: Screens in right to left mode

the one on the right. But other than that the UI flipping (specifically the job list items) is done by a custom JavaScript function that looks for all the alignments and floats and flips them once the page has been loaded. While this example is not perfect or comprehensive it demonstrates that RTL languages can be used within the applications created using the Rhodes framework, as long as the user’s device has all the appropriate fonts. Important thing to note is that the framework itself doesn’t have the information whether the displayed language requires LTR or RTL layout. This all relies on the browser, and is clearly demonstrated in the figures by the toolbar in the bottom of the screens, even though the layout should be flipped, the native element remains the same.

51 5. YSoft SafeQ Application

To sum up, RTL languages can be used in application created using Rhodes, but it is not automatic and requires some degree of work by the developer.

52 6 Conclusion

The product of this thesis is a working prototype that demonstrates some selected capabilities of the RhoMobile cross-platform development suite. It runs well iOS (versions 6 through 9.3), Android (versions 2.3 through 5.1). All the features covered in chapter 4 were tested on either an iPhone 5s or a Nexus 6p and they all worked. On Windows Phone there are numerous issues due to the selected JavaScript library and CSS styles. The problems are cause by the major differences in the browsers. Internet Explorer has trouble processing the scripts unlike the WebKit based browsers in iOS and Android. This can be fixed by creating a completely different styles specifically for Windows Phone. It is however not recommended at this point to use the RhoMobile framework to develop application that target Windows Phone. It supports only version 8 of Windows Phone, which was release in April 2014. While Ruby and JavaScript are great and powerful languages, the lack of proper code analysis when compiling the application can cause trouble. Errors that could easily get detected during compile time manifest themselves only at run time. This increases development and makes application testing that much crucial. That said is it by no means a reason for not choosing to use these languages, just a thing to keep in mind. Considering the uncertain future of the framework and its com- plicated past, it is not recommended to use the suite for developing applications at this moment. Although section 3.9.1 covers the future plans, it impossible to judge whether the move has paid off. Most of the original team that created the framework decided to return to the project, which might turn out to be a good thing for RhoMobile. But at this moment it is too early to tell. For that reason it is advised to reevaluate it after some time. The suite offers some good functions that were described in section 4, but it is also lacking in some areas. Furthermore it remains to be seen how active of a community will grow around the open source project.

Bibliography

[1] Y Soft Corporation. ABOUT Y SOFT. 2016. url: https://www. ysoft.com/en/company/about-y-soft (visited on 05/26/2016). [2] Brian LeRoux. PhoneGap, Cordova, and what’s in a name? 2012. url: http://phonegap.com/blog/2012/03/19/phonegap-cordova- and-whate28099s-in-a-name/ (visited on 05/11/2016). [3] Apple Inc. Apple & SAP Partner to Revolutionize Work on iPhone & iPad. 2016. url: http://www.apple.com/pr/library/2016/ 05/05Apple-and-SAP-Partner-to-Revolutionize-Work-on- iPhone-and-iPad.html (visited on 05/19/2016). [4] Matthew Baxter-Reynolds. What now for cross-platform mobile C#? 2011. url: https://www.theguardian.com/technology/blog/ 2011/jul/05/xamarin-monotouch-monodroid-future (visited on 05/11/2016). [5] Ben Kepes. Xamarin Raises $54 Million–Because M&A... And Mo- bile. 2014. url: http : / / www . forbes . com / sites / benkepes / 2014/08/21/xamarin-raises-54-million-because-ma-and- mobile/#372515f840d7 (visited on 05/19/2016). [6] RhoMobile Suite. Lincolnshire, 2016. url: http://rhomobile. com/. [7] Edward Correia. RhoMobile Open Source FAQ. 2016. url: https: //goo.gl/HNQhME (visited on 04/12/2016). [8] Tau Technologies. Future of RhoMobile. 2016. url: http://www. slideshare.net/tau- technologies/future- of- rhomobile (visited on 04/13/2016). [9] Google and Open Handset Alliance n.d. Android Developers. 2016. url: http://developer.android.com/ (visited on 04/06/2016). [10] Microsoft. Windows SDK and emulator archive. 2016. url: https: //developer.microsoft.com/en-us/windows/downloads/sdk- archive (visited on 04/06/2016). [11] Tau Technologies. Rhomobile roadmap. 2016. url: http://www. slideshare.net/tau-technologies/rhomobile-roadmap (visited on 04/13/2016). [12] Jon Tara. Launchpad Developer Community. 2016. url: https:// developer.zebra.com/message/83630 (visited on 04/12/2016).

55 BIBLIOGRAPHY

[13] Geoff Wacker. Nexus 6P Teardown. 2015. url: https : / / www . ifixit.com/Teardown/Nexus+6P+Teardown/51660#s112950 (visited on 05/03/2016). [14] Zebra Technologies. RhoMobile Suite Documentation. 2016. url: http://docs.rhomobile.com/ (visited on 04/27/2016). [15] Ondřej CHRASTINA. “Cross-platform development of smartphone application with the Kivy framework [online]”. Diplo- mová práce. Masarykova univerzita, Fakulta informatiky, Brno, 2016 [cit. 2016-05-05]. url: http://is.muni.cz/th/430596/fi_ m/.

56 A Charts of monthly commits

The following charts depict the number of commits per month to the master branch of the Rhodes open source project on GitHub.

200

100

0 2008 2009 2010 2011

Figure A.1: Commits per month, RhoMobile, Inc.

300

200

100

2011 2012 2013 2014

Figure A.2: Commits per month after acquisition by Motorola Solu- tions

57 A. Charts of monthly commits

150

100

0 2014 2015 2016

Figure A.3: Commits per month after acquisition by Zebra Technolo- gies