Web app development: Currently, our program has a couple of important functions that are crucial to our program. The most vital component is the resource location function. This allows the user to place resource points at their designated longitude and latitude coordinates. The user is able to update, delete, and read these points on different tabs of the application. We learned how to access the mongoDB database for these functions through a CRUD(Create Read Update Delete) tutorial. After creating that function we developed a line function with coordinate points through the mapbox API, allowing us to draw basic straight lines across two points on the map. We currently want to improve our line drawing function by being able to draw the lines by placing two points on the map. We eventually want to just draw lines in any curved or straight way. Another feature we would like to add is a constant updating function that allows the user to keep track of the resources real time, but as that is quite difficult for us to learn at the moment, we have implemented an update button for the user to refresh the resource locations. For the UI of the web app, Jane designed a nice UI that I started working towards. The default javascript code for the popups were very different from what we wanted the UI to look like, so we took some time to tweak the javascript and CSS so that it would match our storyboard UI.
Mobile app development:
With react native and expo, I was able to start the application progress. The first step was to learn about the language that react native use. It was similar to javascript but mostly it was its own language. Therefore, there was a big learning curve for all of us. The first couple weeks I mainly focused on putting mapbox onto the app but it seemed that mapbox wasn’t compatible with react native therefore, I had to work with google maps. Because the website used mapbox, I thought transferring features from the website to the mobile app would be difficult due to the different map api. However, react native was more flexible in adding more features than using javascript and mapbox. Eventually I was able to add buttons and markers when the user clicks on a random point on the map. The most challenging part in my opinion was the styling. React native had a totally different way of styling than CSS. It was more tedious to make the buttons the way I wanted to look like. I had to do many research regarding styling and how spacing works in react native. In the end, I got comfortable with this react native language. After fixing the styling of the app, it looked much better with minimalistic buttons. When I started making this app, I thought about adding a button for adding a marker, line, etc. When I tried it on react native, the button rendering was more complicated than javascript therefore I found a way to add the marker when the user taps on the map. It introduced a new problem. To show a popup of the marker the user had to tap the screen but that tapping made the code think that the user wanted to add the marker. I solved this problem by going through the api of user interface and found a “onLongPress” which differentiated from just “onPress” and it fixed the problem.
