PET TRACKER
Ladies and gentlemen, we are a group of Software developers passionate about technology and we are excited to present our final project build for Holberton School Medellin
Purpose of the project
Pet Tracker is a web application for tracking in real time the location of a pet that is using a Collar with GPS, the purpose for the web app is that the owner can access to the information of his/her pets in real time to the exact location, the only requirement to it, is to access with internet to the web app, sign in and start tracking the pet from the phone tablet computer or any other device
who the project was created for
For some people, pets are currently one important aspect of their life. As pets continue becoming more and more popular, more humans want to have pets. However, having a risk of losing them supposes a problem for the owners. This app may fix that issue because it offers the possibility of locating your pet at any moment.
The project initially is built for Medellin Colombian users who have pets, to supply the necessity to find lost pets quickly, or tracking them through GPS. This helps users to feel more comfortable with their pets being outdoors.
Team members
The team was split into two main parts, backend and Front-end, Nicolas Zarate and Juan Olivares work in the front-end of the Web application, basically they made all the design of the web app possible using Html, Bootstrap, CSS and JavaScript. In the other hand Bryan Builes and I worked on the Backend of the App, we setup the classes, developed the API using flask, implement the Authentication using Auth0, and we also implement part of the Dynamic content using JavaScript as well. Finally we deployed and setup the application on the server.
The Story behind Pet Tracker
Pet tracker originated with the union of efforts and motivations of two groups that shared a common interest — a company that became with the idea and a motivated team of software developers that fall in love with the idea and had the desire to make it real . Common interest — the love and care for our pets, we wanted that all people with a pet could avoid losing that companion that was part of their lives. For that reason we decided to work together to develop this application, so that your pet is always with you.
How we made Pet Tracker
Pet tracker is a web application which was built using Python and SQLAlchemy in the back-end, we use the flask framework to build the API that will communicate the back-end with the front-end. In the front-end we use JavaScript along with NodeJS and jQuery to generate the dynamic content of the web application. Additionally we use HTML, CSS and Bootstrap for the static content.
we use Ngnix for the deployment of the application as shown in the following infrastructure.
The technologies we used
Back-End
We decided to use Python along with Flask to create the app of the project, and we chose this technology because was one of the technologies we had more knowledge and expertise to work, specially for the short time we had to build the project
Databases
We implemented PostgreSQL because is a powerful, open source object-relational database system that uses and extends the SQL language, It helps us to manage the data no matter how big or small the dataset is. Also the data types we needed to use are supported in PostgreSQL like Primitives as well as the constraints like UNIQUE, NOT NULL, Primary Keys and Foreign Keys
Front-End
Although we already had some knowledge of JavaScript we felt like we needed to discover new ways to solve problems and gain more experience with this popular programming language. We also decided to use Bootstrap as a way to learn a new CSS Framework and that could help us to developed a responsive web application as well
In addition we use third Parties API such as Google maps API to display a map with the location of the pet and also we user Auth0 for authentication, which verifies the users identity
Features
- Authentication via Google using Auth0
2. List of user’s pets with description and options: location, settings and delete.
3. Settings Web page for the pet and user to update their information respectively.
4. Localization of the Pet displaying a map using google Maps
Most difficult technical challenge we faced
Early in the project we had decided to have as a special feature in the web app, It was uploading pictures for the user and mainly upload a profile picture for the pets. We postposed the task until the very end because we consider it was going a plus and not a main feature, Later on, we decided to go just for adding the picture for the pet; and when we started working on that feature we realized it was going to be more complex that we though.
We started doing some research and we found many different ways to attack the problem, we end up getting confuse and not knowing what was the best way to do it. Are main concern was what is the best way between our database, our system or a third party to store the pets picture? At the end we found a really good video tutorial that guide us to the solution we perform, and also using flask documentation we decide to store the pictures in our data base.
What we did was create a new class call pictures and add a column type LargeBinary in the database along with name and the pet_id, with this we learned how to manipulate Binary data which is the pictures data, we also create the picture views which was part of the api that handles the request to create (Post) , (Get) and Update (Put) the Picture of the pet.
Understanding how to receive, read and sent the Picture data from JavaScript to Flask in python was are final challenge that we successfully accomplish using FileReader an object that lets web applications asynchronously read the contents of files .
After 12 hours of intense work and some tests we run, we finally could say we finished this feature, the result was that now the user can choose their desire picture, and put it in their pets profile.
Here is the example of a pet with an uploaded Picture and a pet with an avatar
What we learned from pet tracker:
Bryan
Third-party programs: Tools like google maps Api and Auth0 were tools that I loved to learn and apply. Tools with high scalability and diverse uses to apply.
Although I already had knowledge of JavaScript I and my team loved discovering new ways to do code and solve problems with this fantastic programming language.
Nicolas
Personally, in this project, I was focused on the client-side of our program. I learned a lot about how to use Bootstrap and the power of CSS. Although I learned how to use JavaScript to capture and show information of the user. I liked how we worked together. As a team, we learned a lot about collaborating with each other. We now have a good understanding of working with branches, fixing conflicts, merging branches, etc. Having this in mind I think these collaboration skills may help me in the future when I have to work with a team together for building a program. At the end of this project, I can confirm why Vs Code is such a good code editor preferable by most programmers around the world. Its plugins and that tool to resolve conflicts are amazing.
Erika
I definitely believe this was a great experience, I had so much fun learning how to use third Parties API such's Google maps API and Auth0, and I even improve my knowledge of JavaScript resolving a lot of challenges. But what I consider the most valuable experience from this project was learning how to work as a team, and I can confirm that even if you are the best at programming, one of the most important skills a programmer should have is communication and being able to collaborate with the team.— Communication is the skill that takes a good team member and makes them invaluable.
Juan
In the project I learned a lot of front-end development, I tried to understand better concepts of HTML, CSS and JavaScript. And implementing libraries like bootstrap helped reinforce front-end development and helped us build really good web pages. Also working as a team in different parts of the project with the use of GitHub, branches, etc. makes me realize how useful this tool is and the many interesting things you can do with it to make software development easier and comfortable code and integrate it all together in one amazing project.
About us
Bryan Builes
I want to tell you a little bit about me, I am currently a software developer in training with a great desire to learn every day. Additionally I am an environmental engineer and nature lover, my big dream is to use all those software tools and what I am to build a better world for humans in balance with nature.
Nicolas Zarate
I am Nicolas Zarate and I am 21 years old. Currently, I am a student of software development at Holberton School Colombia. Recently I finished the Foundation’s program of Holberton. I want to continue with the Full-Stack specialization of this incredible school. Some cool things I have learned in the last years are Programming skills and the ability to communicate in English. In the future I expect to live in another country, doing something related to the things that I am studying.
Juan Olivares
I am Juan David Olivares. I am 20 years old, full-stack software developer and student at Holberton school. Always disposed to learn new things, for that reason I am about to continue studying at Holberton in the advanced program and in the future I am going to find a job where I can use this knowledge to learn more and do even more interesting things.
Erika Osorio
I am a software Developer from Holberton School, I am open-minded and open to challenges, I love to learn and do the best that I can at everything I do. I am excited to keep building my knowledge in technology so one day I can use it to help people and our society, and hopefully help to build a better world
We hope you have enjoyed this blog and have known a little bit of pet tracker, our first web application.
If you want more information:
GitHub project: https://github.com/Nicolanz/pet_tracker
Web page: http://34.75.204.221/
Project’s landing page: https://nicolanz.github.io/landing_pet_tracker/
LinkedIn profiles:
Erika Osorio: https://www.linkedin.com/in/erikaosgue/
Nicolas Zarate: https://www.linkedin.com/in/nicolas-zarate-b971b81a1/
Bryan Builes: https://www.linkedin.com/in/brayam-steven-builes-echavarria/
Juan Olivares: https://www.linkedin.com/in/juan-olivares-0700611a3/
