Please view the .zip file for Unit 7 here: Unit 7 - Google Drive

Work Done For This Unit

In this final unit, I implemented external data sources into my website to further increase usability and functionality of my website.

The two external sources I chose to integrate were using the Web Share API, as well as the LinkedIn API. In the first, I used it to help make it easy to share my portfolio with others. I integrated a small button on the homepage to help make it easy to share the portfolio from the most accessible part of the site. I also added another button in the Resume page to help users share my resume with others that links directly to the resume image I have linked in the website. I also added another final button to help copy my contact information to the user’s clipboard from the connect page, in case they would like to share it with others. It also gives the user a confirmation that the content has been copied successfully. All of this was done using the Web Share API on a Live Server with VSCode to ensure that all the links and the API works correctly. Since the Web Share API is local to most modern browsers, there were no API calls that I needed to make. Secondly, I also included LinkedIn information into my website. I wanted to implement a badge from LinkedIn to detail my profile at a glance in the Connect page. I shifted some content around on the page to make room for a badge that I could place beside the already existing links. I used LinkedIn’s built-in source for profile badge making that retrieves profile information, and embedded it into the website directly.

In both of these cases, users like John and Linda are directly helped, since the quick buttons to share profiles helps them reach out to others and recommend me easily. John can use the button to share my portfolio to send it to his colleagues quickly through email, while users like Linda can use the button to help forward it to other business partners. Linda also can use this for accessibility reasons, as demonstrated in her user persona. 

Learning Outcomes

• Should be able to use JavaScript to access and use web services for dynamic content (AJAX, JSON, etc.).

• I demonstrate that I am able to use JavaScript to gather the information for both Web Share API to quickly share my portfolio and other internal components. Requests to the Web Share API are made using JSON objects and the program waits for the API’s response. The LinkedIn profile is also dynamically generated profile content wrapped into a pre-built badge provided directly by LinkedIn.

What Went Well and What Didn’t

I think the outcome of this unit was much similar to the previous one. I had some great ups with using the Web Share API, since I have used APIs previously and had some understanding of how to structure my request and how to retrieve it. However, I had some downs generating the LinkedIn badge, and it taught me that APIs do not necessarily have to work all the time. In fact, when trying to put the badge on my website, it completely destroyed the CSS of the rest of the page - something about the source’s CSS was overriding my website’s internal CSS, and it was throwing all the elements off. I didn’t know how to work around this, and considered giving up, until I read on some online forums that I could use an iframe. I was familiar with an iframe since it came up during my working on the image carousel in the Design page. So, I searched online on how to implement it, and I found one way was to implement the pre-built badge component in a separate HTML file and then link to it within the iframe, which could not interfere with the CSS and styling on my page and treat it like another external resource. This worked, surprisingly, and I was happy with the way that I problem-solved around a solution that should’ve worked originally. Next time, I will remember that iframes are very helpful for housing content, and can be used within the application I’m building to separate styles and not make them interfere with what I’m working on. 

References

- I used Web Share API - Web APIs | MDN to learn about implementing Web Share API