├── README.md
├── Screen Shot 2018-03-12 at 6.43.33 AM.png
└── instaAPI
├── app.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Using the Instagram API
2 | The purpose of this project was to leverage the Instagram API to return a user's pictures given the user's location context. I connected to the Instagram API using OAuth to get relevant images.
3 |
4 | **Link to project:** https://karina001.github.io/instagramAPI/
5 |
6 | 
7 |
8 | ## How It's Made:
9 |
10 | **Tech used:** HTML, CSS, JavaScript
11 |
12 | ## Optimizations
13 | When I have more time, I plan on improving the overall layout of the web app. I would also like to use an additional API to extend the user experience.
14 |
15 | ## Lessons Learned:
16 | In completing this project I learned a lot about OAuth and APIs in regards to purpose and function. built-in browser variables liked Local Storage. I also learned more about the client-server model, when reviewing concepts such as the fact that HTTP is stateless, which causes an application to reset the next time it is re-opened. As a developer, I needed to store the state of your interface somewhere. Although this is normally done on the server-side, I didn't want to force people to sign up to use the app. This is one of the main reasons I decided to leverage local storage.
17 |
18 | ## Examples:
19 | Take a look at other examples that I have in my own portfolio:
20 |
21 | **Spanish Colors Memory Game:** https://github.com/karina001/spanishColorsMemoryGame
22 |
23 | **WuTangClan Name Generator:** https://github.com/karina001/toDoList
24 |
25 | **Speech Recognition App:** https://github.com/karina001/speechRecognitionApp
26 |
27 | ## Installation:
28 | Install with npm install and run on localhost 8000
29 |
--------------------------------------------------------------------------------
/Screen Shot 2018-03-12 at 6.43.33 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/girl4tech/instagramAPI/d7ba589a3b9ff8e2889cf942c3cba0e5de484a10/Screen Shot 2018-03-12 at 6.43.33 AM.png
--------------------------------------------------------------------------------
/instaAPI/app.js:
--------------------------------------------------------------------------------
1 | $.ready(isRedirectedURI())
2 |
3 | function isRedirectedURI() {
4 | // get access token from hash/fragment
5 | var uriHash = window.location.hash
6 |
7 | // if there's an access token available get images
8 | if (localStorage.igToken || uriHash.length > 0) {
9 | if (localStorage.igToken) {
10 | getImages(localStorage.igToken)
11 | } else {
12 | // get access token from URI
13 | var accessToken = uriHash.replace('#access_token=', '')
14 | getImages(accessToken)
15 | }
16 | } else {
17 | // if not yet redirected hide results view
18 | $('.image-results-view').hide()
19 | }
20 | }
21 |
22 | function getImages(accessToken) {
23 | // if redirected hide initial view
24 | $('.sign-in-view').hide()
25 |
26 | // check if navigator geolocation is available from the browser's Window
27 | if (navigator.geolocation) {
28 |
29 | // store accessToken locally so user doesn't have to make an API to call it again if they close the window and come back
30 | localStorage.igToken = accessToken
31 |
32 | // use the navigator given to us by the window.navigator object to find the user's location
33 | navigator.geolocation.getCurrentPosition(function(position) {
34 | var lat = position.coords.latitude
35 | var lng = position.coords.longitude
36 |
37 | // configure instagram endpoint with accessToken and user's location data
38 | var instagramEndpoint = 'https://api.instagram.com/v1/media/search?lat=' + lat + '&lng=' + lng + '&access_token=' + accessToken
39 |
40 | // call the instagram with configured URI
41 | $.ajax({
42 | url: instagramEndpoint,
43 | method: 'GET',
44 | dataType: 'jsonp',
45 | success: handleResponseSuccess
46 | })
47 | })
48 | } else {
49 | $('.images').append('Sorry, the browser does not support geolocation')
50 | }
51 | }
52 |
53 | function handleResponseSuccess(response) {
54 | var allData = response.data
55 | console.log(response)
56 | // iterate through each piece of data
57 | allData.forEach(function(data) {
58 | var imageUrl = 'url(' + data.images.standard_resolution.url + ')'
59 |
60 | // create element
61 | var element = $('').css({'background-image': imageUrl}).addClass('image')
62 |
63 | // append element to .images node
64 | $('.images').append(element)
65 | })
66 | }
67 |
--------------------------------------------------------------------------------
/instaAPI/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Advanced APIs Lesson
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |