Dynamic websites for artists.

Dynamic
websites
for artists.
David Newbury
@workergnome
Dynamic websites for artists.
David Newbury — @workergnome 1

Who am I?
Lead Developer, Art Tracks, Carnegie Museums.
Ex-Lead Developer, American Eagle Outﬁtters.
Ex-Lead Developer, Iontank.

Who am I?
Lead Developer, Art Tracks, Carnegie Museums.
Ex-Lead Developer, American Eagle Outﬁtters.
Ex-Lead Developer, Iontank.
11 years of freelance web development.
18 years as a professional developer.

I can make a
real website.

Who am I?
I have BA in ﬁlm production.
I build art installations.
I make robots that make cookies.

Who am I?
I have BA in ﬁlm production.
I build art installations.
I make robots that make cookies.
I'm an artist.

This is not how to
make a real website.

This is not how to
This is how to
fake a website.

This is not how to
This is how to
fake a website.
Ya know, for art.

What we're going to do:
Teach you the fast, dirty, mostly free way
to build a website that can save user's data.

Show you how to:
—Use Sinatra

Show you how to:
—Use Sinatra
—Set up a local server

Show you how to:
—Use Sinatra
—Deploy to Heroku

Show you how to:
—Use Sinatra
—Deploy to Heroku
—Use Redis to store data

What we're NOT going to do:
—Learn HTML / CSS / Javascript

—Talk about relational databases

—Talk about security

—Talk about security
—Save personal, identifying information

Read along with me.
The code:
http://github.com/workergnome/dynamic-workshop
The slides:
http://www.slideshare.net/workergnome

Got your computer?

Get ready.
1. Get a dropbox account.
http://www.dropbox.com
2. Get a heroku account.
http://www.heroku.com
3. Download Sublime Text 3 (optional)
http://www.sublimetext.com/3

Get set.
1. Install Ruby
* OSX 10.9/10.10 - !
* Old OSX - http://brew.sh
* Windows - http://rubyinstaller.org
2. Install Bundler
gem install bundler

Go.
1. Create a Heroku app
2. Link it to Dropbox
3. Open the app directory in Sublime Text

3 ﬁles.

File #1
Gemﬁle
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'

File #2
conﬁg.ru
require './hello'
run Sinatra::Application

File #3
hello.rb
require 'sinatra'
get '/' do
"Hello World!"
end

In the terminal:
cd ~/Dropbox/Apps/Heroku/[your_app_name]
bundle install
bundle exec rackup
In a browser:
http://localhost:9292

Blammo.
You now have a locally deployed server, hosting your
content.

Blammo.
You now have a locally deployed server, hosting your
content.
control-c will quit it.

Potential Problems:
on Windows, this error:
SSLv3 read server certificate B: certificate verify failed
Can be fixed with this:
http://git.io/AEqB

Deploy to the web.
This is the hard part.

Deploy to the web.
Go to:
https://dashboard.heroku.com/apps

Deploy to the web.
Click on your app.

Deploy to the web.
Click on .

Deploy to the web.
Type a message:

Deploy to the web.
Click

Deploy to the web.
Go to:
https://[your-app-name].herokuapp.com

Blammo.You're on the internet.

A quiet round of applause
for you.

A quiet round of applause
for you.
! ! ! ! ! ! ! ! !

Explanations.
Gemﬁle
ruby '2.1.2'
gem 'sinatra'

Explanations.
Gemﬁle
ruby '2.1.2'
gem 'sinatra'
A Gemﬁle lists dependencies.

Explanations.
Gemﬁle
ruby '2.1.2'
gem 'sinatra'
External libraries that you'd like to use.

Explanations.
Gemﬁle
ruby '2.1.2'
gem 'sinatra'
In ruby, these are called Gems.

Explanations.
Gemﬁle
ruby '2.1.2'
gem 'sinatra'
In ruby, these are called Gems.
Gemﬁles are managed by Bundler.

http://bundler.io

Explanations.
Bundler
Bundler makes sure that the dependencies of your
dependencies don't conﬂict.

Gemﬁle.lock
...
rack (1.6.0)
rack-protection (1.5.3)
rack
sinatra (1.4.5)
rack (~> 1.4)
rack-protection (~> 1.4)
tilt (~> 1.3, >= 1.3.4)
tilt (1.4.1)
...

Explanations.
We want sinatra. sinatra wants rack.
sinatra also wants rack-protection.
rack-protection also wants rack.
We only want one copy of rack.

Don't worry about
all of this.

Don't worry about
all of this.
There's only 2 things you need to know:

#1Heroku uses the Gemﬁle to setup the server for you.

#2If you want to use a library, add it to Gemfile.

in Gemfile:
ruby '2.1.2'
gem 'sinatra'

in Gemfile:
ruby '2.1.2'
gem 'sinatra'
gem 'my-awesome-library'

from the terminal, type:
bundle install

Explanations.
conﬁg.ru
require './hello'
run Sinatra::Application

Ignore this ﬁle.

Ignore this file.
It's a Rack configuration file that handles the
interface between the webserver and the
framework while allowing middleware applications.
For more information, go to http://rack.github.io.

Ignore this ﬁle.
As long as it has the line
require './hello'
and you have a ﬁle named hello.rb
you're !

Explanations.
Back to Sinatra.

http://www.sinatrarb.com

Sinatra is a small DSL for
creating web sites.
— Frank Sinatra

Explanations.
Hello.rb:
require 'sinatra'
get '/' do
"Hello World!"
end

Explanations.
Hello.rb:
require 'sinatra'
Load the Sinatra library.

Explanations.
Hello.rb:
get '/' do
"Hello World!"
end
when there's a GET request to /,
return the string "Hello World!"

Two notes about Ruby:
1. Ruby uses do...end instead of {...}
2. Ruby returns the last line by default.
get '/' do
"Hello World!"
end
in Javascript:
function getIndex() {
return "Hello World!";
}

Let's make this more folksy.
in the terminal:
bundle exec rackup
in hello.rb:
require 'sinatra'
get '/' do
"Howdy, World!"
end

What happened?

What happened?
The server is still running the original code.

What happened?
We could ﬁx this by quitting and restarting.

What happened?
We could ﬁx this by quitting and restarting.
BOOOORING.

Let's install a library.
Gemﬁle:
ruby '2.1.2'
gem 'sinatra'

Gemﬁle:
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'

Gemﬁle:
ruby '2.1.2'
gem 'sinatra'
in the terminal:
bundle install

hello.rb:
require 'sinatra'
get '/' do
str = "Howdy, World!"
end

hello.rb:
require 'sinatra'
require "sinatra/reloader"
get '/' do
end

hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
end

in the terminal:
bundle exec rackup
and http://localhost:9292

Let's make this MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, world!"
end

Let's make this MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, all y'all."
end

Automatic refreshing.
You've installed your ﬁrst gem.

Another quiet round of
applause for you.

Another quiet round of
applause for you.
! ! ! ! ! ! ! ! !

Plain text is boring.

Plain text is boring.
(Says the man with hevetica slides)

Create a public folder
within your application's folder
and put an image in it.

Let's make this EVEN MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, all y'all."
end

Let's make this EVEN MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, all y'all. <br> <img src='cowboy.png'>"
end

And if we want another URL?
hello.rb:
require 'sinatra'
get '/' do
end
get '/goodbye' do
"So long, partner."
end

Your HTML is bad
and you should feel bad.

Move our pages out of the code:
require 'sinatra'
get '/' do
end
get '/goodbye' do
"So long, partner."
end

Move our pages out of the code:
require 'sinatra'
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end

And add them to a views folder:
views/index.erb:
<p>
Howdy, all y'all. <br>
<img src='cowboy.png'>
</p>
views/goodbye.erb:
<p>So long, partner.</p>

Let's make it dynamic!

Dynamic Websites
views/goodbye.erb:
<p>So long, partner.</p>

Dynamic Websites
views/goodbye.erb:
<p>
So long, partner, see you on
<%= (Date.today + 1).strftime('%A') %>!
</p>

And let's add a layout.
views/layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
</head>
<body>
<%= yield %>
</body>
</html>

Are you feeling
accomplished?

Are you feeling
accomplished?
! ! ! ! ! ! ! ! !

The web is stateless.
Every webpage
a new adventure.

Sometimes we want
statefullness.

Sometimes we want
statefullness.
We want a session.

Sometimes we want
statefullness.
We want a session.
Really, we just want a cookie.

Sometimes we want
statefullness.
We want a session.
Really, we just want a cookie.
!

Let's add jQuery
layout.erb:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%= yield %>
</body>
</html>

Cookies let the
client and the server talk.

Cookies let the
client and the server talk.
!

For the client, we need jQuery...
layout.erb:
<!DOCTYPE html>
<html>
<head>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>

We also need jQuery Cookie.
Download this:
http://git.io/AEq1
and save it as this:
/public/jquery.cookie.js

...and add it to the layout.
layout.erb:
<!DOCTYPE html>
<html>
<head>
<script src='/jquery.cookie.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>

And our own javascript ﬁle
layout.erb:
<!DOCTYPE html>
<html>
<head>
<script src='/jquery.cookie.js'></script>
<script src='/application.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>

Which we'll stick in /public
public/application.js:
$(function() {
$.cookie('you_seen_me', true);
});

For the server, we need "sinatra/cookies"
hello.rb:
require 'sinatra'
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end

hello.rb:
require 'sinatra'
require "sinatra/cookies"
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end

hello.rb:
require 'sinatra'
get '/' do
@you_seen_me = cookies[:you_seen_me]
erb :index
end
get '/goodbye' do
erb :goodbye
end

An aside: @variables
@something is a Ruby instance variable.
They exist in the ruby method and the view.

hello.rb:
get '/' do
erb :index
end
index.erb:
<p>
<% if @you_seen_me %> Welcome back! <% end %>
<br>
</p>

First time you come to the site:

Second time you come to the site:

hello.rb:
get '/' do
erb :index
end
index.erb:
<p>
<br>
</p>
application.js:
$(function() {
$.cookie('you_seen_me', true);
});

That's a dynamic website
that saves user data.

Let's push this to the internet.
Click

Done.

I'm proud of you.

I'm proud of you.
! ! ! ! ! ! ! ! !

Redis.

http://redis.io

Redis is a Key/Value Store.

@redis.set("key","value") #saves the data

val = @redis.get("key") #val = "value"

val = @redis.get("key") #val = "value"
That's it.

$redis.set("key","value") #saves the data
val = $redis.get("key") #val = "value"
That's it.
(Not really. But pretend with me.)

Installing Redis on your computer
OSX:
brew install redis

OSX:
brew install redis
Windows:

OSX:
brew install redis
Windows:
http://git.io/AEq7

Installing Redis on Heroku
https://addons.heroku.com/rediscloud

Install it to your app.

Gemﬁle:
ruby '2.1.2'
gem 'sinatra'

Gemﬁle:
ruby '2.1.2'
gem 'sinatra'
gem 'redis'

Gemﬁle:
ruby '2.1.2'
gem 'sinatra'
gem 'redis'
in the terminal:
bundle install

hello.rb:
#...

hello.rb:
require 'redis'
configure do
if development?
uri = URI.parse("redis://localhost:6379")
else
uri = URI.parse(ENV["REDISCLOUD_URL"])
end
$redis = Redis.new(host: uri.host,
port: uri.port,
password: uri.password)
end

hello.rb:
get '/' do
erb :index
end

hello.rb:
get '/' do
@visitors = $redis.get( 'number_of_visitors' ).to_i
erb :index
end

hello.rb:
get '/' do
@visitors = $redis.get( 'number_of_visitors' ).to_i
$redis.set( 'number_of_visitors', (@visitors + 1).to_s)
erb :index
end

index.erb:
<p>
<br>
</p>

index.erb:
<p>
<br>You're visitor <%= @visitors %>!
<br>
</p>

Start up Redis:
on OSX:
in a NEW terminal window:
redis-server /usr/local/etc/redis.conf
on Windows:
open the redis-srv.exe ﬁle you downloaded.

in the OLD terminal window:
bundle exec rackup

Click

Done.

I think you're
quite wonderful.

I think you're
quite wonderful.
! ! ! ! ! ! ! ! !

Saving explicit
user data.

Saving explicit
user data.
That doesn't sound right.

Saving explicitly
provided user data.

Let's create a form.
index.erb:
</p>

Let's create a form.
index.erb:
</p>
<p>Let's play the classic Cowboy game Finger Guns!</p>
<p>Choose how many fingers to show, and you'll fire at the last person to play.</p>
<p>If the total number of fingers is odd, you win!</p>
<form action="/fire_at_will" method="post">
How Many Fingers?
<input id="fingers" type="text" name="fingers">
<input id='kaboom' type="submit" value="Kaboom">
</form>

Our post route.
hello.rb:
get '/goodbye' do
erb :goodbye
end

Our post route. rural, of course.
hello.rb:
get '/goodbye' do
erb :goodbye
end
post '/fire_at_will' do
params[:fingers]
end

Let's try again.

Best. Website. Ever.

We can do better.
hello.rb:
fingers = params[:fingers].to_i
end

We can do better.
hello.rb:
last_fingers = $redis.get('last_fingers').to_i
end

We can do better.
hello.rb:
$redis.set('last_fingers',fingers)
end

We can do better.
hello.rb:
$redis.set('last_fingers',fingers)
if (fingers + last_fingers).odd?
"you win!"
else
"you lose!"
end
end

Let's try again.

I'm a creep.

We've just made a game.

A terrible, terrible game.

How could we make it better?

How could we make it better?
Analytics.

hello.rb:
"you win!"
else
"you lose!"
end

hello.rb:
@result = "you win!"
else
@result = "you lose!"
end
erb :score

hello.rb:
else
end
erb :score
views/score.erb:
<p><%= @result %></p>
<a href="/">Play again?</a>

Let's try again.

Things are looking up.

Let's add some math.
views/score.rb
<p><%= @result %></p>

views/score.rb
<p><%= @result %></p>
<p>
<%=@wins%> have won,
<%=@losses%> have lost.
</p>

hello.rb:
else
end
erb :score

hello.rb:
$redis.incr("wins")
else
$redis.incr("losses")
end
@wins = $redis.get('wins')
@losses = $redis.get('losses')
erb :score

This:
$redis.incr("wins")

This:
$redis.incr("wins")
Is the same as this:
wins = $redis.get("wins")
wins = wins + 1
$redis.set("wins", wins)

This:
$redis.incr("wins")
Is the same as this:
wins = $redis.get("wins")
wins = wins + 1
$redis.set("wins", wins)
Just shorter.

hello.rb:
$redis.incr("wins")
else
$redis.incr("losses")
end
@wins = $redis.get('wins')
@losses = $redis.get('losses')
erb :score

Let's try again.

A quantiﬁable success.

Click

And done.

A big hand, everybody.

A big hand, everybody.
! ! ! ! ! ! ! ! !

What now?

What now?
Whatever you like.

CSS

CSS
AJAX

CSS
AJAX
User counts

CSS
AJAX
User counts
Personal scores

CSS
AJAX
User counts
Personal scores
Cheat detection

CSS
AJAX
User counts
Personal scores
Cheat detection
Completely new experiences

CSS
AJAX
User counts
Personal scores
Cheat detection
Go out and make cool things.

CSS
AJAX
User counts
Personal scores
Cheat detection
Go out and make cool things.
(And show them to me.)

David Newbury
@workergnome
The code: http://github.com/workergnome/dynamic-
workshop
The slides: http://www.slideshare.net/workergnome/
dynamic-websites-for-artists

David Newbury
@workergnome
The code: http://github.com/workergnome/dynamic-
workshop
The slides: http://www.slideshare.net/workergnome/
dynamic-websites-for-artists
Thank you.

Dynamic websites for artists.

Recomendados

Recomendados

Más contenido relacionado

Similar a Dynamic websites for artists.

Similar a Dynamic websites for artists. (19)

Más de David Newbury

Más de David Newbury (20)

Último

Último (20)

Dynamic websites for artists.