#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: The starter project: Movie Exploder
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Are you ready to start writing some Vue.js code? I hope so 'cause here we go. Now let's go over to our repository here and down into our days
0:11
and talk about what we're going to either work on or get started from. What we're going to do is we're going to build an app
0:15
I'm calling Movie Exploder. And this is going to search a movie database show you the popular ones, let you sort them or find them by genre.
0:26
Get the top ones off the database and things like that. So it's going to interact with this HTTP service and we're going to call it Movie Exploder.
0:33
We also have the service here if you want to run it so you can talk locally in case, for some reason you don't have access to the internet.
0:39
While your working on this you can just change the URL to a local host and the whatever it is here. Just run this after installing the requirements.
0:46
And then what you're seeing me start with is going to be a snapshot right here starter Movie Exploder. That is an exact copy of this at the moment
0:55
of course when we're done we'll have a much more interesting app. Great, so this is the app we're going to work with.
1:00
Now there's going to be no Python. So there's no go create a virtual environment install the requirements because let's see
1:06
we have some CSS, some JavaScript and we have some HTML, only one page for now. Of course we could have more. So we don't need all that.
1:13
Now I could take this over here and run it in PyCharm. Just as I have been. PyCharm is a great web editor as long as you have PyCharm Pro
1:20
it does all sorts of good stuff. You will want to, in PyCharm Pro, install the Vue.js plugin. As we'll talk about later.
1:27
But I'm going to show you WebStorm because WebStorm comes with a few more web features that might be interesting to you.
1:34
Basically WebStorm comes bundled with PyCharm. But just to give you a chance to see a little bit more we're going to see WebStorm.
1:41
Now the service, let's talk about it real quick. You've seen it before with this one but notice over here we've added
1:47
some more features that let us explore. Like what are the genres? Given a genre, what are the top movies there?
1:52
What are the top ten movies just by score overall? And that's it. movie_svc.talkpython.fm So we're going to work with this
2:00
and if you want to get WebStorm you're welcome to check it out over here and download it. But like I said if you have PyCharm Pro, it's all good.
2:08
If you have just a regular community PyCharm you might want to check this out. Anyway we're going to get started with that
2:14
and to do so we're just going to drag and drop this onto either PyCharm or WebStorm. And there it is. So everything's up and running
2:21
we have our CSS, we have our JavaScript, and our views. Now we're just starting with a little bit of HTML here so we're importing the CSS
2:30
and we're importing the JavaScript, things like that. If we run it, we can actually come over here
2:35
and right-click and say Run index.html and there it is. Movie Exploder. It's kind of boring but there it is. You can see we've got some styles.
2:45
Some of the styles come from our CSS some come from Bootstrap and so on. So we're starting from here, and in fact
2:51
if you wanted to you could even come over here. Just run it like this. Straight off the file system.
2:56
You don't even need a web server for what we're doing with Vue.js or any of those things to work. Okay so now it's up and running.
3:02
This is what we're going to be starting from. We're going to go interact with this service. Most importantly those APIs
3:10
that API, well pretty much everything but director is going to be involved in our API. It's going to be a lot of fun
3:15
and I think you'll be really impressed with what we can build with Vue in a really short amount of time.