INTRODUCTION

The scope of this document is to provide a set of selected electronic learning resources that can be used by students who are assigned to work on a mobile application. The training references provide information, Recommended Reading and tutorials for the technologies used. No prior experience in developing applications for mobile devices is assumed, however, the student is expected to be familiar with HTML, CSS, JavaScript and SQL. It is anticipated that the material can be covered in approximately one month.

AN OVERVIEW OF THE IONIC FRAMEWORK AND CORDOVA

• Introduction to hybrid mobile applications
• The benefits of creating a hybrid mobile application
• The Ionic framework and the benefits of using a framework

Coding native applications for each device type would be time consuming and difficult to maintain. Although a web application runs on a server and could be accessed by multiple devices, it would only be available when there is an Internet connection and the application would not have access to the device application programming interface (API) (Mayoral Baños). A hybrid application can be considered to be a native application with a browser inside – the browser renders the HTML5 while the JavaScript and plugins provide access to the device APIs (Mayoral Baños).

SETTING UP THE DEVELOPMENT ENVIRONMENT

The Basic Development Environment

• Pre-requisites for Ionic
• Installation instructions
• Checklist for installation

The Ionic website provides all the installation instructions (Drifty Co, Installing). Make sure to review the “Linux Android note” or the “Windows note on Java, Ant and Android” if you are using Linux or Windows operating systems (Drifty Co, Installing)!

GitHub

• GIT and GitHub
• Setting up an account on GitHub
• Git workflow
• Creating branches/ “forking”
• Submitting pull requests and uploading/ “pushing” changes
• Checklist of process steps

According to Daniele Procida et al, “Git is a source code management system, designed to support collaboration” and “GitHub is a web -based service that hosts Git projects” (Procida et al). Lauren Orsini describes Git as “version control software” (Orsini, Part1).

BUILDING A MOBILE APPLICATION

Building a Mobile Application

• Tutorial to build your first mobile application
• Testing the application
• Using the browser Developer Tools

The Ionic Framework Book (Drifty Co) shows how to create an application (Drifty Co, Installing), add menus to the application (Drifty Co, Starting), test it (Drifty Co, Testing), then add content to the menus (Drifty Co, Building). It is beneficial to have an understanding of AngularJS when completing this section of the tutorial.

AngularJS and Organizing the Code

• AngularJS directives, controllers and services
• Organizing AngularJS code into modules

AngularJS handles the navigation between the different views within the application, as well as any logic and data that is stored in variables (Conceptual Overview). Having an understanding of the AngularJS concepts will help distinguish between directives, controllers and services. It will also help to learn in which files to place the code. The AngularJS tutorials available on the W3Schools website are a good place to start, since they are quick and easy to read.

JSON

• JSON for data transfer
• JSON tutorial
• JSON to access data in a mobile application

In “JSON vs XML”, the W3Schools tutorial states that whereas they “both can be parsed and used by lots of programming languages” (Refsnes Data), JSON is quicker, easier to use and easier to parse (Refsnes Data). The tutorial provides fundamental information on JSON, such as syntax, data types and conversion to/from a String, as well as how to send, receive, parse and store data with JSON.

THE BACK END

So far, the data that has been used in the tutorials has been stored locally in the device (Morony 77). The illustration of the architecture of an AngularJS mobile application in Williamson et al shows that although there is local storage, it connects to a remote source via JSON/HTTPs and typically, the data is stored in a database. Therefore, a mobile application sends requests for data in JSON over HTTP to a web server which acts as a controller to access the data in a backend database.

• The Database
• Node.js – Connecting the Application to the Database

SUMMARY

A mobile application makes use of several technologies. However, it can be described simply, as a Model-View -Controller system. The Ionic Framework is used to simplify the effort to create a consistent look for the user interface, throughout the application (Drifty Co, Welcome). As illustrated in Williamson et al, the AngularJS ngModel, ngDirectives and ngController provide the “MVC stack”. AngularJS manages the view, stores data locally in the model, and controls the data as the user navigates through the application. The mobile application uses JSON to send and receive data to/from the mobile backend which controls access to the data services. The data services are typically NoSQL databases, which store data “in a form suitable for rapid access by mobile apps”.

Author: Christianne Huber

Download Project

>> Best Student DBMS Projects using AngularJS

>> Simple Java Projects with Source Code Free Download and Documentation