Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
During this course we'll use the Four P's of Problem Solving: Preparation, Plan, Perform and Perfect.
Downloads
Further Reading
Chrome Extension
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
During this project we'll employ a problem
solving methodology known as The 4 P's
0:00
of Problem Solving.
0:04
First, Preparation, where we understand
the problem and
0:06
think of a high level solution.
0:09
Second, Plan, where we plan out the
solution.
0:12
Third, Perform, where we perform the
actions required for
0:15
our proposed solution.
0:18
And finally, fourth, we Perfect the
solution.
0:20
Perfecting doesn't mean that the projects
will be perfect when we get to the end of
0:23
the perfecting stage, but we'll be
incrementally improving the project
0:26
with more Preparation, Planning and
Performing.
0:31
Once we're done you may want to improve
the project and
0:34
perform some of your own perfections.
0:37
Let's jump into some preparation and
planning.
0:39
Hit the launch work space button
accompanying the video and follow along.
0:42
So when you launch a work space,
0:46
you should see a panel like this where you
can edit files in here,
0:48
you've got your console down here and your
files on the left hand side.
0:52
You can even download the files to your
local machine if you would prefer
0:56
doing it that way.
1:01
But for this course we're gonna be using
work spaces.
1:02
We don't need to worry about installing
anything on our machine.
1:04
We can just code and get to work.
1:07
So we're gonna combine the preparation and
planning phases.
1:10
The preparation phase is just taking a
look at all the files and
1:13
the tools at our disposal and
1:18
seeing if we can figure out what the
problem is and what the solution is.
1:21
So let's take a look in our app.js file,
and it's empty, so
1:25
this is where we're gonna put the bulk of
our code, I'm gonna just write
1:29
a comment saying the problem, and let's do
another comment for solution.
1:34
Cool.
1:43
And we've got some design files here.
1:44
I've actually downloaded these to my local
machine so I can preview them, and
1:47
let's take a look in the HTML, index.html,
1:52
and as you can see we can type in a
username.
1:57
So we can type in waldo.
2:00
And click on search, this wouldn't do
anything right now because it's not
2:02
a dynamic site, but if we view the page's
source
2:06
you can see we've got a form at the bottom
posting to the home location.
2:12
And this is what the profile would look
like, we've got a avatar.
2:20
We've got the username.
2:25
We've got the badges earned, and we've got
the JavaScript points.
2:27
So, we would need to somehow populate this
information ourselves dynamically.
2:31
And there's an error.HTML file which shows
this error at the top here.
2:40
But it, it's got the same contents down
here as the home.
2:45
Or the search, so we should bear that in
mind in the future.
2:49
So lets take a look back at our files.
2:53
We've got an index profile, an example
profile,
2:57
sorry, and we can click on the X here just
to get some more space.
3:00
We can always show our console again by
clicking on View show.
3:05
Console, or hide console to hide it again,
and in here we've got
3:09
the var Profile which requires the profile
JS file which is this,
3:15
and it gets a studentProfile with the
username of "chalkers", which is me.
3:20
Let's read this here.
3:28
When the JSON body is fully received the
end event is triggered and
3:29
the full body is given to the handler or
callback, so what that
3:34
basically is saying is that when we've
downloaded the JSON from the treehouse API
3:40
an end event gets triggered, and the full
body is returned to a callback, so.
3:46
This is the console dir method so
3:51
the JSON body will get given to that and
it will print out to the console
3:55
in the pretty format you know where the
object looks fancy.
4:01
And then if this a parsing, network, or
HTTP error.
4:07
An object is passed to the handler or call
back.
4:12
So let's just see if this actually
4:14
works by typing node example_profile.js.
4:20
Hit enter and it spits out that.
4:28
Lovely JSON.
4:33
If you want to see what the JSON looks
like yourself,
4:35
you can go to
teamtreehouse.com\username.json.
4:38
Now if a user has got privacy settings,
you may not be able to see all the users.
4:43
You can only just see the ones that
publicly share the badge information.
4:49
So I've got a Chrome extension and I can
click on this minus sign for example, and
4:54
I can just make things shorter so I can
see things a lot clearer.
4:58
I can see that the badges is an array so I
can get the length of that for
5:02
the total count of badges.
5:06
And we've got here the points with the
JavaScript topic with
5:08
the amount of JavaScript points I've got.
5:13
So I can access this JSON by that
profile.js file.
5:15
And then finally let's take a look at
Node.JS just to make sure that we can
5:22
do the things that we want to do.
5:27
So if we go to the docs and API DOCS.
5:29
And HTTP, we can create a server, so
that's we wanna do.
5:33
And we want to read files from a file
system,
5:38
which I'm sure we can find some methods in
here for accessing the file system.
5:42
So, so going back to our code now, we can.
5:49
Try and give a stab at what the problem
is, what the solution is, and
5:53
plan out that solution.
5:57
So, we need a simple way
5:59
to look at a user's badge count.
6:04
And JavaScript
6:12
points from a web browser.
6:17
We could easily do this in a console but
judging by the designs we want to actually
6:23
do this as an HTML page in the server on
the internet.
6:28
And the solution would be use
6:33
Node.JS to perform the profile look ups
and
6:38
serve our templates via HTML HTTP sorry.
6:46
So we're gonna use node to go out and
6:56
get all the profile information used in
the profile.js file, and
7:01
we're gonna create a server and serve out
all of our index profile with error pages.
7:05
So yeah, that's cool.
7:12
Now let's plan out the solution.
7:16
Let's break this down into digestible
chunks.
7:18
I'm gonna close the console again and say
1.
7:21
create a web server.
7:26
2.
7:29
We want a handle, the HTTP route,
7:33
or if you're British root.
7:39
So the home route where, when it's open a
domain name or what, what have you,
7:47
this will show the search, field, for
example.
7:51
So, we've got this form at the bottom here
and it uses the post method and
7:56
it goes to the home route as well, so we
need to handle that as well.
8:00
[BLANK_AUDIO]
8:04
So, that handles the searching side of
things.
8:10
And now we want to handle the HTTP
8:15
route for get/username.
8:20
So, we would like a nice clean URL
8:25
when we type in whatever this domain name
is, slash.
8:30
The username so like slash chalkers.
8:35
Or slash Dave McFarland or something like
that.
8:40
So number 4.
8:43
And finally we want to function that
handles the reading..
8:48
Of files so the, the templates that we
have.
8:58
And merge in values.
9:02
So when we go out to the internet, get the
information,
9:10
we want to populate that into our
profile.html.
9:13
Right now it's started with all those
information but
9:17
we want it to be everybody's information.
9:20
So I think those are the 4 main components
of our application.
9:22
Let's just try and break down each one
into.
9:26
More digestible chunks.
9:29
So, we create the web server and
9:31
then I'm gonna write some pseudo code.
9:35
So, pseudo code means that it's not
exactly code but
9:39
you should be able to get the jist of what
it is.
9:43
So, if the URL is equal to slash and GET.
9:46
We want to show the search field.
9:55
Cool.
10:02
So if the URL.
10:04
Is equal to slash.
10:08
And it's a Post.
10:13
We want to redirect to the username.
10:16
[BLANK_AUDIO]
10:22
So if the URL is equal to slash anything.
10:27
[BLANK_AUDIO]
10:36
We want to get the.
10:41
JSON from treehouse.
10:43
[BLANK_AUDIO]
10:44
and then on the end that's when all the
dates come back.
10:50
We want to show the profile and
10:56
if there's an error.
11:00
[BLANK_AUDIO]
11:04
We want to show the error.
11:12
So I think that covers handling the user
route.
11:18
So if I type in chalkers, it will show my
chalkers information.
11:22
If I do chalkers 1 2 3, that doesn't exist
so it should show an error.
11:26
And finally, we need to read from file and
get a string.
11:32
And then we want to merge.
11:43
Values into string.
11:47
So we do a quick search of the, the
template file and we just
11:50
populate the information that we get from
the, from the JSON from treehouse.
11:56
Cool.
12:01
Now our planning doesn't go into every
single detail but it's enough for
12:02
us to get going, we can always add more to
it later.
12:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up