I recently finished developing an “MVP” for a project idea that my friend Simar and I came up with trying to find cool ideas that could help the world with its current global warming crisis.
the idea:
Basically the initial thought was to create a web application where a user can enter an address into an interactive map. That location would be brought up in satellite view and then using some cool machine learning code (I know, not as easy as it sounds), we would detect the edges of the roof. Using that information we would then output to the user how much water they could save by using rain water harvesting systems and how much energy they could save by using solar panels. In my mind, a lot of developing countries in warm areas of the World could see tremendous benefit by using an app that will allow them to understand potential savings, not to mention the benefits for reducing global warming.
I still want to implement the machine learning and AI algorithms but for now it was a little too advanced. I wanted to learn the basics and for that decided to have the user trace the roof of a building manually. Hopefully, the AI version will be coming soon!
server side implementation:
Looking back, this project could’ve been done entirely using Javascript. I decided, however, to use Java for all the server side code because that was the language I was most familiar with at the time. I think what took me a while to understand was how each Java class would interact with each other. I didn’t understand how creating packages and smart class design is vital to a clean and organized project. Heres a quick picture of my initial sketch for a class design, the second picture is a more final version of what was implemented.
first class design – very rough and not scaleable 
more final design – far more scaleable
What I finally ended up writing for the server side code (all available on my GitHub) was something I think is useful as a standalone API. Essentially anyone can ping my server with a latitude, longitude and geometric coordinates for a building (area) and I will return them a JSON object with information about how much water and energy they will save in that location with those geometric parameters. I later learned that this is called microservice architecture and is used widely in Software Engineering as a method of developing lightweight systems.
client side implementation
The client side code was done in Javascript with html and css for design and website elements. This portion of the web app was difficult for me to grasp at first. Front end code, I found, was far different than the server side logic that I had implemented in Java. Conveniently, there are thousands of different html and css templates that make website design surprisingly readymade.
With a basic design in place it was time to implement the Google Map API. Once again we found thousands of articles and videos describing in detail how to implement Google Maps into a Javascript project. After the right settings were toggled for the map display the next challenge became handling the data the user was providing us while interacting with the map and sending that to the server for analysis.
HTTP: GET & POST
The coolest part of this whole project was learning about HTTP. All web traffic is handled by this very simple protocol. GET being where a user makes a request to a server and gets back a resource. POST is where a user will send some data to the server and can receive data in response. In my case, JSON was the format I choose for data exchange.
After understanding about HTTP, the implementation for this web app became clear. From the Google Maps interaction, the client side code would post to the the micro service (server side) with a JSON containing geographic and geometric coordinates detailing the interaction. The micro service would then deserialize that JSON (also a very cool topic, I used Jackson library to handle the serialization/deserialization) and send back a JSON with the appropriate analysis. The analysis would then be deserialized once again by the client side code to output to the web app what the potential savings would be for the map interaction.
Below I’ve included example JSON snippets. The top image is what the client side will POST to the server side and the bottom indicates the response the server will send back to the client.
{"locationCoordinate":{"lat":42.360189,"lng":-71.0551145},"address":"4 S Market St, Boston, MA 02109, USA","polygonCoordinate":[{"lat":42.36032151401062,"lng":-71.05578501875681},{"lat":42.36014212869711,"lng":-71.05576892550272},{"lat":42.36031590822735,"lng":-71.05384846384806},{"lat":42.360495293044714,"lng":-71.05386455710214},{"lat":42.360266744803084,"lng":-71.05328747895503},{"lat":42.36033962000395,"lng":-71.05283686784053},{"lat":42.360221898483644,"lng":-71.05279931691432},{"lat":42.360132205748684,"lng":-71.05322310593867}],"area":542.8726664464673}:{"waterSavings":53.05667457280599,"energySavings":0.0,"p":{"locationCoordinate":{"lat":42.360189,"lng":-71.0551145},"address":"4 S Market St, Boston, MA 02109, USA","polygonCoordinate":[{"lat":42.36032151401062,"lng":-71.05578501875681},{"lat":42.36014212869711,"lng":-71.05576892550272},{"lat":42.36031590822735,"lng":-71.05384846384806},{"lat":42.360495293044714,"lng":-71.05386455710214},{"lat":42.360266744803084,"lng":-71.05328747895503},{"lat":42.36033962000395,"lng":-71.05283686784053},{"lat":42.360221898483644,"lng":-71.05279931691432},{"lat":42.360132205748684,"lng":-71.05322310593867}],"area":542.8726664464673}}AWS EC2
Now that the app was completed and could be run locally on my machine it was time to host it so the World could see our creation. Amazon Web Services allows you to create a linux machine and host on their platform for free. The scale of it all was really striking, Amazon had given me a tiny EC2 virtual machine within one of their massive data centers. I created the most simple linux based system and proceeded to install java and tomcat as the container. Finally, I moved the WAR file from my local machine onto the EC2 instance. Done! Using the public DNS url that could ping the EC2 instance, we can view the app live at all times.
and in conclusion…
I ended up learning so much from this project. From front end code, HTTP, Tomcat, AWS and so much more, I feel much more confident in my ability to take a project from idea to finished product. Hope to be back with some more cool projects.