Hey guys so I am just doing a wrapping up kind of a session here so I thought I
would just kind of narrate what I'm doing while I'm doing it and so kind of
just show you some of how how I put the things together so this obviously is
like a great template we have moved all of the mock-ups like kind of the
original designs that Jackie had we moved those all in here and then we're
just pulling pieces out of this as kind of a reference for design just as a
starting point so one thing I did really quick here was I just said like happy
Monday so I'll kind of just fly through kind of what I did so you guys can just
see how this should work but you can use a function called text combine so we
wrote the words happy with the space at the end and then you can say go get the
current time and display the current time in the form of it of just the name
of the day so Wednesday for example and there's a that's all we need to do there
so now it's gonna say happy and then when when that loads it's gonna say
whatever the date is and then it just had some text down here and so I changed
that to show authenticated user show display name so now anytime you see
those brackets like that it means there's gonna be live data shown there
so just kind of recap what I did there and of course this is just a simple log
out button there so I'm just gonna get it sort of functional this is obviously
not the finished design but it is got the right elements on the page that we
need to have so I'm actually getting ready to create the add a horse
subscription flow here and so in order to have that I need to have a button
that says add a horse so we have to do this thing anyway so I'm kind of working
on a like kind of the next project of like managing horses I'm kind of
building that in right now because we have to do it anyway and I'll just go
ahead and knock it out so I'll just show you kind of how this was and let me kind
of show you how it was put together so when you look at this let me just click
on this so we have a list view and then down here we have row and then we have a
column and a column and a column and so this was manually put in here right like
it was just set there's Lily then you uploaded this picture then you uploaded
this logo so it's not dynamic it's not actually it's like building this out so
what I've started to do here and I just hit this thought to hit record give you
guys a little bit of a snapshot of what we're doing and I'll probably go ahead
and upload these to our I'll make you guys a group we have this little
membership site here where I've been sending you guys tutorials but I'll make
a group in here that's just for you guys and you can watch these tutorials if you
want or your team I think that's a probably helpful it is obviously a
little bit longer to explain it what we're doing versus like doing it really
quick but I'll I'll try to do the more of these like recap videos that way you
can watch it and also refer back to it okay enough of that so what I did is
first thing you want to do is delete all the other stuff that's in there and we
just want one column because what we're gonna do is we're gonna tell this to
reproduce like over and over for every horse so we just have to tell it what
the first one should look like and it will tell it'll kind of extrapolate that
to the rest so first thing we need to do is actually connect this to some sort
of value so what I like to do is on the container up here we'll do it in the
list view we got to hit the database so we're gonna have a query that runs and
it's gonna go get a query of collections we're gonna query all the horses in the
in the database and get a list of documents back the filter is going to be
we want the so there's no there's no fields here so we have to we only want
my horses to come back so I'm just gonna go fast and obviously you guys we can
stop and do questions later but I need to show like this will be the owner ref
so we want a reference document reference to the users to say that hey
this horse is owned by Jackie and so the way we link this horse to a user is
we have a document ref that says hey for this horse the owner and I just like to
call it ref since it's just a reference to who the owner is is gonna be a
username and right now we're just gonna make it not a list I mean just there's a
one-to-one relationship there's one owner for one horse we can obviously share
this we can make another one called like
like shared with ref and then we could have that be a list so maybe it could be
shared with a bunch of people but I think just having a single owner is
probably a good place to start stuff can always be edited later so come in here
and so now what we want to do it's back to our query I think I have to do that
again query horse list of documents and then the filter I want to say go and get
where the owner ref is equal to the person who signed in to the current
signed in user there confirm so what that's gonna do is say hey if the owner
ref for Jackie so let's because Jackie's gonna have some sort of document
reference it's like X 172 blah blah blah so it'll say hey if the owner ref field
equals the person who signed in then then display that list that's what we
want and we can order by you know right now just do name so do the alphabetical
essentially but we could do you know date added we could make this however we
want to make it so and that's all we need to worry about for this so when I
hit confirm it's gonna say hey we're gonna create a query and we're gonna
like we want to build this out so now you can see what happened there I still
I have this little icon a little orange icon means that that's actually
connected now to a database that's real and now it's gonna repeat all of these
items so there's also a couple things we can do to just clean up some spacing so
you can say the start spacing I think should be like 20 what did we have here
maybe it's like 15 yeah there we go so the first little bit of space there it's
gonna bump it in 15 pixels and it's gonna scroll you can see it kind of
scrolls left and right right now but all I have now is a single column and we
actually can take this away and we can use this other feature called item
spacing so we'll do 15 maybe you had oh you had 16 I think there you go so we're
actually using the spacing here and we don't have to have anything in the
column here and just make sure just look in here quickly check a few things
cool so now that's gonna repeat so now what instead of saying Lily like writing
the word Lily there I actually want it to display a name so I want to go to a
horse document and hey name so that's gonna put the name of the horse and I
also went ahead and added an image so instead of this I want it to go off the
network and I want to pull in the horse document and I think I called it a
profile image okay so the other thing I want to jump to is you have this very
nice like icon I don't know if that is gonna be the final icon but we can go
here and if you just click on this it gets the URL so this giant URL here and
so just as a fallback I go back to my home here I'm gonna tell to go to the
profile image but if it doesn't have a profile image use this image so what
that's gonna do is just put that as a placeholder if there's no if there's no
image submitted by the user and so that way we can also kind of see how it fits
on the page so it is kind of helpful to have that mock-up I just wanted to show
that to you and I think we want to make this should be fine we've got it set
here and I think this is I just wanted to show you kind of the process of
taking it from this repeating column to now it's actually listing this out now
there's still a lot to do here we have to make it so when I tap on it does it
go to a detail page I think there's a horse profile page here so now we could
actually link that to Lily so this is kind of getting outside of the this
project was really about the account creation process but I just thought this
would be a good little snapshot this obviously is probably the most one of
the most simple things we're talking about here and so I just wanted to show
that to you so you could kind of see like how it's put together because
sometimes it's like how we could have made that better bigger the whole time
but now the big it's this type of thing down here is gonna get a lot more
complicated because we have to do multiple queries and filtering and a
bunch of stuff obviously we can make appointments work what I'm gonna do here
is also add like if there isn't a horse we want to have an empty state so let me
just run right into that so just thought I'd kind of show you a couple of things
I have to do this anyway and we'll create a new component here called you
can say like empty so let's use this one
my theme and we'll call it uh empty carousel
and maybe i'll just pull in your icon uh we don't even need an icon really
i'm just gonna i'm just gonna say something like
um
and you don't have to say this um i don't even need that i'll just take
that simplify it all like this go to that
and then on this let's kind of fix a few things here
just fixing a few small things that we like to
clean up 15 and 15 and then let's change it to say like
add a horse
there we go and this is just a small bit of code
that um i can reset that so it's going to be kind of centered
and it should just kind of scale like that
and i'll see if it looks like there's a little bit of
oops five okay so we kind of made a little component there
and i'm going to call it empty carousel so if i go back to my dashboard
home and on this list view i'm selecting the list view under the
database i can say uh
here empty list widget so if there's no if it goes and does a search and it
comes back empty then actually show a component and here
empty carousel so if i say show and it's going to look like that
cool so this will let us test it i just needed to get it to this point so we can
actually go ahead and like test it because the requirements of
this is um it's asking you to subscribe before you add a horse so i kind of
mark that as started but it needs to be a place where we
um when i test this uh we can actually check it out so let's just do this
i'll run deploy
and you're always going to see these little red dots up here and it tells you
what's going on if there's an error in some of your logic
you can go fix those bugs um right now it just needs to re
deploy this this piece here so i may pause this and just uh
come back to in a second okay so just a little bit of configuring of
firebase um saved you guys some of the boring stuff but yes it's deployed and
now we get a green check there so we click this little
lightning bolt at the top what i like to do is actually pull this
out as a separate little window i have a really big screen here so i'll
kind of put it off to the side here for a second bring it back this
allows me to keep working on it and i can leave that page
open so it takes about one to two minutes to kind of build out
that entire section and kind of when we open it we're going to
open into a sms login which already exists
and then we're going to verify the text and then on the next screen it's going
to jump to the home screen which is this
that should be kind of how it works it's a very iterative process so
there's a good chance it's not going to work the way i just explained it
and we did this sms authentication which i think is a good idea still
and we may revisit this a little bit because once you
access this we still gonna have to have them you know fill out
their profile so they need to go to this page
here so i think just looking at here is once we verify
what's the flow here so they verify
let's put a number here in text okay
uh let's look
probably on the actions yep so when they're done pin code
let's open this up
it's going to verify it here and then we need to send them somewhere so probably
um do a little it's going to get a little complicated so it's hard to like
explain everything that i'm doing because there's a lot of back
information um so i will say something like
is the display name set and not empty
if it's set like let's send them to the navigate to the home page so if
they have a display name set and they've kind of
set up their profile if not let's send them
to the create profile screen here i don't think we have any
Yeah, we don't have any parameters to pass, so let's jump back to this. Verify.
There we go. I can just delete this. We've got to keep it really clean. It's kind of
constantly checking for bugs while we're doing this. So now we're back up to green
here. And if I go here, I'm actually running a little test here. I haven't tested this
since April, so let's check if it works. And I think I just made it 1, 2, 3, 4, 5, 6. Cool.
So I do have a display name, so that should be empty. And I think what it's doing is it
on successful load, it's just going straight to...
Yeah, so I think what's happening is as soon as it verifies and you're signed in,
it just locks you right into the home page. So what we'll probably do,
we're getting into some kind of fancy workflow stuff here, but we'll create a page that we
send them to that checks, have they set up their account or not? And then if so,
kind of redirects them to two different pages. So what you just saw there... And actually,
let me just do a quick load because we were building it. I was making changes to it while
it was building. So let's go here. Now, when you reload this, it should only take about
15, 20 seconds because it's already built it. So I'm going to log out. Try that one more time.
1, 2, 3, 4, 5, 6. There you go. Sweet. So it actually did work exactly how I wanted it to.
So right here, now I'm actually in this page. There's no... Like this save button doesn't do
anything. We're not actually changing the fields here. And so what we can do here is it just kind
of shows you the workflow that it did catch like, hey, this user doesn't have a name. Let's go ahead
and register them right now. So all of the projects we kind of split into different projects,
they're all kind of happening at the same time because we're just trying to get it up and running.
So I'm trying to get the workflow done. Yes, we could make it very simplistic with just the single
project, but I'm also wanting to make it just make it make sense for how... So we can just test it.
It's going to look a little more complete. And because you guys have some of the pages built out,
I'm just going to repurpose these as I go through it. So I'll probably make... Yeah, I'll make this
work because we have to get it to work anyway. And we'll go through that. But you can see you're
kind of building it on this side and then you're testing it over here constantly. But now, of course,
the way I've set it up right here, it kind of is blocked. Like there's no way to get out of
this screen now. Save doesn't do anything. There's no back button. So you're kind of stuck right here.
And even if I reload it, it's going to consider me signed in. And it's probably going to take me to
the homepage because I don't have the... So that's correct. Yeah, it actually did exactly what I was
thinking. So we have to have a different page to like catch it and bring you back in there. But
anyway, just a little sneak peek on some of the things we're doing. I'm going to do another
session later today, and I'll try to record some more for you guys. But just wanted to kind of
show our work a little more as I know you were both interested in it.