[MUSIC]

Okay.

So that's the one wall application.

And we're gonna go through the basics of how we build a really,

really simple system that actually works with the server.

Uses the database, so that we can store all the position points of our pen,

and then clear and rub out the drawing if we want to and start again.

It also allows us to collaborate with more than one person at the same time.

So that we can do drawings with each other.

So I'm gonna show you the simple basic version of this idea.

And then I'll talk you through that and then we'll look at the code for that.

Both the client and also the database side.

Okay so let's have a look at that now.

So this is our cheap,

cheerful version which we can knock up in Mongo DB in like an hour.

And that's more or less what we have here, is a very,

very basic implementation that you can build on yourself to do something similar.

And as you can see,

I can draw on this in the same way that I was drawing on the Jacob's one wall.

I can, I'm not doing anything in particular.

I'm drawing a pair, probably a pair of shoes and

sort of just creating some scribbles.

And so I can do all kings of doodling and

what's interesting about this isn't that I'm able to do a doodle.

There's nothing particularly interesting about doodling.

What's interesting about this is the next part, so I want to show you that.

I can, or I should be able to, take my drawing.

I'm still doing that drawing, I'm gonna open up a different Web browser,

which is just gonna connect to the same server.

Localhost:3000.

And you can see that the drawing shows up.

So it seen as another user, it doesn't matter where they are,

as soon as they access this website.

As long as they can get a route to it, they can see exactly the same thing.

And they act to it.

I can say, here we go.

Just trying to do a nice m.

And then maybe.

Let's have a look and see how that turns out.

There it is, doesn't look much like an ant.

So I've made some mistakes, I don't like it.

I can remove the information.

I can go back to my original,

to my other page which is just a different web browser and look, it's all gone.

So the same thing is happening on both browsers.

And that's just exactly what we want.

I can do another doodle.

There you go.

So, what's happening here is the same thing that was happening last week.

We have a database, which is being published to and

is pushing stuff to the client.

So the database has insert commands going into it from the client.

It's storing those database insertions in its database.

And then in real time, it's responsively pushing them out.

To every client so that every clients constantly aware in as close to real time

as possible about what's going on with all the other users on the platform.

So yeah, you can see how this is potentially a really fantastic

thing to be able to build.

And we can do some really great stuff just like Jacob did with his application but

much, much faster.

So the first we need to do is look at the program structure.

So there are very, very few basic files required to make this work, and

again, we don't have security at the moment.

We could put security in when you do that, you need to do two things, and

we've talked about this before.

We just remove auto-publish and we remove insecure.

And then we have to have people log in, in order to access data.

And then we can use specific methods to set when people can read and

publish their information.

Basically, a lot of the time, for collaborative apps,

it's nice not to have those processes.

Sometimes they're useful, particularly if you want to be able store your own images

and use your own images and only invite people to collaborate on your things.

That's really easy to do.

But we're just gonna focus on the basic mechanics.

And we've got a drawingApp.html file a drawingApp.js file,

and that contains the basic app logic.

And then we have something called drawing.js,

which is doing all of the drawing functions based on the data.

Now in last week's session, we had maxim.js, which is a JavaScript file,

which is being picked up by our playground, if you remember.

And the idea was that it was then serving, making available the drawing functions.

Sorry, making available all of the audio functions to the main app.

And we've got exactly the same thing happening now.

We have a library, but in this case it's D3.

And we've added this version of D3 via the package manager built into Meteor.

And then what we're doing is we're creating a JS file, so

it's exactly the same as last week.

The drawing.js file is like our playground.

It allows us to set up how drawing will happen.

And all the drawing commands are contained in there but

because of the way it's structured, we have the same stuff.

We can call globally scoped variables or we can create them and

interact with them across our other js files.

And that's because of the structure.

So let's have a look at this structure again, just like we did before.

This is our drawing app, and

this is how it appears when you open your folder in sublime text.

I recommend this is the way you should work.

It's really very, very good at this.

The sublime text allows you to open the whole folder and see everything which

is in that folder and then browse through your entire application.

We have the Meteor folder again.

That's got all our packages in.

We don't need to pay any attention to that we're going to ignore it for now.

And then we have a client and then a server folder,

and in these folders we've got specific client and server calls.

And it's a bit different, the storage from last weekend that the servers

actually doing a bit more not much just a bit.

So let's have a quick look at that.

What it's doing is creating a new Meteor collection.

Okay, that's going to be referred to throughout the rest of the tutorial.

We're going to be trying to write data and

read data from this Meteor collection called points.

And we're also going to use this server to clear stuff.

It's important to remember that just clearing things isn't very easy in Meteor.

It needs to be done by the server.

I don't know if you remember, but

we had a particular piece of server code in our app last week.

Which we use to reset the database, whilst we were developing the application, in

case for example we randomly inserted lots of rubbish and we wanted to get rid of it.

And rather than go through by ID and remove all of those key.

We were able to do so by putting the code to clear the entire database by inserting

it in the server side code.

So that's what you need to do.

If you put it anywhere else you'll get an error in the console that will say that

you don't have the permission to do it.

You can do it by ID.

And that means iterating through all the ID's.

And you need to basically call as much as you can, iterate through the ID's and

then remove the keys remove all the data.

But it's much easier to do it just by putting it in the server.

And here, what we've done is we've attached it to a button,

which is a standard way of doing it.

We could just comment or uncomment it like we just when we needed it.

This is a bit more useful because when you're drawing,

we've got very limited functionality in this version of the app.

And we're just drawing and

then we're deleting stuff interactively much more than we were before.

Okay, so we also have, so

that's a server that's all it's really doing is creating a database, and

then it's allowing us to do some basic server side operations on it.

And then we have something which is very, very simple.

We have our main app, which is the HTML file.

And it's called 1wall.

And it has a template, a call to a template called wall in it.

And this template, it gets the title and also,

it gets the main canvas objects, canvas template from other files in this folder.

It also has the button at the bottom.

So the main canvas template's here, and

the wall template calls the canvas template.

And then that gets called inside body.

So it all appears in the body tag.

And they're nicely nested.

Okay, so, we also have a CSS file.

Currently there's nothing in there, and that's because I've just installed

the basic Twitter bootstrap files the way that I did for all the other applications.

So you should know how to do that by now If you don't, you should just recap that.

All of the stuff we've done is used exactly the same templates.

So, the thing about those templates is that they're remarkably easy to style, and

if you want any more information on that you can go back and

have a look at those sessions.

So, like I said,

the most important files, the ones that really count are these two JS files.

Just like last time, we have his main JS file which is our drawing map.

And then we have drawing JS which is

handling the fundamental drawing components.

So one JS file for logic, and another JS file for

handling the drawing aspect, okay.

So let's talk about what happens in the main app logic.

What we need to do is create something called an SVG canvas.

So SVG stands for scalable vector graphics,

and there's a couple of things about this that I want to warn you about.

Scalable vector graphics, they're very popular on the Internet.

Lots of people use them, lots of web developers are very fond of them, and

d3.js which is the drawing library that we're using,

uses SVG as a way of doing drawing.

But I wanna warn you, it's a bit slow.

However what it is, is easier to get used to.

So, it doesn't take you long to learn it, and it does some pretty clever things.

And makes those quite easy, but it does slow things down.

There are other more quick methods for doing drawing such as just

substantiating a canvas and drawing a 2D canvas, and some people prefer those.

I'm a big fan of the canvas, but

the thing about d3 is that it has an awful lot of built-in functions for

doing interesting visualizations, so it's worth introducing you to it now.

Like I said, we're not gonna talk through all of its functions, and

when we do show you some of its other functions,

it will just be so you're aware of what's possible.

But at this stage it's something you need to know about, if you don't know about it,

it's an important thing to understand.

So the SVG canvas is what we're using.

SVG is an XML based vector image format.

So it stores the images as vectors, and in that sense, it can be efficient.

And it also supports interactivity and animation.

So in order to create it, we're calling this function Canvas,

and then we're setting the variable SVG here in this piece of code.

So we're creating this canvas here in a canvas function,

canvas equals this function.

So, when we do this, we create a variable SVG, and

we use that variable to set the parameters, the attributes of our canvas.

And this is actually much easier that if we were using a normal HTML5 canvas

because we can just instantiate this variable.

And then we can during our createSvg function

use it to call a d3 object and set attributes on the d3 object.

And the important attributes now are the width and the height.

So we can put in any value that we want for those.

We can try to get them from the document object model.

We can do a whole bunch of different fancy tricks, but

I'm just statically putting them in at the moment.

And so after I've created this method createSvg,

I call the method, and then that creates our canvas.

So, that happens here.

This is how we set it up, just as I was describing.

The function createSvg, it calls d3.

We select the canvas object, and

then we write attributes, the width and the height, into the object.

And then we create that at the end, once we've settled that function.

Okay, so let's have a look at the other functions

in this JS file and what they do.

The first one is self.clear() and what this does it is really obvious.

It clears the screen by removing the current d3 object and

then creating it again.

This is easier than just deleting all of the objects in the database,

so we do do that as well.

So the points are stored in a single array in the mongoDB collection and

that's the important thing.

What we're doing when we click on a canvas,

is we're producing a list of points in Cartesian space.

And they indicate where the mouse has been.

What we're doing is we're taking those x and y values and

we're putting them, inserting them into the database in an array.

So we have an array which is going into the database and it has all of the x and

y locations of the mouse stored in a big list.

And then what we're gonna do is pass that list

into the object that does the drawing.

So that's the next step.

But all of these points are in this single array, sitting in the collection,

the points collection.

And you can see here what happens.

So in the draw function, so we're still in our drawing.js file,

which is what's handling all the drawing, what we have is a function.

Here, which takes our data, checks the length, and it's the length,

if it has nothing in it, it just clears.

Now we can get away without doing that.

We don't bother going through this method if there is nothing there.

We just clear everything and return, but

if there is something in there, we do the following.

We call an SVG function to draw a circle,

sorry, it's a d3 function.

Because our SVG object, if you remember, is instantiated here.

Isn't it?

It's a d3 canvas.

So this canvas has got a whole bunch of different drawing mechanisms

attached to it.

And the one that we're using is the most basic one,

that everybody uses when they start, and it's the circle.

So we're just drawing circles at the moment.

We could draw rectangles.

We could draw lines.

If we were to draw lines, the easiest thing to do would be take the x and

y information from the current position in the array and

use the x and y information from the previous position in the array, and

we can store those values as last x and last y.

And then draw the line as a continuous line, but that's something for

you to try, it's very easy to do.

But the important part is that when it gets mouse positions

that are stored in the array, it runs through all of those mouse positions and

then it says okay, I'm gonna create a circle,

and then it sets these attributes, and this is the way the d3 works.

It has attributes for each circle object.

It has radius, and then it has the circle x,

which is the x position, and y, which is the y position of the circle.

Now you'll see that this attribute has this function attached to it here.

The function (d) return d.x.

Now this is our data, this is getting the data

which has been passed directly to this object and it's scanning through it.

So by this time, the array has come out of Mongo, and it's being squirted in

to our SVG object and turned into attributes for our circle drawing method.

And then also, here after we've got the x and y values,

we're changing the attributes for the way that the circle should be drawn.

What we're doing, as you can see here, is we're setting an attribute fill.

And fill, what that basically means is, change the color.

So this is the same for all kinds of canvas type drawing.

It's normally fill which is the keyword, which means change the color and

then we're specifying the color red.

I could change this to blue, I could also change the radius.

Let's make the radius, like 100, and then go back to the application.

And you'll see that immediately now have this big blue thing,

that's hilarious, I just made a big blue mess.

Let's try a different size.

Lets try 1 from the sublime to the ridiculous or

actually from the ridiculous to the sublime.

Look at that, that's actually very, very nice.

So we got this nice little drawing mechanism, it looks much nicer like that.

And we can do some fancy shading.

You'll notice, though, it's not drawing every mouse value.

It's not drawing every time I drag the mouse.

I've got to click before it'll do it.

So someone somewhere must have put in some methods for

the kinds of information that we're getting from the mouse.

Yeah, so we did that.

So we're gonna have a look at that in a short while.

So you should experiment with trying out different drawing methods.

Maybe you could create some buttons.

If you remember last week, we had a range of buttons and

these changed attributes that could be stored in the database.

And we used getters and setters to specifically store data

about attributes in the database.

I recommend you use this as a simple way of customizing and

controlling the different colors, the different shapes,

and the different sizes for objects.

That way, you can easily and

quickly create a simple interface that allows people to do much more things.

At the moment, it's just the most basic thing.

But you can use those methods from last week's session, and

have a look at those, they should fit very nicely into this.

Or you might find an even better way.

So I think that we wanna slightly, yeah, let's just do this.

Yeah there you go, you see it immediately updates.

Now we might not want to do that.

That's an issue.

It might be much better to store the size in our database,

so actually our array shouldn't just be an array of points, it should be an array of

points and attributes for the type of SVG document we're creating.

And that's something which you can do, you can just store the object and all of its

values in the array and then pass it back, and then have it recreate the drawing.

Another way of doing it, which is slightly easier, is to

grab a screenshot of the SVG or save it and then load it up.

And that means you don't have to store the values anymore.

You've stored your values as an image, as an SVG, and

you can just put the SVG back as an object in itself.

It does make it tricky, editing it would mean drawing over the top of it and

creating a new SVG but

that would solve the problem of having to store all of the document elements.

Once they're set in stone, that's the way you want them to be.

So maybe just write that out, load it in, draw on top, rub out,

resave, and that's a much simpler,

much more efficient mechanism than storing every aspect of the image.

I guess it depends on how much editing you want to be able to do.

But even in Photoshop, that's a standard method.

[MUSIC]

Creating the application

响应式网站教程与实例

与讲师见面