Part 4: Lost and Found animal object structure progression.

Greg Munker
5 min readSep 17, 2017

--

This article is part of a series written by Matthew Madden and myself. On our most recent chingu session and progress on a non-profit application we are building for HipD. If you would like to read this series please click below for part #1.

No really… NoSql..

NoSQL definition
A NoSQL (originally referring to “non SQL”, “non relational” or “not only SQL”) database provides a mechanism for storage and retrieval of data which is modeled in means other than the tabular relations used in relational databases.

That’s a whole lot of words for someone who knows nothing about databases… In a VERY lamen term, a NoSql database is big JSON file, or to go one step further if you’re unfamiliar with JSON. It’s a more defined Javascript Object.

The group we are working with has been using spreadsheets to maintain all of their data, and we decided this could be improved upon. Spreadsheets are big and clunky at times if not maintained well, with multiple hands passing it around, and hundreds/thousands of entries it leaves too much room for errors, duplicates or the like.

Matthew Madden made the decision before I joined the group, and would have recommended it right away if he did not to build a database, and use NoSql. To be even more specific a Firebase database, which we have further built out to use more of the firebase suite (more on that another time).

that.state =

{
Name: “”,
Location: “”,
Gender: “m”,
Color: “”,
Breed: “”,
Status: “lost”,
Type: “dog”,
Date: “”,
fireRedirect: false
}

This was an Animal when I joined the group. To get the app up and started this was perfect, it handled a single animal, with all the basics. As @mmadden and myself started adding in all these new features to the app this needed to transform with the app.

There were a few iterations of the object shape over the course of 2 months. To go over each one would take 2 months in itself I feel. We added objects, arrays, and lions oh my…

With the final push of Google Maps being integrated within the app came this.state of the Animal.

this.state =

{
breed: “Boxer”,
color: “White and Brown”,
history: [
{
date: “Wed Sep 06 2017 15:38:27 GMT-0700 (US Mountain Standard Time)”,
lat: 36.174188357098366,
lng: -86.68075561523438,
region: “Maplecrest”,
sex: “female”,
status: “lost”
}
],
id: “-KtJeN-Z41YMZGqW9Ufe”,
name: “Roxy”,
type: “dog”
}

We have now moved the critical data all into the “history” array, in the form of an object for each time (including the initial creation) the animal is updated.

With Google Maps we are able to grab the latitude and longitude of the location, which sets the pre-defined region we have set for easier search results. We also decided to include the sex of the animal in case this is not set on the initial creation or updates moving forward if they are unable to catch the animal. Of course, the status is a must have, right now we only handle “lost” or “found” but the future of the project will lead to an array of options that this group handles.

With the Details component utilizing Google Maps as well, we are able to map over these history objects and place pins in a descending order with custom markers, and custom labels. Showing the progress of the animal, and by using Firebase it is a cloud service. This allows for it to be updated in real-time.

Real-Time updating.

Because we now have a full history array which updates in real-time, this will allow the volunteers to search in real time over a wider area. If one volunteer is on one block and spots the animal, while another volunteer is 5 blocks away (last known location), they will see a new pin pop up on the map in “real-time”, so now they know where to redirect to.

The future of the Animal…

We already know that the Object shape of the animal will change, it will have to evolve with the app. And as you can see in this series it evolves fast.

We are planning to add in options for adoptions, vet visits, owner info, possible owner matches. To the more immediate future (next chingu session) we will be working on image uploading, with image compression, and thumbnail creation.

Conclusion

Once again I cannot stress how amazing the experience has been within the Chingu group. Having the opportunity to work with someone like @mmadden on this project has been great. We constantly push each other to both learn and try new things for the betterment of the application and ourselves. Every day has been a new learning experience, from working with Google Maps API all the way down to using an array instead of an object in certain instances.

Please feel free to follow our progress on our GitHub page, stars are always welcomed.

GitHub Repo:

Gmunker Links:

--

--