Your idea!

1. Incorporate existing technologies in a unique way

2. Limit your scope.

Less is More

3. Think about the demo

Show what makes your idea cool!

What technologies am I going to use to make my hack?

API? What's that?

How do I use it?

Application Programming Interface

A set of programming instructions and standards for accessing a Web-based software application.

Essentially it's a way to send or recieve data from a service.

Okay so how do I use them?

Most APIs are RESTful

They utilize HTTP verbs to communicate with an application

...so what are HTTP Verbs?

HTTP Verbs

Indicate a desired action to be performed on a specific resource.

The ones that matter are GET and POST

GET - requests a representation of the specified resource. Retrieves data and has no side effects

POST - submits data to be processed to the identified resource. May generate data on the server.

GET Example - Submitting search keywords to a search engine and getting results back. (Gets search results)

POST Example - Making a comment and posting it on a site. (Posting a comment.)

The actual usage of these verbs varies from language to language.

Lets do an actual example with the Spotify API! (Using Flask)

Everything I do can be found on the Spotify API docs

Lets get our API Keys

Authenticating our API

req = requests.post("https://accounts.spotify.com/api/token", 
data={'grant_type': 'authorization_code', 'code': code, 	
'redirect_uri': 'http://localhost:8080/woo', 
'client_id': '9344d5a91349489488cc51637d912e21', 
'client_secret': '5cb043cf9fc546bebc91978ec8a95bc6'})

res = req.json()
access_token = res['access_token']
print("This is the access_token: " + access_token);
					

Lets get a list of tracks

query = request.args.get('trackname')
payload = {'Authorization': 'Bearer ' + access_token}
req = requests.get("https://api.spotify.com/v1/search?q=" + query + "&type=track", headers=payload)

global currentList
currentList = req.json()
print("This is the list of tracks: " + currentList)
					

And then a preview url of the song

query == thing['id']
req = requests.get("https://api.spotify.com/v1/tracks/" + query)

reqJson = req.json()
print("This is the 30 second preview: " + reqJson['preview_url'])
					

One more note: HTTP verbs are also used to let your front-end client communicate with your backend server.

@app.route('/testendpoint', methods=['GET'])
def testendpoint():
	payload = {'phrase': 'Hello World'}
	return jsonify(payload)
					

function testTheEndpoint() {
	$.get('/testendpoint', function(data) {
    		var phrase = data.phrase;
    		console.log(phrase);
	});
}
					

Lets do an Example Hack!

A web app where you press a button and you get a compliment.

What do we need?

• A server to hold the compliments
• A front-end page for the user to go to
• An endpoint from the front-end to the back-end that sends a compliment

I chose to use Node.js for the back-end and raw HTML/CSS/Javascript for the front-end

This is what it's going to look like.

Lets start with the frontend.

What the user is going to see.

• A basic HTML page with a button
• Some styling for the page to make it look nice
• Javascript that gets a compliment from the server and changes the HTML to display it.

The HTML

Quick Compliments!
Compliment goes here
Get a compliment!
					

The CSS

html, body {
	font-family: 'Open Sans';
	height: 100%;
	margin: 0;
	position: relative;
	background-color: #3498db;
}
.container:hover {
	background-color:#bbb;
	cursor:pointer;
	border-radius:30px;
}

.container {
	position: absolute;
  	background-color: white;
  	border-radius: 30px;
  	box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.2);
  	max-width: 400px;
  	text-align: center;
  	height: 125px;
  	font-size: 30px;
  	line-height: 125px;
  	font-weight: 100;
  	color: #444;
  	margin: 50px auto;
  	bottom: 0;
  	left: 0;
  	right: 0;

}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

.title {
	font-size: 80px;
  	line-height: 1.5;
  	font-weight: 100;
  	text-align: center;
  	margin:  auto;
  	padding: 50px 0;
  	color: white;
}

.compliment {
	margin: auto;
	max-width: 800px;
	height: 300px;
	font-size: 50px;
  	line-height: 200px;
  	font-weight: 100;
  	text-center: center;
  	color: #444;
  	text-align: center;
  	color: white;
}

.button {
	bottom: 0;
	width 100px;
	height: 50px;
}
					

The Javascript

function changeQuote()
{
	$.get('/getcompliment', {name: $("#quote").text()}, function(data)
		{
			obj = JSON.parse(data);
			console.log(obj.stuff);
			$("#quote").text(obj.stuff);
		});
}
					

Cool! Lets do the backend.

• A basic server that can accept connections on a specific port.
• A list of compliments
• A endpoint for our frontend to access (/getcompliment is what I named it)

The Base Server

app.get('/', function (req, res) {
  res.sendfile('index.html');
});

app.set('port', (process.env.PORT || 5000));

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});
					

The list of compliments

var compliments = ["Dude you rock!", 
"You look pretty good today.", 
"You don't look half bad!", 
"On a scale of 1-10 for personality, you are a solid 9.5.", 
"You are so cool bro!", 
"Your hair is on point today.",
"How are you so polite?",
"I like your jacket.", 
"Let's hang out and never stop hanging out.",
"Teach me how to be as charming as you are!",
"Your name is so fun to say",
"Your feet are too perfect it's almost illegal.",
"Can I have your socks? They look so hot on you",
"You're a great gift giver.",
"You're my poster child.",
"Has anyone told you how perfect your right hand is?",
"You are quite strapping M'Lady.",
"Your IQ makes ints overflow.",
"All my friends know how cool you are!",
"Looking fly today I see.",
"Wow fishing for compliments again?"];
					

The \getcompliment endpoint

app.get('/getcompliment', function (req, res) {
  var obj = JSON.parse(JSON.stringify(req.query));
  var temp = "";
  while(true)
  {
  	temp = compliments[Math.floor(Math.random() * (compliments.length))]
  	if (obj.name !== temp) {
  		break;
  	}
  }
  res.send('{"stuff": "' + temp +'"}');
});
					

The last step is deploying the app to a cloud service. I chose Heroku