kai_871/notes.md

notes

You are required to build:

• RESTful web services for search and maintenance of “Information of Automated Teller Machines of retail banks” provided by the Hong Kong Monetary Authority.
• A web-based application as a client to the RESTful web services in (1). The client offers enquiries, visualization and maintenance of the information of ATM.

Additional requirements that must be fulfilled are:

• The data returned by the web services must be in JSON format. No client-side formatting instructions (such as HTML tags) are allowed to be included in the JSON returns. The RESTful web services must be implemented with PHP. For storing ATM information, you may use local MySQL database or a cloud-based database platform at your own choice.

• The client must employ significant JavaScript for AJAX and DOM manipulations so as to improve user experience. Refreshing and reloading of client pages must be severely limited. In other words, a Single Page Application (SPA) is expected.

This coursework consists of FOUR parts, which are specified in subsequent sections.

Part 1: Data Conversion (10%)

https://data.gov.hk/en-data/dataset/hk-hkma-bankbranch-banks-atm-locator

You are required to develop a server-side command tool to get the dataset from the link above and store the data into a database. Your tool must download, convert and store the data records on the fly without human intervention.

In other words, you are not allowed to download and save the dataset as a local file, then convert and insert the records into the database by issuing separate commands.

Instead of issuing commands, you may include the functionality in this part in your client application (see Part 3)

The dataset is available in three languages: English, Traditional Chinese and Simplified Chinese. While it is mandatory for your web application to support English, you may opt to support Chinese too (see Section 3.4).

• Design the database schema carefully and make sure that it matches the dataset and supports the server APIs. You are advised to include a unique ID for every record.

• Shown below are the first few records and the last record in the dataset in English

Part 2: Design & Implementation of RESTful Web Services (Total 30%)

You are required to develop RESTful web services that allow retrieval and maintenance of ATM records in your database constructed in Part 1. The data sent from your server to its clients must be in JSON format.

NOTE:

• PHP must be used in implementing the web services and no high-level framework such as CodeIgniter and Laravel can be used.

GET / PUT / POST / DELETE

2.1 Further note on service invocations

2.2 Further note of data format Any data returned from the server to clients must be in JSON format. Shown below is a possible return from the server when the client has requested a list of ATMs of the Bank of China in the Yuen Long district.

2.3 Error Handling (5%)

e.g. http://www.myserver.com/atm?district=Tsuen+Wan

Part 3: Client-side Application (Total 30%)

3.1 Web application to enable retrieval of information on ATM records (10%)

Design and implement a Single Page Application (SPA) that uses the RESTful services implemented in Part 2. Your application should provide an interface for users to enter the retrieval criteria like service hours and location district. As a SPA, refreshing and reloading of the entire page is prohibited. Instead, JavaScript, AJAX and DOM manipulations should be used to make requests, retrieve server replies, and updates web contents for displaying retrieval results.

NOTE:

• The client-side application must be written in HTML and JavaScript.

• Use of UI libraries such as Semantic UI and Bootstrap are allowed but only limited for providing UI effects and input form validations.

• The use of jQuery is only limited for UI effects. The use of jQuery for making AJAX requests to server APIs is strictly prohibited.

• The use of high-level frameworks for application generation or completing a server request cycle is strictly prohibited.

  3.2 Web application to maintain information on ATM records (10%) Your application should provide web pages to allow maintenance of ATM records including addition of a new ATM, removal of an existing ATM, and update of ATM details. The maintenance functions must employ the RESTful services implemented in Part 2.

NOTE:

• The pages for maintenance of ATM records can be separated from the retrieval page in (3.1) as they are essentially different functionalities. However, excessive refreshing and reload should still be avoided for ensuring better user experience.

3.3 Usability and User Experience (5%)

You have to design the operation flow very carefully. For example, a typical operation is to search for ATMs in a specific district, then select one of the listed ATMs for viewing the details. A very bad design is to request the user to remember the ID or other fields and go to another page for viewing the details by entering the ID or other fields again.

3.4 Challenging features (5%)

You are encouraged to design and implement challenging features besides those stated above, such as locations of ATMs on a Google Map, path going to a selected ATM, support of Chinese, etc.

NOTE:

• When you design the user interface in the client application, make sure that it is user-friendly and is consistent in its appearance in terms of styles, font sizes, and the use of colours. The operations must also be intuitive to novice users.

Part 4: Presentation, Demonstration and Documentation (30%)

Presentation (5%):

• You are required to deliver a 5-minute PPT presentation on what you have done, the design of the server API, tools and techniques employed, critical evaluation, further enhancement, etc.

Demonstration (5%):

• You are required to deliver a 10-minute demonstration on your application, including the server-side data conversion program, the server APIs and the client-side application.
• For the server APIs, you need to use Postman or similar tools to make requests to the server and to show the JSON returns from the server, including both normal data and error codes/messages.
• Note that it will be the students to lead the entire demonstration to show the functions and features rather than the marker to guide it.

Report (20%)

• You are required to submit a written report to document the design and technical details of your application.

You have to submit THREE items listed below.

(1) Presentation PPT (2) Source Code:

• Submit all source files including the server codes, SQL for creating and manipulating the database, and client-side codes (HTML, js, images, etc.). If you have employed any external libraries, they must also be submitted.
• Organize the files into appropriate folders with self-explaining folder names.
• Compress all source files and folders into one single ZIP file (zip only, rar and 7zip NOT allowed).
• Submit the ZIP file to Moodle before the deadline.
• The submitted source codes MUST BE THE SAME as those used in the demonstration. (3) Report:
• Submit the report to Moodle before the deadline.
• Only MS-Word or PDF formats are allowed.

Submittion: (1) Presentation PPT (2) Source Code (3) Report

multilinghal: english / chinese laravel + react(SPA)