HTML5, Angular JS, CSS3 App

Project Info

The project was developed as a promotional and user engagement tool for a group of tutors based in Singapore, with the aim of popularising their services and organically increasing sales of their academic books and other education related items which are being sold across Singapore.


THE BRIEF

Client sought a math mobile application that had a gamification approach to learning tedious mathematical concepts in a "Step-by-Step" mode. Questions are grouped into fixed size "Sets" and sets are grouped into "Modules". The students see highlighted parts of the question and the answer steps are in sync for that part of the question drawn on a canvas in sequence, basically stepping the student in a hands-held way through the process of solving the question. Users are rewarded for correct answers, and prompted to always improve on their last score, thereby creating a self-learning and addictive learning environment. The client required the application to be available both through PC as well as handheld devices, with offline and online functioning capabilities.


Solution Overview

To achieve this, Angular JS framework was selected for the Hybrid technology that can be built with PhoneGap. PhoneGap is an open source framework that allows you to develop cross device capable mobile applications in Html5 and JavaScript. PhoneGap exposes native device functionality through the use of various JavaScript APIs. Angular JS allows you to build rich browser applications and also brings core UI concepts like MVC to browser.

The client's previous inventory and client management architecture had limited capabilities, which resulted in siloed data, accessed through excel sheets. This data extraction was possible only through logging into company's web server database, and the information of leads and opportunities was not easily accessible to the ground staff, denying them key data which was critical to their sales & marketing efforts.

The mobile app had embedded SVG files to display graphics that portrayed the end solutions. Students can purchase further sets via PayPal integration both through web and inside the mobile application. The app identifies the student’s strength and area of improvement on the basis of tests undertaken. There is also an editor with which the contributors can add content (questions and test sets) that the student can use.


Technology Overview

HTML5 framework

  • Mobile Compatibility: HTML5 is often used for mobile websites and mobile applications on Mobile operating systems such as Firefox OS, Sailfish OS, Tizen, and Ubuntu Touch. It provides developers with tools such as Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, and many more.
  • Offline Support:While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This could be overcome with the inbuilt support that comes with the latest modern browsers when blended with HTML5 local storage, it opens a new arena for storing any relevant user information without being synced to your central server. In this project we had utilized to store profile details, user settings, questions attended, results etc at offline mode and when the device is connected to internet, those information is synced to server database.
  • Canvas Drawing: When it comes to interactive graphs, drawings etc without any interaction of Flash or advanced programming skills, HTML5 has an upper hand on this. We had utilized the canvas capabilities to render graphs, display animated interactive steps in this project.

Angular JS

AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript, while shoring up some of its glaring deficiencies. With the evolvement of Angular Mobile and other UI kits, it covers up what Bootstrap 3 is missing in terms of switches, overlays, sidebars, scrollable areas, absolute positioned top and bottom navbars so on. Also the client had a notion to have a desktop version of the app, where Angular JS is particularly good in being a standalone JS framework to do the task.

  • MVC Approach: Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. That’s a lot of work. Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connects them.
  • Templates:In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
  • Declarative HTML Approach: Angular uses HTML to define the app’s user interface. HTML is a declarative language which is more intuitive and less convoluted than defining the interface procedurally in JavaScript. HTML is also less brittle to reorganize than an interface written in JavaScript, meaning things are less likely to break. Plus you can bring in many more UI developers when the view is written in HTML.
  • POJO Data Models: Data models in Angular are plain old JavaScript objects (POJO) and don’t require extraneous getter and setter functions. You can add and change properties directly on it and loop over objects and arrays at will. Your code will look much cleaner and more intuitive. To differentiate it from the traditional sense of data models, Angular calls them “scopes”. All properties found on the scope object are automatically bound to the view by Angular. Meaning, Angular quietly watches for changes to these properties and updates the view automatically.
  • Two-way Data Binding: You go around making your webpage, and keep on putting {{data bindings}} whenever you feel you would have dynamic data. Angular will then provide you a $scope handler, which you can populate (statically or through calls to the web server).
  • Effective Use of Services: Controllers in Angular are simple functions that have one job only, which is to manipulate the scope. For example, you can use it to prefill data into the scope from the server or implement business logic validations. Unlike other frameworks, controllers are not objects and don’t inherit from anything. Services are designed to be standalone objects separate from your app and allow your controller to be remain lean and dedicated to the view and scope that it is assigned to. Of course, implementing services is not required and it is perfectly acceptable to do some light lifting inside your controller to avoid over complexity.
  • Integration of filters in controllers, services and directives:This is another effective feature in Angular where you can inject a dependency with name to your controller or service. This filter reduces arrays into sub arrays based on conditions.
  • Unit Testing: The whole of Angular is linked together by Dependency Injection (DI). It’s what it uses to manage your controllers and scopes. Because all your controllers depend on DI to pass it information, Angular’s unit tests are able to usurp DI to perform unit testing by injecting mock data into your controller and measuring the output and behavior. In fact, Angular already has a mock HTTP provider to inject fake server responses into controllers.This beats the more traditional way of testing web apps by creating individual test pages that invoke one component and then interacting with it to see if it works.

Project Details

  • Mobile Application Development

Technologies

  • HTML5, CSS3, AngularJS
  • SVG Mathematical Editor
  • Phonegap

Related Projects