1 00:00:00,000 --> 00:00:07,526 [MUSIC] 2 00:00:07,526 --> 00:00:11,471 All right, I think I'll go ahead and get started here. 3 00:00:13,060 --> 00:00:15,060 Again, thank you all for joining. 4 00:00:15,060 --> 00:00:15,890 Welcome everyone. 5 00:00:15,890 --> 00:00:18,690 Welcome to the third Treehouse Festival. 6 00:00:18,690 --> 00:00:23,030 And my first presentation at one of these, so thank Liz for inviting me. 7 00:00:24,100 --> 00:00:26,675 I'm Reggie, I'm an instructor and developer, 8 00:00:26,675 --> 00:00:29,420 I'm an instructor here at Treehouse. 9 00:00:29,420 --> 00:00:31,849 And today, if you haven't already guessed from the title, 10 00:00:31,849 --> 00:00:34,430 we'll learn about building a to-do app with Django and React. 11 00:00:35,850 --> 00:00:39,337 We'll be reading some code, writing code, practicing some tools, and 12 00:00:39,337 --> 00:00:42,460 maybe learning some things for the first time. 13 00:00:42,460 --> 00:00:47,200 So if you want to, if you could just, are you a Pythonista? 14 00:00:47,200 --> 00:00:49,760 Are you a JavaScript developer? 15 00:00:49,760 --> 00:00:51,280 Are you just starting out? 16 00:00:51,280 --> 00:00:56,370 If you can answer that in the chat we'll have something for everyone here today. 17 00:00:56,370 --> 00:01:01,376 If you're just a, if you're a Pythonista, awesome or hot. 18 00:01:01,376 --> 00:01:05,500 Let's see, Python, nice. 19 00:01:05,500 --> 00:01:08,976 I started with JavaScript myself and I'm newer to Python, but 20 00:01:08,976 --> 00:01:10,360 in love with it already. 21 00:01:12,793 --> 00:01:17,380 Liz is going to be, you're a great JavaScripter. 22 00:01:17,380 --> 00:01:18,920 Just a little bit, Professor T. 23 00:01:20,350 --> 00:01:24,169 So I see we have some mixed results here, a little bit of both and 24 00:01:24,169 --> 00:01:27,791 that's awesome cuz we have something for everyone today. 25 00:01:30,112 --> 00:01:35,675 Let's see, before we start, this is the most important thing to remember today or 26 00:01:35,675 --> 00:01:40,470 these are some of the most important things to remember. 27 00:01:40,470 --> 00:01:44,410 Don't worry about understanding all the syntax. 28 00:01:44,410 --> 00:01:50,501 We're really focused on figuring out what we want to do and how we want to do it. 29 00:01:50,501 --> 00:01:53,651 And then how we want to do it will come a little second. 30 00:01:53,651 --> 00:01:57,152 And you don't need to focus so much about the syntax, you can always go back and 31 00:01:57,152 --> 00:01:57,745 learn that. 32 00:01:57,745 --> 00:02:01,684 Every programmer really boiled down essentially to task, 33 00:02:01,684 --> 00:02:06,024 a set of tasks that you want to accomplish and getting those done. 34 00:02:06,024 --> 00:02:08,927 And we'll work on figuring out what those tasks are, 35 00:02:08,927 --> 00:02:11,390 and then we'll complete them as we go along. 36 00:02:12,500 --> 00:02:16,460 I'd also say to ask questions, you can ask them in the chat. 37 00:02:16,460 --> 00:02:21,640 We have our awesome Treehouse staff, some developers and instructors in that chat. 38 00:02:21,640 --> 00:02:24,981 As you've seen in the Treehouse Community, everyone attending, 39 00:02:24,981 --> 00:02:28,320 feel free to answer questions as they come up to. 40 00:02:28,320 --> 00:02:31,902 And then at the end we'll have some time to answer some questions as well. 41 00:02:34,284 --> 00:02:37,869 All right, so today we'll talk about what full stack development is, 42 00:02:37,869 --> 00:02:41,348 especially if you're just starting out this might be more helpful. 43 00:02:41,348 --> 00:02:42,723 For some of you, it might be review. 44 00:02:46,396 --> 00:02:50,310 Yeah, don't worry if you have no idea how to use any of these things. 45 00:02:51,860 --> 00:02:54,020 If you're starting out this will be helpful. 46 00:02:54,020 --> 00:02:57,370 I think it's really helpful to learn about these things like frameworks. 47 00:02:57,370 --> 00:03:01,287 Once you've built that base foundational knowledge and understand the language 48 00:03:01,287 --> 00:03:05,570 a bit, you can use these to speed up the process and do things faster. 49 00:03:05,570 --> 00:03:07,910 So again, you always have time to go back. 50 00:03:07,910 --> 00:03:11,927 And we have plenty of courses on almost all the subjects taught here, 51 00:03:11,927 --> 00:03:16,095 and I'll make sure to put something out on those things that we don't. 52 00:03:16,095 --> 00:03:20,640 But we have Django, Python, JavaScript already. 53 00:03:20,640 --> 00:03:24,487 We don't have one of the tools that we're using, Django Rest framework, but 54 00:03:24,487 --> 00:03:28,530 happy to create a blog about that one, I've had some fun using it. 55 00:03:28,530 --> 00:03:31,661 So I'll talk about some of the terms, again, 56 00:03:31,661 --> 00:03:37,060 too that may be unfamiliar if you're just starting out before we get into code. 57 00:03:39,070 --> 00:03:43,059 So we'll talk about first about what full stack development is, and 58 00:03:43,059 --> 00:03:46,927 why it reminds me of both peanut butter and jelly and a puppet show. 59 00:03:46,927 --> 00:03:51,465 Talk about why people might use different languages for different projects, and 60 00:03:51,465 --> 00:03:53,779 also what libraries and frameworks are. 61 00:03:53,779 --> 00:03:58,419 Before we write code there's a very important step that we have complete every 62 00:03:58,419 --> 00:04:00,963 time we write code or before we write code. 63 00:04:00,963 --> 00:04:05,210 I mean you can skip it but it makes things a lot harder. 64 00:04:05,210 --> 00:04:10,090 From there, we'll jump into writing some code, take a short break, 65 00:04:10,090 --> 00:04:12,828 and finish up our code before our Q&A. 66 00:04:17,074 --> 00:04:21,677 So full stack development, if you're coming from the JavaScript side, 67 00:04:21,677 --> 00:04:25,950 you may be familiar with HTML CSS working with React. 68 00:04:25,950 --> 00:04:30,278 If you're coming from the Python side, you're a Pythonista, 69 00:04:30,278 --> 00:04:34,540 you may be familiar with data and managing and analyzing data. 70 00:04:34,540 --> 00:04:38,820 Full stack is a combination of both those things. 71 00:04:38,820 --> 00:04:41,731 Front end is that visual, that web page that you see, 72 00:04:41,731 --> 00:04:43,876 that thing that you can interact with. 73 00:04:43,876 --> 00:04:48,191 Or if you're using a screen reader, this the thing that you're interacting with, 74 00:04:48,191 --> 00:04:51,130 whatever form of interaction you're having with that. 75 00:04:51,130 --> 00:04:55,613 The back end is typically where the magic happens, I like to say. 76 00:04:55,613 --> 00:04:59,660 That's where all the data is controlled, where the logic of the program is. 77 00:04:59,660 --> 00:05:03,475 Typically you can have logic in the front end as well, but 78 00:05:03,475 --> 00:05:07,860 the back end is really where the power of a program comes from. 79 00:05:07,860 --> 00:05:10,479 You can have a static front end page, but 80 00:05:10,479 --> 00:05:13,571 I like to think that they're better together. 81 00:05:13,571 --> 00:05:15,103 And it reminds me of something, 82 00:05:15,103 --> 00:05:18,810 I like to make connections to things that I already know to help things stick. 83 00:05:19,890 --> 00:05:22,521 And this is a particularly sticky example, but 84 00:05:22,521 --> 00:05:25,790 this is the thing I used to like when I was younger. 85 00:05:25,790 --> 00:05:28,706 Peanut butter is great by itself, jelly is great by itself, but 86 00:05:28,706 --> 00:05:30,608 I really like the combination of the two. 87 00:05:30,608 --> 00:05:32,721 And that's what I think of full stack development. 88 00:05:32,721 --> 00:05:37,159 When you have this that back end app, maybe it's something that isn't so 89 00:05:37,159 --> 00:05:40,236 visual, you'll work with it in the command line, 90 00:05:40,236 --> 00:05:44,470 the terminal this thing here, or you can have a web page. 91 00:05:44,470 --> 00:05:48,757 That's just the front end, but the data can't change, it's static, doesn't have so 92 00:05:48,757 --> 00:05:50,110 much power. 93 00:05:50,110 --> 00:05:53,170 When they're together, they're a lot better and there's more that you can do. 94 00:05:53,170 --> 00:05:55,546 Just like peanut butter and jelly. 95 00:05:55,546 --> 00:05:57,416 Do we have any peanut butter and jelly lovers? 96 00:05:57,416 --> 00:06:00,398 I don't see any in the chat. 97 00:06:00,398 --> 00:06:01,920 Yes, that's me. 98 00:06:01,920 --> 00:06:03,280 Thank you. 99 00:06:03,280 --> 00:06:03,930 Okay, cool, knew it. 100 00:06:06,180 --> 00:06:07,168 Anybody like that stuff? 101 00:06:07,168 --> 00:06:11,565 No, don't remember it, cool. 102 00:06:11,565 --> 00:06:17,130 Let's see, so libraries and frameworks, what are those? 103 00:06:17,130 --> 00:06:20,495 If you're just starting out in JavaScript, Professor T, 104 00:06:20,495 --> 00:06:22,660 I haven't had that since childhood. 105 00:06:22,660 --> 00:06:27,330 So maybe my taste buds have matured, but I liked it back then. 106 00:06:27,330 --> 00:06:29,820 Okay, libraries and frameworks, what are those? 107 00:06:30,910 --> 00:06:34,136 They're tools for developers. 108 00:06:34,136 --> 00:06:38,553 When you think of your code often, there's things that you want to do that already 109 00:06:38,553 --> 00:06:41,190 done that someone else has written the code for. 110 00:06:41,190 --> 00:06:46,074 And there's no need to write that code yourself, you have features of your app 111 00:06:46,074 --> 00:06:50,514 of your own passion project or your app that your company is working on, 112 00:06:50,514 --> 00:06:55,035 that you want to build out faster and you're focused on those features. 113 00:06:56,225 --> 00:07:00,089 Frameworks and libraries can help you get up and running quickly and 114 00:07:00,089 --> 00:07:01,945 build out those common tasks. 115 00:07:01,945 --> 00:07:06,242 Do some of the common things that apps all have, whether it's routing and 116 00:07:06,242 --> 00:07:09,240 creating the routes that your pages are linked to. 117 00:07:10,790 --> 00:07:15,189 Or building out the actually the styling of the components or 118 00:07:15,189 --> 00:07:18,475 really building out the layout of your page. 119 00:07:18,475 --> 00:07:20,834 Libraries and frameworks can help you get up and running with those quick. 120 00:07:20,834 --> 00:07:25,816 So you worry about your requirements and not how necessarily that code 121 00:07:25,816 --> 00:07:30,470 will be written, frameworks really handle a lot of that for you. 122 00:07:32,840 --> 00:07:35,500 And libraries are things that you'll include in your code. 123 00:07:35,500 --> 00:07:39,950 Frameworks oftentimes will kind of dictate the code that you have, it will vary. 124 00:07:39,950 --> 00:07:42,587 React is a library, Django and 125 00:07:42,587 --> 00:07:48,071 Tailwind which we'll use a little bit today, are frameworks. 126 00:07:48,071 --> 00:07:50,411 As another maybe unfamiliar term, 127 00:07:50,411 --> 00:07:54,707 along with these you'll also maybe hear me talk about packages. 128 00:07:54,707 --> 00:07:56,560 And that's another thing that we'll install. 129 00:07:56,560 --> 00:07:59,160 Think of those as Legos. 130 00:07:59,160 --> 00:08:01,883 If your project is a Lego masterpiece, 131 00:08:01,883 --> 00:08:06,751 a Lego dinosaur like my son likes to build, then a package might be just 132 00:08:06,751 --> 00:08:10,890 the single Lego that you're adding on that has a function. 133 00:08:11,950 --> 00:08:13,982 It's just a smaller piece of code or 134 00:08:13,982 --> 00:08:18,387 a piece of code that has a function that you're adding to your project against 135 00:08:18,387 --> 00:08:23,288 something pre-written by someone else, out there to maybe open source. 136 00:08:23,288 --> 00:08:24,290 Let's see. 137 00:08:26,433 --> 00:08:27,704 I see a question. 138 00:08:27,704 --> 00:08:29,770 Tailwind is CSS, the CSS framework. 139 00:08:29,770 --> 00:08:33,980 So if you're familiar with Bootstrap, then it might be something that you'll like. 140 00:08:33,980 --> 00:08:38,430 Another term that might be unfamiliar is a REST API. 141 00:08:38,430 --> 00:08:41,890 So in development we use APIs to facilitate or 142 00:08:41,890 --> 00:08:46,540 to allow that communication between our front and back end. 143 00:08:47,600 --> 00:08:52,880 A great example that I like to always come back to is this API as a waiter. 144 00:08:52,880 --> 00:08:56,106 So if you think about being in a restaurant, you're the customer, 145 00:08:56,106 --> 00:08:59,615 you're the client, you have the menu, the menu's your web interface, 146 00:08:59,615 --> 00:09:02,350 it's the thing that you're interacting with, right. 147 00:09:02,350 --> 00:09:07,324 You're reading and getting all the information from the menu, and you'll have 148 00:09:07,324 --> 00:09:12,170 a request that you'll pass on to the waiter who will relay that to the kitchen. 149 00:09:13,600 --> 00:09:16,360 So from your front end or that interaction you're having, 150 00:09:16,360 --> 00:09:19,620 you're passing on a message to the kitchen, which is the back end. 151 00:09:19,620 --> 00:09:24,957 That's where all the assets are, right, the server, the data, 152 00:09:24,957 --> 00:09:29,643 which the data for our website, food for you in this case. 153 00:09:29,643 --> 00:09:34,015 And that back end is going to come with a response that the waiter will bring back 154 00:09:34,015 --> 00:09:37,869 to you, which is your food which you're hopefully satisfied with. 155 00:09:37,869 --> 00:09:40,592 Or data which you're also hopefully satisfied with. 156 00:09:40,592 --> 00:09:45,919 Sometimes with the data We have to do a little bit of changes and 157 00:09:45,919 --> 00:09:51,870 tweaking, which Python is really great at handling on the back end. 158 00:09:51,870 --> 00:09:57,222 So Django Rest framework, which is a framework that we'll be using today, 159 00:09:57,222 --> 00:10:01,870 helps us to build that back end pretty quickly in Python. 160 00:10:01,870 --> 00:10:05,396 And that's another thing about, if I haven't said it already, 161 00:10:05,396 --> 00:10:08,230 that libraries will help you do things a lot faster. 162 00:10:09,750 --> 00:10:11,654 So, we'll see that in action today. 163 00:10:15,423 --> 00:10:18,180 Again, I said there's different strokes for different folks. 164 00:10:18,180 --> 00:10:21,240 So, there are different languages depending on what you like to do. 165 00:10:21,240 --> 00:10:27,190 And I've arranged these from kind of where they lay on that full stack spectrum. 166 00:10:28,330 --> 00:10:33,254 In the back end we have Python, which is great for managing, analyzing data. 167 00:10:33,254 --> 00:10:37,915 It has a lot of packages and things that are pre-built that you can 168 00:10:37,915 --> 00:10:42,854 add to your projects that are great for handling data tons of pandas. 169 00:10:42,854 --> 00:10:47,453 We have some courses on those as well, we're working on some data analysis 170 00:10:47,453 --> 00:10:50,958 content so you can learn more about Python at Treehouse. 171 00:10:50,958 --> 00:10:55,650 If you're are JavaScript, Python's another great first or second language, 172 00:10:55,650 --> 00:10:59,870 I think, if you know JavaScript already, Python is pretty forgiving. 173 00:10:59,870 --> 00:11:03,800 You don't var to declare your variables. 174 00:11:05,360 --> 00:11:10,517 Best thing I'd say, maybe just follow along with this one and 175 00:11:10,517 --> 00:11:12,509 then code along after. 176 00:11:12,509 --> 00:11:16,048 I'll even provide a project, I'll provide something so 177 00:11:16,048 --> 00:11:18,150 you can see all the steps later on. 178 00:11:19,280 --> 00:11:22,450 You can go back and it'll be in a GitHub repository. 179 00:11:22,450 --> 00:11:23,970 So, I'll share all those things as well. 180 00:11:23,970 --> 00:11:28,040 And those will be attached when it's uploaded into Treehouse in the future. 181 00:11:29,840 --> 00:11:32,030 And yeah, I have a couple courses already in React. 182 00:11:32,030 --> 00:11:37,270 I'm mostly focused on JavaScript so far, which is the next language here. 183 00:11:37,270 --> 00:11:39,980 And that is what we use for interaction mostly. 184 00:11:41,220 --> 00:11:42,996 We use it on the front end and 185 00:11:42,996 --> 00:11:47,020 we can use it with React to build out the layout of our web page. 186 00:11:48,490 --> 00:11:51,470 So again, we have that back end, the data management. 187 00:11:51,470 --> 00:11:55,157 JavaScript is great at interaction in the browser, 188 00:11:55,157 --> 00:12:00,540 interacting with the user and responding to events that happen on the page. 189 00:12:00,540 --> 00:12:03,302 When you click on a page and something happens, 190 00:12:03,302 --> 00:12:08,120 that's usually JavaScript that's handling that interaction. 191 00:12:08,120 --> 00:12:12,880 And last but not least, CSS, which we sprinkle over the top. 192 00:12:12,880 --> 00:12:15,279 That is the design, the styling. 193 00:12:15,279 --> 00:12:20,900 So, CSS is where you'll define the style of your web pages or applications. 194 00:12:22,960 --> 00:12:28,350 So, the specific tool that we use today are Django REST framework. 195 00:12:28,350 --> 00:12:32,422 Django is a framework that's built on Python and helps you to get up and 196 00:12:32,422 --> 00:12:34,930 running quickly and build web apps. 197 00:12:34,930 --> 00:12:37,700 That was its intended purpose, to build web apps quickly. 198 00:12:39,470 --> 00:12:41,390 The same with Django REST framework. 199 00:12:42,520 --> 00:12:43,524 And again, it's that back end. 200 00:12:43,524 --> 00:12:47,877 So, it's processing the inputs, those things that you're doing. 201 00:12:47,877 --> 00:12:52,379 It's taking your input and providing output and responses in the form of data. 202 00:12:52,379 --> 00:12:54,390 And it also controls the logic. 203 00:12:54,390 --> 00:12:58,250 So, the behavior that we're getting is defined in those Django files, 204 00:12:58,250 --> 00:13:00,540 those Python files in the Django project. 205 00:13:02,650 --> 00:13:06,055 Next up, we have React, that'll be our JavaScript framework, or sorry, 206 00:13:06,055 --> 00:13:08,620 JavaScript library that we're using. 207 00:13:08,620 --> 00:13:11,950 It provides the structure, communicates messages from the brain. 208 00:13:13,060 --> 00:13:16,230 Or sorry, yeah, communicates messages to and from the brain. 209 00:13:16,230 --> 00:13:20,050 So you'll click on that page, and maybe it'll communicate with the database, 210 00:13:20,050 --> 00:13:21,970 the database will send something back. 211 00:13:21,970 --> 00:13:26,187 So, you can think of the JavaScript of the front end as the face, 212 00:13:26,187 --> 00:13:28,860 the Django is the brain, that back end. 213 00:13:31,070 --> 00:13:35,330 And then it records incoming messages and can kind of stores from that data. 214 00:13:36,480 --> 00:13:40,650 Tailwind is a CSS framework that uses utility classes. 215 00:13:40,650 --> 00:13:45,750 So, normally in CSS you're creating a separate CSS file. 216 00:13:45,750 --> 00:13:52,290 Tailwind allows you to use these classes in your HTML to add styles. 217 00:13:52,290 --> 00:13:53,865 So, I think it's pretty intuitive, 218 00:13:53,865 --> 00:13:56,210 it really depends on the project that you're doing. 219 00:13:56,210 --> 00:14:00,136 If you have a larger project, it's kind of up to your discretion if tailwind is 220 00:14:00,136 --> 00:14:01,870 something that will work for you. 221 00:14:01,870 --> 00:14:05,350 I'd say to try it out though if you've used bootstrap before. 222 00:14:05,350 --> 00:14:06,550 It can be really fun and helpful. 223 00:14:08,550 --> 00:14:11,610 Now, why do these things remind me of a puppet show? 224 00:14:11,610 --> 00:14:15,168 Like I mentioned before, you have that sort of back end, or 225 00:14:15,168 --> 00:14:19,900 you have the front end first in this example, I guess, which is the puppet. 226 00:14:19,900 --> 00:14:23,518 That's what the audience is interacting with. 227 00:14:23,518 --> 00:14:25,744 Is the puppet speaking? 228 00:14:25,744 --> 00:14:29,278 Maybe in a puppet show there's some interaction between the audience and 229 00:14:29,278 --> 00:14:30,000 the puppet. 230 00:14:30,000 --> 00:14:31,693 But that's the front end, 231 00:14:31,693 --> 00:14:35,822 that's the thing that you're maybe visually seeing or hearing. 232 00:14:35,822 --> 00:14:38,321 Now, the back end, that's the brain. 233 00:14:38,321 --> 00:14:41,392 There's someone behind the puppet pulling the strings, 234 00:14:41,392 --> 00:14:45,599 or if it's a sock puppet, their hands is in the puppet, and that's the brain. 235 00:14:45,599 --> 00:14:50,490 That's the logic and that's our back end or Python code. 236 00:14:50,490 --> 00:14:53,700 If this puppet has cool hair or an outfit, 237 00:14:53,700 --> 00:14:57,203 then we could consider that the CSS styling. 238 00:15:00,049 --> 00:15:08,703 So, again, I like to make connections to things that I already know. 239 00:15:08,703 --> 00:15:09,534 I think it's really helpful. 240 00:15:09,534 --> 00:15:13,536 I like to think of full stack development as a car sometimes. 241 00:15:13,536 --> 00:15:17,942 The interface, the steering wheel, the dashboard, interface, 242 00:15:17,942 --> 00:15:21,434 all those things you interact with are the front end. 243 00:15:21,434 --> 00:15:24,455 Under the hood, that's where the back end lives. 244 00:15:26,814 --> 00:15:30,141 You can put bumper stickers on, and that's your CSS, I guess. 245 00:15:32,899 --> 00:15:34,310 Oops, I'm gonna through this twice. 246 00:15:34,310 --> 00:15:35,450 Did anybody see that last slide? 247 00:15:35,450 --> 00:15:36,680 What's the most important step? 248 00:15:36,680 --> 00:15:38,090 Anyone wanna answer in the chat? 249 00:15:38,090 --> 00:15:40,800 Before we write any code, what should we do? 250 00:15:40,800 --> 00:15:45,100 All right, thank you, I know I gave it away. 251 00:15:45,100 --> 00:15:47,230 Thank you, people are paying attention. 252 00:15:48,690 --> 00:15:50,129 Awesome. 253 00:15:50,129 --> 00:15:53,494 Yeah, the most important step, I've learned this personally, 254 00:15:53,494 --> 00:15:57,353 through Treehouse, through learning, through figuring out how I learn. 255 00:15:57,353 --> 00:16:01,570 Awesome, Esteban, I see mentioning test-driven development, and yeah, that's 256 00:16:01,570 --> 00:16:06,490 another way to write your code to think of the test that you wanna write before hand. 257 00:16:06,490 --> 00:16:08,330 And that's something that I've mentioned here. 258 00:16:08,330 --> 00:16:12,257 But yeah, you want to, before you get into the text editor, 259 00:16:12,257 --> 00:16:17,430 before we get into the text editor today, think about what code we wanna write. 260 00:16:17,430 --> 00:16:18,463 Think about what we want to do. 261 00:16:18,463 --> 00:16:22,599 It can be frustrating to jump in there and not know what to do next. 262 00:16:22,599 --> 00:16:25,330 Or to get started, have something break. 263 00:16:25,330 --> 00:16:29,605 Or to have a mess or have 100 lines of code as I've done before, and 264 00:16:29,605 --> 00:16:31,540 not know where you went wrong. 265 00:16:33,410 --> 00:16:38,426 When we have that plan beforehand, we have sort of a North Star that guides us, 266 00:16:38,426 --> 00:16:42,150 something that we can fall back on and used to just check and 267 00:16:42,150 --> 00:16:44,440 see if we're sticking to the plan. 268 00:16:46,930 --> 00:16:50,348 So, we'll make sure to plan this out before. 269 00:16:50,348 --> 00:16:53,197 We know that we're building a todo app, so we'll kind of think about that. 270 00:16:53,197 --> 00:16:59,303 Anyone have any idea what things we need to do to create a todo app? 271 00:16:59,303 --> 00:17:04,262 Not too deep into it, but just what 272 00:17:04,262 --> 00:17:09,222 tasks that we need to accomplish. 273 00:17:16,731 --> 00:17:17,945 Yeah, pseudocode. 274 00:17:17,945 --> 00:17:22,040 That's something I have a workshop on pseudocode in the Treehouse library. 275 00:17:22,040 --> 00:17:23,150 Awesome, Jamar as well. 276 00:17:24,420 --> 00:17:25,630 Yeah, that's where I like to start. 277 00:17:26,630 --> 00:17:30,322 I think it really helps to kind of build that foundation and build from the top up, 278 00:17:30,322 --> 00:17:33,300 I guess, I think of the back end as the bottom. 279 00:17:33,300 --> 00:17:34,870 Yeah, a form to add tasks. 280 00:17:34,870 --> 00:17:36,560 Awesome, that's the front end. 281 00:17:36,560 --> 00:17:39,251 Thank you, great answers going on in the chat, and 282 00:17:39,251 --> 00:17:42,390 keep them coming even if I take my eyes off that for a second. 283 00:17:44,170 --> 00:17:46,913 You'll want to represent the data, right? 284 00:17:46,913 --> 00:17:51,150 We have tasks, we have todos that wanna keep track of. 285 00:17:51,150 --> 00:17:54,437 Python needs a way to understand what a task is, or 286 00:17:54,437 --> 00:18:00,000 we need a way to represent tasks so that Python can keep track of those. 287 00:18:00,000 --> 00:18:01,890 Yeah, what does the data model look like? 288 00:18:01,890 --> 00:18:03,020 We do that with models. 289 00:18:04,650 --> 00:18:07,430 And back in code, typically, we use models for that. 290 00:18:07,430 --> 00:18:12,690 In Python, we'll have a models.py file in our Django project that will do that. 291 00:18:12,690 --> 00:18:15,380 Exactly, we need to set up our CRUD actions. 292 00:18:15,380 --> 00:18:20,054 We need to be able to create new tasks, list or read that list of tasks 293 00:18:20,054 --> 00:18:24,812 from the database, update tasks that we have, existing tasks, and 294 00:18:24,812 --> 00:18:30,690 then delete tasks when we don't want them anymore, we finished the task. 295 00:18:30,690 --> 00:18:32,550 So, thank you, great answers there. 296 00:18:32,550 --> 00:18:37,491 And those are the things that we'll do, so it helps that we know that 297 00:18:37,491 --> 00:18:42,534 before going into the text editor and aren't just writing aimlessly 298 00:18:44,776 --> 00:18:47,473 We'll also need to set up the routes and their behaviors. 299 00:18:47,473 --> 00:18:49,849 And that ties into those CRUD actions. 300 00:18:49,849 --> 00:18:53,754 So, if you're already familiar with the routes, if you think of those URLs, 301 00:18:53,754 --> 00:18:54,475 the web page. 302 00:18:54,475 --> 00:18:58,095 When you go to a web page, there are different routes at the top of the page, 303 00:18:58,095 --> 00:18:59,245 or different URLs, and 304 00:18:59,245 --> 00:19:02,200 those will be defined in the back end in this Django project. 305 00:19:03,890 --> 00:19:05,540 And each of those routes has different behaviors. 306 00:19:05,540 --> 00:19:07,604 Some of those will render a page. 307 00:19:07,604 --> 00:19:13,302 Some of those will delete a todo, delete a task for us. 308 00:19:14,696 --> 00:19:18,859 The front end, and I saw we had this mentioned, we need a form to add tasks. 309 00:19:18,859 --> 00:19:20,535 So, we need somewhere to add new todos. 310 00:19:20,535 --> 00:19:23,897 We need a list of todos, a way to delete them, and 311 00:19:23,897 --> 00:19:27,263 then we wanna have more of a mobile first layout. 312 00:19:27,263 --> 00:19:30,465 So, we'll think of some things with our CSS, our styling there. 313 00:19:30,465 --> 00:19:34,617 Right, and that really takes us into Django time, so 314 00:19:34,617 --> 00:19:39,798 I hope everyone's ready to code or watch me code and follow along. 315 00:19:39,798 --> 00:19:44,592 And again, this plan is actually stored 316 00:19:44,592 --> 00:19:49,527 in a document in a project management tool 317 00:19:49,527 --> 00:19:54,749 that we use here at Treehouse called Asana. 318 00:19:54,749 --> 00:19:58,600 Let's see, so we have the setup. 319 00:19:58,600 --> 00:20:02,230 Everything is pretty much mapped out that we'll go over today. 320 00:20:02,230 --> 00:20:05,180 The back end and the front end all of this mapped out. 321 00:20:05,180 --> 00:20:06,140 The font is a great tool. 322 00:20:06,140 --> 00:20:07,500 We also use Coda. 323 00:20:07,500 --> 00:20:09,925 Awesome. I see this new use that we use Coda, and 324 00:20:09,925 --> 00:20:13,720 that'll be, we have courses on that, they're a partner of ours. 325 00:20:15,570 --> 00:20:18,156 Another great tool to manage those projects and has, 326 00:20:18,156 --> 00:20:21,834 I think some more customization features you can use as well in comparison, 327 00:20:21,834 --> 00:20:24,610 you can build things out in tables in different formats. 328 00:20:26,730 --> 00:20:29,130 So this is all planned out already. 329 00:20:29,130 --> 00:20:32,255 But the first thing we need to do is to make a place for 330 00:20:32,255 --> 00:20:34,098 this project to live really. 331 00:20:34,098 --> 00:20:38,668 So I'll do that. 332 00:20:38,668 --> 00:20:41,200 I'll go into my terminal. 333 00:20:41,200 --> 00:20:42,630 We're starting with some back end code. 334 00:20:42,630 --> 00:20:44,690 We're starting with our Python. 335 00:20:45,890 --> 00:20:50,520 And we're really starting to build out the project in the command line before we 336 00:20:50,520 --> 00:20:52,330 write code in the text editor. 337 00:20:53,810 --> 00:20:55,660 So I'm in this file. 338 00:20:55,660 --> 00:20:57,926 I'm in this folder called festival now. 339 00:20:57,926 --> 00:21:02,170 The first thing I'll do is create a folder called todo. 340 00:21:02,170 --> 00:21:04,690 That'll be the name of our project. 341 00:21:04,690 --> 00:21:07,550 And in the back end is terminal. 342 00:21:07,550 --> 00:21:09,550 We can enter commands to communicate with the computer. 343 00:21:09,550 --> 00:21:12,150 We can use Python, we can use Node and JavaScript. 344 00:21:14,110 --> 00:21:16,670 The first thing I'm gonna do is enter a few commands. 345 00:21:16,670 --> 00:21:19,895 One, when we use this ampersand, this double ampersand, 346 00:21:19,895 --> 00:21:23,380 I can enter two commands and have them run back to back. 347 00:21:23,380 --> 00:21:26,929 So I'll both create that directory or folder for the project to live in, and 348 00:21:26,929 --> 00:21:29,100 then I'll change into it with the CD command. 349 00:21:31,390 --> 00:21:32,510 So now I'm there. 350 00:21:32,510 --> 00:21:37,090 I use LS and we can always use that to list out and see what files are in there. 351 00:21:37,090 --> 00:21:38,410 Right now, there's nothing there yet. 352 00:21:38,410 --> 00:21:39,580 I just created it. 353 00:21:39,580 --> 00:21:40,900 And that's exactly how it should be. 354 00:21:42,570 --> 00:21:44,060 Next we're gonna jump into the backend. 355 00:21:46,120 --> 00:21:49,072 And the very first thing we will do with the Python 356 00:21:49,072 --> 00:21:51,670 project is create a virtual environment. 357 00:21:53,570 --> 00:21:54,628 I use Python 3. 358 00:21:54,628 --> 00:21:58,914 And a virtual environment is the place for your code to run for 359 00:21:58,914 --> 00:22:04,210 you to install the packages that you need for a specific project, you might 360 00:22:04,210 --> 00:22:09,870 have different projects that require different versions of a Python package. 361 00:22:09,870 --> 00:22:13,590 And your virtual environment allows you to keep those together. 362 00:22:13,590 --> 00:22:18,335 Keep the packages that are needed together for a specific project. 363 00:22:20,957 --> 00:22:25,009 So again out to two commands, the first will be DMV, and 364 00:22:25,009 --> 00:22:29,508 we'll create a virtual environment with that man named DMV. 365 00:22:29,508 --> 00:22:35,617 The next will be to activate that so the virtual environment will be up and 366 00:22:35,617 --> 00:22:38,732 running and we'll be able to use it. 367 00:22:41,093 --> 00:22:44,960 Now that we have our virtual environment now, and 368 00:22:44,960 --> 00:22:49,196 you can see that it's running because DMV is up there, 369 00:22:49,196 --> 00:22:54,283 I will start to install packages and I am going to install Django. 370 00:22:54,283 --> 00:22:57,315 And we use PIP to install packages into there, 371 00:22:57,315 --> 00:23:02,316 just like if you're coming from JavaScript you use NPM to manage packages. 372 00:23:02,316 --> 00:23:06,830 We will use PIP install Django, as well as the Django rest framework. 373 00:23:09,220 --> 00:23:11,566 So we'll be able to use those in our project, and 374 00:23:11,566 --> 00:23:13,753 actually installing those packages needs. 375 00:23:17,718 --> 00:23:18,709 Now, we'll take a second there. 376 00:23:22,468 --> 00:23:23,417 Wow, sorry. 377 00:23:23,417 --> 00:23:27,090 I wasn't looking at the chat for a bit. 378 00:23:28,110 --> 00:23:28,884 My terminal is tiny. 379 00:23:32,932 --> 00:23:34,605 There's no need for that. 380 00:23:34,605 --> 00:23:37,414 I guess I'm not sharing anything else yet. 381 00:23:42,892 --> 00:23:45,290 Sorry about that. There we go. 382 00:23:45,290 --> 00:23:46,660 Cool. 383 00:23:46,660 --> 00:23:48,950 So it's just a refresher. 384 00:23:48,950 --> 00:23:55,080 The commands that I've used so far, make that and CD into that directory. 385 00:23:56,340 --> 00:24:01,033 Created a random virtual environment, and then we're installing Django and 386 00:24:01,033 --> 00:24:03,450 it was installed successfully. 387 00:24:03,450 --> 00:24:06,339 We'll see some warnings, you'll see that oftentimes. 388 00:24:06,339 --> 00:24:08,349 They're only warnings, not errors. 389 00:24:08,349 --> 00:24:11,840 That happens most of the time, you don't have to worry about those. 390 00:24:12,840 --> 00:24:18,454 The next thing we'll do now that we have Django installed, 391 00:24:18,454 --> 00:24:22,172 we're able to use the Django command. 392 00:24:22,172 --> 00:24:24,530 And I'll do Django-admin. 393 00:24:24,530 --> 00:24:26,110 It's as good as admin command. 394 00:24:26,110 --> 00:24:30,865 Start project to create a project and I'll name it todo. 395 00:24:34,046 --> 00:24:38,070 Then I'll CD into that project, change it to another directory as well. 396 00:24:38,070 --> 00:24:41,640 So now that I'm in there, we'll see what files we have. 397 00:24:41,640 --> 00:24:45,720 We have managed that py file, which will really hold a lot 398 00:24:45,720 --> 00:24:50,540 of important commands and do a lot for us to this project. 399 00:24:50,540 --> 00:24:56,230 And then we have todo folder, which is where the main project files live. 400 00:24:56,230 --> 00:24:59,028 Some more important project files live there as well. 401 00:24:59,028 --> 00:25:01,711 Next up. 402 00:25:04,064 --> 00:25:07,664 I need to just really quickly 403 00:25:13,662 --> 00:25:16,780 So I can see my screen as well. 404 00:25:16,780 --> 00:25:17,970 We should all be able to see it. 405 00:25:17,970 --> 00:25:18,470 Here we go. 406 00:25:22,065 --> 00:25:27,460 Let's see Python to create the app. 407 00:25:27,460 --> 00:25:31,247 So within our projects, we can build out individual apps within a Django or 408 00:25:31,247 --> 00:25:33,650 Django rest framework project. 409 00:25:33,650 --> 00:25:37,970 We can build out individual apps that have different functionality, or our different 410 00:25:37,970 --> 00:25:41,650 data representations and different things can be handled by those apps. 411 00:25:41,650 --> 00:25:47,605 So I'll do Python manage that py, start app todo. 412 00:25:47,605 --> 00:25:51,924 And for consistency, 413 00:25:51,924 --> 00:25:56,020 I'll use Python 3. 414 00:25:56,020 --> 00:25:57,454 Oops. 415 00:26:00,717 --> 00:26:01,871 Let's name it todo app. 416 00:26:01,871 --> 00:26:07,273 Lets try that Since that app is already taken. 417 00:26:07,273 --> 00:26:11,870 So now we see in that todo folder, we have todo app and manage that py. 418 00:26:13,280 --> 00:26:17,749 Another thing we wanna do is sync the database So, just connect our project to 419 00:26:17,749 --> 00:26:22,028 the database and to do that with pythonmanage.piemigrate.commandd. 420 00:26:22,028 --> 00:26:24,476 So anytime we make changes to our data representation, 421 00:26:24,476 --> 00:26:25,785 we'll need to do that again. 422 00:26:25,785 --> 00:26:28,354 We'll need to make sure that those data representation changes 423 00:26:28,354 --> 00:26:29,265 are reflected there. 424 00:26:29,265 --> 00:26:38,480 Now, let's see. 425 00:26:39,870 --> 00:26:41,153 I want to go back. 426 00:26:41,153 --> 00:26:46,314 I wanna make sure I use CD.., and that'll just take me back into this 427 00:26:46,314 --> 00:26:51,490 main folder where I want to be because I want to start writing code now. 428 00:26:52,820 --> 00:26:59,320 And I have this command code that'll open up this folder in visual studio code. 429 00:26:59,320 --> 00:27:03,804 Also have another one like Hub, that's alias that I put in there, but 430 00:27:03,804 --> 00:27:08,592 it will take me to my GitHub folder on my computer, where many of my projects 431 00:27:08,592 --> 00:27:12,700 have stored, aliases or another cool thing that you can set up. 432 00:27:12,700 --> 00:27:17,640 And are pretty much shortcuts to some of the commands over there in the command 433 00:27:17,640 --> 00:27:20,910 line, and I'll make sure to get this to good size. 434 00:27:23,960 --> 00:27:28,920 Let's see what we have, so we can see some of the files here in that project. 435 00:27:28,920 --> 00:27:31,891 And that's again, the beauty of a framework is 436 00:27:31,891 --> 00:27:35,840 that we have all this code already that we don't need to write. 437 00:27:35,840 --> 00:27:39,677 The very first place we'll go into though, is models.py, 438 00:27:39,677 --> 00:27:43,830 because we want to define a model or a representation of our data. 439 00:27:45,310 --> 00:27:51,719 And we can do that, just like this, adding some code. 440 00:27:51,719 --> 00:27:55,315 In Python if you're a JavaScriptor, this is something to watch out for. 441 00:27:59,902 --> 00:28:05,620 Indentation, it matters in Python, just as well as these here, semi colons. 442 00:28:05,620 --> 00:28:10,370 If you miss those, Python will not forgive you, your code will not run. 443 00:28:10,370 --> 00:28:14,250 And you'll wonder what's going on, you'll run back to JavaScript. 444 00:28:14,250 --> 00:28:16,173 But hopefully stick around cuz Python is great and 445 00:28:16,173 --> 00:28:18,340 can do different things to get peanut butter and jelly. 446 00:28:20,660 --> 00:28:23,300 So this model is a representation of our data. 447 00:28:23,300 --> 00:28:27,101 In Python, we use classes to build on things, 448 00:28:27,101 --> 00:28:30,610 just kinda have a base representation of, 449 00:28:30,610 --> 00:28:35,430 we can structure our data already with this class. 450 00:28:35,430 --> 00:28:38,333 So we'll import that, you often see importing. 451 00:28:38,333 --> 00:28:41,156 And that's from the different libraries that we have, 452 00:28:41,156 --> 00:28:44,950 that's including these packages in our code so that we can use them again. 453 00:28:47,300 --> 00:28:51,330 So for our task model, there are a couple of things that we wanna keep track of. 454 00:28:51,330 --> 00:28:56,014 We don't necessarily need to, but it's helpful to keep 455 00:28:56,014 --> 00:29:01,140 track of these things and just kind of see how this works. 456 00:29:01,140 --> 00:29:02,410 So again, it's a real world. 457 00:29:02,410 --> 00:29:04,570 It's a representation of maybe a real world thing. 458 00:29:04,570 --> 00:29:06,050 We have a task. 459 00:29:06,050 --> 00:29:09,647 And if we had a car, maybe we wanna keep track of the color, 460 00:29:09,647 --> 00:29:13,114 the year making model, and those sorts of properties. 461 00:29:13,114 --> 00:29:16,460 For a task today in this app, we're keeping it simple. 462 00:29:16,460 --> 00:29:19,306 And by simple, I don't mean that node is hard or 463 00:29:19,306 --> 00:29:22,500 difficult to learn our challenging at times. 464 00:29:22,500 --> 00:29:24,640 I just mean that we're limiting the features. 465 00:29:26,170 --> 00:29:31,010 So we keep track of when this was created and we'll store the description. 466 00:29:31,010 --> 00:29:35,620 So that'll be texts, again, don't worry about syntax. 467 00:29:35,620 --> 00:29:39,334 But when we have these fields that we can use that are again, 468 00:29:39,334 --> 00:29:44,290 pre-written, pre-determine things, and this is date time field. 469 00:29:44,290 --> 00:29:46,633 So we wanna start date, we'll use date time field. 470 00:29:46,633 --> 00:29:48,125 Tomorrow's our date time field. 471 00:29:48,125 --> 00:29:49,725 If we wanna store text, we'll use our character field. 472 00:29:49,725 --> 00:29:56,520 We'll set the max length to 100 so that task can only be 100 characters long. 473 00:29:56,520 --> 00:30:00,368 And it will be blank at first by default, but 474 00:30:00,368 --> 00:30:04,070 we can add a description in When we create a task. 475 00:30:04,070 --> 00:30:10,462 Next up, we'll set some metadata about this model. 476 00:30:10,462 --> 00:30:13,084 So we can use the created at or 477 00:30:13,084 --> 00:30:18,015 the created property to sort these tasks in the list. 478 00:30:18,015 --> 00:30:22,763 So it'll have have an order of creation in that list. 479 00:30:22,763 --> 00:30:23,786 So that is our model. 480 00:30:23,786 --> 00:30:29,063 As I mentioned before, when there's a change in the model, 481 00:30:29,063 --> 00:30:35,803 and anyone let me know if you want that Visual Studio code a little bit larger. 482 00:30:35,803 --> 00:30:41,864 I'll make it larger just in case to, So 483 00:30:41,864 --> 00:30:49,194 before we hadn't made any changes, so we didn't have to run this. 484 00:30:49,194 --> 00:30:51,114 But when we do, oops, so I need to be in todo. 485 00:30:51,114 --> 00:30:56,254 I need that to be in the same 486 00:30:56,254 --> 00:31:02,578 folder as manage.py to use it. 487 00:31:02,578 --> 00:31:03,902 We hadn't made any changes yet. 488 00:31:07,400 --> 00:31:09,987 And the command is make migrations without the dash. 489 00:31:12,192 --> 00:31:14,276 Okay, so it's still saying no changes to type in. 490 00:31:14,276 --> 00:31:19,161 We'll come back later if there's any problems later on. 491 00:31:19,161 --> 00:31:21,972 But now we have our model or representation of the data. 492 00:31:21,972 --> 00:31:25,214 And we've seen how that works. 493 00:31:25,214 --> 00:31:29,336 The next thing that we want to do is to create the serializer for 494 00:31:29,336 --> 00:31:31,252 this data from the backend. 495 00:31:31,252 --> 00:31:32,298 It will go to the frontend and 496 00:31:32,298 --> 00:31:34,620 the format currently that the frontend doesn't understand. 497 00:31:34,620 --> 00:31:37,602 We'll need to create a file called serializers. 498 00:31:37,602 --> 00:31:40,836 And the serializer has nothing to do with serial, 499 00:31:40,836 --> 00:31:45,541 it just converts that data to a format that the frontend can understand. 500 00:31:49,640 --> 00:31:51,189 So that's serializers.py. 501 00:31:51,189 --> 00:31:54,036 We'll use a serializer class again to create that serializer for 502 00:31:54,036 --> 00:31:55,078 us to base it off for us. 503 00:31:55,078 --> 00:32:01,513 And we'll have these fields. 504 00:32:01,513 --> 00:32:03,258 And the only fields that we'll need are our model. 505 00:32:03,258 --> 00:32:04,870 So we'll pass the model so 506 00:32:04,870 --> 00:32:09,136 that serializer has access to the model that we want it to translate. 507 00:32:09,136 --> 00:32:12,234 And then we'll tell it which fields are on that model. 508 00:32:12,234 --> 00:32:17,932 I talked about the behavior before, and that is views. 509 00:32:17,932 --> 00:32:22,664 The views.py file is where the behavior is 510 00:32:22,664 --> 00:32:27,008 determined in Django REST Framework. 511 00:32:27,008 --> 00:32:30,553 In Django, typically, you'll write maybe a little bit more code to set up your views 512 00:32:30,553 --> 00:32:32,194 or write out some of the logic in there. 513 00:32:32,194 --> 00:32:36,276 In Django REST Framework we have a tool called ViewSets, and 514 00:32:36,276 --> 00:32:40,448 that really simplifies a lot of the creation of the ViewSets. 515 00:32:40,448 --> 00:32:45,436 Or writing out that logic for those routes that we mentioned earlier that handle 516 00:32:45,436 --> 00:32:49,245 the CRUD, the reading, updating, and deleting of tasks. 517 00:32:51,789 --> 00:32:56,752 So the ViewSet will, let see, yeah. 518 00:32:56,752 --> 00:32:58,875 The ViewSet will take the queryset, and 519 00:32:58,875 --> 00:33:02,193 that is just the list of all those objects, the tasks objects. 520 00:33:02,193 --> 00:33:05,033 And it's relying on that task model that we have. 521 00:33:07,872 --> 00:33:11,327 Let's see. 522 00:33:11,327 --> 00:33:13,504 That should fix that. 523 00:33:16,623 --> 00:33:19,766 It's gonna make sure those imports are correct, or 524 00:33:19,766 --> 00:33:23,492 else those things won't be imported and the code won't run. 525 00:33:23,492 --> 00:33:26,950 Awesome, so again, the ViewSet defines our behavior. 526 00:33:26,950 --> 00:33:30,740 And with Django REST framework, we write that code a lot faster. 527 00:33:30,740 --> 00:33:35,692 We just provide that class, that ViewSet class, our model that we've created, 528 00:33:35,692 --> 00:33:36,995 and the serializer. 529 00:33:36,995 --> 00:33:40,121 And it uses those together to set the behavior 530 00:33:44,488 --> 00:33:50,296 Now urls.py is where we'll determine the routes, 531 00:33:50,296 --> 00:33:54,526 the specific routes that we'll use. 532 00:33:54,526 --> 00:33:56,442 We don't have admin setup just yet. 533 00:33:56,442 --> 00:33:59,466 So I'll comment that out. 534 00:33:59,466 --> 00:34:03,627 In JavaScript, Python, you can add comments to your code to 535 00:34:03,627 --> 00:34:06,981 explain things that you wanna back and explain. 536 00:34:06,981 --> 00:34:11,932 Or you can save things for later. 537 00:34:11,932 --> 00:34:14,397 If you don't want something in your code now you can get rid of it. 538 00:34:14,397 --> 00:34:16,103 And you come back to it when you need it. 539 00:34:19,270 --> 00:34:23,081 So the urls.py file determines the routes that we'll go to. 540 00:34:23,081 --> 00:34:27,572 So we'll have a home route. 541 00:34:27,572 --> 00:34:33,024 And that'll just be when we don't add anything 542 00:34:33,024 --> 00:34:37,392 to the URL this will be worse defined. 543 00:34:37,392 --> 00:34:40,971 ViewSets will really take care of setting up those other routes for us. 544 00:34:40,971 --> 00:34:43,065 And we don't have to write so much of that code in this project. 545 00:34:43,065 --> 00:34:44,995 So I'll add the correct imports here. 546 00:34:44,995 --> 00:34:49,878 We'll use a tool called router to set up those routes and register the task 547 00:34:49,878 --> 00:34:54,233 routes and the task ViewSets and connect those things together. 548 00:34:59,555 --> 00:35:04,208 And from there, the next thing we'll want to do is make sure 549 00:35:04,208 --> 00:35:08,210 that the main project that we have is connected to, 550 00:35:08,210 --> 00:35:13,635 that the app that we have is included in the main project that we have. 551 00:35:13,635 --> 00:35:18,254 As well as a few other tools that we wanna use like the rest framework and 552 00:35:18,254 --> 00:35:20,299 one more called corsheaders. 553 00:35:20,299 --> 00:35:24,794 So we'll need corsheaders to ensure that our backend and frontend can communicate. 554 00:35:24,794 --> 00:35:26,739 There's a few things that we'll need to do. 555 00:35:26,739 --> 00:35:32,907 Including setting the allowed hosts to all for this. 556 00:35:32,907 --> 00:35:34,705 We can do that with the wild card. 557 00:35:34,705 --> 00:35:37,613 We'll give that a try. 558 00:35:37,613 --> 00:35:41,844 So this means that any host, any of the frontends that 559 00:35:41,844 --> 00:35:46,278 are running on our computer can access this backend data 560 00:35:49,739 --> 00:35:52,861 And we did, let's see. 561 00:35:52,861 --> 00:35:55,559 There we go. 562 00:35:55,559 --> 00:35:59,081 We haven't installed the corsheader yet. 563 00:35:59,081 --> 00:36:00,986 So we'll make sure to put that in there. 564 00:36:04,345 --> 00:36:10,167 And there's another thing, middleware that we'll want to add another tool. 565 00:36:10,167 --> 00:36:14,242 This kinda come along with the corsheader, and there's a spot for 566 00:36:14,242 --> 00:36:15,859 those right here as well. 567 00:36:15,859 --> 00:36:17,769 So again, don't worry too much about the syntax. 568 00:36:17,769 --> 00:36:22,652 These are all things I think Django REST Framework documentation do a great 569 00:36:22,652 --> 00:36:23,434 job about. 570 00:36:23,434 --> 00:36:26,151 As you learn the language these things will make more sense. 571 00:36:26,151 --> 00:36:29,778 And the more practice that you give, again, 572 00:36:29,778 --> 00:36:33,892 with those courses that we have on Django, React. 573 00:36:33,892 --> 00:36:37,840 And the course that we have, more of these things will become familiar. 574 00:36:37,840 --> 00:36:39,357 So we have that middleware included now. 575 00:36:41,433 --> 00:36:46,266 One thing we wanna be able to do is have admin control. 576 00:36:46,266 --> 00:36:49,562 One thing that's really cool about Django REST Framework or 577 00:36:49,562 --> 00:36:52,984 Django in general is that, it has a built in sort of admin page, 578 00:36:52,984 --> 00:36:55,262 where you can manage the data on your own. 579 00:36:58,264 --> 00:36:59,250 Let's see. 580 00:36:59,250 --> 00:37:04,657 And it looks like we're getting error, urls.py, line 18. 581 00:37:07,672 --> 00:37:11,080 And I have imported todo. 582 00:37:11,080 --> 00:37:12,213 Let's see. 583 00:37:13,502 --> 00:37:19,210 Views is, yeah, 584 00:37:19,210 --> 00:37:26,066 and I have to do that. 585 00:37:26,066 --> 00:37:28,764 So let's try that to see if it works. 586 00:37:28,764 --> 00:37:36,209 And, Again, 587 00:37:36,209 --> 00:37:39,005 on line 18 though, same sort of thing. 588 00:37:43,639 --> 00:37:45,832 So it's this line. 589 00:37:48,408 --> 00:37:50,282 Trying to keep it bug free, 590 00:37:50,282 --> 00:37:55,174 but there's always something especially with installing, I think. 591 00:38:01,451 --> 00:38:04,011 And I'm trying just to do that, yeah. 592 00:38:06,707 --> 00:38:07,482 There we go. 593 00:38:07,482 --> 00:38:11,643 And it'll, type super password. 594 00:38:11,643 --> 00:38:16,413 I can't tell you what it is or why it says to show, it's definitely not 123 or ABC or 595 00:38:16,413 --> 00:38:17,624 anything like that. 596 00:38:17,624 --> 00:38:20,550 But you can set a password when you're setting up your admin. 597 00:38:20,550 --> 00:38:23,062 I've set the username in the command here. 598 00:38:23,062 --> 00:38:26,418 So the command is create superuser. 599 00:38:26,418 --> 00:38:29,901 You'll set the email after this email flag here. 600 00:38:29,901 --> 00:38:33,770 And I just put admin in that example, fake email, that's obviously not mine. 601 00:38:33,770 --> 00:38:36,877 And the username as admin, and set my password. 602 00:38:36,877 --> 00:38:38,558 So I can log in with that username and 603 00:38:38,558 --> 00:38:41,600 the password that I have created once my backend is up and running 604 00:38:49,615 --> 00:38:52,593 Okay, and now we've allowed the host. 605 00:38:52,593 --> 00:38:55,930 And now, let's see if it'll lets us make those migrations. 606 00:38:55,930 --> 00:38:59,098 Probably we made some more changes. 607 00:38:59,098 --> 00:39:05,485 Oops, and again, that's my, okay, so it is recognizing. 608 00:39:05,485 --> 00:39:08,600 Since we've installed the app into the main project, 609 00:39:08,600 --> 00:39:11,248 it's recognizing that we changed the model. 610 00:39:11,248 --> 00:39:16,055 And up there it'll show even that the change that has happened is that model 611 00:39:16,055 --> 00:39:17,591 task has been created. 612 00:39:21,491 --> 00:39:28,197 So after we do make migrations, we need to make sure to run the migrate command. 613 00:39:32,721 --> 00:39:39,684 Cool, and I think that should get us up and running, really. 614 00:39:39,684 --> 00:39:42,056 Let's see, yeah. 615 00:39:48,541 --> 00:39:51,990 So that command Python manage.py runserver, 616 00:39:51,990 --> 00:39:54,410 that will run our project for us. 617 00:39:58,321 --> 00:40:00,480 Running at local host 8000. 618 00:40:00,480 --> 00:40:05,482 As you can see, everything we've done so far and created this backend, 619 00:40:05,482 --> 00:40:11,058 and that too much code had to be written, a lot of this can be sort of boilerplate, 620 00:40:11,058 --> 00:40:14,100 where you can format your own projects. 621 00:40:14,100 --> 00:40:18,879 Django is really cool because you can both connect it to a frontend that 622 00:40:18,879 --> 00:40:23,820 is built in another language like JavaScript in a framework like React, 623 00:40:23,820 --> 00:40:27,310 your Angular or you can also, sorry, let's see. 624 00:40:29,390 --> 00:40:32,791 Yeah, you can also build out your Python frontend, 625 00:40:32,791 --> 00:40:35,743 you can use templates to build out to Python. 626 00:40:38,779 --> 00:40:42,500 Let's see, so this is our backend, it's up and running. 627 00:40:43,580 --> 00:40:45,670 That task route has a list of all the tasks. 628 00:40:46,960 --> 00:40:49,690 Again, that's the URL that we defined with that backend. 629 00:40:49,690 --> 00:40:54,056 And you can see there are no tasks yet, but it gives us a place to post and 630 00:40:54,056 --> 00:40:55,240 create new tasks. 631 00:40:57,090 --> 00:41:02,173 So, Maybe that's learn Python and 632 00:41:02,173 --> 00:41:05,461 I'll just add a description, again, we set up that model. 633 00:41:05,461 --> 00:41:10,295 And we know what it will look like, we know the qualities that a task should have 634 00:41:10,295 --> 00:41:13,827 in this app, the description, and when it was created. 635 00:41:13,827 --> 00:41:16,820 We can see the exact time and where we format here. 636 00:41:16,820 --> 00:41:20,826 We won't need to update that format because we aren't using the app for 637 00:41:20,826 --> 00:41:21,769 anything else. 638 00:41:21,769 --> 00:41:23,310 We're not displaying that to a user. 639 00:41:23,310 --> 00:41:27,780 But if we were, we might wanna change that to something that's more readable. 640 00:41:27,780 --> 00:41:29,640 The description is there learn Python. 641 00:41:29,640 --> 00:41:32,780 So that's what we'll see and we wanna pull up on the frontend. 642 00:41:32,780 --> 00:41:37,030 The idea is, one, because it's the very first task that has been created. 643 00:41:38,910 --> 00:41:44,751 Some of you, you might want to learn typeless 644 00:41:44,751 --> 00:41:51,030 learning JavaScript And again, 645 00:41:51,030 --> 00:41:55,474 we go back to that task list now, it has both of the tasks that we've created. 646 00:41:55,474 --> 00:42:01,310 If we say, task/1, it takes us to just this one instance of a task. 647 00:42:01,310 --> 00:42:03,740 And that's learn Python our first one. 648 00:42:03,740 --> 00:42:07,221 If I wanted to edit that, I could do a put request. 649 00:42:14,721 --> 00:42:17,360 And that would edit the task there. 650 00:42:17,360 --> 00:42:19,324 We go back to our main task route. 651 00:42:22,168 --> 00:42:25,082 And we can see that it's been updated again, and 652 00:42:25,082 --> 00:42:28,110 that shows our backend is up and running. 653 00:42:28,110 --> 00:42:33,299 Another cool thing that we can do as I mentioned before 654 00:42:33,299 --> 00:42:38,040 the admin, I commented that route out, right? 655 00:42:38,040 --> 00:42:41,571 So, we didn't have access to admin. 656 00:42:43,106 --> 00:42:52,380 And I need to make sure, To import the right package to use it. 657 00:43:00,545 --> 00:43:05,833 Cool, so back then, let's give this a try. 658 00:43:05,833 --> 00:43:09,775 There we go. So we have our Django admin backend. 659 00:43:12,269 --> 00:43:18,165 So this is something where you could make this, you'd have your own password, 660 00:43:18,165 --> 00:43:23,190 you're able to have to make some changes or do them right now. 661 00:43:23,190 --> 00:43:28,060 But, typically, you're able to kind of update both who can use the app and 662 00:43:28,060 --> 00:43:30,626 the data that's contained in the app. 663 00:43:32,296 --> 00:43:38,427 I think I'm missing an import somewhere but we'll get on to the important part. 664 00:43:38,427 --> 00:43:43,300 I think we kind of skipped the break today if anyone wants I'll take 665 00:43:43,300 --> 00:43:48,100 a second to get some files completed or get some files moved over. 666 00:43:49,360 --> 00:43:54,644 Copied over to this project for the next step, but that is our backend. 667 00:43:54,644 --> 00:44:00,764 And that's we're able to do all that with Django REST Framework in Django. 668 00:44:04,481 --> 00:44:09,553 So, our to do project, And, 669 00:44:09,553 --> 00:44:14,708 top secret, this folder here, I have our React client. 670 00:44:18,328 --> 00:44:21,860 So the client, again, that's that frontend that we're using. 671 00:44:24,090 --> 00:44:27,512 That's what the user will interact with on the page, 672 00:44:27,512 --> 00:44:31,389 we've created the data with Django that will, I'm sorry, 673 00:44:31,389 --> 00:44:36,820 the backend with Django that will manage the data and see that, okay, cool. 674 00:44:36,820 --> 00:44:41,377 So now that's already in PSC. 675 00:44:42,824 --> 00:44:44,340 Let's take a closer look at our frontend. 676 00:44:44,340 --> 00:44:46,779 And this is some pre-written code. 677 00:44:46,779 --> 00:44:48,590 I've already gone into updated or 678 00:44:48,590 --> 00:44:51,847 installed Tailwind is a pretty quick install on their docks. 679 00:44:51,847 --> 00:44:55,328 They have how you can install it, whichever language you're using, 680 00:44:55,328 --> 00:44:57,220 that's the CSS tool that we'll use. 681 00:44:58,450 --> 00:45:02,796 So, you'll add a Tailwind config file, craco config file and 682 00:45:02,796 --> 00:45:06,660 a few more small changes to get Tailwind up and running. 683 00:45:07,850 --> 00:45:12,344 With React, we can use usually a command like that 684 00:45:12,344 --> 00:45:17,070 terminal here something like create react app. 685 00:45:17,070 --> 00:45:18,517 There are some commands to get up and 686 00:45:18,517 --> 00:45:20,550 running with a project like this pretty quickly. 687 00:45:20,550 --> 00:45:24,190 But we'll see again, this is what we get from that short command, 688 00:45:24,190 --> 00:45:27,160 this react client with all these node modules. 689 00:45:27,160 --> 00:45:30,460 There's tons of code that's pre-written to help you get up and running quickly. 690 00:45:31,670 --> 00:45:35,090 In the source folder here, we have App.js. 691 00:45:35,090 --> 00:45:39,912 And that will be sorta the brains or like the main page we're work in for 692 00:45:39,912 --> 00:45:41,820 this React app. 693 00:45:41,820 --> 00:45:46,566 And you all mentioned some of the things that we needed to do earlier to get this 694 00:45:46,566 --> 00:45:47,596 up and running. 695 00:45:47,596 --> 00:45:48,860 I added some comments in there. 696 00:45:48,860 --> 00:45:52,616 So when you go back if you wanna take a look at this after you can see those. 697 00:45:52,616 --> 00:45:58,462 I'll make sure to update those and have this uploaded to my GitHub soon and 698 00:45:58,462 --> 00:46:01,875 I'll show you what my GitHub is at the end. 699 00:46:01,875 --> 00:46:06,850 But again, there were those three things that we wanted to do in this project 700 00:46:06,850 --> 00:46:08,180 with our frontend. 701 00:46:08,180 --> 00:46:13,580 We needed to be able to list tasks, we needed to be able to add a new task, 702 00:46:13,580 --> 00:46:16,465 and we need to be able to delete tasks. 703 00:46:16,465 --> 00:46:20,890 Reminder, back to the beginning, syntax is not so important. 704 00:46:20,890 --> 00:46:24,650 Don't worry about necessarily how all these things look. 705 00:46:24,650 --> 00:46:27,130 More so what they are and that there are tools for 706 00:46:27,130 --> 00:46:29,180 you to use to make writing code easier. 707 00:46:30,190 --> 00:46:34,602 For example, this first line we're importing are including hooks. 708 00:46:34,602 --> 00:46:39,710 React is a way of building out those web pages and it uses components. 709 00:46:39,710 --> 00:46:41,933 So again, you can think of Legos and 710 00:46:41,933 --> 00:46:44,690 pieces that are used to build out a web page. 711 00:46:44,690 --> 00:46:48,350 There are different types of components, functional, and class. 712 00:46:48,350 --> 00:46:51,824 Functional, maybe are more often used now, and 713 00:46:51,824 --> 00:46:56,836 they don't have some of the same functionality as class components. 714 00:46:56,836 --> 00:47:01,090 Hooks are sort of shortcuts that allow us to do some of that functionality. 715 00:47:02,380 --> 00:47:05,363 So one use effect is a hook that I've added, so 716 00:47:05,363 --> 00:47:09,126 that when things happen on the page, I can run a function. 717 00:47:09,126 --> 00:47:12,077 UState, I've added so that I can keep track of data and 718 00:47:12,077 --> 00:47:15,430 changes that are coming from the database then from the user. 719 00:47:16,520 --> 00:47:20,250 So the first, we'll really write three functions to get this done. 720 00:47:21,970 --> 00:47:24,285 The first function will get the data and 721 00:47:24,285 --> 00:47:28,020 we'll use an API called fetch that will grab that data. 722 00:47:28,020 --> 00:47:31,070 This is that route, that task route that we saw earlier. 723 00:47:31,070 --> 00:47:32,660 We don't need any credentials or anything. 724 00:47:32,660 --> 00:47:37,300 We'll set, oftentimes, functions will come with maybe options, 725 00:47:37,300 --> 00:47:41,860 and settings and things that you can set when you run them. 726 00:47:41,860 --> 00:47:45,662 For instance, if we needed credentials, we could set them here with this property and 727 00:47:45,662 --> 00:47:46,560 we don't for this. 728 00:47:46,560 --> 00:47:49,003 Once we get that data back from the backend, 729 00:47:49,003 --> 00:47:52,490 we'll need to change it into a format that we can use. 730 00:47:52,490 --> 00:47:56,570 And that's gonna be JSON and we'll store that data in the state. 731 00:47:57,850 --> 00:48:01,780 Next up, we'll call useEffect to run it again when it's needed. 732 00:48:03,780 --> 00:48:07,876 So we have all those state, we have all those items, those tasks, but 733 00:48:07,876 --> 00:48:12,690 we need a list to store them on the frontend to be able to use them later on. 734 00:48:12,690 --> 00:48:19,320 So, we'll create an array to store those list items and we'll have some logic here. 735 00:48:19,320 --> 00:48:25,220 So, if the state or where we're storing those list items is blank. 736 00:48:25,220 --> 00:48:29,386 Sorry, if there is state, so if you see if statements then no better than me, 737 00:48:29,386 --> 00:48:32,350 that this means that if state exists, then we do this. 738 00:48:34,160 --> 00:48:37,423 Then we'll map over each of those lists items and 739 00:48:37,423 --> 00:48:39,980 create a dev or an element on the page. 740 00:48:39,980 --> 00:48:42,910 And Destiny, I'd say, yep, just practice. 741 00:48:42,910 --> 00:48:43,460 Thank you. 742 00:48:44,850 --> 00:48:49,164 Building things out like this in the text editor, I'd say if you're doing a smaller 743 00:48:49,164 --> 00:48:53,359 project without something like React to use code pin or workspaces on Treehouse, 744 00:48:53,359 --> 00:48:57,330 but yeah, practice, practice, practice, trying new things. 745 00:48:57,330 --> 00:49:01,682 Trying projects on YouTube, Treehouse, obviously the first choice, 746 00:49:01,682 --> 00:49:05,030 but I'll come back to more of that later. 747 00:49:05,030 --> 00:49:08,427 You're looping over those items, those tasks that we have so 748 00:49:08,427 --> 00:49:10,397 they're displayed on the screen. 749 00:49:10,397 --> 00:49:14,140 And then there's another function to handle the submit. 750 00:49:14,140 --> 00:49:17,418 So, this is attached to one of the buttons, 751 00:49:17,418 --> 00:49:20,350 a button on the screen that adds tasks. 752 00:49:23,120 --> 00:49:25,673 Obviously, so yeah, this is the functionality to do that and 753 00:49:25,673 --> 00:49:27,570 it's calling a POST request. 754 00:49:27,570 --> 00:49:30,610 So we have different types of requests that we can do to the API. 755 00:49:30,610 --> 00:49:34,277 There's GET request to get data, POST the request the post them, 756 00:49:34,277 --> 00:49:36,070 to add things to the database. 757 00:49:36,070 --> 00:49:40,310 So this function here will allow us to add new tasks. 758 00:49:40,310 --> 00:49:47,123 And lastly, function wise, we want to delete the task when it's clicked on. 759 00:49:47,123 --> 00:49:51,663 So we'll set this function to change the text 760 00:49:51,663 --> 00:49:57,150 color to put a line through that completed task. 761 00:49:57,150 --> 00:49:59,025 And then to call a DELETE request, 762 00:49:59,025 --> 00:50:03,557 that's another type of request To that specific instance of a task. 763 00:50:03,557 --> 00:50:07,613 And React is pretty cool because we have all this JavaScript code all 764 00:50:07,613 --> 00:50:12,850 these functions and things and then we have our HTML, our kind of template. 765 00:50:12,850 --> 00:50:15,710 I've already included the tailwind in there. 766 00:50:15,710 --> 00:50:18,850 So as you can see, we'll see when this is all running in a second here. 767 00:50:22,100 --> 00:50:23,240 Let's get it running now actually. 768 00:50:26,080 --> 00:50:31,290 I'll change with the client. 769 00:50:31,290 --> 00:50:32,900 I use yarn start. 770 00:50:32,900 --> 00:50:37,528 So if you're not familiar with yarn it's similar to NPM, 771 00:50:37,528 --> 00:50:43,580 you're able to run and install packages, but again, we have just a title. 772 00:50:43,580 --> 00:50:45,780 That's my to do list. 773 00:50:45,780 --> 00:50:48,977 You see these classes in React, 774 00:50:48,977 --> 00:50:53,487 those are class names, but BG green 200. 775 00:50:53,487 --> 00:50:55,917 So, tailwind has these class names. 776 00:50:55,917 --> 00:50:58,640 It's taking a second here to load the page. 777 00:50:59,920 --> 00:51:02,545 We'll come back to that, but tailwind has these utility classes. 778 00:51:02,545 --> 00:51:07,234 So, if I want the background to be green, I use a class of background green, 779 00:51:07,234 --> 00:51:11,240 200 is a lighter versus 700 would be a darker color. 780 00:51:11,240 --> 00:51:12,580 And here we have it. 781 00:51:12,580 --> 00:51:16,965 The to do app that comes from that Django rest back in that we 782 00:51:16,965 --> 00:51:20,540 created in this one page of React. 783 00:51:20,540 --> 00:51:22,330 This is what our CSS looks like. 784 00:51:22,330 --> 00:51:25,996 Oops, this is not what our CSS looks like 785 00:51:31,983 --> 00:51:34,206 This is what our CSS should look like. 786 00:51:41,741 --> 00:51:43,320 That's also not what our CSS should look like. 787 00:51:43,320 --> 00:51:46,230 It should be three lines of code, just imports. 788 00:51:46,230 --> 00:51:50,072 There shouldn't be anything on the CSS, I think this is some other code. 789 00:51:50,072 --> 00:51:51,916 Index.css, perfect, okay. 790 00:51:51,916 --> 00:51:56,180 In our index.css that's all we have, the css is being handled right now. 791 00:51:57,970 --> 00:52:03,010 Are really in that app JS in those class names. 792 00:52:03,010 --> 00:52:05,141 And if you want the text to be really big, 793 00:52:05,141 --> 00:52:09,460 like I wanted this to do lists to be a little bit larger, I made it text 3XL. 794 00:52:09,460 --> 00:52:11,260 If I want that to be small. 795 00:52:12,390 --> 00:52:17,670 I could say text XS and just change the class name. 796 00:52:17,670 --> 00:52:21,495 Now, when I go back, my title is tiny which makes no sense and 797 00:52:21,495 --> 00:52:22,930 it's inaccessible. 798 00:52:27,548 --> 00:52:30,517 So yeah, go back to three XL and you can just change those. 799 00:52:30,517 --> 00:52:36,759 So currently, the buttons background is 300, so I change that to 500. 800 00:52:38,220 --> 00:52:40,330 It gets a little bit darker there. 801 00:52:41,340 --> 00:52:44,585 So again tailwind's pretty quick to install and 802 00:52:44,585 --> 00:52:49,900 then once you have it installed pretty quick to add classes and style your page. 803 00:52:51,800 --> 00:52:56,460 So here we have the result of all that code and let's see if it works. 804 00:53:10,286 --> 00:53:13,378 Well, that was unexpected. 805 00:53:13,378 --> 00:53:14,250 Let's see. 806 00:53:16,452 --> 00:53:18,077 There's got to be something going on. 807 00:53:25,020 --> 00:53:26,436 Yep, definitely that's three. 808 00:53:34,057 --> 00:53:38,956 For the sake of time, I know just what to do. 809 00:53:46,519 --> 00:53:48,175 I don't wanna diagnose too much, 810 00:53:48,175 --> 00:53:51,554 we're almost out of time I wanna have a little bit time for questions. 811 00:54:12,759 --> 00:54:14,860 There we go. 812 00:54:14,860 --> 00:54:17,230 So, perfect. 813 00:54:17,230 --> 00:54:20,906 Yeah, I'm doing it, just figured out what's going on. 814 00:54:20,906 --> 00:54:24,486 I did kind of rush through a little bit to make time, 815 00:54:24,486 --> 00:54:27,460 but there we have a functioning app. 816 00:54:27,460 --> 00:54:29,890 Our back end and front end are connected. 817 00:54:29,890 --> 00:54:34,516 We're able to do that through those cores, headers and things, but 818 00:54:34,516 --> 00:54:37,787 we've made that, defined the puppet master and 819 00:54:37,787 --> 00:54:42,120 the puppet itself with quite a few lines of code and comparison. 820 00:54:44,300 --> 00:54:48,749 When you think about it, maybe you still have quite a few lines to write. 821 00:54:48,749 --> 00:54:53,724 When you use frameworks and libraries, cuz maybe you're writing 500 lines of code 822 00:54:53,724 --> 00:54:58,330 out of a million instead of just 500 and that's the entire project. 823 00:54:58,330 --> 00:55:00,481 It's really helpful to get up and running quickly. 824 00:55:00,481 --> 00:55:04,180 And again, has a lot of the built in functionality and things we wanna do. 825 00:55:04,180 --> 00:55:08,860 All this creation, deletion of things is handled in the back end. 826 00:55:08,860 --> 00:55:14,300 So again, when I refresh the page, that task is gone, you can add more. 827 00:55:14,300 --> 00:55:20,510 And this is an everyday task, learn, learn, learn, keep learning. 828 00:55:20,510 --> 00:55:29,155 And the message I wanna wrap up with is to keep learning, be a lifelong learner. 829 00:55:29,155 --> 00:55:32,031 If you're here, this is the place to do it. 830 00:55:32,031 --> 00:55:36,519 It's a great community to keep learning, a great place to ask questions, 831 00:55:36,519 --> 00:55:38,170 which we'll get into now. 832 00:55:38,170 --> 00:55:40,130 I didn't mean to use a bunch of those. 833 00:55:40,130 --> 00:55:43,226 And before we get into questions, I'll just say, 834 00:55:43,226 --> 00:55:46,541 Redwood JS is a great place if you're a JavaScripter. 835 00:55:46,541 --> 00:55:49,810 A framework that you can build all these things out. 836 00:55:49,810 --> 00:55:51,400 It's a full stack framework. 837 00:55:53,090 --> 00:55:57,070 So maybe a great place to explore full stack a little bit more. 838 00:55:57,070 --> 00:56:00,010 Build a full stack app in a language of your choice. 839 00:56:00,010 --> 00:56:02,873 Again, check out those videos that we have, the projects that we have. 840 00:56:02,873 --> 00:56:07,937 Brad Travers on YouTube is great at building those full stack projects. 841 00:56:07,937 --> 00:56:11,684 You keep learning, learn about deployment using tools like Netlify, 842 00:56:11,684 --> 00:56:13,570 to take this a step further. 843 00:56:13,570 --> 00:56:16,300 If you're not quite there yet, take your time. 844 00:56:16,300 --> 00:56:20,722 Go through the code, try to read the code and see what things you can identify and 845 00:56:20,722 --> 00:56:22,830 what you've already learned. 846 00:56:22,830 --> 00:56:24,340 Reading code is a valuable skill. 847 00:56:24,340 --> 00:56:26,906 You'll read and review others' code on the job. 848 00:56:26,906 --> 00:56:29,328 So make sure to get that practice and 849 00:56:29,328 --> 00:56:33,702 it'll help you to, for authors, I think it helps them to read. 850 00:56:33,702 --> 00:56:38,921 More you read the better code author, you'll become. 851 00:56:38,921 --> 00:56:41,390 Keep learning, keep asking questions. 852 00:56:41,390 --> 00:56:43,640 Don't think your question isn't good enough to ask. 853 00:56:46,010 --> 00:56:48,846 Again, this is a great community, a great place to ask those questions. 854 00:56:48,846 --> 00:56:54,157 And if you're a beginner, the best place I think ,and we'll open it up for 855 00:56:54,157 --> 00:56:57,042 some more questions if you all have any. 856 00:56:57,042 --> 00:56:59,905 But thank you all for sticking around so far, 857 00:57:07,340 --> 00:57:09,014 How long have I coded? 858 00:57:09,014 --> 00:57:14,457 Let's say, I think on and off since 2015. 859 00:57:14,457 --> 00:57:22,490 I started with Treehouse, and I was working sort of like a warehouse job. 860 00:57:22,490 --> 00:57:26,795 And taking the courses on my breaks at night or working, 861 00:57:26,795 --> 00:57:31,749 that's the cool thing about Treehouse, is it's so flexible. 862 00:57:31,749 --> 00:57:35,500 And that you're able to learn at your own pace. 863 00:57:35,500 --> 00:57:40,400 So I had a few ventures, I took my last class, sorry, my last term and 864 00:57:40,400 --> 00:57:42,220 undergraduate. 865 00:57:42,220 --> 00:57:45,924 That was a C++ class and it piqued my interest in coding. 866 00:57:45,924 --> 00:57:48,414 I didn't feel successful after. 867 00:57:48,414 --> 00:57:51,043 I felt like still kind of lost. 868 00:57:51,043 --> 00:57:55,860 And C++ might not have been my best first language, but I was interested. 869 00:57:55,860 --> 00:57:56,895 I stuck with it and 870 00:57:56,895 --> 00:58:00,414 I found out about Treehouse sort of in that same time period. 871 00:58:00,414 --> 00:58:03,725 Started learning HTML and CSS, from there JavaScript. 872 00:58:03,725 --> 00:58:06,907 And those are definitely say, great starting points, to learn HTML and CSS. 873 00:58:06,907 --> 00:58:11,585 To learn, really from the front end back, I think it's helpful. 874 00:58:11,585 --> 00:58:17,068 Because I was able to understand what's going on in the page or 875 00:58:17,068 --> 00:58:19,809 what the structure of a page and 876 00:58:19,809 --> 00:58:24,344 then understand how JavaScript can manipulate and 877 00:58:24,344 --> 00:58:28,993 how Python can provide or control some of that data. 878 00:58:28,993 --> 00:58:30,033 For a while. 879 00:58:30,033 --> 00:58:34,789 A few times where I think I failed, I didn't do the tech degree. 880 00:58:34,789 --> 00:58:37,390 And I got stuck and it was hard. 881 00:58:37,390 --> 00:58:38,961 I didn't ask questions and 882 00:58:38,961 --> 00:58:43,476 I learnt that asking questions at some point that the only way to move forward. 883 00:58:43,476 --> 00:58:48,264 When you work in a team you're collaborating. 884 00:58:48,264 --> 00:58:49,586 It's helpful to ask those questions. 885 00:58:49,586 --> 00:58:51,820 Others will ask questions of you. 886 00:58:51,820 --> 00:58:58,032 It's part of communication and a necessary part of the industry. 887 00:58:58,032 --> 00:59:03,900 Lets see, different languages, what do you think I should stick to? 888 00:59:03,900 --> 00:59:07,937 So, I'd say it's up to you. 889 00:59:07,937 --> 00:59:11,702 It really depends on what your path is, what you're trying to accomplish. 890 00:59:11,702 --> 00:59:14,818 Assign is a great tool, code is a great tool for tracking some of those goals and 891 00:59:14,818 --> 00:59:17,371 setting them and really visualizing and breaking steps down and 892 00:59:17,371 --> 00:59:19,040 keeping track of what you're learning. 893 00:59:20,130 --> 00:59:22,977 But depending on what you're comfortable with, 894 00:59:22,977 --> 00:59:25,969 I think it's helpful when learning two languages. 895 00:59:25,969 --> 00:59:30,012 When there's crossover between subjects, it's really helpful to me, 896 00:59:30,012 --> 00:59:31,260 to make connections. 897 00:59:32,700 --> 00:59:35,487 The frameworks in JavaScript I learned Express, 898 00:59:35,487 --> 00:59:38,682 so that translated to Flask, the frameworks in Python. 899 00:59:38,682 --> 00:59:40,090 You'll see similarities. 900 00:59:40,090 --> 00:59:42,905 I think that it's helpful to get really strong, as strong as you can, 901 00:59:42,905 --> 00:59:43,630 in one language. 902 00:59:45,620 --> 00:59:48,414 And then kinda make that shift over, get a foundation, 903 00:59:48,414 --> 00:59:51,900 be able to build things in a language and then learn another. 904 00:59:51,900 --> 00:59:56,351 If you have the time, interest and kinda bandwidth to do two, 905 00:59:56,351 --> 01:00:00,810 I'd say go for it, but I'd say it helps to kinda focus in learn 906 01:00:19,720 --> 01:00:23,550 Yeah, so Django rest is a framework and is used for making that API. 907 01:00:23,550 --> 01:00:26,710 That's how we were able to communicate with the database. 908 01:00:26,710 --> 01:00:31,130 It handles all that behind the scenes with some of those commands. 909 01:00:31,130 --> 01:00:35,090 Don't be nervous, destiny everyone. 910 01:00:35,090 --> 01:00:38,719 I didn't know any of the stuff that I talked about today before I learned it. 911 01:00:39,730 --> 01:00:45,040 I think that in my personal experience as well I've had, it's a blocker. 912 01:00:45,040 --> 01:00:49,104 When you think about how much you don't know or think about something as 913 01:00:49,104 --> 01:00:53,436 intimidating or that you don't know it, but the best thing you can do is take 914 01:00:53,436 --> 01:00:57,110 a small step a day, read about it, watch a short video about it. 915 01:00:58,780 --> 01:01:01,488 Jennifer Northdale, one of the Treehouse legends, 916 01:01:01,488 --> 01:01:04,930 will tell you the best way to eat an elephant as it bite at a time. 917 01:01:04,930 --> 01:01:10,480 Sorry if I miss quoted that, but that is 100% correct. 918 01:01:10,480 --> 01:01:11,430 Write these things down. 919 01:01:11,430 --> 01:01:16,650 Use Asana and Coda to map out these tasks and things, map out your learning. 920 01:01:18,820 --> 01:01:21,550 Yeah, at what point can you move to a different language. 921 01:01:21,550 --> 01:01:22,883 Sorry if I'm skipping anything. 922 01:01:22,883 --> 01:01:25,529 Again, yeah, if you feel strong and confident, 923 01:01:25,529 --> 01:01:29,328 if you're building things in that one, then kinda take it from there. 924 01:01:29,328 --> 01:01:33,571 Yeah, really get competent in a language, 925 01:01:33,571 --> 01:01:38,500 get some practice, get some experience. 926 01:01:38,500 --> 01:01:44,374 Always be aware of holes in your learning if you can kind of fill those out and 927 01:01:44,374 --> 01:01:49,988 make sure that you're solid and feel comfortable before proceeding. 928 01:01:58,174 --> 01:02:01,609 Yeah, I would say if you're familiar with the language like C-sharp, 929 01:02:01,609 --> 01:02:03,185 then yeah, definitely Python, 930 01:02:03,185 --> 01:02:06,530 as I mentioned before, is a lot more forgiving than other languages. 931 01:02:08,090 --> 01:02:11,433 Maybe, again, that using this word, simpler syntax and 932 01:02:11,433 --> 01:02:16,225 others, again, like there's things you don't have to declare your variables. 933 01:02:16,225 --> 01:02:21,144 But again, there's catches where you need to make sure you're 934 01:02:21,144 --> 01:02:23,522 indenting at the right times. 935 01:02:23,522 --> 01:02:28,213 Within those functions the function name will be at, you'll need to indent 936 01:02:28,213 --> 01:02:33,068 the body of the function, things like that, your semi colons to look out for. 937 01:02:33,068 --> 01:02:37,597 And there are tools just like there are in JavaScript linters things to check your 938 01:02:37,597 --> 01:02:39,072 code as you're writing. 939 01:02:39,072 --> 01:02:43,557 An awesome desk, and yeah, if you're a designer, a great place to start again, 940 01:02:43,557 --> 01:02:47,530 you have knowledge of the page, you know what's going on the user side. 941 01:02:48,650 --> 01:02:54,854 And you can work on that backend as well or you can learn more about the backend. 942 01:02:54,854 --> 01:02:57,689 Again, that can help you work with developers, understand some of 943 01:02:57,689 --> 01:03:01,800 the constraints that developers work with if you're continuing your design work. 944 01:03:01,800 --> 01:03:05,075 Do some of that development work on your own. 945 01:03:05,075 --> 01:03:09,695 I'd say it's not necessary to learn older programming languages, 946 01:03:09,695 --> 01:03:13,710 I'd say, again, learning a language is important. 947 01:03:13,710 --> 01:03:16,625 Look at the jobs that you're interested in, 948 01:03:16,625 --> 01:03:21,774 maybe look at things that you want to build in the capabilities of the language. 949 01:03:21,774 --> 01:03:25,990 But I'd say, like languages like JavaScript, Python, 950 01:03:25,990 --> 01:03:28,484 those that are really the bread and 951 01:03:28,484 --> 01:03:34,720 butter of what we teach here are essential in demand and great languages to learn. 952 01:03:34,720 --> 01:03:40,680 Again, it's really about your individual needs in which you want to accomplish. 953 01:03:40,680 --> 01:03:42,961 So if there's a project that you're working on or 954 01:03:42,961 --> 01:03:45,569 you're going to a company that uses a certain language, 955 01:03:45,569 --> 01:03:48,580 you'll definitely wanna learn that language the company uses. 956 01:03:52,170 --> 01:03:53,830 Again, keep on learning. 957 01:03:53,830 --> 01:03:55,790 Thanks, everyone, for having me. 958 01:03:55,790 --> 01:03:57,970 We've had enough. We'll be wrapping up in a second here. 959 01:03:57,970 --> 01:04:00,170 But thank you all. 960 01:04:00,170 --> 01:04:04,094 As I mentioned before, I did a lot of learning here on Treehouse. 961 01:04:04,094 --> 01:04:08,106 Gil Hernandez is my first JavaScript teacher, and 962 01:04:08,106 --> 01:04:14,369 it's the cool I get to actually kind of create things alongside him these days. 963 01:04:14,369 --> 01:04:19,536 So I know how important these things are, learning and 964 01:04:19,536 --> 01:04:24,090 trying to make this jump into a new career. 965 01:04:24,090 --> 01:04:27,010 So I'm always open to feedback and listening. 966 01:04:27,010 --> 01:04:30,138 My email is ready@teamtreehouse. 967 01:04:30,138 --> 01:04:34,177 You can find me on GitHub @Ark20. 968 01:04:34,177 --> 01:04:39,051 I'm on TikTok I suppose that way because I'm old age I guess, 969 01:04:39,051 --> 01:04:41,410 well, code_reg on TikTok. 970 01:04:41,410 --> 01:04:44,813 We're trying to make educational things and try to make those, 971 01:04:44,813 --> 01:04:47,978 make the learning stick in another way, in a shorter form. 972 01:04:47,978 --> 01:04:52,530 And those videos are always open to hearing from students reach out. 973 01:04:52,530 --> 01:04:56,498 I'm on LinkedIn as well with my name. 974 01:04:56,498 --> 01:04:57,570 Let's see. 975 01:04:58,710 --> 01:05:01,720 I don't know if I'll make sure the link is provided somewhere. 976 01:05:01,720 --> 01:05:05,080 It'll be in like my teacher profile on Treehouse. 977 01:05:05,080 --> 01:05:08,165 Again, be sure to check out some of the awesome existing courses that we have on 978 01:05:08,165 --> 01:05:10,020 the topics that I mentioned today. 979 01:05:10,020 --> 01:05:12,150 Django is in our library. 980 01:05:12,150 --> 01:05:13,890 And once you have an understanding of Django, 981 01:05:13,890 --> 01:05:15,504 Megan's have some great courses on that. 982 01:05:15,504 --> 01:05:19,695 But you can build, you can pick up the Django rest framework from 983 01:05:19,695 --> 01:05:24,490 the documentation or coming back to this presentation even. 984 01:05:24,490 --> 01:05:28,847 The same with react to be on the lookout for some refreshes and 985 01:05:28,847 --> 01:05:31,930 updates with our react content coming up. 986 01:05:31,930 --> 01:05:35,660 And CSS, I recently done a tailwind live stream. 987 01:05:35,660 --> 01:05:36,768 Thanks, Chris. 988 01:05:36,768 --> 01:05:40,660 Christopher recently done. 989 01:05:40,660 --> 01:05:43,143 And Sandy will be up on GitHub today. 990 01:05:43,143 --> 01:05:46,640 By the end of the day, I'll do that. 991 01:05:46,640 --> 01:05:49,501 Yeah, any other questions? 992 01:05:56,287 --> 01:05:59,123 Cool, thank you everyone for sticking around and 993 01:05:59,123 --> 01:06:02,270 not falling asleep during an hour of coding. 994 01:06:02,270 --> 01:06:05,456 Try not to write too much and make you watch me write. 995 01:06:05,456 --> 01:06:10,795 And thanks for your attention, your questions and showing up today. 996 01:06:10,795 --> 01:06:13,180 Yeah, and thanks Liz for the opportunity