$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.

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

what is really giving me an headache is this part: selects a photo to upload and enters a location as a street address. I can upload the phoeasilyto easely but it doesn't allow me to submit because my adress is always not valid even if it's in the milton keynes. He is part of the code given: const submitEntry $=$ async $()=>\{$

if $($photo $==$ null$)\{$

console.log$("$No image taken"$)$;

return;

$\}$

if $($user $=="")\{$

console.log$("$No user name entered"$)$;

return;

$\}$

if $($photo $!=$ null$)\{$

$//$ Use the following code to check a location is in Milton Keynes $($approximately$)$

$/*$

if $($lat $<52||$ lat $>52\mathrm{.}3||$ lon $<-0\mathrm{.}9||$ lon $>-0\mathrm{.}6)\{$

alert$("$Location is not in Milton Keynes"$)$;

return;

$\}$

$*/$

$/**$

$*$ As provided the code is sufficent for storing and sharing images on the web, and this is good enough for the EMA.

$*$ However, if you were to use this code in a real app, you would need to add code to handle the different types of uri

$*$ and ensure that the uri is correctly handled in the addPhoto function.

$*/$

addPhoto$($user$,$ photo.uri, location$).$then$(($entry$)=>\{$

console.log$($entry$)$;

$\})$

$\}$

$\}$I Can only use Nominatim api