The application must have a sign up and login activities.
A Main page
The Page should be Mashup of at least Two Web Services (refer to the web services from the spreadsheet). One of them should be from the list of knowledge/Machine learning/AI services and that you haven’t used in your previous work.
Testing
Write at least 3-unit test cases related to your application
Approach
Login/ Register Interface
Using two ngmodel to bind the data mobile phone and password which are necessary to login
Two functions login() and pushRegister() are event binding for connecting html to the ts file.
Login Function
It was defined in login.ts, using storage to retrieve the user information from the local storage
If the get status is ok, then return to a page showing 'success'
otherwise showing error on the bottom of the simulator.
Dismiss and pushRegister function
Dismiss will dismiss the window
pushRegister will navigate the page to the home page with the navigation controller
The UI of more page
Using *ngIf to decide whether the user have logined in or not
The initialization of Boolean variables Logined and notLogined is defined in the more.ts file
Functions in the more.ts
showmodal() will automatically create a new window under the first level page 'more'
loaduserpage will decide whether the user enter a valid mobile number and password.
If so, the Boolean variables will be converted respectively.
Register.html
Neat layout for the Register page.
It is literally a by-product from the button of Register
Those ng model connect those variables from the backend to the frontend
Register.ts
Basically the same as the login.ts page. But one thing is tricky, the registered information cannot be registered again
Considering the time issue, no testify of enter information was processed in this lab
Baseui
That file was like defining two useful UI control function to handle the waiting of loading process.
At the deployment stage, you could see for example when you are waiting for logging in, you will see a simple icon which is pre-defined by the ionic component
RESTful / provider
This is an important file for storing apis and define the calling functions of those methods.
Observable properties are used
That is a login api
That is a Register api
HTTP interface method, IMPORTANT!
Error Handling (Extra)
Homepage Api
Google search API and text to Speech API
Layout of HTML
The click event binding in home.ts
Deployment
More page for login/register
Login page
Register Page
Showing loading
Successfully log in
The home page for api testing
The result view
Karma testing snip
More unit-testing
Evaluating and limitation
I have to thank my co-worker Sun, Chen and myself for engaging a lot in this class and the project.
No matter how the grade as the result, I did learn a lot from the process of learning.
I can remember I paid like more than 20 hours for this assignment, systematically learn the angular and ionic, even it just end up at entrance level.
Hope we can still move forward and make more progress.
There are many limitations, and I am not going to illustrate them all. Sorry!
