Maps integration

portfolio/pom.xml

@@ -31,6 +31,26 @@
     </dependency>
   </dependencies>
 
+
+    <dependency>
+      <groupId>com.google.appengine</groupId>
+      <artifactId>appengine-api-1.0-sdk</artifactId>
+      <version>1.9.59</version>
+    </dependency>
+
+    <dependency>
+      <groupId>javax.activation</groupId>
+      <artifactId>javax.activation-api</artifactId>
+      <version>1.2.0</version>
+    </dependency>
+
+    <dependency>
+      <groupId>com.google.cloud</groupId>
+      <artifactId>google-cloud-vision</artifactId>
+      <version>1.70.0</version>
+    </dependency>
+  </dependencies>
+
   <build>
     <plugins>
       <!-- Provides `mvn package appengine:run` for local testing

portfolio/src/main/java/com/google/sps/data/Cafe.java

@@ -0,0 +1,26 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.sps.data;
+
+/* Represents a user-uploaded coffee shop at specific address */
+public final class Cafe {
+  private final String address;
+  private final boolean isStarbucks;
+
+  private Cafe(String address, boolean isStarbucks) {
+    this.address = address;
+    this.isStarbucks = isStarbucks;
+  }
+}

portfolio/src/main/java/com/google/sps/servlets/ListCafeServlet.java

@@ -0,0 +1,59 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.sps.servlets;
+
+import com.google.appengine.api.datastore.DatastoreService;
+import com.google.appengine.api.datastore.DatastoreServiceFactory;
+import com.google.appengine.api.datastore.Entity;
+import com.google.appengine.api.datastore.PreparedQuery;
+import com.google.appengine.api.datastore.Query;
+import com.google.appengine.api.datastore.Query.SortDirection;
+import com.google.gson.Gson;
+import com.google.sps.data.Cafe;
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+/* Servlet responsible for listing coffee shops */
+@WebServlet("/list-cafe")
+public class ListCafeServlet extends HttpServlet {
+
+  @Override
+  public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    Query query = new Query("Cafe");
+
+    DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
+    PreparedQuery results = datastore.prepare(query);
+
+    List<Cafe> cafes = new ArrayList<>();
+    for (Entity entity : results.asIterable()) {
+      long id = entity.getKey().getId();
+      String address = (String) entity.getProperty("address");
+      boolean isStarbucks = (boolean) entity.getProperty("starbucks");
+
+      Cafe cafe = new Cafe(address, isStarbucks);
+      cafes.add(cafe);
+    }
+
+    Gson gson = new Gson();
+
+    response.setContentType("application/json;");
+    response.getWriter().println(gson.toJson(cafes));
+  }
+}

portfolio/src/main/java/com/google/sps/servlets/NewCafeServlet.java

@@ -0,0 +1,43 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.sps.servlets;
+
+import com.google.appengine.api.datastore.DatastoreService;
+import com.google.appengine.api.datastore.DatastoreServiceFactory;
+import com.google.appengine.api.datastore.Entity;
+import java.io.IOException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+/* Class responsible for uploading new coffee shops to datastore */
+@WebServlet("/new-cafe")
+public class NewCafeServlet extends HttpServlet {
+  @Override
+  public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    String address = request.getParameter("address");
+    boolean isStarbucks = request.getParameter("starbucks") != null;
+
+    Entity cafeEntity = new Entity("Cafe");
+    cafeEntity.setProperty("address", address);
+    cafeEntity.setProperty("starbucks", isStarbucks);
+
+    DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
+    datastore.put(cafeEntity);
+
+    response.sendRedirect("images.html");
+  }
+}

portfolio/src/main/webapp/comments.html

@@ -18,6 +18,7 @@
       <li><a href="projects.html">projects</a></li>
       <li><a href="resume.html">resume</a></li>
       <li><div class="nav-active">comments</div></li>
+      <li><a href="maps.html">maps</a></li>
     </ul>
     <ul class="contact-links">
       <li><a href="https://github.com/AlvieH"><i class="fab fa-github fa-lg"></i></a></li>

portfolio/src/main/webapp/css/style.css

@@ -274,3 +274,8 @@ nav .menu-links a:hover, .title:hover {
   margin: 2em 0;
   display: inline-block;
 }
+
+#map {
+  width: 600px;
+  height: 600px;
+}

portfolio/src/main/webapp/index.html

@@ -17,6 +17,7 @@
         <li><a href="projects.html">projects</a></li>
         <li><a href="resume.html">resume</a></li>
         <li><a href="comments.html">comments</a></li>
+        <li><a href="maps.html">maps</a></li>
       </ul>
       <ul class="contact-links">
         <li><a href="https://github.com/AlvieH"><i class="fab fa-github fa-lg"></i></a></li>

portfolio/src/main/webapp/maps.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Alvin Hermans</title>
+    <link rel="icon" type="image/png" size="16x16" href="files/images/favicon-16x16.png"></link>
+    <link rel="icon" type="image/png" size="32x32" href="files/images/favicon-32x32.png"></link>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/all.css">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&family=Roboto+Condensed:wght@300;400&family=Roboto+Mono:wght@300;400;500&display=swap" 
+      rel="stylesheet">
+    <script src="script.js"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCib_0RH1hdeDTEpXE4QDt2EVukkmH3jvI&callback=initMap"
+  type="text/javascript"></script>
+  </head>
+  <header>
+  <nav class="nav">
+    <a href="index.html" class="title">alvin_hermans</a>
+    <ul class="menu-links">
+      <li><a href="projects.html">projects</a></li>
+      <li><a href="resume.html">resume</a></li>
+      <li><a href="comments.html">comments</a></li>
+      <li><div class="nav-active">maps</div></li>
+    </ul>
+    <ul class="contact-links">
+      <li><a href="https://github.com/AlvieH"><i class="fab fa-github fa-lg"></i></a></li>
+      <li><a href="https://www.linkedin.com/in/aherma"><i class="fab fa-linkedin-in fa-lg"></i></a></li>
+      <li><a href="mailto:alvinhermans123@gmail.com"><i class="fas fa-paper-plane fa-lg"></i></a></li>
+    </ul>
+  </nav>
+  </header>
+  <body onload="initializeMap();">
+    <form id="map-form" method="POST" action="/new-coffee-shop">
+      <p>Please put in the address of your favorite coffee place:</p>
+      <input type="text" name="address">
+      </br>
+      <p> Is your coffee place a starbucks?</p>
+      <input type="checkbox" name="starbucks" value="This place is a starbucks">
+      </br></br>
+      <button>Submit</button>
+    </form>
+    <div id="map">
+    </div>
+  </body>
+</html>

portfolio/src/main/webapp/projects.html

@@ -19,6 +19,7 @@
         <li><div class="nav-active">projects</div></li>
         <li><a href="resume.html">resume</a></li>
         <li><a href="comments.html">resume</a></li>
+        <li><a href="maps.html">maps</a></li>
       </ul>
       <ul class="contact-links">
         <li><a href="https://github.com/AlvieH"><i class="fab fa-github fa-lg"></i></a></li>

portfolio/src/main/webapp/resume.html

@@ -17,6 +17,7 @@
       <li><a href="projects.html">projects</a></li>
       <li><div class="nav-active">resume</div></li>
       <li><a href="comments.html">comments</a></li>
+      <li><a href="maps.html">maps</a></li>
     </ul>
     <ul class="contact-links">
       <li><a href="https://github.com/AlvieH"><i class="fab fa-github fa-lg"></i></a></li>

portfolio/src/main/webapp/script.js

@@ -128,6 +128,25 @@ const slideToggle = (elementId, duration)  => {
   }
 }
 
+
+/* Fetches upload url from blobstore url servlet and inserts it into images.html */
+const fetchBlobstoreUrl = () => {
+  fetch("/blobstore-upload-url")
+  .then((response) => {
+    return response.text();
+  })
+  .then((imageUrl) => {
+    const form = document.getElementById("image-form");
+    form.action = imageUrl;
+  })
+}
+
+const initializeMap = () => {
+  const map = new google.maps.Map(document.getElementById("map"), {
+    center: {lat: 42.278481, lng: -83.740997}, 
+    zoom: 50
+  });
+
 /* Fetches comments content from webserver and adds to DOM in container with id elementId. */
 const appendCommentsByElementId = (elementId) => {
   const destination = document.getElementById(elementId);

walkthroughs/week-4-libraries/blobstore/examples/hello-world-fetch/pom.xml

@@ -17,6 +17,12 @@
   </properties>
 
   <dependencies>
+    <dependency>
+      <groupId>javax.activation</groupId>
+      <artifactId>activation</artifactId>
+      <version>1.1.1</version>
+    </dependency>
+
     <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>javax.servlet-api</artifactId>