#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.

Talk Python's Mastodon Michael Kennedy's Mastodon