Name: プログラミング入門 - ワイヤーフレーム入門 (Programming Intro - Wireframing Intro)
Uploaded: 2021-01-14T10:09:23.000Z
Duration: 25 min 15 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

動名詞

creating these classes requires equipment and service.

If you appreciate this education, please think about going to Eli the computer guy dot com and offering a one time or monthly recurring donation.

As you know I am, Eli, the computer guy in today's clients are going to be doing an introduction to wire framing.

That's right, boys and girls, grab your pen, grab your paper and show the class what an artist you are.

So what we're talking about when we're talking about wire framing is we're simply talking about drawing out how your application should function so that you can use this as a schematic when you sit down to actually code and develop whatever project that you're trying to develop.

Think about wire framing as a schematic that, let's say a carpenter or a woodworker would use in order to to build a bookshelf, right?

So if a carpenter is going to sit down, they're gonna build a bookshelf.

They will draw out, you know, a design for how that bookshelf is supposed to look, and then, as they're building that bookshelf, they will then reference that design that they've created the same is through, basically, with wire framing.

What you dio is you sit there and you have an idea.

What I wire frame here is an I o T s o Actually, Bernard, we know that communicates with PHP.

It might be a Web might be something very, very, very sophisticated.

Basically, when you're a wire frame in, what you're doing is you're simply drawing out and trying to figure out everything that your application or that your software will need trying to figure out what the information flows, what it needs to connect to and all that kind of thing, so that when you sit down to actually code and design everything out, you have something to reference the other thing that's very valuable when you do, Why are framing is that frankly, it's a hell of a lot of easier to do editing and proof for eating and suck when you simply are using a pen and paper in order to do it right when you sit down and you actually code out a piece of software, especially when you're dealing with user interfaces.

There are a lot of things that interact with each other.

So if you simply want to center something or change of font for something or change color or something like that, you can have a lot of problems once you've actually coded the application.

Because when you start moving things around, it's going to affect other things, right?

So wouldn't it be better is during the design phase during the wire frame phase?

That's when you figure out okay, this is more or less what everything should look like.

And then if somebody else has No, no, no.

It's a lot easier when you're simply dealing with with pen and paper to be able to argue and change things.

So we're gonna be talking about today is we're going to be talking about how to do a wire framing, and this is something.

A lot of new ah, lot of new people they want to skip over this particular process.

This is probably one of the most important things were gonna be doing when you're gonna be developing your application.

So now they have a basic idea of what wire framing is.

And I'll actually try to explain to you what's going on with this particular wire frame that I sketched out.

So here's a little wire frame that I sketched out now, to be clear when I'm gonna be doing a lot of the coding projects in the future, I am very interested in I ot some interested in our genome interested in raspberry pi interested in having these things communicate up with cloud functions and that type of thing.

So do realize when I'm teaching you folks how to code.

This is from a very classic I NT centric ideology.

Basically, being is, I want my devices to be about, communicate back with servers and then have those servers be able to present me with information that I care about.

So if you're trying to create video games, if you're trying to do other kinds of coding projects, just to be clear, you know I'm probably not going to be teaching you things that are the most relevant for what you're going to be doing.

I'm interested in the I t administration world, the coyote world, that type of thing.

So basically, what I have here is a basic project design for having Arduino with a temperature and humidity sensor.

So my idea is, I'm going to create a little Aren't we know device?

This will actually most likely be an Arduino, you know, with WiFi.

So the artery no, you know, with WiFi has a full WiFi stack on it.

So it is able to collect censor information, and then with that wife, I stack, it's able to post that sensor information to something such as a P A P script.

So what I'm showing here is I have my arm, you know, you know, on iron.

We know, you know, I'm going to have a temperature sensor connected, and I'm going to have a humidity sensor connected.

And so, again, this is a way before I start trying to plug things into the yard, we know I need to simply draw this out.

Other people can have arguments about it and we can try toe hash that out before we get to the place where I'm actually having to mess around with connecting everything to the Arduino itself.

We know it's got a temperature sensor is going to have a humidity sensor.

Then we have a little arrow here to show that is going to be sending data.

I'm gonna be sending it to a PHP script so that PHP script isn't going to receive the temperature data.

And it's going to receive the humidity data then because I'm going to doing things such as charts and so for charts.

I need things like Time stamps and then going with PHP.

And so this is an important thing to be thinking about.

And this is one of the values of wire framing, right?

Do we know you can actually add what is called a real time clock to the art we know.

So the yard wayto could send send the temperature of the humidity a end of the time to the p A p script.

But that means I'd have to add the actual physical, real time clock to there.

We know it's an extra module that gets added on, and then I have other things that I have to worry about.

So this again, this is where it's useful for wire framing where we can have an argument about Does Yard, we know send the time values or is the PHP script going to add the time value?

We could just argue that out here on a piece of paper.

So what I'm going to have is I don't wanna have to deal with an extra module.

I don't wanna have to deal with voting for it.

I don't want to deal with fail yours or you're dead on arrival or any of that kind of crap.

So I'm not gonna put the real time clock on the Arduino itself.

I'm simply going to add a time stamp from the PHP scrip PHP script.

It's gonna receive the temperature from the Arduino is gonna receive the humidity from the Arduino, and that's going to add a time stamp.

There's going to be called a reading table.

That reading table isn't going to get the temperature of the humidity and the time stamp that has been added from a P A P script.

So basically, this is how the information will go.

I don't want to want an administrator dashboard, so this will be an HTML dashboard html CSS, possibly job script, something like that.

And so I'm showing here is this data we got.

The arrow will then be able to be used for the administrative dashboard.

I'm simply going to have something that says Current and Tim Mature humidity.

It'll say 97 for humidity will say 50 under that I want a little car that'll say what the temperature and humidity has been like for the past 24 hours.

That's why the time stamp is required on down here for the last week.

Gonna have another chart, so basically it'll show us what the current has will show us what the trends for the past 24 hours are, and it'll show us where the trends are for the last week.

And so with this, this gives me a basic design.

I can start writing out something called pseudo code.

We'll talk about in a later class and start trying to build out this particular project.

Isn't it better to be editing to be modifying to be changing toe, have arguments over a piece of paper and something that I scribbled out versus Imagine if I tried to do to actually design code all of this out?

And then once it's completed, we then started having stupid arguments about how all of this stuff to work through other valuable thing again with wire framing is again, especially if you're new to coding.