Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.
Lecture 50 (Mac Version): Restaurant Server Setup
Loading...
Do curso por Johns Hopkins University
Single Page Web Applications with AngularJS
1400 classificações
Johns Hopkins University
1400 classificações
Curso 5 de 6 em Specialization Desenvolvimento Web com Ruby on Rails
Na lição
Module 5 - Form Validation, Testing, and Restaurant Site Development
Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.
Conheça os instrutores
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
Whiting School of Engineering
[SOUND] In the previous course, since our web site did not have a feature
to update the menu of the restaurant, we could get away with having
a central server to request a menu for all the students in the class.
However, in this course, we're going to be adding a feature for
the owners of the restaurant to be able to update the menu.
Since each deployed application will be able to update the data on the server,
we can no longer get away with just having one central one.
Each student will have to set up their own server with their
own copy of the data to mess with and to use for assignments and so on.
However, not to worry, we made this process for you super simple.
The first thing you need to do is open your browser and
go to the repository that houses the restaurant server code.
So, we'll go to
http://github.com/jhu-ep-coursera/restaur- ant-server.
So what comes up is the restaurant server GitHub repository.
Now besides for housing the functionality of the restaurant server,
we also provide a guide as to how to deploy this restaurant server
on a Heroku server instance.
We're going to use Heroku because it's free and it's pretty good and
basically serves us fairly well.
So what I'm going to do in this video is go step by step,
together with you through this guide and show you how to set this up.
The very first thing we need to do is check our prerequisites, and
the prerequisite, the only one here, is that we have Git installed on our machine.
Well, we did that way before at the beginning of our course so
we should be good to go.
Note that we don't need to install Ruby on Rails
even though this restaurant server is coded in Ruby on Rails.
We don't need it on our local machine.
This is something that Heroku will have already.
The first step is, is to go to our Terminal app, since we're on a Mac, and
go ahead and clone this repository to our local machine.
We'll go ahead and copy that.
We'll open the Launchpad and
we'll open the terminal, we're going to make it full screen.
Now let's go ahead and do an ls to see what's in here,
and we have the Coursera test.
And let's go ahead and make a directory called coursera-projects.
And we'll cd into coursera-projects.
Let's go ahead and clear the screen,
and let's go ahead and paste the git clone command that we copied from our guide.
Let's press Enter, and at this point, it's going to go ahead and
download and clone our repository.
Let's go back to the guide, and the second step here is for
us to set up a heroku.com account.
Well, it's very simple, you just use this link right here,
you can open it in a new tab.
And heroku.com account, you just click this big, purple sign up for free button.
Provide whatever it is it asking you for.
Probably just the email address, password and so on, and you're good to go.
Now I already signed up for a heroku.com account, so
I don't need to go through this.
And I don't need to log in right now either.
So we'll close this tab and you'll go ahead and do that on your own.
Step number three is for us to download and install Heroku Command Line Interface.
This is the tool that is going to help us deploy our
local repository with all of our code for restaurant server to Heroku.com.
Now note, that sometimes this Heroku CLI, Heroku Command Line Interface,
is called Heroku Toolbelt simply because that's what it used to be called.
So here's the link to the instructions on how to install it.
Let's go ahead and open it in a new tab.
And if we scroll down, you can see that it's asking us to download the Heroku for.
Click this down arrow and choose Mac OS, and then we'll go ahead and
download the install program.
Once it's done, we're going to go ahead and tell it Yes to keep it.
It is something we trust, we'll show it in Finder and we'll double-click to install.
We'll click Continue, click Continue again and then Install.
It's probably going to ask us for the administrator credentials, and
I'm going to go ahead and give them here.
Click Install, And
once it's done we can click Close, go back to the instructions,
where it tells us to verify that it actually got installed.
We should run Heroku --version on the Terminal.
Let's go ahead and copy that, go back to our Terminal.
Clear the screen and let's go ahead and paste that command.
And when we enter it you can see that it's actually part of the installation process
a little bit, because it's now actually installing,
what it's doing it's downloading the CLI and then installing it in our system.
And as long as we get these two lines right here,
heroku-toolbelt with a version number and then heroku-cli with a version number.
It means that we actually installed it properly and everything is working.
Let's go back to the guide, and we're going to actually close this tab right
here, and next thing is for us to log into Heroku using the Heroku CLI.
Well, in order to do that we just need to run this heroku login command.
Let's go ahead and copy that, go back to our Terminal,
clear the screen, paste the command, and press Enter.
And the email is the email address you registered with heroku.com.
I'll go ahead and enter my email address, press Enter.
And then the password that you registered with Heroku.com.
Note that it's actually not going to show you the password or
even the little bullet points that you're typing.
Typing is hidden and that's normal.
Once we're done, it will tell us that we're logged in as our email address.
And it means we're good to go, let's go back to the guide.
And the next step here, step five, is to create the Heroku domain.
Well the Heroku domain is the sub domain,
actually, of the herokuapp.com domain name.
And that's something you're going to be able to choose yourself,
assuming it's going to be available, and that's how you're going to deploy
your application when you access it later through a URL or through the browser.
In this case, this is going to be the restaurant-server, that's the restaurant
server application that we're deploying, not our front end application.
There's a couple of options that we have in order to choose our sub domain name.
The first one is, if we just issue a command heroku create,
it will go ahead and randomly pick a subdomain name for us.
However, I'd like to pick my own subdomain name.
And this is the alternative right here.
You say heroku create and give it some subdomain name that is a valid string,
could be a subdomain.
In this case you could see I picked My GitHub username -course5, and
you could pick whatever you want.
Obviously, do not pick this particular one since I'm going to be using it, so
it's probably not going to be available anyway, and you probably want to
pick something that is associated with you, not with my username.
So I'm going to go ahead and copy this command right here,
but before I go, note this bold statement here.
It says here, from this step forward,
we want to make sure that you are located in the restaurant-server directory.
In other words, we need to be inside our git repository for restaurant-server.
And if not, we need to navigate there using the cd server.
Let's go back to the terminal, let's do pwd,
which tells us where we are and we're inside the coursera-projects.
We'll do an ls to see, and
we see that the restaurant-server is directly right beneath that.
So let's go ahead and cd into that directory, let's go ahead and
clear the screen.
And now we're able to place that command of heroku create in order to create
the subdomain with that particular name.
We'll press Enter and you could see that Heroku CLI actually
created the subdomain name with the subdomain name that I wanted.
Let's go back to the guide and go to step six.
Step six is where we get to upload the code for
our restaurant server to heroku.com.
And the way we're going to do that is using Git.
We're going to actually use git push command, and
we're going to upload from heroku to master.
If we go back to our command line and do a git remote -v,
you'll see that we have a couple of remote repositories that our local,
on our machine repository is connected to.
The first one that we probably have seen before is the origin one.
And that's connected to GitHub repository, or at least the remote version of it.
And the second one has a keyword heroku on it, and that's the result of
this command that when we executed heroku create it placed this URL into our remote.
That makes this our local repository, connected to the repository on heroku.com.
So now, if we go back to the guide, it's going to tell us we can use this git push
command, and basically what it says, git push, meaning upload, heroku,
meaning one of these keywords right here, which means we want to upload to heroku.
Which means to this URL, really, that's just what heroku here means.
And we want to upload the branch called master, which is the branch
we're sitting on right now inside of our restaurant-server repository.
Let's go ahead and copy this command, let's go back to the Terminal,
paste it, enter it and it is going to push it to the heroku.com.
And as you can see, it immediately detected that this is a Ruby on Rails app.
It's going to install the needed gems and whatever else it needs to run our
application, and it will deploy it to the subdomain that we asked it to create.
Okay, so once that's done, let's go back to our guide.
It's telling us that we can actually
verify that at least something got deployed by using this URL right here.
Let's go ahead copy it, except obviously, we'll copy that right here.
Except obviously, we're going to use our own subdomain name, not this generic one.
And what we should expect is to see Internal Server Error at
this point with error code 500.
Let's go ahead and open up a separate tab, paste that there, and
we'll substitute this generic one with my subdomain, course5,
and you can see it does in fact say, Internal Server Error.
And the reason it's saying that is because, even though we deployed the app,
and want to make sure that Heroku actually knows the app exists now on Heroku.
What we haven't done is given it a database or
populated the database with any data.
So the way we do that is by using these commands that the guide provides for us,
we'll go ahead and copy that.
Go to our command prompt and go ahead and paste that command.
And what this is going to do is it's going to create the database instance, and
it's going to create the schema for the database that is needed for
our application.
As you can see, that's done, the next step is to actually populate it or
seed it with data.
And this is the command right here that's given, we'll copy that, we'll go back to
the Terminal, we'll paste that, and now you can see, it's going to go ahead and
seed the database with the data that we gave it in our repository.
And some of the things you're going to see here is it looks like a whole bunch of
characters, that's perfectly normal.
That's just the images that the menu items have that we base-64 encoded and
placed a straight in the database, because that was the most convenient for us for
this use case.
Okay, so now that it is done, let's go back to our guide and
there's one more step that we need to do.
And that is set up username and password for
the admin portion of the restaurant site.
Since we obviously don't want the whole world to be able to access our
administrative portion of the site,
that's going to be able to change the data in our database,
we need to set up this user name and password that only will be known to us.
So you as a student, you set up your own username and password and
I'll set up my own.
And the way to do that is first, is to run the Rails console remotely on Heroku,
we'll go ahead and copy that command.
Let's go ahead and clear our Terminal, we'll paste that,
and we'll wait for a command prompt, a remote command prompt to appear.
Okay, so once the remote command prompt appears, we could go back to the guide,
and we'll go ahead and take this line of code right here.
And we'll copy that line, go back to the command prompt, we'll paste it,
and except, obviously, we don't want to say some username and some password.
We'll actually want to go scrolling all the way to where that is and
actually set up whatever the password or username password I want.
In this case, I'll say Jakob is my username and
the password, I'll just say hello123.
And obviously I'm going to change this since I am recording this for
the whole world to see, I'm obviously going to change this password later.
But for now, this is good enough for example, hello123, and
now we're able to Enter, and once that's done, we've committed that user name and
password, and now we're good to go.
We'll go back to the guide, and
you could see that that's it, that's really the end of the guide.
So at this point, we have the restaurant server deployed and
now we could write our front end code.
And when we make requests to the server,
this is the URL that we're going to make requests to.
In fact, we go back to that app that we open that had an internal error and
just do a refresh, we should see now that all the data,
basically the JSON for all the menu items here.
This is the menu items REST endpoint, is showing up as regular JSON,
which means our application is working and we're ready to code against it.
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
