WEBVTT

00:00:00.480 --> 00:00:03.080 align:middle
Hello, and welcome back
to the Pharo course.

00:00:03.240 --> 00:00:05.600 align:middle
This segment
covers two more aspects.

00:00:05.760 --> 00:00:07.360 align:middle
I'll cover them in depth.

00:00:07.520 --> 00:00:11.280 align:middle
You'll use them yourselves
in the TinyBlog exercises.

00:00:11.520 --> 00:00:16.160 align:middle
First, what web development can we do
once we have described data?

00:00:16.320 --> 00:00:18.360 align:middle
Second, how does Seaside use REST?

00:00:18.520 --> 00:00:22.080 align:middle
Seaside is one of the frameworks
for REST in Pharo.

00:00:22.280 --> 00:00:24.520 align:middle
Let's start with the first subject.

00:00:24.680 --> 00:00:27.640 align:middle
Magritte is a framework
based on the hypothesis

00:00:27.800 --> 00:00:30.320 align:middle
that if you describe your data once,

00:00:30.480 --> 00:00:33.680 align:middle
it can generate several objects
based on this data.

00:00:33.880 --> 00:00:36.760 align:middle
Webforms and graphic interfaces,
for example.

00:00:36.920 --> 00:00:39.360 align:middle
In this course, I'll be focusing on

00:00:39.520 --> 00:00:42.800 align:middle
showing you how to generate
Seaside components

00:00:43.000 --> 00:00:46.160 align:middle
so that you can code
web applications faster.

00:00:46.360 --> 00:00:49.160 align:middle
We'll take the class "Address"
as an example.

00:00:49.320 --> 00:00:51.480 align:middle
These are Swiss addresses.

00:00:51.920 --> 00:00:55.000 align:middle
An address is defined
as a street, a place,

00:00:56.680 --> 00:00:58.960 align:middle
a postal code, and a canton.

00:00:59.320 --> 00:01:03.560 align:middle
I have an instance which describes
a particular street.

00:01:04.040 --> 00:01:07.000 align:middle
So far, this is just
standard programming.

00:01:07.400 --> 00:01:09.000 align:middle
Now, what Magritte does

00:01:09.200 --> 00:01:11.720 align:middle
is describe the fields
in the class.

00:01:11.880 --> 00:01:16.240 align:middle
It will describe a string in such a way
as to define it as a street name.

00:01:16.560 --> 00:01:19.640 align:middle
The postal code description
is more interesting.

00:01:19.800 --> 00:01:21.920 align:middle
First of all, we are going to say

00:01:22.080 --> 00:01:25.240 align:middle
an address is not valid
without a postal code.

00:01:25.400 --> 00:01:28.080 align:middle
Addresses lacking postal codes
are invalid.

00:01:28.480 --> 00:01:33.800 align:middle
And all Swiss postal codes
are figures between 1000 and 9999.

00:01:33.960 --> 00:01:37.160 align:middle
This is specified
in the NumberDescription.

00:01:37.400 --> 00:01:39.960 align:middle
This information can be taken
into account

00:01:40.120 --> 00:01:41.840 align:middle
for automatic form validation.

00:01:42.000 --> 00:01:46.840 align:middle
For Place, we also describe
it as required, and as place.

00:01:47.000 --> 00:01:50.640 align:middle
Moreover, in Switzerland,
there are 26 cantons.

00:01:50.880 --> 00:01:54.800 align:middle
The canton is part of a list,
so we have SingleOptionDescription.

00:01:55.080 --> 00:01:58.960 align:middle
It is required. We want it to be sorted,
and the options listed.

00:01:59.120 --> 00:02:03.120 align:middle
So the list of options
is limited to these 26.

00:02:03.800 --> 00:02:04.920 align:middle
Once that's done,

00:02:05.240 --> 00:02:07.200 align:middle
what can we do with Magritte?

00:02:07.400 --> 00:02:10.880 align:middle
Here is how the address
is described in Pharo.

00:02:11.240 --> 00:02:16.320 align:middle
We'll define a descriptionStreet
as a StringDescription,

00:02:17.800 --> 00:02:20.200 align:middle
with such and such a label
and priority.

00:02:20.360 --> 00:02:23.880 align:middle
For street numbers,
I define a NumberDescription:

00:02:24.960 --> 00:02:27.640 align:middle
I assign a different priority
and label.

00:02:27.800 --> 00:02:32.200 align:middle
I specify "Required"
and give my minimum and maximum values.

00:02:32.520 --> 00:02:36.080 align:middle
The very first thing
I can do with this description

00:02:36.240 --> 00:02:39.640 align:middle
is write a little tiny program
to interpret the address

00:02:39.920 --> 00:02:41.200 align:middle
and generate reports.

00:02:41.560 --> 00:02:44.480 align:middle
I take an address,

00:02:44.800 --> 00:02:47.080 align:middle
and run it through this program,

00:02:47.480 --> 00:02:49.480 align:middle
which generates a little report:

00:02:50.160 --> 00:02:52.520 align:middle
The name of the street,

00:02:55.400 --> 00:02:58.040 align:middle
The place - Bern,
and the canton, Bern.

00:02:58.200 --> 00:02:59.440 align:middle
Postal code 3012.

00:02:59.640 --> 00:03:03.800 align:middle
I can use the fact
that my data has been described

00:03:04.440 --> 00:03:06.440 align:middle
to generate reports.

00:03:06.920 --> 00:03:09.080 align:middle
That was the simplest kind.

00:03:09.240 --> 00:03:12.480 align:middle
But now we'll do more complex
things with Seaside,

00:03:12.880 --> 00:03:15.160 align:middle
like creating a visual component.

00:03:15.400 --> 00:03:16.640 align:middle
Here, I am saying,

00:03:17.240 --> 00:03:20.400 align:middle
"Address object, I want to see you
as a component."

00:03:20.560 --> 00:03:22.600 align:middle
That generates this part.

00:03:24.760 --> 00:03:29.600 align:middle
I'll add a validation form,
which gives me "Save" and "Cancel."

00:03:30.200 --> 00:03:33.160 align:middle
And I'll write a "call" command
so it displays.

00:03:33.320 --> 00:03:37.960 align:middle
As you can see, I managed all that
without even using the Seaside DSL.

00:03:38.320 --> 00:03:41.880 align:middle
Described, my web components
are generated automatically.

00:03:42.200 --> 00:03:43.600 align:middle
That's powerful!

00:03:43.880 --> 00:03:46.560 align:middle
Here is what the company Quuve does

00:03:46.840 --> 00:03:50.400 align:middle
Quuve is an American
portfolio management platform.

00:03:50.600 --> 00:03:54.080 align:middle
The whole display
was done with Seaside and Magritte.

00:03:54.400 --> 00:03:57.160 align:middle
All the reports
are generated automatically.

00:03:58.280 --> 00:04:01.320 align:middle
That's a serious gain
in productivity!

00:04:01.560 --> 00:04:05.800 align:middle
The idea of this course
is to give you some intuition

00:04:05.960 --> 00:04:08.960 align:middle
of what can be done
when you describe your data,

00:04:09.960 --> 00:04:13.280 align:middle
especially
with web component generation.

00:04:13.840 --> 00:04:15.560 align:middle
You'll do that in TinyBlog.

00:04:15.760 --> 00:04:20.680 align:middle
Now, I'll show you the potential
in Seaside's REST layer.

00:04:21.080 --> 00:04:25.920 align:middle
It enables client-server communication
in the absence of visual components.

00:04:26.280 --> 00:04:29.760 align:middle
REST is integrated into Seaside
smoothly.

00:04:30.080 --> 00:04:32.440 align:middle
Domain objects will be annotated.

00:04:32.600 --> 00:04:36.040 align:middle
You'll have a natural conversion
between URL parameters

00:04:36.280 --> 00:04:38.720 align:middle
and SmallTalk or Pharo methods.

00:04:39.800 --> 00:04:43.760 align:middle
To give you an idea of the complexity,

00:04:44.040 --> 00:04:47.880 align:middle
we'll define what we call a "filter":

00:04:48.120 --> 00:04:51.240 align:middle
TinyBlog Restful Filter.

00:04:51.400 --> 00:04:54.800 align:middle
is a subclass of WARestful -
it doesn't matter.

00:04:55.160 --> 00:05:00.040 align:middle
The important part is the filter I add
down here when I create my application.

00:05:00.480 --> 00:05:02.360 align:middle
You'll see it in the exercise.

00:05:02.960 --> 00:05:06.560 align:middle
Now, let's imagine
that I want to get all the blogs

00:05:06.880 --> 00:05:09.840 align:middle
that I have on my TinyBlog server.

00:05:11.120 --> 00:05:11.960 align:middle
Here's how:

00:05:12.160 --> 00:05:15.680 align:middle
First, I define a method

00:05:17.040 --> 00:05:20.320 align:middle
in the RestfulFilter class,
a method called listAll.

00:05:21.520 --> 00:05:25.280 align:middle
It corresponds to the anchor
I'm going to use:

00:05:26.280 --> 00:05:30.720 align:middle
I tell it to use its "get"
from the REST protocol

00:05:31.160 --> 00:05:33.200 align:middle
to generate text in json form.

00:05:33.360 --> 00:05:37.760 align:middle
I create a Pharo string stream

00:05:38.080 --> 00:05:41.600 align:middle
I want the stream to contain
all available blogs.

00:05:42.000 --> 00:05:45.280 align:middle
I'll take each blog -
and you see another iterator -

00:05:45.640 --> 00:05:48.400 align:middle
Take each blog
and convert it to Javascript,

00:05:48.800 --> 00:05:50.400 align:middle
separated by commas.

00:05:51.360 --> 00:05:53.040 align:middle
That gives me what I want.

00:05:53.200 --> 00:05:57.200 align:middle
Now we want to do something
a little more advanced.

00:05:58.000 --> 00:06:03.280 align:middle
Say I want to find a blog
by searching for a title match.

00:06:04.440 --> 00:06:06.760 align:middle
Here, I can use "post," for example.

00:06:07.080 --> 00:06:11.560 align:middle
I'll say I want this blog post,
by giving the title next to it.

00:06:11.760 --> 00:06:16.160 align:middle
I do that by defining a "post" method
that takes a title as a parameter

00:06:16.720 --> 00:06:18.640 align:middle
along with the "path" concept.

00:06:18.880 --> 00:06:24.360 align:middle
I tell it, when the URL
contains http..., post/

00:06:25.200 --> 00:06:28.880 align:middle
and something here,
those characters are the title.

00:06:29.200 --> 00:06:33.280 align:middle
That's what we see here,
inside the wavy brackets.

00:06:35.520 --> 00:06:39.720 align:middle
Likewise, I tell it,
that will produce text in json form.

00:06:40.080 --> 00:06:44.080 align:middle
Then what I do is call upon
TinyBlog functionalities.

00:06:44.240 --> 00:06:48.520 align:middle
I ask, do you have a post
with a title specified as a parameter?

00:06:49.200 --> 00:06:51.640 align:middle
Yes? If it's empty, I return an error.

00:06:51.800 --> 00:06:55.200 align:middle
Otherwise, I put it in my stream
and render my stream.

00:06:55.640 --> 00:06:57.800 align:middle
There are lots of things
we can do.

00:06:58.120 --> 00:07:01.120 align:middle
If I want to do a search,
it's the same thing.

00:07:05.000 --> 00:07:06.640 align:middle
In my URL line, I type

00:07:06.920 --> 00:07:10.760 align:middle
"search: title" with a value,
it will be matched automatically.

00:07:10.920 --> 00:07:13.880 align:middle
My title will appear here.

00:07:16.520 --> 00:07:20.160 align:middle
That's how you work with REST
in Seaside.

00:07:20.560 --> 00:07:24.560 align:middle
You can have your graphic components
in Seaside

00:07:24.720 --> 00:07:27.680 align:middle
and a way to expose
your domain functionalities

00:07:27.840 --> 00:07:28.880 align:middle
with a REST API.

00:07:29.560 --> 00:07:32.440 align:middle
I've only shown you "gets."

00:07:32.760 --> 00:07:36.840 align:middle
But all the other REST functionalities
are available:

00:07:37.240 --> 00:07:39.160 align:middle
Delete, Post, Get, etc.

00:07:40.440 --> 00:07:43.720 align:middle
I also showed you how Seaside,
paired with Magritte,

00:07:43.880 --> 00:07:46.600 align:middle
generates powerful forms,
automatically.

00:07:47.040 --> 00:07:48.840 align:middle
And REST is well integrated.

00:07:49.080 --> 00:07:53.000 align:middle
Often, people use Teapot
as a REST solution, as well.

00:07:53.160 --> 00:07:56.440 align:middle
It's a Zinc overlayer
for doing REST prototypes.

00:07:56.960 --> 00:08:01.200 align:middle
It's a quick way to find out
if their REST API is working.

00:08:01.680 --> 00:08:02.760 align:middle
Have fun with it.

00:08:02.920 --> 00:08:06.640 align:middle
There's documentation
in the Web Enterprise Book.