Build Ionic/Cordova app and REST calls

This project is an Iconic/Cordova project, so ionic is a mobile development framework build for angularJs. I didn’t work with angularJs previously. Those technologies are new stuffs for me.

Firstly I had to setup my machine for the ionic environment. So Firstly I installed the necessary packages to the machine. Those are Ionic and Cordova.

npm install –g cordova

npm install –g ionic

(I already installed the node to my computer that’s why I use npm for the package installation otherwise we have to install node J)

Ionic is very easy to understand because in the ionic framework site, it provide lots of things to use when we develop the ionic project. Such as CSS component, JavaScript, icons, kind of things. Those components are very easy to use. And also we can build attractive and user-friendly applications by using Ionic. It is faster than normal android and iOS applications because the applications run with JavaScript.

Cordova is a kind of converter. When we make project by using Ionic we can convert that project in to Android or iOS by using Cordova. These Cordova apps are not the real apps like pure android and IOS apps because those Ionic/Cordova apps are web applications which are basically contain HTML (HTML5) pages. Those applications run on rather the low-level browser shell like iOS’s UIWebView or Android’s WebView. As well as Cordova applications are very useful for business applications. Because they are lightweight and main functions are

  • Get inputs
  • View some data
  • Update data
  • Delete data

We cannot build other applications by using Cordova like games.

After get an idea about the ionic and Cordova I started to build the project.  In case of ionic they provide some project templates to build our apps. Such as tabs, blank, etc. Firstly I use the tab template for my testing thing for learning ionic after that I use the blank template to build my application.

Before install the template we should allocate proper location for the project. I made a new folder in my project folder and after that open command prompt (cmd) from that particular folder.

To setup the blank template

ionic start applicationName blank

(remember we must install ionic globally before these steps otherwise we cannot use ionic packages for the installation)

After that I added the platform to the application

ionic platform add android

ionic platform add ios

After that we can see the ionic blank template application in our created folder. Then start a new command prompt from that blank template folder.

ionic build android (I use it for android only so I test for android only)

This step is to build our app for android view. If we want to view it in our android or iOS emulator

ionic emulate android

(Make sure your computer has already installed android or iOS emulator before 😛 )

Emulator is not efficient thing for testing ionic application because it waste lots of time for emulate the application. There is a way to avoid it. We can test our application in our browser as well.

ionic serve android

That view is not looks good. Because it is web view. So there is another way to test.

ionic serve –lab

That view is looks like mobile. And it provide both android and iOS views. It looks like that.

After that we can build our application according to our needs.

Making REST calls with Ionic/Cordova (AngularJS)

After complete the project i had to do some web services. So our company has a server and I build a database part on it.

POST request

$http({
 method: 'POST',
 url: 'URL',
 params:{"dataKey": dataKey},
 headers: {
 'Content-Type': 'application/json',
 'Authorization': auth
 },
 data: msg
 
 }).then(function successCallback(response) {
// to do after success callback
 console.log(token);
 }, function errorCallback(response) {
// to do after error callback
 });

GET request

 $http({
 method: 'GET',
 url: 'URL',
 headers: {
 'Content-Type': 'application/json',
 'Authorization':auth
 },
 params:{"dataKey": dataKey}
 }).then(function successCallback(response) {
// successCb(response);
 }, function errorCallback( response) {
// errorCb(loginForm, response);
 });
Advertisements

Node, Express,Mongoose – Student Enrollment System

Student Enrollment System ( GitHub-Student Enrollment System )

This is the first project of my intern period at GT Nexus an Infor company. And it is a group project. I am working with a partner name Tharkana Kodagoda. So it is mainly focus about learning new technologies. Our project is basically about student enrollment system for university. It has several functions as well. We got our requirement from our mentor and he explained about it, that what we should actually do. And after that we started to design our project based on UML diagrams. We used Microsoft Visio 2013 to draw those designs. After that we decided to draw UI mockups for the whole system by using online tool call “www.moqups.com”. There are three user types those are student, course coordinator and admin. We divided task for particular user type according to the user requirement. And we decide to make this project open source under MIT License.

Project Requirements

These are the requirement for the project. There are few optional requirements in the list. We didn’t design those requirements yet. Because we have to complete this project in 3 weeks of period. If we can finish the project before expected time, we willing to add those requirements as well.

  1. student registration for a course
  2. admin user
    1. view all details and add new users (course coordinators)
  3. course coordinator
    1. enroll a student
    2. view student details
    3. view student reports
    4. add grades
    5. view student attendance (optional)
  4. student
    1. view course schedule
    2. view grades
    3. comment on course module (forum, and optional)

After identify the requirements we started to design our project.

Design

We started to design our project with UML diagrams. because UML diagrams provide better overview of requirement. And also we can design our implementation according to that.

After analyzing the requirement we identified three user types and what are the task for each user types. Then we draw the use case diagram

usecase
1.Usecase Diagram

And also we identify the activity work flow of the system. And we drew some activity diagrams for them.

registerActivity
2.Activity Register
enrollSubjectActivity
3.Activity Enroll

And also we drew the class diagram for the system. Because then we can get clear idea about attributes and functions for relevant user types. And it was really helpful for us to design the database as well.

class
4.Class Diagram

 

And after designing the UML diagrams we had to design UI mocups for our system. We used online tool for these drawings call “www.moqups.com” ,these are the images of our UI mocups.(if they are not clear follow this link- UI mocups  )

Login-

This is a simple login page each and every user types have to enter the system through the login page .

login
5.Login

Register new student-

RegisterStudent
6.Register

Student Details-

StudentDetails
7.Student Overview

Student new enrollment-

SubjectDetails
8.Enroll New Course

Coordinator add subject-

coordinatorOverview
9.Coordinator Add Subject

Coordinator accept student request-

Coordinator AcceptRequest
10.Coordinator Accept Request

Coordinator add students for particular subject manually –

CoordinatorStudent
11.Coordinator Add Student for Subject

Admin view-

Admin
12.Admin View

Implementation

After completing design part we start our implementation part. We had to start our server side first because it will be really helpful for design the client side.And our mentor also told us to develop server first. So we started it.

All the technologies we used are new for us. because this project is just for learning new things.

-Technologies-

  • Server side-NoedJS , ExpressJS, Mongoose, Passport
  • Database-MongoDB
  • Client Side- ReactJS, Javascript, Bootstrap

NodeJS-back-end platform / web framework. It is very faster than normal server languages like java EE, c# because it is a scripting language.

ExpressJS– Is a back-end web framework and it is basically does is enables us to create web applications easily  by providing a slightly simpler interface for creating your request endpoints. It provides lots of functions to build a web server, such as……Most of the time ExpressJS work with NodeJS.

$ npm install express --save

Mongoose- Is an object modeling package for Node that essentially works like an ORM (Object Relational Mapping)that you would see in other languages. Mongoose allows us to have access to the MongoDB commands for CRUD simply and easily.

$ npm install mongoose --save

var mongoose = require('mongoose');
var testSchema = new mongoose.Schema({

//add attributes 

});
mongoose.model('semester',testSchema);

MongoDB- Is a non relational database method. So it is easy to work with nodejs because is already has customized packages like mongoose to make easy CRUD operations.

* In next post I’ll discuss about the server side implementation and Database design in this system.