imgur API

OAUTH API

1)register application https://api.imgur.com/oauth2/addclient

Type : OAuth2 with callback URL

Authorization callback URL : http://localhost:8080/oauth2/callback

2) get

YOUR_CLIENT_ID:

Client Secret: ( we can do more using Client Secret )

3) redirect to URL

https://api.imgur.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&response_type=token&state=WHATEVER_APPLICATION_STATE

state will be send back to us, after imgur send callback URL ( ?state= )

 

4) imgur callback URL

http://localhost:8080/oauth2/callback#access_token=db48b3279a6c2f6d7f5a948d43fb61d243e8ede2&expires_in=315360000&token_type=bearer&refresh_token=9941df1d618cbc53a24de8ab4dd47ddfe2a0a02f&account_username=pongrockyou&account_id=90918005

access_token : use to do whatever in API

expires_in : 30 days

token_type :

refresh_token : get new token after expired using refresh_token

account_username :

account_id :

 

ref : https://apidocs.imgur.com/#authorization-and-oauth

 

Account API

1) GET https://api.imgur.com/3/account/me/images

with header

Authorization: Bearer {{accessToken}}

response : data.link

ref : https://apidocs.imgur.com/#ee366f7c-69e6-46fd-bf26-e93303f64c84

 

Image Upload API : Upload one image

POST https://api.imgur.com/3/image

Params : image

with header

Authorization: Bearer {{accessToken}}

ref : https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139

Account Favourite

Response Model: Gallery Image OR Gallery Album ( Images ) that user favourite

ref : https://apidocs.imgur.com/#a432a8e6-2ece-4544-bc7a-2999eb586f06

Vuex : state management pattern + library

Module ( i.e. modules/auth.js, modules/images.js )

  • state ( model ) : Token, Honda, Chevy, Dodge, Ford
  • getters ( filter, get operations ) : isLoggedIn(), budgetCars(), allCars(), numberOfCars()
  • mutations ( simple change state model ) : setToken(), addCarToInventory(), washCar(), setCarAsSold(), billCustomer()
  • actions ( call 1 mutation or assemble mutations )

>login() ( kick the login flow out )

>finalizeLogin() ( get token, setToken() )

>logout() ( setToken(null) )

>receiveCar() ( addCarToInventory(), washCar() )

>sellCar() ( setCarAsSold(), washCar(), billCustomer() )

 

setup

store/index.js ( add modules )

import Vuex from 'vuex';
import Vue from 'vue';
import auth from './modules/auth';
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
auth
}
})

 

 

main.js

import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

 

store/modules/auth.js

const state = {
token: null // init
};
const getters = {
isLoggedIn: state => !!state.token
};
const actions = {
logout: ({ commit }, whateverArg) => {  // when using it : logout(whateverArg)
// mutations.setToken() // bad!!
commit('setToken', null);
},

whatever: ({ rootState }) => { // rootState : access to other modules to get states

rootState.moduleName.property

},

whatever: ({ commit, rootState }) => {

}

};
const mutations = {
setToken: (state, token) => {
state.token = token;
}
};

export default {
state,
getters,
actions,
mutations
}

 

To use the VueX ( mapActions, mapGetters )

src/components/AppHeader.vue

import { mapActions, mapGetters } from 'vuex'; // 1)

export default {
name: 'AppHeader'
methods: mapActions(['login']) // 2) or

methods: {

..mapActions(['login']), // we can call login() in the auth.js

defineAnotherMethodHere() {

this.login(); // or @click="login"

}

},

computed: mapGetters(['isLoggedIn']) // {{ isLoggedIn }}
};

NOTE: no need to call auth.login(), just call login()

 

ref : https://vuex.vuejs.org/

Sign up for Youtube API

  1. https://console.developers.google.com
  2. create project
  3. click “Enable APIs and Services”
  4. search for “YouTube Data API v3”, “enable” it
  5. create credentials ( or use Credentials on the sidebar )

Where will you be calling the API from?

Web browser(Javascript)

What data will you be accessing?

>Public data

User data

6. get Your credentials ( API key )

 

Install axios : AJAX request

npm install --save axios

 

from axios import 'axios'

axios.get('https://www.googleapis.com/youtube/v3/search', {
params: {
key: API_KEY,
type: 'video',
part: 'snippet',
q: searchTerm
}
}).then(response => console.log(response));

// response.data.items.0.id

// response.data.items.0.snippet 

 

API references : https://developers.google.com/youtube/v3/docs/

 

ES2015

backtick

`abc${whatever}`

 

if variable name is identical

as-is

const videoId = this.video.id.videoId;

to-be

const {videoId} = this.video.id;

 

function

as-is

onTermChange: function() {

}

to-be

onTermChange() {

}

 

isLoggedIn: (state) => {

}
isLoggedIn: state => whatever()

arrow function

as-is

function(h){

h('a');

}

to-be

h => h('a')

key-value is identical

as-is

{SearchBar: SearchBar}

to-be

{SearchBar}