Rakesh Mahato Hybrid Mobile Application Development Helsinki Metropolia University of Applied Sciences Bachelor of Engineering Information Technology Thesis Date 17 May 2016 Abstract Author(s) Rakesh Mahato Title Hybrid Mobile Application Development Number of Pages 36 pages Date 5 May 2010 Degree Bachelor of Engineering Degree Programme Information Technology Specialisation option Software Engineering Instructor(s) Jaana Holvikivi, Principal Lecturer This project was carried out as a final year project and the purpose was to create a hybrid (Android and IOS) location-aware mobile application for car renting and reservation. The application created can be used by a car rental company for management of car rent and reservation. The mobile application was developed using Ionic open-source SDK compiled with Apache Cordova which is an open-source mobile development framework. HTML, CSS and JavaS- cript were used in building the user interface. Node.js was used as runtime environment and MongoDB as database. During the project a hybrid mobile application, capable of accessing different features like a camera and GPS and creating a reservation dynamically, was developed. The developed application can be used for renting a car. Clients can also comment and rate the car they used. For the company providing a renting facility, the application can be used to manage and monitor the system. Initially, the application is in the English language. Keywords Android, IOS, Ionic, Cordova, Angular, runtime, JavaScript framework, reservation, renting Contents 1 Introduction 1 2 Mobile Technology 2 2.1 Mobile Applications 3 2.1.1 Single Page Application (SPA) 4 2.1.2 Native, Web and Hybrid Applications 4 2.2 Client Server Communication 7 2.3 Web Tools 8 3 Technology Used 12 3.1 JavaScript Libraries and Frameworks 12 3.2 Angular.js 14 3.3 Apache Cordova 15 3.4 Ionic Framework 17 4 Mobile Architecture 18 4.1 Android 18 4.2 iOS 19 5 Application Development 20 5.1 Requirement Analysis 20 5.2 Development Environment Setup 21 6 Implementation 24 7 Testing and Debugging 32 8 Result and Discussion 33 9 Conclusion 36 References 37 1 1 Introduction Use of the internet-based web applications, computers and smartphones has immensely increased during the last decade, as well as their production. As the number of users are expanding they are also carrying more and more equipped devices that comfort them to go through. No one would have had predicted in the early 1990’s that the web technology would get developed as it is now. Modern web applications which are data-driven used to be static pages with nothing more than plain text displaying in the browser. Browsers used to be a medium through which the internet was accessed along with people also used email and FTP. Nowadays people tend to use many other devices like smartphones and tablets to use the internet through a wide range of applications. Technology has immensely developed its concern towards the mobile and has taken new dimensions after development of Android and IOS operating systems for mobile phones. The mobile market started taking shape from 2007-08 and has travelled a long way in the last decade without stopping. Desktop and laptop users have been dropping slowly; they seem to be early adopters in front of mobile users. Technology has changed with time as the number of users migrating from desktop to mobile and table suggests. The widespread adoption of smartphones and other small size devices around the globe is rocketing high. People are more attracted by small size screens for various activities like going online, sharing information and for entertainment purposes as compared to desktops. For example according service seller for pets like Morrr (Finland) suggests that more than 60 percent of the traffic comes from mobile de- vices and applications [1.] Moreover, at the present situation people are magnetized by the social media and internet where mobile applications play an important role. The main objective of this project was to design and implement the front-end part of a hybrid application for iOS and Android. The project was out carried as a practice project targeting at certain companies related to the product area. The project was carried by a team of two students each with their own responsibilities. My responsibility was to com- plete the front-end part of the application with a UI (User Interface) design. The project is basically for car renting purposes with a selection of cars, commenting and rating, login page, adding to favorites and home page with some promotions. 2 2 Mobile Technology Overall development in the mobile technology and adoptions among mobile users have achieved remarkable milestones. The dominance of the desktop for accessing the inter- net for two decades has been overtaken by the mobile platform. People no more use only the desktop as the primary gateway to access internet. For the first time in March 2015, desktop users were suppressed by mobile users among adults in terms of using internet [3]. Figures in 2015 say that there are 4.9 billion subscribers out of 7.2 billion subscriptions around the world. Americans seems to be fast adopters of smartphones while in Europe mixed response in terms of adoption was seen. For instance in Italy in 2014, 2 smartphones were found out of 3 household which shows growth from 2012(1 out of 3). The survey of Google suggests that “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan” [3.] By 2017 the estimated numbers of mobile users will be almost 5 billion [2]. A mobility report presented by Ericsson shows forecast data, analysis on mobile traffic and subscriptions and current market trends in the adoption of technology worldwide [22]. Moreover, a prediction made by Ericsson suggests that mobile users around the globe will reach 6.1 billion by 2020. In addition the Ericsson mobility report 2014 and 2015 also gives the following facts:  People older than 6 years, 90 percent will have at least a mobile phone and sub- scriptions to a smartphone by 2020  By 2021 more than 70 percent of mobile subscriptions will be smartphones in Eu- rope, where mobile traffic will increase by 9 times compared to that in 2015 and reach 11 ExaBytes (EB)  In 2014, India with 18 million subscriptions and China with 12 million subscriptions lead as fastest growing countries in terms of new mobile subscriptions with 110 mil- lion around the world  New smartphone subscriptions were added by 800 million in 2014 spring making 2.7 billion worldwide  There will be a 10-times increase in mobile video traffic contributing 55 percent of to- tal mobile data by 2020. For more information, a full and extended version of mobility report by Ericsson which is available on the official website of the company. [2] 3 Figure 1: Fixed and mobile subscribers [2] Figure 1 above shows the comparison of different types of subscriptions. By 2020 there will be 7.7 billion mobile broadband subscriptions. For some reason the fixed broadband will be in competition with mobiles in some segments. Due to more use in the enterprise level and for household purposes fixed broadband users will be three times more than fixed broadband connections. 2.1 Mobile Applications Depending upon available options people use both mobile websites and applications, but again mobile application win the race as they are usually more user-friendly and easy to use. A mobile website is similar to any other websites that are built on browser-based pages supported by HTML and the CSS standard. Mobile websites are designed for small-size screens using media queries (defining separate design property) and also some of them have specific features for mobiles like click to call or location-based func- tionalities. But again people do not want to open a browser, type in a URL and wait for data to be rendered the in browser. They rather want to use a mobile application which 4 they can download once and use whenever they want. There are three options for de- veloping a mobile application namely Web, native and hybrid applications that will be discussed in the following section 2.1.2. 2.1.1 Single Page Application (SPA) Web applications follow a round-trip (multipage) model where a request is sent to the server through user interaction like form submission. The server sends as a response back to the browser completely new HTML documents. In this approach a series of HTTP requests are sent by the browser where the server by generating HTML documents han- dles the requests. Most of the web applications in the past and these days are still fol- lowing the same way but not the least. There are many drawbacks with this approach like, the client has to wait for long to get the requested page loaded, managing and pro- cessing this process requires large server infrastructures and uses high bandwidth as the requested documents has to be self-contained (the same content being included in every response )[5, 44-45]. A single-page application follows a different approach. After user interaction the initial HTML document is still sent to the browser but it never gets reloaded again. Only some fragments of the page get reloaded asynchronously as per the user interactions while other content remains unchanged. Ajax which is somehow an old technology makes it possible to develop single-page applications by making asynchronous loading. Angular (will be discussed in following chapter) makes single-page application more efficient by a manageable code, fewer DOM dependencies, providing smooth transition and rich user experience. 2.1.2 Native, Web and Hybrid Applications The development in the web standards has also changed the way developers think and work. HTML5 not being very smooth even very soon became first the choice for applica- tions because of its versatility. HTML5 has in the last half decade shown its effect on also mobile applications with support of powerful JavaScript and other frameworks and tools. A mobile application is a self-contained program that pulls content from powerful internet like websites do or downloads data, depending on whether the application is 5 online or offline [4.] Native applications are built on platform (operating system) depend- ent strategy, meaning different platforms have their own tools and technology required. Native developers need to strictly stick with specific programming languages, SDK and other tools for the target platform. For example the programming language to develop an application for iOS is objective C (recently swift), for Android it is Java and C# for Win- dows is required. A hybrid application can give freedom for developers to use their web development skills like HTML5, CSS and JavaScript to develop a mobile application. Once the code is created, it can be used for various platforms by editing only a small portion targeting at a specific platform. A web-based application is another type of mobile application, as websites are responsive and sometimes designed to look like a real ap- plication. Written in HTML5 (JQuery Mobile and Sencha Touch can be used) web appli- cations follow "write-once-run-anywhere" rules. Hybrid applications give a similar look and feel to users as native do without letting them feel as not native. A hybrid approach of application development shows its weakness when it comes to 3D gaming like applications. Hybrid applications are also considered slow while native applications are believed to perform fast. Native on the other side has access to all hardware and software functionalities. Multi-touch, documentations, fluid animations, ease of use and faster graphics feel are some of the functionalities that can be only achieved with native applications. IDE (Integrated development environment) supported with debugging, version control and other important tools required for devel- opers is used in the development of the native application. 6 Table 1: Comparison of native, HTML5 and Hybrid applications based on mobile features [6]. Native HTML5 Hybrid Application Fea- tures Graphics native API’s HTML, canvas, HTML, canvas, SVG SVG Performance fast slow slow Distribution Appstore web Appstore Device Access Camera    Push Notification    Filesystem    Geolocation    Gestures Swipe    Pinch, spread    connectivity Online and offline Mostly online Online and offline An overview for the comparison between different types of mobile applications is shown on the basis of the features. Table1 shows that a hybrid application is somehow between native and HTML5 that support less than native and more than HTML5. In the rapidly growing world time is an important factor and no one would like to waste money. Hence, for application developers it is very important to select a better option among the available technologies in order to deliver best and fast to the user. Native applications provide best performance and enable access to all of the underlying func- tionalities of the mobile phone they run on. A hybrid application on the other hand has the advantage that one application looks native on all the devices with different platforms. One codebase automatically changes the UI no matter which device it is running on. The building blocks of a hybrid applications is HTML and JavaScript. Both native and hybrid applications can be downloaded from the vendors market Play Store for Apple and Google Play for Android. 7 2.2 Client Server Communication The communication in the world of computers is totally different than the real world with people. Protocols and server are two things that make it possible to exchange infor- mation. There are sets of defined rules to communicate with software, hardware and networks (internal and external). Those sets of rules for communication are known as protocols and are often known as the backbone of the network. Protocols can be different for different tasks and networks. Protocols are available in all the various layers of com- munication from the physical to application layer. TCP/IP, HTTP, SOAP, UDP, FDDI, FTP and SMTP are some examples of protocols. Figure 2: Sequence for basic data poll and HTTP long push [7] Figure 2 on left shows the basic data poll sequence which is helpful for achieving near real-time performance. Standard web protocols and the ports are used to complete the communication. On the right, HTTP long data poll sequence is shown and can be used in HTML/JS. HTTP push is categorized into HTTP push and HTTP long polling. For the communication, the server plays as important a role as protocols. Defining tech- nically a server as a device or software depending upon use case. In other words, any program which is capable of responding requests from another program or device is known as a server. Servers may have different functions such as file server, print server,