1 00:00:00,680 --> 00:00:04,020 Unless video is started talking about the next application we're going to put together. 2 00:00:04,040 --> 00:00:08,390 So in this video we're going to continue along and start to look at a couple of different mockups to 3 00:00:08,390 --> 00:00:11,840 help you understand what it really is that we are making here. 4 00:00:11,840 --> 00:00:12,600 All right. 5 00:00:12,620 --> 00:00:15,550 So a couple of mockups that we're going to go through now right away. 6 00:00:15,560 --> 00:00:19,430 I want you to notice two very important things about all these mockups. 7 00:00:19,430 --> 00:00:25,190 First off you'll notice that there are a wide variety of different pages or screens that a user can 8 00:00:25,190 --> 00:00:31,130 visit inside of application or else that a user visits is going to determine what content they show 9 00:00:31,160 --> 00:00:32,470 on the screen. 10 00:00:32,480 --> 00:00:36,950 So depending upon that you are ill you and I are going to decide to show a different set of components 11 00:00:37,010 --> 00:00:38,240 to the user. 12 00:00:38,240 --> 00:00:41,950 This is entirely new and it's not something that we've done before inside this course. 13 00:00:42,080 --> 00:00:47,180 So we're going to figure out a lot about how to handle navigation inside of reactor application. 14 00:00:47,180 --> 00:00:52,400 The other thing that you'll notice inside of these mockups is that we've got this log out and log in 15 00:00:52,400 --> 00:00:53,930 buttons inside the header. 16 00:00:54,220 --> 00:00:58,460 So that is going to be an authentication system that we build into our application. 17 00:00:58,460 --> 00:01:04,860 We're going to implement a very real authentication system using Google logon OK. 18 00:01:04,860 --> 00:01:06,850 So those two important things to keep in mind. 19 00:01:06,960 --> 00:01:10,330 Let's now start taking a look at some of these different mockups. 20 00:01:10,380 --> 00:01:15,330 This first mock up right here is going to be the main landing page of our application when a user comes 21 00:01:15,330 --> 00:01:16,280 to our application. 22 00:01:16,320 --> 00:01:21,120 We're going to show them a list of all the different streams that exist inside of our app every stream 23 00:01:21,120 --> 00:01:22,960 is going to have a name or a title. 24 00:01:23,030 --> 00:01:27,330 And it's also going to have a description right underneath it when the user clicks on the stream right 25 00:01:27,330 --> 00:01:27,810 here. 26 00:01:27,840 --> 00:01:32,970 They will be taken to a detail page where we will show a video player that is going to display a video 27 00:01:33,000 --> 00:01:37,800 that is being streamed from the user who is currently streaming video. 28 00:01:37,850 --> 00:01:40,980 And the next thing I want you to understand before we take a look at some of these other mockups right 29 00:01:40,980 --> 00:01:46,380 here is that our application is going to be a little bit different from traditional streaming applications 30 00:01:46,440 --> 00:01:53,010 such as twitch and twitch when you sign up for an account you are given a single channel or a single 31 00:01:53,010 --> 00:01:58,120 streaming page and all the video that you stream is going to show up on that page. 32 00:01:58,290 --> 00:02:00,880 Our application is going to be just a little bit different. 33 00:02:00,900 --> 00:02:05,430 We are going to allow users who have signed into our application to create a channel or a streaming 34 00:02:05,430 --> 00:02:09,090 page and they can create as many of these as they want. 35 00:02:09,090 --> 00:02:15,230 The idea here is that a user might create one stream or one channel that is dedicated to maybe programming 36 00:02:15,600 --> 00:02:21,060 and then another stream that is dedicated to playing video games or another one that is dedicated to 37 00:02:21,060 --> 00:02:23,790 just general talking and having a good time. 38 00:02:24,090 --> 00:02:25,330 So just keep that in mind. 39 00:02:25,380 --> 00:02:29,160 A user is going to have the ability to create separate streams. 40 00:02:29,160 --> 00:02:33,630 Speaking of which when the user is signed into application there's going to be kind of a different set 41 00:02:33,630 --> 00:02:36,040 of rules that are going to apply to them. 42 00:02:36,060 --> 00:02:41,190 So when a user is not logged into our application they're only going to be able to see a list of all 43 00:02:41,190 --> 00:02:43,880 the different streams and channels that are available. 44 00:02:44,110 --> 00:02:49,110 Now just a quick note here when I say streams and channels that is an interchangeable term when I say 45 00:02:49,110 --> 00:02:53,430 stream channel on talking about the exact same thing I just put streaming channel all throughout this 46 00:02:53,430 --> 00:02:58,080 diagram right here because I'm going to use that those two terms interchangeably as we are working on 47 00:02:58,080 --> 00:02:59,240 this entire application. 48 00:03:00,400 --> 00:03:05,380 Now in addition to being able to view a list of all streams when the user is logged in they can also 49 00:03:05,380 --> 00:03:11,620 view video from a single stream once a user is logged in they're going to start to unlock an additional 50 00:03:11,620 --> 00:03:12,910 set of capabilities. 51 00:03:13,030 --> 00:03:18,490 So they're going to be able to have the capability to create a News Stream they can edit any stream 52 00:03:18,490 --> 00:03:23,570 that they have created and they can also delete any stream that they have created as well. 53 00:03:23,630 --> 00:03:23,880 OK. 54 00:03:23,890 --> 00:03:29,140 So with those additional capabilities in mind take a look at a couple more these different pages. 55 00:03:29,200 --> 00:03:34,240 So once a user is signed into our application the main landing page with all the different streams is 56 00:03:34,240 --> 00:03:36,060 going to change just a little bit. 57 00:03:36,680 --> 00:03:42,020 For this particular user who has signed in any stream that they have created is going to have some additional 58 00:03:42,020 --> 00:03:44,110 buttons showing you're on the right hand side. 59 00:03:44,300 --> 00:03:48,420 So if I created this stream I will see a button right here that says edit. 60 00:03:48,520 --> 00:03:53,120 And if I click on that if I click on that edit button it will take me to a page where I can edit the 61 00:03:53,120 --> 00:03:55,490 title and the description of that stream. 62 00:03:56,180 --> 00:04:01,460 If I click on the delete button for my Stream right here I'll be taken to a page that has kind of like 63 00:04:01,490 --> 00:04:06,560 a modal window of sorts that has a confirmed message that asked the user Hey are you sure you want to 64 00:04:06,560 --> 00:04:08,050 delete the stream. 65 00:04:08,210 --> 00:04:13,490 And then as we said just a moment ago if a user is logged in they also have the ability to create a 66 00:04:13,490 --> 00:04:14,620 stream as well. 67 00:04:14,630 --> 00:04:18,800 And so if I clicked on create a stream right here I would see a form like this they would ask me to 68 00:04:18,800 --> 00:04:22,860 enter a title and it's just description for the new stream that I'm trying to create. 69 00:04:23,270 --> 00:04:23,540 OK. 70 00:04:23,570 --> 00:04:24,410 So that's pretty much it. 71 00:04:24,410 --> 00:04:26,450 That is the application in total. 72 00:04:26,450 --> 00:04:31,370 So we're going to have the main landing page right here with a list of all the streams will have a page 73 00:04:31,370 --> 00:04:36,820 to show some content to the user will have the same landing page right here. 74 00:04:36,890 --> 00:04:41,360 That is going to have some slightly different content if the user is logged in and will have a form 75 00:04:41,360 --> 00:04:47,600 to create a stream a form to edit a stream any form to delete a stream as well. 76 00:04:47,600 --> 00:04:52,430 So essentially covers the entire spectrum of how a user might interact with records inside of a web 77 00:04:52,430 --> 00:04:53,420 application. 78 00:04:53,420 --> 00:04:59,180 They have the ability to list records look at a very individual particular record create a record edit 79 00:04:59,170 --> 00:05:01,480 a record and delete the record as well. 80 00:05:01,920 --> 00:05:03,980 OK so let's take a quick pause right here. 81 00:05:04,010 --> 00:05:07,730 When we connect the next section we're going to start to generate our application and then talk about 82 00:05:07,730 --> 00:05:09,760 some other high level items. 83 00:05:09,770 --> 00:05:10,950 I want you to be aware of. 84 00:05:11,000 --> 00:05:13,160 So quick pause and I'll see you in just a minute.