Link to website: here.
Based off the feedback I received last tutorial, I have decided that the data will not be collected beforehand through the questionnaire I devised, rather, the interface I build will be the tool to collect the data and show it.
Since I want all the borders collected to be viewed by the public, I will need to create a database. After some quick research, I decided to use Googles acquired Firebase service. This is a free service that will let me keep the border drawings hosted online and viewed by anyone. It was quite difficult to get my head around this service. I did watch a couple of YouTube tutorials and managed to get my API key however, I couldn't get the code in JavaScript to work. I will definitely need to go to the Create Technology Lab and ask for some help.
I am not sure if I set up the rules for my database correctly. I need it set up so that anyone can read and write from my database. This does mean that it will not have much security however, I need for it to just work right now so I am not concerned.
The image above shows me testing the canvas and a snippet of the code.
After working on the site a bit more, I managed to get to a stage where the site does contain elements of responsive web design. It' isn't the best, I still need to work on it. I tried to include responsiveness since the beginning of coding the site as a lot of people will open my site on their computers. I want to make sure their experience is good.
With Oliver’s help, we managed to find out how to get the database to work. I turns out I was using the wrong type of database called Cloud Firestore, when I should have been using a Real-Time Database. It was just a simple switch and then when I entered these rules:
{
"rules": {
".read": true,
".write": true
}
}
I was no longer receiving the 'permission denied' error message in the console. The submitted drawing was being saved into my data base as X and Y coordinates. This was really important because later I want to use these coordinates to create a morphing animation. I think this would be an interesting way to 'manifest' the data I received as its very visual and intriguing to see lots of data all together really quickly.
Image above shows all the different border drawing entries with the accompanying text entered by the user.
Image above shows how the values of the p5.js drawing are saved in the database. These can later be exported in a json file where I can create my animation of borders.
Outcome
Below are final screenshots of the site. Image one shows the first screen a user will see. Here they can read a short summary of the project and what they can do. The second image shows where the user draws the border and enters some text. The third image shows the 'view borders' page where a user can see all the submitted borders and story entries. The forth image shows what happens when one of the smaller border images are clicked. It becomes enlarged and the story entered appears. I have also included a translation feature as the majority of users will not be fluent in English. I have tried to make the user experience as simple as possible and I think this will be really useful.
Crit
I presented my outcome and this is some feedback and general points I received for my project:
Think of different ways to show the map and the entered text my the user.
Maybe the user can hover of the map to show the text and then disappear.
The map on the p5 canvas could include local city/village names so the user can use them for reference as the draw their border.
Making the database more secure is not a huge issue at the movement. You may need to make frequent backups so people don’t mess with the database entries.
There are some small centring issues present in the interface.
There could be some more tonal variation in the buttons to make them more distinct.
The logo is a huge improvement from the first one presented.
There were some good points made by my classmates. There is still some tinkering that needs to be done with centring elements on the page. I don't think the city names are needed on that map because of how specific the target user is. I feel they will know the rough locations of territories.
Overall, I am really pleased I managed to actually develop something that can collect and store data. I am really proud of that and think it makes more project even bigger. It can live on the internet forever as a place of reference for the stories submitted, and a place of history. I am still not happy with the view borders page. I didn't manage to create the morphing animations in the time I had. This was because coding the site took a lot of my time and I felt this was more important to complete.
Comments