$1\mathrm{.}1$ Question $1$: Prototype mobile app $(25$ marks$)$

The first part of the EMA is to complete a prototype mobile app that shows what the mobile application for the competition system would look like. The Guild have received an incomplete prototype from an earlier failed contract and wish you to complete it rather than start from scratch.

A prototype service has been provided for testing, it has various limitations but allows the app to run. Further work on the service is required as part of your answer. The incomplete app and service have the following functionality implemented, where the customer can:

enter and register their name

take a photo with a camera and submit it

request and view the list of entries

vote on entries.

You need to extend this to the following five functionalities:

allow the customer to upload images from the device$$s image library

allow the customer to enter a street address of the image location and check it is in the competition area before upload

allow the customer to add a comment to an entry, and view existing comments

allow the customer to view the number of votes on each entry

inform the customer if the API reports an error.

When implementing these functionalities, please keep the following in mind:

You need to complete the existing app and service rather than start from scratch.

The expected flow of user interactions is as follows, where the customer:

enters their name.

clicks on $$register$$ if they have not done so before

selects a photo to upload and enters a location as a street address

clicks to submit the photo

clicks to view a list of photos, votes and comments

can submit votes and comments on each photo.

The system is intended to be a prototype and has significant limitations$.$

A backend API written in express.js has been provided, you will find it useful to inspect the API to understand how to implement the frontend.

As implemented, the service becomes slow after around six photos are added, for testing purposes only six photos should be used.

Nominatim currently only has limited street addresses in Virunum, in order to test the mobile app the Guild would like you to use street addresses in Milton Keynes.

To complete this task you will need to identify and use an appropriate React Native library to allow images to be loaded from the device$$s image library $($or the file system when using a PC$).$ In Question $2($a$)$ you will identify and justify your choice of library, so you may want to complete that question first.

You may, in your solution, go beyond the core requirements set out above. For example, you may want to be creative in your styling of the application, or you may wish to add functionality to allow entries to be loaded in batches. Adding such extensions will allow you to achieve the highest marks for the practical work, but you must ensure that you cover the core aspects $($see Table $1$ in the Breakdown of marks section below$)$ first, before spending time on any extensions.

Software

To implement your solution, you must use React Native using the Vite tooling as covered in the practical exercises of Block $2.$ To help you get started, in the EMA resources area, you can find a zip archive for the React Native application and Express.js service. Unzip the file and then extend the provided code to implement your solution.

For building the application, an $$EMA$$ VCE is available for you in the Open Computing Lab. All you need to do is upload the EMA zip and then follow the instructions below to get it started. If you wish to build the software on your own hardware, you must start with the same zip. This is to ensure that your submission can be run without further instructions by the assessment marker when marking; part of the task is to show that you can understand and fix problems in an incomplete solution.

To unzip the chosen file and then start the build process in the VCE, use the following steps:

$ unzip EMA$-23$J$-$v$1\mathrm{.}0.$zip

$ cd ema

$ cd ema$-$app

$ npm install

$ cd web

$ npm install

$ npm run dev

To run the service, use the following steps in a separate terminal:

$ cd ema

$ cd ema$-$service

$ npm install

$ npm run dev

Note

If the Module team issues a revision to the zip file, the name will change appropriately.

To connect the app to the service you need to edit ema$-$app$\backslash$libraries$\backslash$PhotoService$.$ts and modify line $14$ to include your VCE USERID. You also need to modify ema$-$app$\backslash$web$\backslash$vite$.$config.ts line $41$ to include your VCE USERID.

Report

In your report you must include a brief statement on how you went beyond the core requirements, if you have done so$,$ to enable the assessment marker to identify the changes made. You must also include the following table indicating your progress on Question $1$ by ticking in the appropriate space in each row:

Question $1$ progress self$-$assessment table

Not attempted Partially attempted Fully working

Image upload from a source other than the camera

Check image location