WEBVTT 1 00:00:00.000 --> 00:00:01.420 Cool, in this video, I'm just going 2 00:00:01.420 --> 00:00:03.980 to walk you through a template for Tribe 3 00:00:03.980 --> 00:00:06.780 that we use for in Flutter Flow. 4 00:00:06.780 --> 00:00:08.740 This is something our team's been building out. 5 00:00:08.740 --> 00:00:11.100 I'll just pick one of these examples, 6 00:00:11.100 --> 00:00:13.820 and we'll just walk through top to bottom all the pages 7 00:00:13.820 --> 00:00:16.620 and components that are included. 8 00:00:16.620 --> 00:00:20.740 And so let's just start with the user experience. 9 00:00:20.740 --> 00:00:25.260 We'll start with the sign-in experience. 10 00:00:25.260 --> 00:00:29.600 So first, users come in, they go through, 11 00:00:29.600 --> 00:00:32.159 and they put their email address in, and they hit Continue. 12 00:00:32.159 --> 00:00:34.440 We have some actions built out here 13 00:00:34.440 --> 00:00:37.080 that does a back-end call to the API 14 00:00:37.080 --> 00:00:39.700 and does a few different things to validate 15 00:00:39.700 --> 00:00:44.680 that this is either a new user or, so if it's a new user, 16 00:00:44.680 --> 00:00:47.660 it'll send them to the new user page where they says, 17 00:00:47.660 --> 00:00:49.360 hey, it looks like it's your first time. 18 00:00:49.360 --> 00:00:51.020 Let's create an account. 19 00:00:51.020 --> 00:00:53.840 If it's an existing user, then it's like, hey, 20 00:00:53.840 --> 00:00:56.100 welcome back, Bruce. 21 00:00:56.100 --> 00:00:57.520 It'll have the email address there 22 00:00:57.520 --> 00:01:00.960 and just drop in the password you want for that. 23 00:01:00.960 --> 00:01:08.680 And if you do have one where you are pre-registering users, 24 00:01:08.680 --> 00:01:14.640 for example, you are importing users from another database, 25 00:01:14.640 --> 00:01:16.800 you can have it set the user to pending, 26 00:01:16.800 --> 00:01:19.800 or they can basically not have a password. 27 00:01:19.800 --> 00:01:23.280 So when they put in their email address, it says, hey, 28 00:01:23.280 --> 00:01:26.960 we haven't actually created a password for you yet. 29 00:01:26.960 --> 00:01:28.900 Could you add a password and confirm password? 30 00:01:28.900 --> 00:01:30.920 So all this logic kind of takes care 31 00:01:30.920 --> 00:01:36.240 of every possible user that could come through this site. 32 00:01:36.240 --> 00:01:39.960 So once you're signed in, you get to see a home page. 33 00:01:39.960 --> 00:01:41.660 And this is very, very customizable 34 00:01:41.660 --> 00:01:43.560 to whatever you want. 35 00:01:43.560 --> 00:01:45.640 So this is the topic carousel. 36 00:01:45.640 --> 00:01:49.680 So you can use this, or you can also hide it very easily. 37 00:01:49.680 --> 00:01:53.280 So we can easily just hide it if you want. 38 00:01:53.280 --> 00:01:55.240 And then starting down here, we just 39 00:01:55.280 --> 00:01:57.520 list all the collections out. 40 00:01:57.520 --> 00:01:59.800 But this, if you kind of look at the tree 41 00:01:59.800 --> 00:02:02.640 here of all the different things going on here, 42 00:02:02.640 --> 00:02:05.060 you can definitely drag and drop and rearrange things. 43 00:02:05.060 --> 00:02:07.160 And we added a banner image here. 44 00:02:07.160 --> 00:02:09.840 And if you click on it, it goes to a particular piece 45 00:02:09.840 --> 00:02:11.520 of content. 46 00:02:11.520 --> 00:02:14.480 You can make this whatever you want. 47 00:02:14.480 --> 00:02:16.880 And I'll show you another example of a home page 48 00:02:16.880 --> 00:02:23.440 here on a different app, just so you can kind of see 49 00:02:23.440 --> 00:02:28.320 the difference here if we go to Home. 50 00:02:28.320 --> 00:02:29.320 Same kind of image. 51 00:02:29.320 --> 00:02:36.360 And then they have a very specific piece of collection 52 00:02:36.360 --> 00:02:40.000 here with a collection ID, and then a piece of text, 53 00:02:40.000 --> 00:02:41.560 and then they have another collection. 54 00:02:41.560 --> 00:02:44.640 And they have this very custom level 1, 2, 3, 4. 55 00:02:44.640 --> 00:02:47.440 So this doesn't really exist anywhere in Tribe, 56 00:02:47.440 --> 00:02:50.080 but we were able to add this kind of layout 57 00:02:50.080 --> 00:02:52.240 here in Flutter Flow and then link it 58 00:02:52.240 --> 00:02:53.680 to parts of Tribe manually. 59 00:02:53.680 --> 00:02:56.200 So these are things that aren't going to change that often. 60 00:02:56.200 --> 00:02:58.120 And so they had a very specific thing 61 00:02:58.120 --> 00:03:00.720 they wanted in that order. 62 00:03:00.720 --> 00:03:06.440 Jumping back to this example, that's the Home page. 63 00:03:06.440 --> 00:03:07.760 Obviously, if you click into that 64 00:03:07.760 --> 00:03:10.720 and you go and watch a piece of content, 65 00:03:10.720 --> 00:03:12.440 you'll kind of get the standard view here, 66 00:03:12.440 --> 00:03:14.680 where you can either have a video up here, 67 00:03:14.680 --> 00:03:19.200 or an embedded video, or an uploaded video. 68 00:03:19.200 --> 00:03:22.560 The title, there's a comment count, 69 00:03:22.560 --> 00:03:26.480 who the author is that posted this, description, all of that. 70 00:03:26.480 --> 00:03:28.800 And then you've got your comments happening down here. 71 00:03:28.800 --> 00:03:32.240 And then down here, we've got a leave a comment. 72 00:03:32.240 --> 00:03:33.760 So this kind of stays with you. 73 00:03:33.760 --> 00:03:35.640 You can see that the page kind of scrolls, 74 00:03:35.640 --> 00:03:37.960 and the video stays there, and the comments stay there. 75 00:03:37.960 --> 00:03:42.200 So it's a great commenting experience for users. 76 00:03:42.200 --> 00:03:48.760 So if we go back to the search option here. 77 00:03:48.760 --> 00:03:52.000 Let's go to Search. 78 00:03:55.520 --> 00:03:59.720 And so all these pages would be, obviously, included. 79 00:03:59.720 --> 00:04:04.400 And they should work kind of out of the box with your own API. 80 00:04:04.400 --> 00:04:06.640 So when you go to the Search, you can type in Search, 81 00:04:06.640 --> 00:04:08.680 and then all the results come in here. 82 00:04:08.680 --> 00:04:12.960 We typically have these little tabbed buttons 83 00:04:12.960 --> 00:04:13.960 down at the bottom here. 84 00:04:13.960 --> 00:04:17.519 So you can jump between all those. 85 00:04:17.519 --> 00:04:21.000 If you clicked on Groups, you would see all the groups there 86 00:04:21.000 --> 00:04:23.760 that are available, number of members. 87 00:04:23.760 --> 00:04:26.120 If you tapped into a specific group, 88 00:04:26.120 --> 00:04:30.480 you would actually see the group Home. 89 00:04:30.480 --> 00:04:32.080 And I believe there's a new one here. 90 00:04:32.080 --> 00:04:35.360 So we've got Info is just the info. 91 00:04:35.360 --> 00:04:37.840 When you first open it, it's going to have the Discussion 92 00:04:37.840 --> 00:04:38.560 tab here. 93 00:04:38.560 --> 00:04:42.360 So it's going to be your feed of all the engagement, 94 00:04:42.360 --> 00:04:44.120 if things are liked or comment counts. 95 00:04:44.120 --> 00:04:45.780 And if you tapped on this, it would just 96 00:04:46.780 --> 00:04:48.260 the content template. 97 00:04:48.260 --> 00:04:50.300 Members, you can actually see a list of everybody 98 00:04:50.300 --> 00:04:51.820 who's a member of this group. 99 00:04:51.820 --> 00:04:54.500 And in Content, you can actually open and close it. 100 00:04:54.500 --> 00:04:57.260 I'm going to go ahead and run this in here 101 00:04:57.260 --> 00:04:59.700 so you can actually kind of see what this looks like. 102 00:04:59.700 --> 00:05:01.700 It does take a little bit of time. 103 00:05:00.000 --> 00:05:02.960 take a few minutes for it to build the demo. 104 00:05:02.960 --> 00:05:05.360 But I wanted to show you a little bit more 105 00:05:05.360 --> 00:05:08.240 under the hood of what it looks like in Flutter Flow. 106 00:05:08.240 --> 00:05:14.080 Once it's built, obviously it doesn't say $.name. 107 00:05:14.080 --> 00:05:16.480 It's going to have the actual name of the collection 108 00:05:16.480 --> 00:05:19.480 and the content inside there. 109 00:05:19.480 --> 00:05:22.480 And so all this would be populated with real content, 110 00:05:22.480 --> 00:05:25.520 even in the little preview here. 111 00:05:25.520 --> 00:05:28.160 So that's the group page. 112 00:05:28.160 --> 00:05:29.920 You can also go in there and create a post. 113 00:05:29.920 --> 00:05:33.600 So someone could add their own post to that page. 114 00:05:33.600 --> 00:05:39.160 And there is also a lock screen. 115 00:05:39.160 --> 00:05:43.080 So let's say you had free users that 116 00:05:43.080 --> 00:05:47.080 needed to pay to get to a particular feature. 117 00:05:47.080 --> 00:05:51.640 Then let's say you locked the whole app 118 00:05:51.640 --> 00:05:55.760 so that you had to be a basic user or premium user. 119 00:05:55.760 --> 00:05:58.480 If the user is not, if they're just a free user, 120 00:05:58.480 --> 00:06:00.520 they can see a screen like this. 121 00:06:00.520 --> 00:06:02.600 And this is set up very specifically 122 00:06:02.600 --> 00:06:06.560 to work with Apple's payment requirements 123 00:06:06.560 --> 00:06:09.520 so that you don't have to charge any money. 124 00:06:09.520 --> 00:06:12.960 You cannot have a link here that takes someone out 125 00:06:12.960 --> 00:06:16.200 to go pay for the app, pay for a subscription or anything 126 00:06:16.200 --> 00:06:17.200 like that. 127 00:06:17.200 --> 00:06:20.320 All you can say right here is, hey, to view this, 128 00:06:20.320 --> 00:06:24.200 you have to be a premium member. 129 00:06:24.200 --> 00:06:24.800 And that's it. 130 00:06:24.800 --> 00:06:27.380 Or you can log out and try again. 131 00:06:27.380 --> 00:06:29.540 You can't have a call to action button 132 00:06:29.540 --> 00:06:34.700 that then leads people to go pay for something there. 133 00:06:34.700 --> 00:06:39.900 So topic view, same as the collection here, 134 00:06:39.900 --> 00:06:41.500 similar to what we have. 135 00:06:41.500 --> 00:06:43.740 The styling is a bit different once it builds. 136 00:06:43.740 --> 00:06:44.900 It looks like this is ready. 137 00:06:44.900 --> 00:06:48.900 So I'll just go ahead and show you a real demo. 138 00:06:48.900 --> 00:06:51.940 So we'll just sign out real quick. 139 00:06:51.940 --> 00:06:52.940 Sign in as me. 140 00:06:57.740 --> 00:06:58.220 Cool. 141 00:06:58.220 --> 00:07:00.860 So I have my topics up here. 142 00:07:00.860 --> 00:07:04.620 I'll give it a second just to load for the first time. 143 00:07:04.620 --> 00:07:07.820 And then if I tap into a particular video, 144 00:07:07.820 --> 00:07:10.580 that is a way you can watch that. 145 00:07:10.580 --> 00:07:14.660 If you go to the groups, you can check out all your groups here. 146 00:07:14.660 --> 00:07:16.780 I think my internet is just a bit slow for where 147 00:07:16.780 --> 00:07:19.580 I am right now, so these images are not loading super fast. 148 00:07:19.580 --> 00:07:23.260 But these are all being loaded through our storage 149 00:07:23.260 --> 00:07:25.460 decentralized hosting. 150 00:07:25.460 --> 00:07:27.900 So that's all working well. 151 00:07:27.900 --> 00:07:29.140 And then there's the search. 152 00:07:29.140 --> 00:07:31.460 And you kind of get to your account and sign back out. 153 00:07:31.460 --> 00:07:33.340 So that's just a very quick overview 154 00:07:33.340 --> 00:07:37.060 of the whole different template here. 155 00:07:37.060 --> 00:07:41.020 There's a number of things we'll do to set this up, 156 00:07:41.020 --> 00:07:44.820 setting up your particular domain, which platform. 157 00:07:44.820 --> 00:07:50.300 So you do have a one platform to one app relationship. 158 00:07:50.300 --> 00:07:53.220 You wouldn't have all the platforms 159 00:07:53.220 --> 00:07:56.820 on a particular node connected to one app. 160 00:07:56.820 --> 00:07:58.900 It's going to be kind of one platform to one app, 161 00:07:58.900 --> 00:08:01.460 if that makes sense. 162 00:08:01.460 --> 00:08:04.860 But you can definitely duplicate this template 163 00:08:04.860 --> 00:08:07.660 and use it for four or five apps if you wanted to. 164 00:08:07.660 --> 00:08:08.900 It's just up to you. 165 00:08:08.900 --> 00:08:12.380 All the API calls are going to be in here when you start. 166 00:08:12.380 --> 00:08:13.880 So all these are going to be set up. 167 00:08:13.880 --> 00:08:15.180 There's quite a few. 168 00:08:15.180 --> 00:08:19.620 And this is all referencing the developer.tribesocial.key 169 00:08:19.620 --> 00:08:20.380 mentation. 170 00:08:20.380 --> 00:08:22.020 And you can go check this out. 171 00:08:22.020 --> 00:08:25.060 So all these routes are built out here. 172 00:08:25.060 --> 00:08:27.060 And you can look them up and figure out 173 00:08:27.060 --> 00:08:30.460 how to use that REST API. 174 00:08:30.460 --> 00:08:33.299 We have just built all of this in for you. 175 00:08:33.299 --> 00:08:35.679 And it's already hooked up to all the different components 176 00:08:35.679 --> 00:08:36.179 here. 177 00:08:36.179 --> 00:08:39.500 So it makes it pretty easy to get going on it. 178 00:08:39.500 --> 00:08:41.480 There's some other custom functions 179 00:08:41.480 --> 00:08:44.820 that we've written specifically for a tribe app 180 00:08:44.820 --> 00:08:47.820 that you'll need, so things like checking if the user is free. 181 00:08:47.820 --> 00:08:49.780 Is the user pending? 182 00:08:49.780 --> 00:08:52.020 There's different instances where 183 00:08:52.020 --> 00:08:53.980 we need some very custom functions. 184 00:08:53.980 --> 00:08:56.140 So that's what all that does. 185 00:08:56.140 --> 00:08:59.820 Custom widgets, that is something 186 00:08:59.820 --> 00:09:02.140 we don't actually use a lot of those right now. 187 00:09:02.140 --> 00:09:04.780 But we maybe have some of those coming in the future. 188 00:09:04.780 --> 00:09:09.260 And then just a few custom actions here that get used. 189 00:09:09.260 --> 00:09:12.660 So that is a little overview. 190 00:09:12.660 --> 00:09:18.020 Very easy to use Flutter flow as far as building apps 191 00:09:18.020 --> 00:09:19.100 is very complicated. 192 00:09:19.100 --> 00:09:21.380 This is probably one of the easier things. 193 00:09:21.380 --> 00:09:23.700 There's 100% a learning curve. 194 00:09:23.700 --> 00:09:27.780 So you're just going to have to figure out 195 00:09:27.780 --> 00:09:30.140 how to get up to speed on it. 196 00:09:30.140 --> 00:09:31.940 But there's a lot of great tutorials. 197 00:09:31.940 --> 00:09:34.740 The cool thing is when it is all set up and running, 198 00:09:34.740 --> 00:09:37.500 you can literally hit a button here to deploy this to App 199 00:09:37.500 --> 00:09:38.180 Store. 200 00:09:38.180 --> 00:09:40.100 Takes a bit of setting up between the App Store 201 00:09:40.100 --> 00:09:40.800 and Flutter flow. 202 00:09:40.800 --> 00:09:43.700 But once it's working, you can one click, 203 00:09:43.700 --> 00:09:45.500 just take everything that's in Flutter flow 204 00:09:45.500 --> 00:09:48.100 and just send it over to Apple or send it over 205 00:09:48.100 --> 00:09:49.180 to the Google Play Store. 206 00:09:49.180 --> 00:09:50.740 So very, very cool. 207 00:09:50.740 --> 00:09:54.380 I love their workflow, how they have thought this through. 208 00:09:54.380 --> 00:09:56.700 So once it's up and running, it's very easy to maintain, 209 00:09:56.700 --> 00:09:59.260 I guess is where I'm going with that. 210 00:09:59.260 --> 00:10:01.380 There's a lot of other. 211 00:10:00.000 --> 00:10:02.160 integrations here for GitHub. 212 00:10:02.160 --> 00:10:07.860 For example, you can actually push all your code directly to, uh, to GitHub. 213 00:10:07.880 --> 00:10:12.160 And so you can have an access to the source code if you want to make further 214 00:10:12.160 --> 00:10:13.800 changes that you can't do in Flutter flow. 215 00:10:13.800 --> 00:10:15.480 So it's just a great tool. 216 00:10:15.480 --> 00:10:19.400 If, if Flutter flow says, Hey, in 30 days, we're can't like closing all of our, 217 00:10:19.560 --> 00:10:22.480 you know, servers and all of our apps going away, you could essentially 218 00:10:22.480 --> 00:10:26.360 export all of that source code and kind of hire a Flutter developer 219 00:10:26.360 --> 00:10:27.320 and keep going with it. 220 00:10:27.320 --> 00:10:30.480 It's, it's very well protected as far as that goes. 221 00:10:30.480 --> 00:10:32.360 We, we don't like centralized solutions. 222 00:10:32.360 --> 00:10:35.400 So this is one thing that does, um, protect it. 223 00:10:35.400 --> 00:10:38.400 Cause you do own your code, you own your app, um, at all 224 00:10:38.400 --> 00:10:40.160 times through this, this option. 225 00:10:40.160 --> 00:10:43.960 I do want to just point this out that they do have, um, web coming soon. 226 00:10:43.960 --> 00:10:48.640 So you can technically replace your current tribe website if you wanted 227 00:10:48.640 --> 00:10:50.280 to, with a Flutter flow app. 228 00:10:50.680 --> 00:10:55.560 Um, the only thing with this is that they don't allow custom domains right 229 00:10:55.560 --> 00:11:00.480 now, as of September 12th, when I'm recording this, uh, they will be doing 230 00:11:00.480 --> 00:11:05.040 that I'm sure very soon, and then you can actually host this, um, wherever 231 00:11:05.040 --> 00:11:06.640 you want with your own domain. 232 00:11:07.040 --> 00:11:09.200 Uh, so that, that's going to be kind of a game changer as well. 233 00:11:09.200 --> 00:11:13.400 And they've got some other things that they're working on at the moment. 234 00:11:13.720 --> 00:11:17.920 Um, that's everything I wanted to share. 235 00:11:17.920 --> 00:11:22.920 I think, you know, I don't want to walk through all the features of Flutter flow 236 00:11:22.920 --> 00:11:26.040 in this, but I just want to show you kind of why we picked this architecture 237 00:11:26.520 --> 00:11:30.880 because yes, you can have all these different routes and things connecting 238 00:11:30.880 --> 00:11:38.040 to, uh, to tribe, but you could very easily do another route here, add your 239 00:11:38.040 --> 00:11:42.920 own route to a completely different app, uh, service, and then just, you 240 00:11:42.920 --> 00:11:46.920 know, bring in different data right alongside on the same page as 241 00:11:46.920 --> 00:11:48.240 something that's serving tribe. 242 00:11:48.240 --> 00:11:53.640 So if you're viewing content, but you wanted a very specific quiz tool, or 243 00:11:53.640 --> 00:11:57.600 you had a form or something you wanted embedded, you can embed that even 244 00:11:57.600 --> 00:12:01.960 though it doesn't exist anywhere in the tribe database, it can still exist in 245 00:12:01.960 --> 00:12:03.680 the app, so the user experience is great. 246 00:12:03.680 --> 00:12:06.840 Cause you can kind of combine from different sources, uh, in here. 247 00:12:06.840 --> 00:12:10.760 So it's very, very flexible as far as making a very custom feeling 248 00:12:10.760 --> 00:12:12.440 app for your organization. 249 00:12:12.680 --> 00:12:16.560 It's not a tribe app that we're like skinning just to make it 250 00:12:16.560 --> 00:12:17.640 look like your organization. 251 00:12:17.960 --> 00:12:19.080 It really is your app. 252 00:12:19.120 --> 00:12:22.800 You just happen to be pulling all your data from tribe into it, and you can 253 00:12:22.800 --> 00:12:24.000 use this for whatever you want. 254 00:12:24.000 --> 00:12:24.880 So pretty cool. 255 00:12:25.240 --> 00:12:30.280 Uh, the other thing it does because Flutter is a Google based language. 256 00:12:30.280 --> 00:12:31.680 I'll just point this out as well. 257 00:12:31.920 --> 00:12:35.040 You can do a direct integration with, um, Firebase. 258 00:12:35.040 --> 00:12:37.640 So it's like a cloud database as well. 259 00:12:37.640 --> 00:12:43.880 So if there are things that you need to store or you want to take votes or you 260 00:12:43.880 --> 00:12:47.840 want to take, you know, something from, you know, some information from someone 261 00:12:47.840 --> 00:12:51.000 and there's not a place to store anywhere on tribe, you can actually 262 00:12:51.000 --> 00:12:53.160 just start storing things on Firebase. 263 00:12:53.360 --> 00:12:56.440 So again, this would be very specific to your app, but I just wanted to 264 00:12:56.440 --> 00:12:57.600 show you that kind of flexibility. 265 00:12:57.600 --> 00:13:01.720 You don't actually have to wait for the tribe source code to create 266 00:13:01.720 --> 00:13:03.720 new places to put information. 267 00:13:03.720 --> 00:13:07.120 You can actually just use something like Firebase to store whatever 268 00:13:07.120 --> 00:13:09.160 you want alongside that data. 269 00:13:09.200 --> 00:13:13.840 So again, a lot of different ways to, uh, to make this work. 270 00:13:13.840 --> 00:13:17.960 So if you have any questions, you can definitely reach out, uh, and we can 271 00:13:17.960 --> 00:13:21.480 certainly, um, walk through this on, on a zoom call and maybe discuss what 272 00:13:21.480 --> 00:13:24.920 the implementation looks like for your particular organization. 273 00:13:24.920 --> 00:13:26.040 So let me know if you have any questions. 274 00:13:26.040 --> 00:13:26.440 Thanks.