1 00:00:00,910 --> 00:00:04,360 In this video, we're going to take a look at the project that we're going to be building inside this 2 00:00:04,360 --> 00:00:09,690 course, we're going to be making a skylight that is designed to be installed on some user's machine. 3 00:00:10,180 --> 00:00:15,700 A user will be able to use the CLI to launch an interactive development environment inside their browser. 4 00:00:15,940 --> 00:00:21,100 And the user is going to use this environment to write out some code and document it at the same time. 5 00:00:21,580 --> 00:00:25,600 Now, obviously, this description right here is not super helpful, doesn't really tell you what we're 6 00:00:25,600 --> 00:00:26,110 going to make. 7 00:00:26,290 --> 00:00:30,990 So I'm just going to give you a very quick demonstration inside this video of the finished project. 8 00:00:31,300 --> 00:00:34,630 I'm not going to show you the entire scope of the project because there's actually a lot of stuff we're 9 00:00:34,630 --> 00:00:35,320 going to be building. 10 00:00:35,540 --> 00:00:37,800 We're going to show you at least a little bit of what we're going to be making. 11 00:00:37,930 --> 00:00:40,300 Just help you understand what it is we're going to be doing. 12 00:00:40,750 --> 00:00:41,920 OK, so here's the demo. 13 00:00:41,920 --> 00:00:43,750 Here's what we are going to eventually build. 14 00:00:43,750 --> 00:00:46,720 Inside this course, we're going to be building a Seelie. 15 00:00:46,750 --> 00:00:48,570 So it's something that we're going to run from our terminal. 16 00:00:49,060 --> 00:00:51,280 I'm going to run JDBC serve. 17 00:00:51,460 --> 00:00:54,250 The book is the name of the application you and I are going to make. 18 00:00:54,940 --> 00:00:55,990 When I run that command. 19 00:00:56,320 --> 00:01:01,960 I tell my user that I want them to open up their browser and navigate to localhost port four thousand 20 00:01:01,960 --> 00:01:02,410 five. 21 00:01:02,840 --> 00:01:04,209 It's going to do that myself right now. 22 00:01:06,490 --> 00:01:10,780 OK, I'm going to go to localhost four thousand five, and you'll notice that right away we prompt a 23 00:01:10,780 --> 00:01:13,900 user with kind of an empty screen, but there are two buttons on it. 24 00:01:14,630 --> 00:01:20,410 I'm going to click on this text button right here when I click on text that adds in a new text cell 25 00:01:20,410 --> 00:01:21,300 to this document. 26 00:01:21,880 --> 00:01:25,180 This is an area where a user can write out some amount of documentation. 27 00:01:25,180 --> 00:01:31,270 So if I click in there, I am presented with a markdown editor inside of your I can write out some. 28 00:01:32,710 --> 00:01:38,200 Documentation, I have full marked down syntax available to me so I could put in, say, some bullet 29 00:01:38,200 --> 00:01:39,820 list or some numbered item. 30 00:01:41,680 --> 00:01:47,680 And I can do many other very typical markdown things, like maybe add a link, let me actually put that 31 00:01:47,680 --> 00:01:48,430 inside of a link. 32 00:01:51,860 --> 00:01:55,970 If I then click out of the cell, it reverts back to being very plain text, but notice how it's all 33 00:01:55,970 --> 00:01:59,780 nicely formatted once I've got some documentation written inside of here. 34 00:01:59,810 --> 00:02:03,320 I'll then hover over this little divider and then add in another cell. 35 00:02:03,600 --> 00:02:04,910 In this case, I'll make a code. 36 00:02:04,910 --> 00:02:05,210 So. 37 00:02:06,500 --> 00:02:11,870 When I do that, I'm presented with a fully featured code editor, we can write out some amount of code 38 00:02:11,870 --> 00:02:16,190 inside of here and whatever code we write out, we're going to execute that code automatically and then 39 00:02:16,190 --> 00:02:19,550 show the result on the right hand side in this little preview window over here. 40 00:02:20,990 --> 00:02:25,670 There's one very special feature about this little code, Ed. There's a function built into it called 41 00:02:25,670 --> 00:02:31,160 the show function, and we can use this show function to specify exactly what values we want to show 42 00:02:31,160 --> 00:02:32,630 inside the preview window to the right. 43 00:02:33,230 --> 00:02:38,630 So, for example, if I call a show with a number one, two, three, that will be displayed on the 44 00:02:38,630 --> 00:02:39,290 right hand side. 45 00:02:40,250 --> 00:02:42,200 I can also declare variables, of course. 46 00:02:44,750 --> 00:02:49,880 And show that variable, I can also show, say, a raise and so on. 47 00:02:51,540 --> 00:02:56,070 After we add in some amount of documentation and some amount of code, we're then free to add in as 48 00:02:56,070 --> 00:02:57,780 many additional cells as we want. 49 00:02:58,200 --> 00:03:04,860 So I can add in maybe another text section and describe your is some or a code or whatever documentation 50 00:03:04,860 --> 00:03:05,700 I want to add in. 51 00:03:06,720 --> 00:03:09,060 After that, I might then add in another Kozel. 52 00:03:11,020 --> 00:03:16,150 So here's another one, in addition to showing very simple values like strings, numbers and arrays, 53 00:03:16,300 --> 00:03:18,060 we can also show Riak components. 54 00:03:18,460 --> 00:03:21,640 So I might make a very simple react component. 55 00:03:27,430 --> 00:03:33,280 And then show that as well, and I'll see that component display over here, any reaction point we make 56 00:03:33,280 --> 00:03:36,060 is absolutely fully featured and functional in nature. 57 00:03:36,070 --> 00:03:41,200 So if I added in some event handlers to it or some state, that would work perfectly well inside this 58 00:03:41,200 --> 00:03:41,860 preview window. 59 00:03:42,720 --> 00:03:47,730 In addition to showing simple values, we can also this is really, really neat, I'm going to add another 60 00:03:47,730 --> 00:03:48,630 code cell down here. 61 00:03:48,870 --> 00:03:53,790 We can also import any arbitrary module directly from NPM that we want. 62 00:03:54,270 --> 00:03:57,210 So, for example, I can import the Axios library. 63 00:03:58,870 --> 00:04:04,180 When I import Axios, this coding environment is going to reach out to the Indian registry and dynamically 64 00:04:04,180 --> 00:04:11,070 pull in the Axios library so we can get any just about any NPM module that we want to inside this environment, 65 00:04:11,530 --> 00:04:13,540 I can then use Axios to make a request. 66 00:04:14,090 --> 00:04:17,709 So I'm going to make a request to some URL that I pulled up ahead of time. 67 00:04:18,790 --> 00:04:22,089 That's going to get some information about some made up imaginary user. 68 00:04:24,510 --> 00:04:29,790 And then going to take some data from the response and then show data. 69 00:04:30,940 --> 00:04:31,330 Name. 70 00:04:32,860 --> 00:04:36,730 And that shows some information about some fake that is at this API endpoint. 71 00:04:37,550 --> 00:04:40,540 You'll see that we can import arbitrary libraries, anything we want. 72 00:04:40,540 --> 00:04:42,480 We can make requests, do all that kind of good stuff. 73 00:04:42,820 --> 00:04:45,910 And then finally, last, a little interesting thing inside this coding environment. 74 00:04:46,120 --> 00:04:49,990 I can also import siestas files directly from NPM as well. 75 00:04:50,300 --> 00:04:51,670 So I'm going to import Balma. 76 00:04:52,300 --> 00:04:56,290 Jesus Wolmar Accessible is a very popular access library. 77 00:04:56,630 --> 00:05:00,820 When I do so, you'll notice that the text over here has now changed because I've imported in that case 78 00:05:00,820 --> 00:05:03,580 file, which has applied some styling to that text. 79 00:05:04,550 --> 00:05:06,390 So it's pretty much it that's what we're going to be making. 80 00:05:06,650 --> 00:05:09,140 This is a dynamic programming environment. 81 00:05:09,380 --> 00:05:12,890 User's going to write out some documentation and some code to go along with it. 82 00:05:13,250 --> 00:05:17,480 So you can really imagine that you might use this to create some kind of like coding cheat sheet or 83 00:05:17,480 --> 00:05:18,200 something like that. 84 00:05:18,860 --> 00:05:22,930 Now, last thing I want to show you very quickly, I've now written out a lot of content inside of here, 85 00:05:23,030 --> 00:05:26,390 and at some point in time, I might want to share all this stuff with someone else. 86 00:05:26,930 --> 00:05:30,800 So for that, we're going to make sure that whenever a user writes out some content inside the browser, 87 00:05:31,370 --> 00:05:34,490 we actually persist all that content back to their hard drive in some way. 88 00:05:35,300 --> 00:05:40,190 When I run that book, Serve Command, it automatically creates a file inside this directory called 89 00:05:40,190 --> 00:05:41,190 Books. 90 00:05:42,020 --> 00:05:44,120 I'm going to open that file up inside my code editor. 91 00:05:45,060 --> 00:05:48,200 It is right here and inside this file. 92 00:05:48,200 --> 00:05:50,930 You notice all the content that we just wrote out inside the browser. 93 00:05:51,210 --> 00:05:53,630 So there's the first text cell. 94 00:05:53,960 --> 00:05:58,550 There are some code, there's more code, and there's the axios stuff that we wrote out at the very 95 00:05:58,550 --> 00:05:58,910 bottom. 96 00:05:59,570 --> 00:06:03,920 So I can very easily take this file and share it with another user and they can then load it up into 97 00:06:04,040 --> 00:06:06,110 a book and see all these notes and so on. 98 00:06:06,890 --> 00:06:07,310 That's it. 99 00:06:07,310 --> 00:06:08,530 That's we're going to be making. 100 00:06:08,870 --> 00:06:12,230 I'm really excited about this application, but we definitely have a lot of work to do. 101 00:06:12,410 --> 00:06:14,870 So let's take a pause right here and get started in the next video.