WEBVTT 1 00:00:00.000 --> 00:00:06.240 So yeah, I just wanted to give kind of like an overview, 2 00:00:06.240 --> 00:00:11.280 like Flutter flow, but also how we're using it. 3 00:00:11.280 --> 00:00:16.120 And so when you come in here, we have a team account. 4 00:00:16.120 --> 00:00:19.280 So I'll make sure you have access to the team. 5 00:00:19.280 --> 00:00:23.520 And what will happen is we have to share each project with you. 6 00:00:23.520 --> 00:00:27.520 So each app that we build for our clients 7 00:00:27.520 --> 00:00:29.880 is its own project. 8 00:00:29.880 --> 00:00:33.880 And this is kind of what we need the most help with, 9 00:00:33.880 --> 00:00:37.800 is that let's say this was the very first one we did, 10 00:00:37.800 --> 00:00:39.240 Brilliant TV. 11 00:00:39.240 --> 00:00:43.640 And so that is the very first version of building it. 12 00:00:43.640 --> 00:00:46.320 We built 100x, which was more improved. 13 00:00:46.320 --> 00:00:48.480 And then we've done these other ones. 14 00:00:48.480 --> 00:00:54.760 And the Wisdom app is kind of like our best version yet. 15 00:00:54.760 --> 00:00:59.000 And so all the upgrades are in Wisdom app. 16 00:00:59.000 --> 00:01:00.840 But for example, not all the upgrades 17 00:01:00.840 --> 00:01:04.120 have been moved down into Brilliant TV. 18 00:01:04.120 --> 00:01:05.920 A lot of the work is like, that's 19 00:01:05.920 --> 00:01:08.640 what we're going to do today, is that all the authentication 20 00:01:08.640 --> 00:01:11.520 stuff that's over in Raising Royalty is outdated. 21 00:01:11.520 --> 00:01:12.840 Not outdated. 22 00:01:12.840 --> 00:01:16.600 It's just we came up with a much smarter way to do it. 23 00:01:16.600 --> 00:01:19.920 And so I'll bring up this as well, 24 00:01:19.920 --> 00:01:24.880 because I think we have, let's see here. 25 00:01:24.880 --> 00:01:28.080 This is just Mux, Firebase token. 26 00:01:28.160 --> 00:01:33.000 And so you can see here the way that we've set this up 27 00:01:33.000 --> 00:01:36.280 to do an actual token here. 28 00:01:36.280 --> 00:01:38.560 This is something new that Lucien added. 29 00:01:38.560 --> 00:01:41.880 So we have, when someone logs in, 30 00:01:41.880 --> 00:01:44.480 they actually get a Firebase token. 31 00:01:44.480 --> 00:01:49.320 And then that is then stored over in Firebase. 32 00:01:49.320 --> 00:01:52.040 And then it can access it a lot more. 33 00:01:52.040 --> 00:01:55.920 It's a lot more stable that way. 34 00:01:55.920 --> 00:02:01.000 And what I'll do here is I'll just open this. 35 00:02:01.000 --> 00:02:05.800 And then you have to actually go type this in. 36 00:02:05.800 --> 00:02:09.479 It's not really a fan of having multiple windows open, 37 00:02:09.479 --> 00:02:11.400 but we'll still do it. 38 00:02:11.400 --> 00:02:15.400 Now, the cool thing is you can copy and paste components 39 00:02:15.400 --> 00:02:16.280 across. 40 00:02:16.280 --> 00:02:18.960 So I'll just kind of show you. 41 00:02:18.960 --> 00:02:22.560 This is sort of the view that I spend most of my time in. 42 00:02:22.600 --> 00:02:30.240 So I've got sort of the pages over here. 43 00:02:30.240 --> 00:02:33.400 And then underneath here is the breakdown of how 44 00:02:33.400 --> 00:02:35.080 that page is put together. 45 00:02:35.080 --> 00:02:38.640 So we'll start with this entry page. 46 00:02:38.640 --> 00:02:44.360 We've got a logo, a little container here. 47 00:02:44.360 --> 00:02:46.320 And then if you saw, oh, container, 48 00:02:46.320 --> 00:02:48.960 if I hover over here and I kind of scroll down, 49 00:02:48.960 --> 00:02:50.760 see how it kind of highlights it? 50 00:02:51.120 --> 00:02:55.640 So you can always kind of see, OK, there's the container. 51 00:02:55.640 --> 00:02:59.240 It's got in here we've got a bit of text, which 52 00:02:59.240 --> 00:03:01.280 is just static text. 53 00:03:01.280 --> 00:03:04.200 Then we've got this email input field. 54 00:03:04.200 --> 00:03:07.240 And then we have a button that says log in. 55 00:03:07.240 --> 00:03:09.600 So that's going to execute something. 56 00:03:09.600 --> 00:03:11.600 And here we've got another button that 57 00:03:11.600 --> 00:03:13.560 says join without an account. 58 00:03:13.560 --> 00:03:17.560 So that's the whole sort of structure. 59 00:03:17.560 --> 00:03:22.680 If I were to hit Command-X, delete that or undo that, 60 00:03:22.680 --> 00:03:26.760 I can pull that whole container out or rearrange it 61 00:03:26.760 --> 00:03:27.520 on the page. 62 00:03:27.520 --> 00:03:29.520 It's very drag and drop. 63 00:03:29.520 --> 00:03:31.040 So if I wanted this, for example, 64 00:03:31.040 --> 00:03:34.480 to be at the top of the page, I can drag that up and down. 65 00:03:34.480 --> 00:03:37.560 It just sorts it here. 66 00:03:37.560 --> 00:03:41.160 And again, you kind of know, even from Tailwind, 67 00:03:41.160 --> 00:03:42.400 how this is structured. 68 00:03:42.400 --> 00:03:44.560 Basically, this is a column. 69 00:03:44.800 --> 00:03:50.160 And it's using Flexbox to organize this. 70 00:03:50.160 --> 00:03:55.160 Yeah, so you could kind of use the start from a flex. 71 00:03:55.160 --> 00:03:58.920 And then or you can have it all to the left or to the right 72 00:03:58.920 --> 00:04:01.280 or centered. 73 00:04:01.280 --> 00:04:05.400 So that's just sort of how the page is put together. 74 00:04:05.400 --> 00:04:08.000 And what's nice is they give you sort of the, 75 00:04:08.000 --> 00:04:10.400 you can jump between pages on this top part. 76 00:04:10.400 --> 00:04:13.480 And then you can jump between the details on that page, 77 00:04:13.480 --> 00:04:15.920 kind of on the bottom part. 78 00:04:15.920 --> 00:04:19.120 It used to not be quite as easy as this. 79 00:04:19.120 --> 00:04:21.920 But this is a nice way to get it. 80 00:04:21.920 --> 00:04:24.880 Now, there's a lot of pages in here. 81 00:04:24.880 --> 00:04:27.680 So I'll kind of go through them. 82 00:04:27.680 --> 00:04:29.440 How do you link two pages? 83 00:04:29.440 --> 00:04:30.640 Just wondering. 84 00:04:30.640 --> 00:04:34.600 Yeah, so like, OK, so let's just keep going on this page. 85 00:04:34.600 --> 00:04:35.800 So we've got our container. 86 00:04:35.800 --> 00:04:36.400 Let's just see. 87 00:04:36.400 --> 00:04:39.880 So that's the sort of like, I would say, the UI component. 88 00:04:39.880 --> 00:04:42.040 It's like, here's how the is an image. 89 00:04:42.040 --> 00:04:43.080 There's a stuff. 90 00:04:43.080 --> 00:04:46.360 If I want to change the text, I can just come in here. 91 00:04:46.360 --> 00:04:48.680 OK, so let's talk about logic. 92 00:04:48.680 --> 00:04:53.000 So you typically attach it to a button, right? 93 00:04:53.000 --> 00:04:54.560 So the button is going to fire. 94 00:04:54.560 --> 00:04:57.040 And it's going to tell it to do something. 95 00:04:57.040 --> 00:04:59.920 So we're going to go over to the actions here. 96 00:05:00.000 --> 00:05:05.000 And so anything, like I can click on this 97 00:05:05.360 --> 00:05:08.400 and go to actions and have it do something like, 98 00:05:08.400 --> 00:05:10.720 hey, on, if I hit open here, 99 00:05:10.720 --> 00:05:11.640 it opens up a little editor, 100 00:05:11.640 --> 00:05:16.280 like on tap of that image, like perform some action. 101 00:05:16.280 --> 00:05:18.600 You can even have it like on double tap do something, 102 00:05:18.600 --> 00:05:20.640 on long press do something. 103 00:05:20.640 --> 00:05:22.080 And that's just on that image. 104 00:05:22.080 --> 00:05:24.640 So same way it applies if we want to do it to a button, 105 00:05:24.640 --> 00:05:25.640 I click open. 106 00:05:26.760 --> 00:05:29.500 And so it's very visual. 107 00:05:30.500 --> 00:05:33.020 It's kind of like a mind map of like logic, 108 00:05:33.020 --> 00:05:37.340 but you can visually see the logic displayed. 109 00:05:37.340 --> 00:05:41.660 So like talking through this, 110 00:05:41.660 --> 00:05:43.260 basically we'll just start at the top here. 111 00:05:43.260 --> 00:05:44.100 It says on tap. 112 00:05:44.100 --> 00:05:45.780 So when you tap the button, what does it do? 113 00:05:45.780 --> 00:05:48.540 It checks, first it checks the conditional 114 00:05:48.540 --> 00:05:51.100 and we can click on this and it can say, okay, 115 00:05:51.100 --> 00:05:53.020 is login email address. 116 00:05:53.020 --> 00:05:56.380 So is that field set and not empty? 117 00:05:56.380 --> 00:05:58.820 So basically did someone, did they even put something in? 118 00:05:58.940 --> 00:06:01.980 So I jumped back, like this, is this empty? 119 00:06:01.980 --> 00:06:03.300 And they just hit find my account. 120 00:06:03.300 --> 00:06:05.780 Like we need to throw some error or something, 121 00:06:05.780 --> 00:06:08.420 be like, hey, you didn't put your email address in. 122 00:06:08.420 --> 00:06:10.020 You know, that's all that does. 123 00:06:10.020 --> 00:06:14.380 And if it does, if it's set and not empty, 124 00:06:14.380 --> 00:06:17.100 then it's true and it goes down one path. 125 00:06:17.100 --> 00:06:19.580 If it's false, we're going to do something else. 126 00:06:19.580 --> 00:06:22.020 And here we have a little thing called a snack bar, 127 00:06:22.020 --> 00:06:24.460 which just is a little pop-up that says, you know, 128 00:06:24.460 --> 00:06:26.300 please enter an email address. 129 00:06:27.260 --> 00:06:28.420 And you can, you know, 130 00:06:28.420 --> 00:06:30.100 everything else down here is just styling. 131 00:06:30.100 --> 00:06:32.460 Like you want the background color to be red. 132 00:06:32.460 --> 00:06:34.300 We want the text to be white. 133 00:06:34.300 --> 00:06:36.220 You know, this is what we want it to say. 134 00:06:36.220 --> 00:06:38.300 And then it's going to be up for four seconds, 135 00:06:38.300 --> 00:06:40.620 four milliseconds, 4,000 milliseconds. 136 00:06:40.620 --> 00:06:43.540 And then it's going to just hide by itself. 137 00:06:43.540 --> 00:06:47.540 So that's like just that little logic there 138 00:06:49.060 --> 00:06:53.060 to basically validate that it's even filled in. 139 00:06:53.340 --> 00:06:57.820 And then we go down like API calls. 140 00:06:57.820 --> 00:07:00.380 So I'll show you how we set that up here. 141 00:07:00.380 --> 00:07:02.180 This is actually on a different page. 142 00:07:02.180 --> 00:07:04.340 And let's say, so let's say it's going to validate the user. 143 00:07:04.340 --> 00:07:06.700 So now we can actually go back here 144 00:07:07.700 --> 00:07:12.700 and we should have a valid user validation by email. 145 00:07:16.180 --> 00:07:19.700 So slash user dash validation. 146 00:07:19.700 --> 00:07:21.140 That's all we're doing right here. 147 00:07:21.140 --> 00:07:24.300 We're basically calling this validate user idea. 148 00:07:24.300 --> 00:07:28.660 If I click on it, you can see here it's, you know, 149 00:07:28.660 --> 00:07:31.660 the base URLs, whatever that is, it's a variable. 150 00:07:31.660 --> 00:07:34.300 And then we have auth slash user validation. 151 00:07:34.300 --> 00:07:35.660 And I can just cross-check this 152 00:07:35.660 --> 00:07:38.500 against my tribe documentation. 153 00:07:39.460 --> 00:07:42.660 And so that sort of show you like how it's connecting 154 00:07:42.660 --> 00:07:44.860 into the existing platform. 155 00:07:44.860 --> 00:07:48.180 Then we can see here, like, it's going to be a get method 156 00:07:48.180 --> 00:07:49.780 and we're going to give it past the email 157 00:07:49.780 --> 00:07:52.420 and we need to pass the platform ID 158 00:07:52.420 --> 00:07:54.620 and there's no authentication needed. 159 00:07:54.620 --> 00:07:56.820 And then we should get something back like this. 160 00:07:56.820 --> 00:07:58.460 Like here's the platform. 161 00:07:58.460 --> 00:08:00.060 Here's the person's email. 162 00:08:00.980 --> 00:08:03.220 You know, is there a Firebase set? 163 00:08:03.220 --> 00:08:04.460 Is the password set? 164 00:08:04.460 --> 00:08:05.460 All that good stuff. 165 00:08:06.820 --> 00:08:10.060 And I can see here in the query, there's my email. 166 00:08:10.060 --> 00:08:11.900 There's my platform ID. 167 00:08:11.900 --> 00:08:16.900 And I'm passing these three variables into the call. 168 00:08:17.900 --> 00:08:20.220 So I can create variables like this 169 00:08:20.220 --> 00:08:22.540 and then pass them into the call. 170 00:08:22.540 --> 00:08:26.020 Very similar to like, if you had a react component 171 00:08:26.020 --> 00:08:29.300 or like a function and you were passing variables down, 172 00:08:29.300 --> 00:08:32.940 you know, into that component, same kind of idea. 173 00:08:32.940 --> 00:08:37.220 You can like pass three or four variables into the API call 174 00:08:37.220 --> 00:08:42.220 and then it'll send it as part of the query here parameters. 175 00:08:43.659 --> 00:08:45.980 So you can, and you can test this right here. 176 00:08:46.420 --> 00:08:50.220 I can just do that and I can hit test API call. 177 00:08:50.220 --> 00:08:51.060 And there you go. 178 00:08:51.060 --> 00:08:54.100 So now it came back with a 200 and I can see the URL. 179 00:08:54.100 --> 00:08:55.660 See, it built this whole thing out. 180 00:08:55.660 --> 00:08:59.100 Slash all, question mark, email equals Bruce. 181 00:08:59.100 --> 00:09:00.820 Platform is three. 182 00:09:00.820 --> 00:09:03.060 And the response comes back like this. 183 00:09:03.060 --> 00:09:06.620 So I get my user ID, my name 184 00:09:06.620 --> 00:09:09.220 and all those different things come back to me. 185 00:09:09.220 --> 00:09:13.580 So back on this thing, that's what this call does 186 00:09:13.620 --> 00:09:16.420 is it says like, okay, I'm passing the email 187 00:09:16.420 --> 00:09:21.420 and the email is the, like the input field, 188 00:09:21.420 --> 00:09:23.180 the thing the person just put in. 189 00:09:24.620 --> 00:09:28.460 You can actually grab it from the state of that widget state. 190 00:09:28.460 --> 00:09:31.260 And so I would go in here, you can choose widget states 191 00:09:31.260 --> 00:09:34.340 and there's only one here called login email address. 192 00:09:35.220 --> 00:09:38.260 And then you can even have default. 193 00:09:38.260 --> 00:09:39.260 We don't really use that. 194 00:09:39.260 --> 00:09:40.860 I can confirm. 195 00:09:40.860 --> 00:09:44.060 And then base URL, we actually have a local state 196 00:09:44.060 --> 00:09:45.500 where we can set the base URL 197 00:09:45.500 --> 00:09:48.500 for all API calls in one place. 198 00:09:48.500 --> 00:09:50.860 And this is very helpful when I wanna duplicate 199 00:09:50.860 --> 00:09:54.340 this whole thing and paste it into another project 200 00:09:54.340 --> 00:09:56.700 because it's gonna use whatever that client's 201 00:09:56.700 --> 00:09:58.740 new base URL is. 202 00:09:58.740 --> 00:10:00.100 So we don't hard code. 203 00:10:00.000 --> 00:10:03.080 each of these calls, we leave like a base URL, 204 00:10:03.080 --> 00:10:08.080 which is exactly how like it works right in a regular API. 205 00:10:09.440 --> 00:10:12.000 But that's something where like, 206 00:10:12.000 --> 00:10:13.880 we've kind of built it a little bit smarter 207 00:10:13.880 --> 00:10:15.960 because we're like, hey, we have to copy this, 208 00:10:15.960 --> 00:10:17.560 we have to copy this whole page 209 00:10:17.560 --> 00:10:19.280 and paste it into someone else's project 210 00:10:19.280 --> 00:10:20.560 and it still should work. 211 00:10:21.600 --> 00:10:23.920 And so the same thing happens here. 212 00:10:23.920 --> 00:10:27.160 Platform ID is set by a local state platform ID. 213 00:10:27.160 --> 00:10:30.680 So, and those are set here. 214 00:10:30.680 --> 00:10:35.680 So just, if I give you the quick tour here on the left, 215 00:10:36.880 --> 00:10:38.880 this is like Firebase database 216 00:10:38.880 --> 00:10:42.440 and then you have your local states here. 217 00:10:42.440 --> 00:10:46.320 So these are all, so if I search here for like base URL, 218 00:10:46.320 --> 00:10:51.320 you can see here it's HTTPS app.wisdom.ly. 219 00:10:52.280 --> 00:10:54.800 And if I looked for platform ID, 220 00:10:54.800 --> 00:10:56.720 I can see platform ID as an integer 221 00:10:56.720 --> 00:10:58.320 and it's set to three. 222 00:10:58.320 --> 00:11:01.080 And this is where you would actually change this. 223 00:11:01.080 --> 00:11:04.640 You could just change it to four or five right in here. 224 00:11:04.640 --> 00:11:07.160 And that would update the whole app 225 00:11:07.160 --> 00:11:09.360 in this little variable app area. 226 00:11:10.400 --> 00:11:13.600 So it's called local state. 227 00:11:13.600 --> 00:11:15.800 Luchan, that drives Luchan crazy 228 00:11:15.800 --> 00:11:17.760 because it's supposed to be called local storage 229 00:11:17.760 --> 00:11:19.640 is what it should be called. 230 00:11:19.640 --> 00:11:22.280 But basically it's the default when you load the app, 231 00:11:23.280 --> 00:11:25.240 but it stores it in local storage. 232 00:11:25.280 --> 00:11:28.120 So, cool. 233 00:11:30.480 --> 00:11:31.760 And then going down here, 234 00:11:31.760 --> 00:11:33.880 like this right here was the local states. 235 00:11:33.880 --> 00:11:34.960 And if I go down to the next one, 236 00:11:34.960 --> 00:11:37.120 it's all of your API calls. 237 00:11:37.120 --> 00:11:39.440 So all those calls get saved 238 00:11:39.440 --> 00:11:42.440 and all of them are pretty much set up here. 239 00:11:45.680 --> 00:11:49.120 And then we've got things like media. 240 00:11:49.120 --> 00:11:50.960 So if you do wanna upload a logo or something, 241 00:11:50.960 --> 00:11:55.080 you can host it as part of the app, 242 00:11:55.080 --> 00:11:56.040 the actual application. 243 00:11:56.040 --> 00:11:57.240 So when the user downloads it, 244 00:11:57.240 --> 00:11:58.960 the image, for example, 245 00:11:58.960 --> 00:12:02.760 is already part of the app package. 246 00:12:02.760 --> 00:12:05.040 Then we don't have to like call that externally. 247 00:12:05.040 --> 00:12:07.000 So we generally don't use that, 248 00:12:07.000 --> 00:12:09.960 but for some logos and stuff, we bring that in. 249 00:12:11.320 --> 00:12:13.480 They also have like a bunch of custom functions. 250 00:12:13.480 --> 00:12:15.400 And so these are things that we've been writing 251 00:12:15.400 --> 00:12:17.200 over the last four or five months 252 00:12:17.200 --> 00:12:19.400 when we need different things. 253 00:12:19.560 --> 00:12:21.680 Some of them are really, really simple. 254 00:12:21.680 --> 00:12:24.520 Is the content type video? 255 00:12:24.520 --> 00:12:27.560 And then it's just like, hey, is it mux? 256 00:12:27.560 --> 00:12:28.400 Then show true. 257 00:12:28.400 --> 00:12:29.240 Is it Vimeo? 258 00:12:29.240 --> 00:12:30.080 So true. 259 00:12:30.080 --> 00:12:32.040 Is it got an MP4? 260 00:12:32.040 --> 00:12:33.600 Then say true. 261 00:12:33.600 --> 00:12:34.840 Is it contained YouTube? 262 00:12:34.840 --> 00:12:36.120 Is this a video or not? 263 00:12:36.120 --> 00:12:38.720 And then all the other alternatives, 264 00:12:40.720 --> 00:12:41.720 it basically checks that. 265 00:12:41.720 --> 00:12:43.640 So this is a little function. 266 00:12:43.640 --> 00:12:46.360 We pass in a parameter called 267 00:12:46.520 --> 00:12:50.440 whatever content type or whatever. 268 00:12:50.440 --> 00:12:54.840 And that just, we pass these arguments in 269 00:12:54.840 --> 00:12:55.720 and then it figures out. 270 00:12:55.720 --> 00:12:58.520 Now this is all written in Flutter, 271 00:12:58.520 --> 00:13:00.560 but you can kind of understand it. 272 00:13:00.560 --> 00:13:03.960 It's very similar to JavaScript in some ways. 273 00:13:03.960 --> 00:13:05.640 Yeah, I can definitely see, yeah. 274 00:13:06.560 --> 00:13:08.120 Yeah, so if you have to come and change it 275 00:13:08.120 --> 00:13:10.000 or add like a new option here, 276 00:13:10.000 --> 00:13:11.480 it wouldn't be too difficult. 277 00:13:11.480 --> 00:13:12.320 No, no. 278 00:13:12.320 --> 00:13:13.720 You have to duplicate this line. 279 00:13:13.720 --> 00:13:15.960 This one looks pretty simple. 280 00:13:16.480 --> 00:13:18.760 Yeah, so it's a lot of very small functions. 281 00:13:18.760 --> 00:13:21.080 Like a lot of them are very small. 282 00:13:21.080 --> 00:13:22.320 Is this restream? 283 00:13:22.320 --> 00:13:24.960 Like it's just straight like, 284 00:13:24.960 --> 00:13:26.520 is false this restream true? 285 00:13:26.520 --> 00:13:27.360 Cool. 286 00:13:28.520 --> 00:13:29.760 So some of them like, 287 00:13:30.640 --> 00:13:32.360 there's some that are like a little more elaborate 288 00:13:32.360 --> 00:13:36.760 about like image replacement paths and things like that. 289 00:13:38.400 --> 00:13:40.560 But, and I can see this is actually wrong. 290 00:13:41.480 --> 00:13:42.680 Okay. 291 00:13:42.680 --> 00:13:44.320 Yeah, it's the wrong URL there. 292 00:13:44.320 --> 00:13:45.400 But some of these are not, 293 00:13:45.720 --> 00:13:46.560 not all of them are being used. 294 00:13:46.560 --> 00:13:50.240 Some of them are just in here, so. 295 00:13:50.240 --> 00:13:52.840 Can you use the function for like every project? 296 00:13:52.840 --> 00:13:54.960 Or that's just for wisdom, like? 297 00:13:54.960 --> 00:13:56.760 This is, yeah, so that's the fun part 298 00:13:56.760 --> 00:13:59.560 is this is just for the wisdom app project. 299 00:13:59.560 --> 00:14:02.880 Oh, the 400, no, oh yeah, 43, sorry. 300 00:14:02.880 --> 00:14:04.440 Okay. 301 00:14:04.440 --> 00:14:06.920 Yeah, so you'd have to like copy this 302 00:14:06.920 --> 00:14:08.240 and then move it. 303 00:14:08.240 --> 00:14:09.880 If you wanted to move a function, 304 00:14:09.880 --> 00:14:11.560 you'd have to copy and paste it. 305 00:14:12.160 --> 00:14:14.840 And I think eventually they're gonna have 306 00:14:14.840 --> 00:14:18.560 like shared component libraries is what I hear. 307 00:14:18.560 --> 00:14:22.240 So that, yes, you could have like a library 308 00:14:22.240 --> 00:14:24.680 of components for our company, 309 00:14:24.680 --> 00:14:27.800 of which we could like import them to five projects. 310 00:14:27.800 --> 00:14:31.160 And if we update it on one, it like updates it everywhere. 311 00:14:31.160 --> 00:14:33.000 No, that'd be pretty cool, yeah. 312 00:14:33.000 --> 00:14:36.240 Yeah, and same for, so there's functions 313 00:14:36.240 --> 00:14:37.960 and then there's components as well. 314 00:14:38.080 --> 00:14:40.480 Functions, and then there's components as well. 315 00:14:40.480 --> 00:14:45.480 So little things like a little pop-up, right, 316 00:14:47.520 --> 00:14:49.160 that someone fills out. 317 00:14:50.400 --> 00:14:52.400 Let me see if there's a better one here. 318 00:14:54.960 --> 00:14:57.760 So here's a little component that when we want 319 00:14:57.760 --> 00:15:00.040 to edit a post. 320 00:15:00.000 --> 00:15:02.600 It pops up and it says, hey, do you want to unpin this? 321 00:15:02.600 --> 00:15:04.640 Do you want to report the content? 322 00:15:04.640 --> 00:15:06.360 Do you want to delete this post? 323 00:15:06.360 --> 00:15:07.720 And so this is a little component 324 00:15:07.720 --> 00:15:11.880 which would be amazing if we could save this to a library 325 00:15:11.880 --> 00:15:13.640 because every project will need this. 326 00:15:13.640 --> 00:15:15.760 But what we do now is we go in here 327 00:15:15.760 --> 00:15:19.160 and you can copy the whole component 328 00:15:19.160 --> 00:15:22.200 and you can just jump to a new tab and hit paste. 329 00:15:22.200 --> 00:15:23.760 And so it's not too bad. 330 00:15:23.760 --> 00:15:25.600 Yeah, it's not too bad. 331 00:15:25.600 --> 00:15:27.680 Yeah, it's not ideal. 332 00:15:27.680 --> 00:15:30.560 Yeah, especially if you need to change something, 333 00:15:30.560 --> 00:15:36.360 like you need to modify one of the components. 334 00:15:36.360 --> 00:15:36.880 Exactly. 335 00:15:36.880 --> 00:15:38.120 You need to modify them all. 336 00:15:42.600 --> 00:15:46.760 So let's come back to this thing. 337 00:15:46.760 --> 00:15:49.480 Let's keep going along that thought. 338 00:15:49.480 --> 00:15:51.520 So we open this up. 339 00:15:51.520 --> 00:15:54.520 So this essentially is the call. 340 00:15:54.520 --> 00:15:56.600 And then I was just showing you the local states 341 00:15:56.600 --> 00:15:59.240 and how that actually gets in there. 342 00:15:59.240 --> 00:16:03.440 And then we call the action, the response here, 343 00:16:03.440 --> 00:16:07.960 we call it validateUserCall because on the next one, 344 00:16:07.960 --> 00:16:11.040 we're going to say, hey, did this call succeed? 345 00:16:11.040 --> 00:16:14.680 Was the API response a success? 346 00:16:14.680 --> 00:16:17.600 Because then we can catch it and say, OK, cool. 347 00:16:17.600 --> 00:16:18.640 So it was a success. 348 00:16:18.640 --> 00:16:20.600 Now move to the next thing. 349 00:16:20.600 --> 00:16:23.040 And so we want to, in this one, say, hey, 350 00:16:23.040 --> 00:16:26.160 is the password set true? 351 00:16:26.160 --> 00:16:30.520 And so the way you can do this is you can actually connect it 352 00:16:30.520 --> 00:16:33.320 to, and I'll just delete this and start it again. 353 00:16:33.320 --> 00:16:36.640 So I can actually say output actions. 354 00:16:36.640 --> 00:16:38.480 And then there's my validateUserCall. 355 00:16:38.480 --> 00:16:42.440 So I can say, I want to check the response from this. 356 00:16:42.440 --> 00:16:44.720 And I want to actually get something 357 00:16:44.720 --> 00:16:46.920 from the body that came back. 358 00:16:46.920 --> 00:16:49.800 And then here I can choose a JSON path. 359 00:16:49.800 --> 00:16:53.080 And then under name, you can customize this 360 00:16:53.080 --> 00:16:55.520 with a JSON path selector. 361 00:16:55.520 --> 00:16:57.200 Or we have these ones saved. 362 00:16:57.200 --> 00:16:59.000 So I can just say, is password set? 363 00:16:59.000 --> 00:17:00.280 Hit Confirm. 364 00:17:00.280 --> 00:17:03.040 And so that way, if it's true, it's going to do one thing. 365 00:17:03.040 --> 00:17:05.119 If it's false, if it comes back false, 366 00:17:05.119 --> 00:17:08.319 then it will do something else. 367 00:17:08.319 --> 00:17:11.160 And so if it's true, so that logic is like, OK, 368 00:17:11.160 --> 00:17:12.160 they put the email in. 369 00:17:12.160 --> 00:17:13.079 It went true. 370 00:17:13.079 --> 00:17:14.079 They got this back. 371 00:17:14.079 --> 00:17:15.560 It was a success. 372 00:17:15.560 --> 00:17:17.359 Their password is set. 373 00:17:17.359 --> 00:17:24.040 And then we have an action that is navigate to some other page. 374 00:17:24.040 --> 00:17:25.880 So you can say, navigate to, and you 375 00:17:25.880 --> 00:17:32.000 can pick which page you want to get to from here. 376 00:17:32.000 --> 00:17:32.920 Yep. 377 00:17:32.920 --> 00:17:35.160 That's very cool. 378 00:17:35.160 --> 00:17:37.040 And then in addition to that, you 379 00:17:37.040 --> 00:17:38.880 can kind of go another step further. 380 00:17:38.880 --> 00:17:43.520 You can actually pass parameters into the next page. 381 00:17:43.520 --> 00:17:47.600 So there's kind of local state, local storage stuff. 382 00:17:47.600 --> 00:17:54.280 Or I can have a page parameter. 383 00:17:54.280 --> 00:17:57.840 So I can pass into the page, I could pass the email address 384 00:17:57.840 --> 00:18:00.560 so that when that person gets to the next page, 385 00:18:00.560 --> 00:18:02.640 they don't have to put their email address again. 386 00:18:02.640 --> 00:18:04.000 We just checked it. 387 00:18:04.000 --> 00:18:05.800 We already know they have their email. 388 00:18:05.800 --> 00:18:09.120 Let's pass it back to them so it's prefilled for them. 389 00:18:09.120 --> 00:18:13.840 And then we also know their name because in the response, part 390 00:18:13.840 --> 00:18:17.920 of that call was to get the name back. 391 00:18:17.920 --> 00:18:19.760 So we know that the person's name is Bruce. 392 00:18:19.760 --> 00:18:22.800 So just to make it a little nicer, we say, hey, 393 00:18:22.800 --> 00:18:25.440 welcome back, user name. 394 00:18:25.440 --> 00:18:27.360 And then that's how we're doing it is we 395 00:18:27.360 --> 00:18:30.320 pass to this page, returning user. 396 00:18:30.320 --> 00:18:32.400 And you can see it says here, welcome back. 397 00:18:32.400 --> 00:18:36.880 And then it's got the name there. 398 00:18:36.880 --> 00:18:41.280 Yeah, and you can see this is just a very simple tool 399 00:18:41.280 --> 00:18:42.480 called combined text. 400 00:18:42.560 --> 00:18:46.320 So we can say text block one is this with a space at the end, 401 00:18:46.320 --> 00:18:48.560 name, and then an exclamation mark. 402 00:18:48.560 --> 00:18:50.560 So we have three little pieces. 403 00:18:50.560 --> 00:18:51.840 We're combining that text. 404 00:18:51.840 --> 00:18:56.560 So it's like static text, variable, static text. 405 00:18:56.560 --> 00:19:00.320 And you can kind of rearrange these, which is very easy. 406 00:19:00.320 --> 00:19:02.640 Yeah, just drag and drop, yeah. 407 00:19:02.640 --> 00:19:08.080 Yeah, and then here, we're saying 408 00:19:08.080 --> 00:19:11.760 we actually disable it from editing at this point 409 00:19:11.760 --> 00:19:13.360 because we don't want them to. 410 00:19:13.360 --> 00:19:14.640 We've already validated this. 411 00:19:15.280 --> 00:19:16.640 So we have an input field here. 412 00:19:16.640 --> 00:19:18.240 And I just blocked it. 413 00:19:18.240 --> 00:19:20.400 So they can't actually edit it here. 414 00:19:21.040 --> 00:19:25.360 And then we also want the initial value 415 00:19:25.360 --> 00:19:27.440 to be the page parameter. 416 00:19:27.440 --> 00:19:28.320 So I click on this. 417 00:19:28.320 --> 00:19:30.720 You can see there's a parameter here for email. 418 00:19:30.720 --> 00:19:32.720 And if I click off of everything, 419 00:19:32.720 --> 00:19:37.200 or I just click to the very top of the libraries, 420 00:19:37.200 --> 00:19:39.520 you go to the very topmost component here, 421 00:19:40.240 --> 00:19:41.680 you see there's page parameters. 422 00:19:42.640 --> 00:19:44.720 And I can choose these. 423 00:19:44.720 --> 00:19:46.960 I have a string called email. 424 00:19:46.960 --> 00:19:49.760 And I have a name there as well. 425 00:19:49.760 --> 00:19:51.600 And I can just easily add another one 426 00:19:51.600 --> 00:19:54.960 if I wanted an image path, or a document, 427 00:19:54.960 --> 00:19:56.320 or all kinds of stuff. 428 00:19:58.800 --> 00:19:59.840 And then you just want to remove. 429 00:20:00.000 --> 00:20:07.840 that. So that's where like some of this we're going to I'm going to do some of this here 430 00:20:07.840 --> 00:20:12.000 in a second and we'll kind of get into more of a project of this. I'll consider this sort 431 00:20:12.000 --> 00:20:19.880 of like chapter one of like where stuff is. And so let's say it like goes through that 432 00:20:19.880 --> 00:20:25.200 process. Let's say we go to returning user. We click sign in. So let's just open this 433 00:20:25.200 --> 00:20:31.720 up and this actually gets much more simple now because we're going to use the back end 434 00:20:31.720 --> 00:20:37.440 call called sign in. So just jump in back over here. User sign in. It should be slash 435 00:20:37.440 --> 00:20:42.200 off slash sign in and we're doing a post here with email password and platform ID. And we 436 00:20:42.200 --> 00:20:50.080 can see here like email password base URL of course and then platform ID is all coming 437 00:20:50.080 --> 00:20:58.160 into that. So those are all the parameters we need. Yes. And then we have that response 438 00:20:58.160 --> 00:21:03.800 says sign in response. And then again we have a little succeed and this one says hey you 439 00:21:03.800 --> 00:21:10.680 know please check your email if something went wrong or if it worked we want to go ahead 440 00:21:10.680 --> 00:21:18.920 and log in. And the way we do the login is we actually use this JWT token. And this is 441 00:21:18.920 --> 00:21:26.680 something new that Luchin actually added here and you can see custom JWT token down 442 00:21:26.680 --> 00:21:34.000 here. So if a platform is connected to Firebase we also contain this custom JWT property. 443 00:21:34.000 --> 00:21:40.840 So it's a token that basically says hey you're logged in and keep all your information. So 444 00:21:40.840 --> 00:21:47.960 we don't have to. The authentication is essentially happening on Firebase but it's it's the 445 00:21:48.320 --> 00:21:56.040 permission to use the page is coming from the tribe. And then we have like a user collection 446 00:21:56.040 --> 00:22:00.640 here where we we actually create that user on the Firebase side as well. So we store 447 00:22:00.640 --> 00:22:07.120 their name their email we store their tribe token all that good stuff gets stored. And 448 00:22:07.120 --> 00:22:13.320 then on this once it's logged in you can see it just sort of ends. And then well how does 449 00:22:13.320 --> 00:22:21.000 the user get to the next screen. Well this is where you actually have something here 450 00:22:21.000 --> 00:22:28.080 for authentication. So when someone's at an initial page there's this redirect page and 451 00:22:28.080 --> 00:22:33.760 then when someone's logged in it automatically immediately redirects you to this page called 452 00:22:33.760 --> 00:22:42.280 logged in redirect. And so once I'm authenticated the app Flutter by itself is going to take 453 00:22:42.280 --> 00:22:46.880 you into the logged in page. You don't have to tell it to go anywhere. It's going to say 454 00:22:46.880 --> 00:22:51.120 oh this user is logged in. I need to get this person to the first page where we set this 455 00:22:51.120 --> 00:22:56.480 over here. And this is where we get a little sophisticated. And this is a definitely more 456 00:22:56.480 --> 00:23:02.600 of an advanced part of Flutter flow is we now have this little page which is just a 457 00:23:02.600 --> 00:23:09.160 loader little thing spins and it says accessing wisdom you know dot dot dot which is just 458 00:23:09.160 --> 00:23:14.840 kind of a placeholder. And what we're doing on this page is we have something at the very 459 00:23:14.840 --> 00:23:21.920 top. So before I triggered an action based on a tap but this you can actually trigger 460 00:23:21.920 --> 00:23:27.240 actions based on page load. So when someone arrives here I'm going to go over here and 461 00:23:27.240 --> 00:23:33.440 you can see there's actually 12 actions happening on this page. Well what this is is think of 462 00:23:33.440 --> 00:23:38.160 this like air traffic control right. Like this is the all the in and out of the switchboard 463 00:23:38.160 --> 00:23:43.160 of like we send everybody here. And this page basically checks a bunch of stuff to 464 00:23:43.160 --> 00:23:50.280 see like first off is the user logged in. If they're logged in true then move to the 465 00:23:50.280 --> 00:23:57.280 next thing. If they're if their tribe token is set in the database great moves the next 466 00:23:57.280 --> 00:24:01.640 thing like check their status to make sure their account still exists you know and that 467 00:24:01.640 --> 00:24:08.720 the token is that is valid. Has their user ID even set true or false. You know it builds 468 00:24:08.720 --> 00:24:15.440 this out. Then it says like OK if so like go get the list of groups and store that into a 469 00:24:15.440 --> 00:24:21.960 local state. So we store the user's groups and then we and then we navigate them into 470 00:24:21.960 --> 00:24:27.520 the group. So we actually grab this and by the time they load the next page which would be 471 00:24:27.520 --> 00:24:33.880 this one here the list of all their groups. And so while we're doing this let me go ahead 472 00:24:33.880 --> 00:24:39.640 and it's going to hit run up here and that will actually fire up the app and we can play 473 00:24:39.640 --> 00:24:45.680 with it in a test mode there on the browser. So you can actually see some of this working 474 00:24:45.680 --> 00:24:53.760 a little bit but it takes about two to four minutes here to load this one. And I'll also 475 00:24:53.760 --> 00:24:59.960 show you like there's two modes so there's like a run mode and then there's a test mode so. 476 00:25:00.000 --> 00:25:10.000 The run mode is you build it and it basically creates a build of the app and then it gives you a URL and you can use that link forever to keep testing it. 477 00:25:10.000 --> 00:25:29.000 The test mode is really smart. This is actually, if I was working on this page, I would use the test mode and it does a quick like three minute build and then every time you make a change, you just go to the test mode and hit rebuild and it takes maybe like 15 seconds and then it's updated. 478 00:25:30.000 --> 00:25:32.000 That's smart. 479 00:25:32.000 --> 00:25:36.000 Yeah, so that's like the way you'd want to like go back and forth and test it. 480 00:25:36.000 --> 00:25:40.000 So I'll let this build on another tab while we do this. 481 00:25:40.000 --> 00:25:43.000 So this dumps you then into the group list. 482 00:25:43.000 --> 00:25:55.000 So what happens is when someone leaves the app, you know, goes away for a day or two, and then they tap back into the app, the Flutter flow authentication flows this way. 483 00:25:55.000 --> 00:26:00.000 It goes, it already knows, like, are they logged in or are they not? 484 00:26:00.000 --> 00:26:05.000 So it sends them immediately to the logged in page, which is the redirect. 485 00:26:05.000 --> 00:26:16.000 So then we go to kind of this switchboard of a page, which basically says, like, where is this, like, how set up is this user? 486 00:26:16.000 --> 00:26:23.000 And if so, like, essentially what we're doing here is we basically log them out if something's not set and we ask them to log back in. 487 00:26:24.000 --> 00:26:30.000 If something fails, we run through a little process of updating users or things like that. 488 00:26:30.000 --> 00:26:38.000 And some of this may be redundant, you know, now, but you can see it's just on page load, run all these things. 489 00:26:38.000 --> 00:26:44.000 And so this is built and I'm not going to rebuild this today, but I am going to move this into a new project. 490 00:26:44.000 --> 00:26:48.000 So that's probably what we'll spend most of our time doing. 491 00:26:49.000 --> 00:26:50.000 Okay. 492 00:26:50.000 --> 00:26:54.000 Yes, that gives you a little bit of a sense of, like, just the authentication. 493 00:26:54.000 --> 00:27:03.000 And honestly, in many ways, that's probably the most complicated part is just getting to that authentication piece. 494 00:27:03.000 --> 00:27:06.000 So is there any questions on that so far? 495 00:27:06.000 --> 00:27:07.000 Not too many. 496 00:27:07.000 --> 00:27:11.000 This is like quite a lot, actually. 497 00:27:11.000 --> 00:27:14.000 But I am really impressed, actually. 498 00:27:14.000 --> 00:27:16.000 There's so many possibilities. 499 00:27:16.000 --> 00:27:17.000 Yeah. 500 00:27:17.000 --> 00:27:22.000 So we'll have to, like, play around to get more familiar, for sure. 501 00:27:22.000 --> 00:27:23.000 Sure. 502 00:27:23.000 --> 00:27:24.000 Cool. 503 00:27:24.000 --> 00:27:25.000 I'm going to... 504 00:27:25.000 --> 00:27:26.000 Let me...