Role
Background
Challenge
You will select a project that is both personally meaningful, and has a strong UX focus. The scope can be narrow, but should include, at minimum, an interactive web page (HTML) that is appropriately styled (CSS) with some form of input and output that utilizes the functionality of an API and enhances the functionality and user experience of the page (JS). This functionality may include, for instance: tailored data retrieval (e.g., lookup of movie titles, stock symbols, or books), enhanced navigation (e.g., link to IoT devices via IFTTT, voice UI), interactive manipulation of data visualizations (e.g., user editable or adjustable charts), curated or tailored social media information (e.g., relevant Reddit threads or tweets), or sophisticated customization of embeddable content (e.g., custom interactivity using Google Maps). Other core functionality may be possible, if approved by the instructor.
Introduction
Design Process
In the first phase of my API Integration, I started to use Google Maps API. I wanted to use a feature where you can enter in a location and the address form organizes that certain location details for you. Also, before entering a location, the computer would ask you if you would like it to know your location, so that way it would be easier to locate places near you. In addition, I added a more aesthetic feel to the interactive webpage. However, I did feel that something was missing, something like a map where you can see that location that you entered.
In the second phase of API Integration, I wanted to see if I can implement a map, like I mentioned in my first phase. I felt as if my previous code was too simple and wanted to add more to the look of my interactive web page. Therefore, using both an interactive map and an address form, you can not only see the address details, but you can also see the location of that certain location. Also, it’s always easier to visualize where a place is when looking at the actual location, compared to just details of the location. In this case, showing both is very beneficial, especially when you’re wanting to know specific details about that location, such as, latitude, location type, and website.
Functionality of Code
Interactive Map and AutoComplete Dropdown
As you enter a location in the search box below, there will be an autocomplete dropdown that will provide you with similar locations that you are entering in. When you either click find or press enter, the interactive will automatically more the pin to the location that you are searching for. You can also use the features on the map, such as, zoom in/out or move the map around by dragging your mouse.
Address Form
After entering in a location, the information from that certain location/address, automatically populates into the the address form. It gives a wide range of details from Name to website url (if possible). However, you can search any location and it will populate at least more than one address field.
Reflection
In the beginning it was very difficult with choosing which API I wanted to use because there are so many out there on the internet, but I wanted to pick one that I can use to narrow my scope but also be an interactive web page. I started to try to get a json file from Github, so that I can use that information to create an interactive page, but it was becoming very complicated that I spent over two days trying to solve the problem. I wanted to implement NBA player stats into an input/output form, but I was wasting more and more time instead of trying something different. Therefore, I started to brainstorm ideas on using Google’s Map API by integrating a location search with an address form. I browsed through over five different videos on youtube on how they use their API and implement it into their code. The challenge here, was to create an input and output through the API. I previously created a GUI in C# in other classes, so it was easier to visualize that data in the background, while you’re entering the information needed. However, using an API is more difficult. I needed to make sure that I had to make an API key and also make sure I include the correct Javascript, because if I didn’t, there would have been an error when trying to get an output. Then I started to think of a way where I can expand the visualization to the Google’s Map API with adding in an interactive map. That way, it is easier for the user to follow along where the place that they are searching, is actually located. Overall, it was a difficult task to complete, due to the lack of knowledge of API’s, but after educating myself and Dr. Gray’s help, I was able to select an API that would be beneficial and that is visually appealing.
Patricia Mata 