1 00:00:00,690 --> 00:00:07,050 In the last lesson, we used JSON file that we created locally in order to get the data for our quiz 2 00:00:07,050 --> 00:00:12,600 project, so we're going to make some updates to it and use a Google sheet, output the sheet content 3 00:00:12,780 --> 00:00:16,350 as JSON, and then pick that up from our Web application. 4 00:00:16,380 --> 00:00:20,770 If you do have a Google account, you can log into your Google account, go over to the drive, create 5 00:00:20,820 --> 00:00:21,710 a new sheet. 6 00:00:22,050 --> 00:00:25,110 So within the drive option, just create a brand new sheet. 7 00:00:28,160 --> 00:00:35,660 And we're going to use this sheet as our quiz data, so we need to have headers so we'll have the questions 8 00:00:36,140 --> 00:00:43,670 or this can just be a single question and have the correct answer and then just the options. 9 00:00:45,410 --> 00:00:51,680 So it will iterate through all of the options we can have, option number one, and possibility of up 10 00:00:51,680 --> 00:00:53,450 to six different options. 11 00:00:54,080 --> 00:01:00,320 So this is our basic structure that we're going to use for the sheet content and let's populate some 12 00:01:00,320 --> 00:01:01,430 content into there. 13 00:01:01,430 --> 00:01:10,670 So using the same questions that we had within our other and the correct answer was blue and then within 14 00:01:10,670 --> 00:01:13,900 the options will have some different color values. 15 00:01:17,950 --> 00:01:24,460 And then purple and the ones that we can just leave some blank as as we're iterating through and we're 16 00:01:24,460 --> 00:01:31,170 building the JavaScript object from the sheet data, then we can account for the blank areas. 17 00:01:31,780 --> 00:01:34,150 So it's out in the other two questions. 18 00:01:37,700 --> 00:01:46,910 And the correct answer, and I'll just use these values, save a little bit of time there, and of course, 19 00:01:47,360 --> 00:01:53,950 you can just change these options to whatever color or whatever options that you want. 20 00:01:56,150 --> 00:01:58,970 So the correct one is going to be yellow. 21 00:01:59,150 --> 00:02:01,900 And let's update red to be green. 22 00:02:03,200 --> 00:02:05,060 And also let's add in. 23 00:02:07,650 --> 00:02:13,530 Another option in this one, so that they don't all have the exact same options, so we can have an 24 00:02:13,530 --> 00:02:16,960 account for more of that dynamic capability of the sheet data. 25 00:02:17,430 --> 00:02:24,240 So now that we've got the sheet object, we want to share the sheet data and be able to pick up the 26 00:02:24,480 --> 00:02:25,580 sheet information. 27 00:02:26,370 --> 00:02:33,920 So this is can be done by using the file for the top menu and then publishing to the web. 28 00:02:34,410 --> 00:02:42,330 So you have an option to create a link of the entire document or just the sheet and you can set it up 29 00:02:42,330 --> 00:02:44,280 and you can create it as a Web page. 30 00:02:44,850 --> 00:02:46,740 So hit the public option. 31 00:02:46,930 --> 00:02:49,670 And then there's also some published content and settings. 32 00:02:50,010 --> 00:02:57,360 So once you publish it, it provides you a Web, you URL and you can use that Web you URL to see the 33 00:02:57,360 --> 00:02:58,170 sheet data. 34 00:02:58,350 --> 00:03:06,780 So this isn't within the JSON format, so we need to select the sheet ID and every Google sheet is going 35 00:03:06,780 --> 00:03:07,800 to have a unique ID. 36 00:03:07,980 --> 00:03:10,780 The easiest way to grab it is from the Web you URL. 37 00:03:11,010 --> 00:03:13,630 So in this case, mine is one H2. 38 00:03:13,860 --> 00:03:21,570 So it's just up here in the top when you do the slash and edit all of those characters in, there are 39 00:03:21,570 --> 00:03:23,000 going to be the sheet ID. 40 00:03:23,460 --> 00:03:31,590 So going back into the JavaScript application and let's go ahead and we'll create up six. 41 00:03:33,960 --> 00:03:40,140 And create a brand new file, calling it up six and then this is where we can track the connection to 42 00:03:40,140 --> 00:03:42,840 the sheet data that Jason sheet data. 43 00:03:46,640 --> 00:03:54,980 So save us up six us and let's add in the variables, so that's tracking the sheet objects I just copied 44 00:03:54,980 --> 00:04:01,010 and pasted whatever the current sheet object was, I'll make this a little bit smaller so it's easier 45 00:04:01,010 --> 00:04:02,210 to to read and see. 46 00:04:05,630 --> 00:04:12,680 And there is a specific you, Earl, that you can use to output it as JSON, so I'm going to copy and 47 00:04:12,680 --> 00:04:14,810 paste it and this is rather long. 48 00:04:14,810 --> 00:04:18,080 So the URL will be. 49 00:04:21,930 --> 00:04:29,700 HTP spreadsheets, Google dot com feeds list, and then this is where we use the ID one, which indicates 50 00:04:29,700 --> 00:04:38,270 the first sheet public values alt Jason and all we can do is we can console log out the euro. 51 00:04:39,090 --> 00:04:43,080 So going into the Web application, there's our You URL. 52 00:04:43,260 --> 00:04:46,500 So if you click that you get this JSON object. 53 00:04:46,510 --> 00:04:50,240 So this is going to be the final you URL that we're outputting to. 54 00:04:50,520 --> 00:04:52,690 So again, very long web URL. 55 00:04:53,160 --> 00:04:59,760 So basically hsp esport its colon colon forward slash slash spreadsheets, dot Google dot com forward 56 00:04:59,760 --> 00:05:01,950 slash feeds, forward slash list. 57 00:05:02,220 --> 00:05:05,540 That's where we got the idee and we're dynamically updating it. 58 00:05:05,760 --> 00:05:09,660 So in case we do change sheets we can easily change the sheet contents. 59 00:05:10,230 --> 00:05:16,980 We've got the one public values alt JSON, so that puts out all of the sheet content with an adjacent 60 00:05:16,980 --> 00:05:17,430 format. 61 00:05:17,640 --> 00:05:20,400 So you can see some of the questions there. 62 00:05:20,640 --> 00:05:23,340 The options, some of the options are blank. 63 00:05:23,670 --> 00:05:29,430 So when we construct our JavaScript object and we want to make it the same as what we were using in 64 00:05:29,430 --> 00:05:34,470 the previous lesson, so we can really easily bring that in instead of using the JSON object. 65 00:05:34,860 --> 00:05:36,240 So that's what we're going to do next. 66 00:05:36,240 --> 00:05:43,530 We're going to make Futch request to this JSON object and then start creating and constructing the JavaScript 67 00:05:43,530 --> 00:05:49,650 object that we need for our application to run all using JavaScript and coming from the Google sheet 68 00:05:49,650 --> 00:05:51,660 data live from the Google sheet data. 69 00:05:51,670 --> 00:05:55,410 So let's close off some of these tabs. 70 00:05:57,300 --> 00:05:58,400 And so now it's up to you. 71 00:05:58,410 --> 00:05:58,880 Go ahead. 72 00:05:58,890 --> 00:06:00,570 Create your own sheet. 73 00:06:02,340 --> 00:06:09,780 And share your sheet feed as a Jason and then just log out the URL and you can click the URL from the 74 00:06:09,780 --> 00:06:17,820 console to make sure that you do have a JSON feed of your sheet data and you should see something similar 75 00:06:17,820 --> 00:06:18,560 to what I see. 76 00:06:19,860 --> 00:06:25,830 The task for this lesson is to create a Google sheet, populate some data into the Google sheet. 77 00:06:26,070 --> 00:06:33,060 Then once you've added in some data, go to file, publish to the web sheet and select publish, hit 78 00:06:33,060 --> 00:06:36,630 the publish button and that will publish the document to the Web. 79 00:06:36,790 --> 00:06:41,910 You can check it out and make sure that it is published to the Web with the you are all that's within 80 00:06:41,910 --> 00:06:49,320 the published the Web popup window and then go back into the sheet, select the ID from the Web URL 81 00:06:49,560 --> 00:06:54,630 and you're going to see that you've got a unique idea at the top of it when you've got your sheet open. 82 00:06:54,930 --> 00:06:58,920 So copy that ID and then also copy the URL. 83 00:06:58,920 --> 00:07:06,150 The spreadsheet start Google dot com forward slash feeds, forge lists with the value and output it 84 00:07:06,150 --> 00:07:13,200 as JSON double check that you can see the JSON object within your web browser and you're going to be 85 00:07:13,200 --> 00:07:20,550 ready to move on to the next lesson where we're going to make and connect to that JSON data and then 86 00:07:21,270 --> 00:07:25,210 construct our JavaScript object to use within the quiz application. 87 00:07:25,410 --> 00:07:27,120 So that's all still coming up next.