cpnt270-a4

• Jessica Watson

Client User Story

• Start up business wants to spend less resources to update website with success stories.
• Overworked store owner wants to spend less time on technology and more time with his family.
• Underpaid developer utilizing already created API for customer live updates.

Target Market

• The target market for this application is a small Startup company who does not want to spend a ton of time updating their webpage with their latest achievements. This integration would really help the overworked business owner to allow the company that he has hired to take photos of his works to upload directly to Instagram, cutting out the time it would take to update his own webpage. I believe Instagram is the best choice of social media because it is widely used, has a small and understandable UI that so any owner can produce great looking content in a short time.

Steps to make your life easier with integration

1. Go to your website take note of the current post displayed.
2. Log into your instagram account, you will find the instructions in a separate document for privacy reasons.
3. Please take a look at this website for posting instructions. 3a. You can use this as an example, click on this link right click and select save image as, then save the image in your computer. If on a mobile device click and hold for save options. Then open up instagram and upload your image to the platform then add this caption.

   Who doesn't love a fresh slice, look how our neon lit up the front of this pizzeria! Take a look at this photo here, https://unsplash.com/t/street-photography #signsofneon #lovemyneon

4. Once you have finished adding your content click share.
5. Navigate back to your webpage to see your band new post automatically update.

Understanding your API

• If you are wondering about the capabilities of your API please visit this page for items such as general usage, rate limits, authentication methods.
• To create a token please reference this document to help with step by step instructions.
• All endpoint references must start with graph.instagram.com

Don't worry you are secure

• You can sleep better at night knowing all of your keys and tokens are hidden within netlify, they are secreted away behind a netlify function. If you would like to check it out yourself here is some handy documentation.

Annotations

• Thank you to Tony Grimes for the js code.

const init = async () => {
  const response = await fetch('/.netlify/functions/signs')
  const data = await response.json()

  const neon = data.find((item) => item.caption.includes('#signsofneon'))

  document.querySelector('.container').innerHTML = `
  <figure>
    <img src="${neon.url}" alt="Photo from instagram"
    <figcaption>${neon.caption}</figcaption>
  </figure>
  `
}
init()

• Photo of restaurant store front from Jon Tyson with license
• Photo of "Play" by Gabriel Dizzi on Unsplash with license
• Photo "we love pizza" by Eagan Hsu on Unsplash with license