Cool, in this video, I'm just going
to walk you through a template for Tribe
that we use for in Flutter Flow.
This is something our team's been building out.
I'll just pick one of these examples,
and we'll just walk through top to bottom all the pages
and components that are included.
And so let's just start with the user experience.
We'll start with the sign-in experience.
So first, users come in, they go through,
and they put their email address in, and they hit Continue.
We have some actions built out here
that does a back-end call to the API
and does a few different things to validate
that this is either a new user or, so if it's a new user,
it'll send them to the new user page where they says,
hey, it looks like it's your first time.
Let's create an account.
If it's an existing user, then it's like, hey,
welcome back, Bruce.
It'll have the email address there
and just drop in the password you want for that.
And if you do have one where you are pre-registering users,
for example, you are importing users from another database,
you can have it set the user to pending,
or they can basically not have a password.
So when they put in their email address, it says, hey,
we haven't actually created a password for you yet.
Could you add a password and confirm password?
So all this logic kind of takes care
of every possible user that could come through this site.
So once you're signed in, you get to see a home page.
And this is very, very customizable
to whatever you want.
So this is the topic carousel.
So you can use this, or you can also hide it very easily.
So we can easily just hide it if you want.
And then starting down here, we just
list all the collections out.
But this, if you kind of look at the tree
here of all the different things going on here,
you can definitely drag and drop and rearrange things.
And we added a banner image here.
And if you click on it, it goes to a particular piece
of content.
You can make this whatever you want.
And I'll show you another example of a home page
here on a different app, just so you can kind of see
the difference here if we go to Home.
Same kind of image.
And then they have a very specific piece of collection
here with a collection ID, and then a piece of text,
and then they have another collection.
And they have this very custom level 1, 2, 3, 4.
So this doesn't really exist anywhere in Tribe,
but we were able to add this kind of layout
here in Flutter Flow and then link it
to parts of Tribe manually.
So these are things that aren't going to change that often.
And so they had a very specific thing
they wanted in that order.
Jumping back to this example, that's the Home page.
Obviously, if you click into that
and you go and watch a piece of content,
you'll kind of get the standard view here,
where you can either have a video up here,
or an embedded video, or an uploaded video.
The title, there's a comment count,
who the author is that posted this, description, all of that.
And then you've got your comments happening down here.
And then down here, we've got a leave a comment.
So this kind of stays with you.
You can see that the page kind of scrolls,
and the video stays there, and the comments stay there.
So it's a great commenting experience for users.
So if we go back to the search option here.
Let's go to Search.
And so all these pages would be, obviously, included.
And they should work kind of out of the box with your own API.
So when you go to the Search, you can type in Search,
and then all the results come in here.
We typically have these little tabbed buttons
down at the bottom here.
So you can jump between all those.
If you clicked on Groups, you would see all the groups there
that are available, number of members.
If you tapped into a specific group,
you would actually see the group Home.
And I believe there's a new one here.
So we've got Info is just the info.
When you first open it, it's going to have the Discussion
tab here.
So it's going to be your feed of all the engagement,
if things are liked or comment counts.
And if you tapped on this, it would just
the content template.
Members, you can actually see a list of everybody
who's a member of this group.
And in Content, you can actually open and close it.
I'm going to go ahead and run this in here
so you can actually kind of see what this looks like.
It does take a little bit of time.
take a few minutes for it to build the demo.
But I wanted to show you a little bit more
under the hood of what it looks like in Flutter Flow.
Once it's built, obviously it doesn't say $.name.
It's going to have the actual name of the collection
and the content inside there.
And so all this would be populated with real content,
even in the little preview here.
So that's the group page.
You can also go in there and create a post.
So someone could add their own post to that page.
And there is also a lock screen.
So let's say you had free users that
needed to pay to get to a particular feature.
Then let's say you locked the whole app
so that you had to be a basic user or premium user.
If the user is not, if they're just a free user,
they can see a screen like this.
And this is set up very specifically
to work with Apple's payment requirements
so that you don't have to charge any money.
You cannot have a link here that takes someone out
to go pay for the app, pay for a subscription or anything
like that.
All you can say right here is, hey, to view this,
you have to be a premium member.
And that's it.
Or you can log out and try again.
You can't have a call to action button
that then leads people to go pay for something there.
So topic view, same as the collection here,
similar to what we have.
The styling is a bit different once it builds.
It looks like this is ready.
So I'll just go ahead and show you a real demo.
So we'll just sign out real quick.
Sign in as me.
Cool.
So I have my topics up here.
I'll give it a second just to load for the first time.
And then if I tap into a particular video,
that is a way you can watch that.
If you go to the groups, you can check out all your groups here.
I think my internet is just a bit slow for where
I am right now, so these images are not loading super fast.
But these are all being loaded through our storage
decentralized hosting.
So that's all working well.
And then there's the search.
And you kind of get to your account and sign back out.
So that's just a very quick overview
of the whole different template here.
There's a number of things we'll do to set this up,
setting up your particular domain, which platform.
So you do have a one platform to one app relationship.
You wouldn't have all the platforms
on a particular node connected to one app.
It's going to be kind of one platform to one app,
if that makes sense.
But you can definitely duplicate this template
and use it for four or five apps if you wanted to.
It's just up to you.
All the API calls are going to be in here when you start.
So all these are going to be set up.
There's quite a few.
And this is all referencing the developer.tribesocial.key
mentation.
And you can go check this out.
So all these routes are built out here.
And you can look them up and figure out
how to use that REST API.
We have just built all of this in for you.
And it's already hooked up to all the different components
here.
So it makes it pretty easy to get going on it.
There's some other custom functions
that we've written specifically for a tribe app
that you'll need, so things like checking if the user is free.
Is the user pending?
There's different instances where
we need some very custom functions.
So that's what all that does.
Custom widgets, that is something
we don't actually use a lot of those right now.
But we maybe have some of those coming in the future.
And then just a few custom actions here that get used.
So that is a little overview.
Very easy to use Flutter flow as far as building apps
is very complicated.
This is probably one of the easier things.
There's 100% a learning curve.
So you're just going to have to figure out
how to get up to speed on it.
But there's a lot of great tutorials.
The cool thing is when it is all set up and running,
you can literally hit a button here to deploy this to App
Store.
Takes a bit of setting up between the App Store
and Flutter flow.
But once it's working, you can one click,
just take everything that's in Flutter flow
and just send it over to Apple or send it over
to the Google Play Store.
So very, very cool.
I love their workflow, how they have thought this through.
So once it's up and running, it's very easy to maintain,
I guess is where I'm going with that.
There's a lot of other.
integrations here for GitHub.
For example, you can actually push all your code directly to, uh, to GitHub.
And so you can have an access to the source code if you want to make further
changes that you can't do in Flutter flow.
So it's just a great tool.
If, if Flutter flow says, Hey, in 30 days, we're can't like closing all of our,
you know, servers and all of our apps going away, you could essentially
export all of that source code and kind of hire a Flutter developer
and keep going with it.
It's, it's very well protected as far as that goes.
We, we don't like centralized solutions.
So this is one thing that does, um, protect it.
Cause you do own your code, you own your app, um, at all
times through this, this option.
I do want to just point this out that they do have, um, web coming soon.
So you can technically replace your current tribe website if you wanted
to, with a Flutter flow app.
Um, the only thing with this is that they don't allow custom domains right
now, as of September 12th, when I'm recording this, uh, they will be doing
that I'm sure very soon, and then you can actually host this, um, wherever
you want with your own domain.
Uh, so that, that's going to be kind of a game changer as well.
And they've got some other things that they're working on at the moment.
Um, that's everything I wanted to share.
I think, you know, I don't want to walk through all the features of Flutter flow
in this, but I just want to show you kind of why we picked this architecture
because yes, you can have all these different routes and things connecting
to, uh, to tribe, but you could very easily do another route here, add your
own route to a completely different app, uh, service, and then just, you
know, bring in different data right alongside on the same page as
something that's serving tribe.
So if you're viewing content, but you wanted a very specific quiz tool, or
you had a form or something you wanted embedded, you can embed that even
though it doesn't exist anywhere in the tribe database, it can still exist in
the app, so the user experience is great.
Cause you can kind of combine from different sources, uh, in here.
So it's very, very flexible as far as making a very custom feeling
app for your organization.
It's not a tribe app that we're like skinning just to make it
look like your organization.
It really is your app.
You just happen to be pulling all your data from tribe into it, and you can
use this for whatever you want.
So pretty cool.
Uh, the other thing it does because Flutter is a Google based language.
I'll just point this out as well.
You can do a direct integration with, um, Firebase.
So it's like a cloud database as well.
So if there are things that you need to store or you want to take votes or you
want to take, you know, something from, you know, some information from someone
and there's not a place to store anywhere on tribe, you can actually
just start storing things on Firebase.
So again, this would be very specific to your app, but I just wanted to
show you that kind of flexibility.
You don't actually have to wait for the tribe source code to create
new places to put information.
You can actually just use something like Firebase to store whatever
you want alongside that data.
So again, a lot of different ways to, uh, to make this work.
So if you have any questions, you can definitely reach out, uh, and we can
certainly, um, walk through this on, on a zoom call and maybe discuss what
the implementation looks like for your particular organization.
So let me know if you have any questions.
Thanks.