1 00:00:00,780 --> 00:00:07,500 In this lesson, we're going to be setting up our own testing server, using GitHub repository, so 2 00:00:07,500 --> 00:00:15,930 creating a DB JSON file and this is the contents of my testing, one where we're just loading in post 3 00:00:15,930 --> 00:00:16,620 information. 4 00:00:16,620 --> 00:00:21,930 So we're getting all of the posts from the endpoint and we're iterating through all of the posts. 5 00:00:22,560 --> 00:00:25,880 We can simulate that and load that. 6 00:00:26,250 --> 00:00:32,460 So if you want post number one, we can also see post number two so we can simulate getting back the 7 00:00:32,460 --> 00:00:34,050 post data from the endpoint. 8 00:00:35,120 --> 00:00:44,840 And this is all done through my JSON server type code, so you need to have a GitHub account in order 9 00:00:44,840 --> 00:00:52,040 to do this and then make sure that you've got some valid JSON data that you've got within your JSON 10 00:00:52,040 --> 00:00:56,510 database and then you can use that as an endpoint and connect to it. 11 00:00:56,750 --> 00:01:01,820 And in this case, what we're doing is we're just doing a simple request and loading the contents. 12 00:01:02,390 --> 00:01:09,110 There's also options to connect using get posts, put patch and delete. 13 00:01:09,710 --> 00:01:11,750 So these changes aren't going to be persistent. 14 00:01:11,900 --> 00:01:17,390 Your data within the DP, Jason, it's not going to change, but you will get a response from the endpoint. 15 00:01:18,470 --> 00:01:25,160 So it's an excellent way to simulate working with a server data and JSON data. 16 00:01:26,170 --> 00:01:34,810 Within your application, opening up the ED, we've created the index HTML file that's got the standard 17 00:01:34,810 --> 00:01:40,690 device that we've been using in the previous lessons and we're linking it to Code six, G.S. within 18 00:01:40,690 --> 00:01:47,080 Code six, DOT, G.S. selecting the elements from the page, adding an event listener. 19 00:01:47,080 --> 00:01:51,670 So whenever the button gets clicked, we get the ready message within the console. 20 00:01:51,880 --> 00:01:55,450 And then I've also kept in the function to add elements to the page. 21 00:01:55,760 --> 00:02:00,030 This gives us an easy way to create elements and append them to the page. 22 00:02:00,040 --> 00:02:05,680 And I'm just going to make an update to this to be appending it to the pages that are preparing it as 23 00:02:05,680 --> 00:02:10,070 we're going to be adding content to the page when we're making connections to the endpoint. 24 00:02:10,450 --> 00:02:14,140 So this lesson is also going to be how you can set up your own endpoint. 25 00:02:14,350 --> 00:02:18,030 So going over to Jason Placeholder type code dot com. 26 00:02:18,040 --> 00:02:22,170 So that's the endpoint that we've been working with in the previous couple lessons. 27 00:02:22,720 --> 00:02:25,830 There's also an option to set up a might JSON server. 28 00:02:26,110 --> 00:02:34,720 So within my JSON server you can set a decent server and have your own file running on the server and 29 00:02:34,720 --> 00:02:36,790 this is how you can structure the file. 30 00:02:37,040 --> 00:02:45,010 So what you do is you create a file called DB, JSON and get the repo and the user information to get 31 00:02:45,010 --> 00:02:45,640 all of that. 32 00:02:45,820 --> 00:02:53,870 And that way you can run the repo and get the server information directly from this end point. 33 00:02:54,370 --> 00:03:03,070 So let's go ahead and copy the base, your URL, and then we'll update this to match the endpoint that 34 00:03:03,070 --> 00:03:04,010 we're going to be creating. 35 00:03:05,020 --> 00:03:11,140 So for the base euro and it's going to require the user and the repoll. 36 00:03:12,250 --> 00:03:18,840 So that is what we're going to be updating and we need to create that and creating that with git repository. 37 00:03:19,120 --> 00:03:23,770 So it does give you the brief examples of create a repository on GitHub. 38 00:03:23,770 --> 00:03:29,680 So you do need to have a GitHub account, create a DB Duchesse on file, and then you can update and 39 00:03:29,680 --> 00:03:31,030 access your own server. 40 00:03:31,180 --> 00:03:33,370 And this is directly coming from GitHub. 41 00:03:34,060 --> 00:03:39,700 This is a quick and easy way to set up JSON server that you can interact with and have some data that 42 00:03:39,700 --> 00:03:41,770 you can access online. 43 00:03:43,560 --> 00:03:51,720 So I'm going to go over to GitHub, log in to my GitHub account, create a new repository, so give 44 00:03:51,720 --> 00:03:56,430 the repository a name testing database. 45 00:03:59,540 --> 00:04:05,120 And just leave that open to the public, you can you don't have to add a README file, you can if you 46 00:04:05,120 --> 00:04:05,390 want. 47 00:04:08,310 --> 00:04:19,110 And within the repository, so this is going to be our testing database repository and GitHub, and 48 00:04:19,110 --> 00:04:21,520 we can add files to it as well. 49 00:04:21,960 --> 00:04:24,170 So let's go ahead and create a brand new file. 50 00:04:25,140 --> 00:04:31,400 And according to the instructions, we got to give this file file name of TB, Jason. 51 00:04:32,580 --> 00:04:41,160 And then within the DB that Jason, we can set up the Jason information and actually let's extend on 52 00:04:41,190 --> 00:04:41,600 this. 53 00:04:42,030 --> 00:04:45,030 So adding in additional parameters. 54 00:04:45,060 --> 00:04:50,310 So if you want maybe body to that testing. 55 00:04:53,040 --> 00:04:57,900 And you can, of course, add whatever content you want, as long as it's properly structured with an 56 00:04:57,900 --> 00:04:58,960 adjacent structure. 57 00:04:59,820 --> 00:05:08,430 So let's update and we'll add a few more posts as this can have an idea of two can have hello to and 58 00:05:08,430 --> 00:05:09,360 testing to. 59 00:05:10,650 --> 00:05:14,010 And let's do one more where we've got three. 60 00:05:14,520 --> 00:05:17,650 And this will just say hello three and testing three. 61 00:05:18,150 --> 00:05:25,740 So once you've created your JSON database file, so you're going to be connecting to this using the 62 00:05:27,180 --> 00:05:29,780 JSON, my JSON server. 63 00:05:30,210 --> 00:05:35,420 So commit the file and that will create the file within the repository. 64 00:05:36,180 --> 00:05:40,260 And typically you will and you should include a read me file. 65 00:05:40,680 --> 00:05:48,420 So what I'll do is I'll just set up and I'll just copy within the README file the instructions on how 66 00:05:48,420 --> 00:05:48,690 to. 67 00:05:49,320 --> 00:05:51,940 So I'll add that file as well to the repository. 68 00:05:52,320 --> 00:06:00,570 So within this testing database repository we've got just deep, deep JSON and then this is going to 69 00:06:00,570 --> 00:06:04,000 be the path that we need to connect to. 70 00:06:04,050 --> 00:06:10,220 So that includes the user and the ripple that we want to use and just make sure that we get it correct. 71 00:06:10,830 --> 00:06:18,990 So the user and then the people that we want to use and then forward slash that and we can select all 72 00:06:18,990 --> 00:06:22,560 of the content that's currently within that REPL. 73 00:06:25,800 --> 00:06:31,350 And using the same structure that they have here, we're going to connect to it and get all of the post 74 00:06:31,350 --> 00:06:37,790 information, so do posts, and that should return back all of the post data. 75 00:06:38,340 --> 00:06:43,830 And then when instead of loading the data, let's make the Futch request. 76 00:06:46,010 --> 00:06:52,970 And we'll just make the Futch request actually to the base, Yoro, so that's the initial Futch request 77 00:06:53,600 --> 00:07:00,980 to the base, you, Earl, or for a consistency we can create a euro object and that will give us the 78 00:07:01,310 --> 00:07:04,910 structure in order to update the euro path. 79 00:07:05,870 --> 00:07:11,150 So make a connection, then return back the response object 80 00:07:14,150 --> 00:07:22,240 and take the response object and send it to the next promise with as JSON data. 81 00:07:22,760 --> 00:07:28,580 And then lastly, we get the data that's being returned back and we're going to put that contents of 82 00:07:28,580 --> 00:07:29,810 the data into the console. 83 00:07:29,930 --> 00:07:31,520 So I hadn't included that. 84 00:07:31,520 --> 00:07:35,740 That's we're throwing an error there and it looks like I'm still getting an error. 85 00:07:35,780 --> 00:07:42,380 So that means that the syntax, the JSON syntaxes incorrect and that's the error response that we're 86 00:07:42,380 --> 00:07:42,770 getting. 87 00:07:43,240 --> 00:07:49,130 So let's double check and make sure that our syntax is correct so you can use that within a limiting 88 00:07:49,130 --> 00:07:49,900 application. 89 00:07:50,870 --> 00:07:57,440 So let's open up the Jason Lente and paste and that do a validate JSON. 90 00:07:57,740 --> 00:08:00,580 So it immediately caught the parsing error. 91 00:08:00,890 --> 00:08:04,580 So the problem was that it wasn't valid. 92 00:08:04,580 --> 00:08:05,330 Jason data. 93 00:08:05,330 --> 00:08:09,460 So I had left in that extra comma so that I can throw things off. 94 00:08:10,400 --> 00:08:18,110 So make the change, commit the change and now I've got a valid JSON object. 95 00:08:18,350 --> 00:08:20,530 And that's also another thing that you can do as well. 96 00:08:20,540 --> 00:08:26,540 Just make sure that when you do construct the JSON object that it is valid JSON and you can double check 97 00:08:26,540 --> 00:08:28,280 it with Jason Linta tool. 98 00:08:28,880 --> 00:08:30,920 So let's refresh and click it. 99 00:08:31,400 --> 00:08:37,060 And also, if we were to place the URL, we see that we do have that error here. 100 00:08:37,370 --> 00:08:45,400 So with get it does take a few minutes usually just to do a refresh and once it reloads the output data, 101 00:08:45,620 --> 00:08:51,650 so once you can see it within the Web browser, you should also be able to load it within. 102 00:08:51,650 --> 00:08:58,640 You write a Web application and then from here you can take the content that you've got on get and do 103 00:08:58,640 --> 00:08:59,390 something with it. 104 00:08:59,540 --> 00:09:02,630 So we'll create some quick loading of the content. 105 00:09:02,810 --> 00:09:12,380 So it's already within an array, the data array, so create a page and creating a function in order 106 00:09:12,380 --> 00:09:15,070 to handle the create page. 107 00:09:16,850 --> 00:09:24,470 So taking that data, Jason, data object and first thing we'll do is we'll output and in our HTML will 108 00:09:24,470 --> 00:09:27,320 clear out the existing page content with an output. 109 00:09:29,960 --> 00:09:38,050 And take data going through each item within data, and that's selecting each one of the elements, 110 00:09:38,330 --> 00:09:47,510 so the structure is body ID and title, so creating a main object and then we'll drop the rest of them 111 00:09:47,510 --> 00:09:48,380 into mean. 112 00:09:49,280 --> 00:09:53,830 So structure for adding the element is whatever the parent is. 113 00:09:53,840 --> 00:10:00,410 So use output, the type of element is going to be a div and the contents are just going to be blank 114 00:10:00,410 --> 00:10:02,740 for this one as this is our main parent. 115 00:10:02,750 --> 00:10:04,190 So that adds that to the page. 116 00:10:04,820 --> 00:10:07,400 Let's also add one for the title 117 00:10:10,070 --> 00:10:11,870 and using the same structure. 118 00:10:14,030 --> 00:10:24,470 We can add to the main object and adding in a div and selecting the content, and that's going to be 119 00:10:24,470 --> 00:10:25,520 contained within the data. 120 00:10:26,630 --> 00:10:28,720 So that's just data title. 121 00:10:29,330 --> 00:10:35,120 And if we're not using or applying any styling to the element, we can even shorten it by that. 122 00:10:35,120 --> 00:10:39,100 We don't need the callback element object, so we're not going to be making use of it. 123 00:10:39,500 --> 00:10:41,690 And this is just a simple demonstration. 124 00:10:42,320 --> 00:10:44,360 So we've got the body contents. 125 00:10:45,740 --> 00:10:55,340 And then also let's add one more element, and this can be whatever the ideas and Fermín itself using 126 00:10:55,340 --> 00:11:02,270 class list lets out of class and I'll just start a quick styling box to it. 127 00:11:03,700 --> 00:11:05,960 Let's create the box elements. 128 00:11:07,390 --> 00:11:12,640 And with us and also adding in a border. 129 00:11:18,410 --> 00:11:23,780 Margin, and so the margin for top and bottom can be 10 picks and auto. 130 00:11:26,010 --> 00:11:31,860 And also, let's add some padding and update the font size. 131 00:11:34,930 --> 00:11:35,470 So there we go. 132 00:11:35,500 --> 00:11:44,500 So let's click it and see what we get for output, and it's not actually passing over to create a page 133 00:11:45,340 --> 00:11:48,170 and actually there should be an element instead of data. 134 00:11:49,120 --> 00:11:52,880 So that was the problem there is using the wrong object value. 135 00:11:54,160 --> 00:11:55,750 So make an update to that. 136 00:11:55,870 --> 00:12:02,800 And this time it should work where we're outputting the content that's actually sitting within our GitHub 137 00:12:02,920 --> 00:12:04,270 data object. 138 00:12:04,960 --> 00:12:12,910 So it's a quick and easy way that you can create an endpoint with your own data and so can point so 139 00:12:12,910 --> 00:12:19,840 you can interact with it and you could find out more information about Jason. 140 00:12:22,490 --> 00:12:31,910 Type code, so you can do you can use get post, put patch, delete, the changes aren't persistent 141 00:12:31,910 --> 00:12:38,690 between calls, so it's just like what we saw last time where we can within the last lesson where we 142 00:12:38,690 --> 00:12:40,280 can make the requests. 143 00:12:40,580 --> 00:12:42,740 But they're not persistent between calls. 144 00:12:42,980 --> 00:12:46,310 So just keep that in mind that this is just a testing database. 145 00:12:46,610 --> 00:12:52,040 And the only one that's going to work is that get requests where you're actually making a request and 146 00:12:52,040 --> 00:12:55,720 getting the contents back from the JSON data. 147 00:12:56,390 --> 00:12:59,900 And I'll also update the input value. 148 00:13:02,620 --> 00:13:07,150 And I'll set that to display and just update the style. 149 00:13:09,690 --> 00:13:16,380 To display and will hide that input as we don't need to interact with them and also for the button, 150 00:13:17,340 --> 00:13:25,620 let's update the text content for the button and load GitHub. 151 00:13:27,000 --> 00:13:28,770 Jason, data. 152 00:13:32,010 --> 00:13:33,100 And see how that looks. 153 00:13:33,510 --> 00:13:41,490 So that gives us the ability to load the data to for this lesson or to create a report on GitHub and 154 00:13:41,490 --> 00:13:49,290 then add to that report, ADP, that on file create some custom JSON and add that into the deep Duchesse 155 00:13:49,290 --> 00:13:58,590 on file and then using JavaScript to connect to that end point on the my JSON server type code and select 156 00:13:58,590 --> 00:14:06,960 the content using JavaScript fetch, return it back as a JSON object, make some requests to the endpoint, 157 00:14:07,050 --> 00:14:13,920 return the data onto the web page and then output the contents of the data that's sitting on GitHub 158 00:14:14,130 --> 00:14:16,920 and output it within your web page elements.