1 00:00:00,740 --> 00:00:03,810 At this point our stream form is just about complete. 2 00:00:03,860 --> 00:00:08,000 We've got the necessary fields of title and description and we are doing some validation around the 3 00:00:08,000 --> 00:00:09,630 inputs that the user enters in. 4 00:00:09,860 --> 00:00:15,260 So now we need to think about what we're going to do when a user finally successfully submits the form. 5 00:00:15,260 --> 00:00:17,040 So we've got the on Smick callback right here. 6 00:00:17,060 --> 00:00:21,290 But the question is all right we've got the form values how do we actually create a stream. 7 00:00:21,290 --> 00:00:26,880 So in this video I want to focus a little bit more on the high level architecture of our overall project. 8 00:00:27,040 --> 00:00:30,090 OK so you've taken a look at this diagram right here before remember. 9 00:00:30,110 --> 00:00:34,640 The idea here is that we've got our application running inside the viewers browser. 10 00:00:34,640 --> 00:00:39,440 We're going to have this API server over here that tells the browser what streams exist inside of our 11 00:00:39,440 --> 00:00:40,280 application. 12 00:00:40,460 --> 00:00:45,560 And then at some point in time the user's browser is going to reach out to this RCMP server thing and 13 00:00:45,620 --> 00:00:49,810 attempt to get some video feed from someone who is currently streaming video. 14 00:00:50,180 --> 00:00:55,370 So the real question here around this entire application around what we're doing with the form submission 15 00:00:55,400 --> 00:01:02,150 is really how do we communicate from our re-act application up to this API server and tell the API server 16 00:01:02,150 --> 00:01:05,470 that there is now a new stream that is available for viewing. 17 00:01:05,660 --> 00:01:06,820 So we're really trying to do. 18 00:01:06,920 --> 00:01:12,350 We're trying to take the title and description and put it up to this API server so that other users 19 00:01:12,350 --> 00:01:15,510 can fetch a list of all the different available streams. 20 00:01:15,980 --> 00:01:20,160 Now to give you a better idea of what this API server is doing let's check out one other diagram here. 21 00:01:21,830 --> 00:01:26,980 All right so are our API server is essentially going to have a plain list of records. 22 00:01:27,170 --> 00:01:33,560 Each record is going to represent one individual stream and each stream is going to have in ID a title 23 00:01:33,560 --> 00:01:35,700 of the stream and a description. 24 00:01:36,140 --> 00:01:41,270 So we're going to take the list of streams right from the API server and send them down to our re-act 25 00:01:41,270 --> 00:01:43,820 application and show them on the screen. 26 00:01:43,820 --> 00:01:50,060 Then whenever a user selects say stream 2 we're going to make sure that our re-act application reaches 27 00:01:50,060 --> 00:01:55,940 out to the RCMP server and says Hey I'm trying to see a stream with the idea of two. 28 00:01:55,970 --> 00:02:01,820 And so the RCMP server is going to take whatever stream with I.T. to come in and stream that video over 29 00:02:01,820 --> 00:02:03,790 to our re-act application. 30 00:02:03,800 --> 00:02:07,250 Now again we don't really need to worry too much about the streaming side of things here. 31 00:02:07,250 --> 00:02:10,720 Don't let the streaming stuff throw you off at all at the end of the day. 32 00:02:10,720 --> 00:02:17,660 All we are really doing is trying to take that title and description and post those records via a network 33 00:02:17,660 --> 00:02:18,180 request. 34 00:02:18,200 --> 00:02:20,450 Up to this API server. 35 00:02:20,580 --> 00:02:22,420 So now the question really turns into. 36 00:02:22,470 --> 00:02:22,920 All right. 37 00:02:22,920 --> 00:02:23,670 Yeah we get it. 38 00:02:23,670 --> 00:02:28,950 We're going to take the title in description from our form and try to create some new record on that 39 00:02:28,980 --> 00:02:29,960 API server. 40 00:02:30,150 --> 00:02:32,960 But what exactly is the API server. 41 00:02:32,970 --> 00:02:37,470 Well to be honest the API server is going to be extremely easy for us to put together. 42 00:02:37,470 --> 00:02:40,920 Let's take a quick pause right here and when we come back next section I'll tell you exactly how we're 43 00:02:40,920 --> 00:02:45,790 going to put the server together and show you exactly how easy and simple it's going to be.