Preview
Video Player
00:00
00:00
Your First App
7:25We'll talk about how Sinatra can help you create web apps. Then we'll show you how to create and run a simple app.
When you type in the address bar of
your browser, you're entering that URL.
0:00
Ones that you click also contain URLs.
0:04
Those URLs include
the address of a web server
0:07
which is another computer on the network
that delivers web pages to browsers.
0:10
URLs also include the name
of a particular thing,
0:14
resource that you want from the server.
0:17
Your browser sends a request for that
particular resource to the Web server.
0:20
The server's job is to get
the appropriate resource and
0:25
send it back to the browser in a response.
0:27
One way that the server can generate
such a response is to send it to
0:31
a Web Application.
0:34
The application needs
to parse the request,
0:35
find the name of the resource being
requested, generate HTML content, and
0:38
insert that HTML into a response for
the server to send back.
0:42
That's a lot of steps.
0:46
That's why web frameworks
like Sinatra exist.
0:48
Sinatra will handle parsing the request
and generating the response for you.
0:50
Then, all you have to do is write
the code that will generate HTML content.
0:55
And thanks to Sinatra's template system,
generating HTML is easy, too.
0:58
Let's try installing Sinatra now.
1:03
You'll need a working Internet
connection for this step.
1:05
Note that you can also use
workspaces with Sinatra.
1:08
If you are using workspaces,
there's no need to install Sinatra there.
1:10
It's already pre-installed for you.
1:14
The Sinatra library is
distributed as Ruby gem.
1:16
If you're not familiar with gems,
check the teacher's notes for more info.
1:19
We can install it from our terminal
by typing gem install Sinatra.
1:23
Or if you get a file permission
error while installing,
1:28
you might try putting sudo, that's S.U.D.O
and a space on the front of the command,
1:30
but we're gonna skip that here because I know
it's not necessary in my environment.
1:35
RubyGems will automatically download and
1:39
install several gems that Sinatra depends
on, and then will install Sinatra itself.
1:41
The libraries are pretty small,
so it's a fast process.
1:45
Now, it's time to create
our first Sinatra app.
1:49
We'll show you how to set it
up on your own computer first.
1:51
Then we'll switch to using workspaces for
the rest of the course.
1:54
For later videos, you can follow along
in whichever environment you prefer.
1:57
If you have any problems, check
the teacher's notes on this video for
2:00
troubleshooting help.
2:03
So first,
I'll show you how to run an app locally.
2:05
In our editor,
let's create a new file called produce.rb.
2:07
And we'll type in a few
lines of code here.
2:14
Our goal is just to get this up and
running right now.
2:16
We'll go back and
explain the code in more detail shortly.
2:18
So we're going to load the Sinatra
library first with require Sinatra.
2:22
And then,
we're gonna set up a Sinatra route.
2:29
That's gonna respond to HTTP get requests.
2:32
We'll explain that in a little bit.
2:35
And it'll expect those requests
to have a path of slash Apple.
2:38
Will type a ruby block here which
will be invoked every time this route
2:43
gets matched.
2:46
And we'll have it return
the string here's a juicy apple.
2:47
Be sure to save the file when you're done.
2:56
Now, in your terminal, change to
the directory where you just saved to
2:58
produce.rb if you're not already there.
3:02
So, CD produce.
3:05
That's where I saved it.
3:07
Just as we've done with all our
ruby scripts in previous courses,
3:09
we'll type ruby space, and
the name of the file to run.
3:12
We'll hit enter,
3:18
our app will run, and Sinatra will start
logging debug messages to the terminal.
3:19
Now, we need to visit our
Sinatra app in a web browser.
3:23
The app is running on your computer, so
3:26
we'll need to establish a connection from
your computer to that same computer.
3:28
We'll do that using the special host name,
local host.
3:33
So we'll type http://localhost
in our browser address bar.
3:37
There's one more thing we need to
add to the URL before we can connect
3:44
connect to the app.
3:47
Note that part of the output here in
the terminal where it says port=4567.
3:48
This is the network port that Sinatra
is listening for connections on.
3:52
We need to specify that
port as part of the URL.
3:58
We do that by typing
a colon after the host name
4:01
followed by the port number 4567.
4:04
We'll be talking more about ports and
how they work shortly.
4:07
For now, just hit Enter, and
your browser will send a request.
4:10
The request reaches Sinatra, which
returns a response, but it's an error.
4:14
Not that here's an apple
is the response we want.
4:18
It says Sinatra doesn't know this ditty.
4:21
This is Sinatra's version of the 404
error that you've probably seen on other
4:24
websites.
4:28
It means the resource being
requested wasn't found.
4:29
Looking at our code, we see get apple.
4:32
The /apple string needs to be added
on to the URL we're trying to load.
4:35
So we'll add /apple on to
the end of the browser URL.
4:40
We'll hit Return,
the browser will request a new URL.
4:44
And Sinatra will respond with our text.
4:47
That's it.
4:50
With just four lines of code, your app
is responding to browser requests.
4:51
When you're done testing the app,
it's important to shut it down so
4:55
the network port is
available to other apps.
4:57
Just go to your terminal and
press control-C to halt Ruby.
4:59
If you're in workspaces,
there's an important additional
5:03
step that you'll need to follow for
every Sinatra app you create.
5:07
By default, Sinatra is set up to only
accept connections from the same computer
5:10
it's running on.
5:14
But if you're previewing
your app in workspaces,
5:16
you're actually connecting
to a treehouse server and
5:18
your app won't respond to requests
from your computer at home.
5:20
In workspaces, this will show up
as a workspace unavailable error.
5:24
The same error you'd see if your
app weren't running at all.
5:28
The code in this workspace is identical to
the code I just ran on my local machine.
5:31
We need to configure this app to accept
requests form any computer that connects.
5:36
We do that by setting a Sinatra
configuration option called bind.
5:40
So I'll go up to the top of my code,
right below the require Sinatra line,
5:44
and call a method that
Sinatra provides called Set.
5:49
The first argument is a symbol with the
option to set, which we'll do colon bind.
5:53
And the bind symbol.
5:58
The second argument is the value
you want to set the option to,
6:00
the string zero dot
zero dot zero dot zero.
6:03
This will set Sinatra up to accept
connections from any computer.
6:07
Make sure to save your
work when you're done.
6:11
That's all you need to know about
configuring Sinatra for right now.
6:14
But if you ever want to learn more,
check the teachers notes for this video.
6:17
Now, let's go to the workspace console and
type ruby, a space, and
6:21
the name of our .rb file,
just like we did from our local terminal.
6:25
Ruby space produce.
6:29
.rb.
6:31
Just like before,
6:34
we'll see some log messages,
including one showing the port 4567.
6:35
So, we'll click our workspace
preview button and choose port 4567.
6:38
A new preview window will open showing
Sinatra doesn't know this ditty again.
6:44
As before, we'll add the string from
our code on to the end of the URL, and
6:51
hit return /apple.
6:54
And then, we'll see the text.
6:57
Your Sinatra app is
running from workspaces.
7:01
Again, it's best to shut the app
down when you're done testing it.
7:04
Go to your console window and
press Ctrl+C.
7:07
So that's your first Sinatra app.
7:10
Again, if you have any
problems while testing it out,
7:12
be sure to check the teacher's notes.
7:15
Don't worry if it still seems a little
mysterious how everything worked.
7:17
Up next, we'll explain all the details of
how Sinatra responded to your request.
7:20