Hybrid mobile application development: eReader use-case

A hybrid application is a mobile application that combines HTML5 elements in the form of a mobile web application and elements of a native application allowing the use of the native features of smartphones and the distribution as an application on mobile platforms applications [1]. In this article, we are showing a use case of the development of a hybrid mobile application. The application will work on Android, Windows and iOS platforms. The ultimate goal of our project will be to build an application that will facilitate the learning of children through multimedia sounds. In other words, we will be talking about bringing digital learning support to teachers to make learning easier for the little ones.
In this additional blog, we would like to share with you the knowledge we have gained throughout this project, the general knowledge and some good practices to adopt when you embark on the development of hybrid mobile applications. As development environment, we have used Android Studio.

General culture

The development of hybrid mobile applications is based on Web development. However, it also relies on mobile native technologies in order to use certain features of the smartphone. To complete your learning, you will need basic knowledge in HTML, JavaScript and CSS. You will also need to use tools such as the JavaScript runtime environment called Node.js and possibly a good framework.

Framework and libraries

Node.js

Its first version dating from 2009, and designed to create real-time applications where the server is able to push information to the customer, Node.js is a JavaScript development platform. It is neither a server nor a framework; it’s just the JavaScript language with libraries that can perform actions such as writing to standard output, opening or closing network connections or creating a file. Node.js uses as library npm [1], which is actually the command of the package manager installed with Node.js. It allows searching, installing and uninstalling packages. The package registry can be found on the website at npmjs.org. Node.js is therefore not a simple scripting language running on a pre-existing server. In fact to self-code the different layers of the server with Node.js, it will be necessary to set up [2]
• The HTTP server itself, with the management of different HTTP messages
• Routing requests to the right server pages
• What to get the parameters entered in the URL a system for sending content to the client based on the URL

How to install Node.js

You can use the command $ npm install - <options> <package>.

AngularJs

AngularJs is a JavaScript framework that extends HTML to make it dynamic, and allows you to develop your own HTML tags and attributes [3]. It is a framework that wants to be extensible and pushes towards a structured development, in layers, the aim is not to add simple animations to the DOM (Document Object Model), but to bring an application aspect to the front office. The AngularJs library is structured around a few key concepts such as the concepts that characterize the most AngularJs are: MVC (Model-View-Controller) architecture, bidirectional data binding, dependency injection, routing and tests. We should note that bidirectional data binding is made possible thanks to the scope. The scope is the “binder” of an AngularJS application; it contains the variables and functions that link views and controllers (or others). It allows the data to be updated by the views and the model. Dependency injection allows you to load certain parts of the application only when necessary. And one of the main assets of AngularJS comes from the fact that written applications is fully testable.

How to install AngularJs

First of all download the framework using this link: https://angularjs.org/
Once your file is located in the directory linked to the download, copy it in a folder (named AngularJs) you will create on the desktop and uncompress the file. The files that were archived are then displayed. Your AngularJs framework is now installed!
If the above steps do not work, you will need to install 7-Zip or Winrar.

Ionic

The ionic framework is a mix of tools and technologies to develop hybrid mobile applications quickly and easily. It relies on AngularJs for the web application part of the framework and on Cordova for the construction part of the native applications [4]. This open source framework makes it possible to develop a deployable application on several environments such as a mobile application for systems such as Android or iOS or Windows Phone or a website [5].

How to install Ionic

Ionic relies on the Node.js platform and more precisely the NPM (Node Package Manager). After Node.js is installed, you will install Ionic by launching the package install command via npm $ npm install -g ionic cordova

 

Selected tools for our use case Monaca

Monaca is the application development platform that provides all the tools necessary for cross-platform mobile development, including coding, debugging and generation [6]. Based on the open source Apache Cordova (still called PhoneGap), Monaca provides a full suite of resources including Cloud IDE, local development tools, a debugger and backend support.

What I need to use Monaca

To use Monaca Cloud IDE, all you need is a stable Internet connection and a latest version of the Google Chrome browser. You may also need a mobile device to test your applications. To speed up the development of your application, you can install the Monaca Debugger application on your mobile device. It lets you test your apps instantly on your device without creating or installing each time you make code changes.

You can also expand on your local computers without the need to use Monaca Cloud IDE. Just install Monaca Localkit and Monaca CLI

References
[1] https://nodejs.org/en/
[2] http://www.gchagnon.fr/cours/dhtml/node.html
[3] https://www.synbioz.com/blog/introduction_a_angularjs
[4] http://www.duchess-france.org/presentation-de-ionic-framework/
[5] http://ionicframework.com/
[6] https://monaca.io/

Leave a Reply

Your email address will not be published. Required fields are marked *