ASE Lab Assignment 5: Ionic Framework

Ionic Application - my@ConnectFriends

Class Id: 8
Student Id: 16234180
Student Name: Moulika Chadalavada

Objective

The main aim of this tutorial is to develop a mashup application using Ionic Framework and also to write unit test cases for the developed application using Karma/Jasmine. The application should contain Login,Register and Home page.

What is Ionic?

Ionic is open source framework used for developing mobile applications. It provides tools and services for building mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices.Ionic is front end HTML framework built on top of AngularJS and Cordova.

Ionic application can be deployed on web using ionic serve command. On android device using ionic emulate android command.

Softwares/Languages Used

Ionic,WebStorm,Karma,Jasmine,Brackets,Angular JS, HTML, CSS

Application Description

The application **my@ConnectFriends** is a Chat Application where user can add friends and view already existing friends. The user can call or mail or text to Friends using this application. To develop this application used **Firebase**, which is used to develop high-quality apps. We can develop cloud messaging using Firebase.

This application contains mainly Login and Registration Page, Home Page where user can manage Friends. The in-detail view of application is explained below.

Wireframes

Initially the user can Login /Register from Home Page. Once the user clicks on Login button he will be redirected to Login page, where user has to enter email id or password for successful login.

Web View:

Android View:

In the login page if the user has not entered any values or entered invalid email id then the validation will be thrown to user.

New users can register from home page or login page (New Users Register Here). The user can to enter Name,Email Id,Password for successful user creation. If the user has not entered any details then validation will be thrown.

Web View:

Android View:

If the user has selected already existing email id the validation will be thrown, to select other email id.

Once the user logs in successfully then he will be redirected to Home page where the user can search/add new friends. If the user clicks on Add New Friends, by entering friends details he can add new friends.

Web View:

Android View:

If the user clicks on Search Friends, he will be redirected to a page where all his friends list will be displayed with their availability status.Also if the user wants to get details of single user he has to click on particular friends name, where he will be redirected to a page from which he can call/message/send email to friends.

Web View:

Android View:

In the side-menu if the user clicks on Settings he will be redirected to Settings page where he can either update account details or delete account. Also if the user clicks on Logout the session will close and he will be again redirected to home page.

Web View: