WEBVTT

1
00:00:00.000 --> 00:00:08.680
Hey guys so I am just doing a wrapping up kind of a session here so I thought I

2
00:00:08.680 --> 00:00:14.240
would just kind of narrate what I'm doing while I'm doing it and so kind of

3
00:00:14.240 --> 00:00:17.720
just show you some of how how I put the things together so this obviously is

4
00:00:17.720 --> 00:00:23.680
like a great template we have moved all of the mock-ups like kind of the

5
00:00:23.680 --> 00:00:27.800
original designs that Jackie had we moved those all in here and then we're

6
00:00:27.800 --> 00:00:32.159
just pulling pieces out of this as kind of a reference for design just as a

7
00:00:32.159 --> 00:00:38.640
starting point so one thing I did really quick here was I just said like happy

8
00:00:38.640 --> 00:00:43.920
Monday so I'll kind of just fly through kind of what I did so you guys can just

9
00:00:43.920 --> 00:00:51.680
see how this should work but you can use a function called text combine so we

10
00:00:51.680 --> 00:00:57.040
wrote the words happy with the space at the end and then you can say go get the

11
00:00:57.040 --> 00:01:01.800
current time and display the current time in the form of it of just the name

12
00:01:01.800 --> 00:01:07.960
of the day so Wednesday for example and there's a that's all we need to do there

13
00:01:07.960 --> 00:01:11.160
so now it's gonna say happy and then when when that loads it's gonna say

14
00:01:11.160 --> 00:01:15.760
whatever the date is and then it just had some text down here and so I changed

15
00:01:15.760 --> 00:01:21.680
that to show authenticated user show display name so now anytime you see

16
00:01:21.680 --> 00:01:25.680
those brackets like that it means there's gonna be live data shown there

17
00:01:25.720 --> 00:01:30.480
so just kind of recap what I did there and of course this is just a simple log

18
00:01:30.480 --> 00:01:34.080
out button there so I'm just gonna get it sort of functional this is obviously

19
00:01:34.080 --> 00:01:39.880
not the finished design but it is got the right elements on the page that we

20
00:01:39.880 --> 00:01:46.400
need to have so I'm actually getting ready to create the add a horse

21
00:01:46.400 --> 00:01:53.200
subscription flow here and so in order to have that I need to have a button

22
00:01:53.200 --> 00:01:57.120
that says add a horse so we have to do this thing anyway so I'm kind of working

23
00:01:57.120 --> 00:02:02.280
on a like kind of the next project of like managing horses I'm kind of

24
00:02:02.280 --> 00:02:06.160
building that in right now because we have to do it anyway and I'll just go

25
00:02:06.160 --> 00:02:10.880
ahead and knock it out so I'll just show you kind of how this was and let me kind

26
00:02:10.880 --> 00:02:17.280
of show you how it was put together so when you look at this let me just click

27
00:02:17.280 --> 00:02:26.400
on this so we have a list view and then down here we have row and then we have a

28
00:02:26.400 --> 00:02:31.120
column and a column and a column and so this was manually put in here right like

29
00:02:31.120 --> 00:02:36.640
it was just set there's Lily then you uploaded this picture then you uploaded

30
00:02:36.640 --> 00:02:42.440
this logo so it's not dynamic it's not actually it's like building this out so

31
00:02:42.440 --> 00:02:47.320
what I've started to do here and I just hit this thought to hit record give you

32
00:02:47.320 --> 00:02:52.360
guys a little bit of a snapshot of what we're doing and I'll probably go ahead

33
00:02:52.360 --> 00:02:55.960
and upload these to our I'll make you guys a group we have this little

34
00:02:55.960 --> 00:03:00.560
membership site here where I've been sending you guys tutorials but I'll make

35
00:03:00.560 --> 00:03:05.640
a group in here that's just for you guys and you can watch these tutorials if you

36
00:03:05.640 --> 00:03:09.600
want or your team I think that's a probably helpful it is obviously a

37
00:03:09.600 --> 00:03:12.880
little bit longer to explain it what we're doing versus like doing it really

38
00:03:12.880 --> 00:03:16.640
quick but I'll I'll try to do the more of these like recap videos that way you

39
00:03:16.640 --> 00:03:21.360
can watch it and also refer back to it okay enough of that so what I did is

40
00:03:21.360 --> 00:03:25.720
first thing you want to do is delete all the other stuff that's in there and we

41
00:03:25.720 --> 00:03:28.640
just want one column because what we're gonna do is we're gonna tell this to

42
00:03:28.640 --> 00:03:32.960
reproduce like over and over for every horse so we just have to tell it what

43
00:03:32.960 --> 00:03:36.360
the first one should look like and it will tell it'll kind of extrapolate that

44
00:03:36.360 --> 00:03:41.840
to the rest so first thing we need to do is actually connect this to some sort

45
00:03:41.840 --> 00:03:47.760
of value so what I like to do is on the container up here we'll do it in the

46
00:03:47.760 --> 00:03:51.040
list view we got to hit the database so we're gonna have a query that runs and

47
00:03:51.040 --> 00:03:57.920
it's gonna go get a query of collections we're gonna query all the horses in the

48
00:03:57.920 --> 00:04:05.000
in the database and get a list of documents back the filter is going to be

49
00:04:05.000 --> 00:04:10.200
we want the so there's no there's no fields here so we have to we only want

50
00:04:10.200 --> 00:04:15.400
my horses to come back so I'm just gonna go fast and obviously you guys we can

51
00:04:15.400 --> 00:04:22.760
stop and do questions later but I need to show like this will be the owner ref

52
00:04:22.760 --> 00:04:28.720
so we want a reference document reference to the users to say that hey

53
00:04:28.720 --> 00:04:35.800
this horse is owned by Jackie and so the way we link this horse to a user is

54
00:04:35.800 --> 00:04:41.640
we have a document ref that says hey for this horse the owner and I just like to

55
00:04:41.640 --> 00:04:46.760
call it ref since it's just a reference to who the owner is is gonna be a

56
00:04:46.760 --> 00:04:53.480
username and right now we're just gonna make it not a list I mean just there's a

57
00:04:53.480 --> 00:04:57.840
one-to-one relationship there's one owner for one horse we can obviously share

58
00:04:57.840 --> 00:05:01.600
this we can make another one called like

59
00:05:00.000 --> 00:05:03.560
like shared with ref and then we could have that be a list so maybe it could be

60
00:05:03.560 --> 00:05:06.080
shared with a bunch of people but I think just having a single owner is

61
00:05:06.080 --> 00:05:12.160
probably a good place to start stuff can always be edited later so come in here

62
00:05:12.160 --> 00:05:18.200
and so now what we want to do it's back to our query I think I have to do that

63
00:05:18.200 --> 00:05:26.480
again query horse list of documents and then the filter I want to say go and get

64
00:05:26.480 --> 00:05:33.800
where the owner ref is equal to the person who signed in to the current

65
00:05:33.800 --> 00:05:38.920
signed in user there confirm so what that's gonna do is say hey if the owner

66
00:05:38.920 --> 00:05:43.800
ref for Jackie so let's because Jackie's gonna have some sort of document

67
00:05:43.800 --> 00:05:50.960
reference it's like X 172 blah blah blah so it'll say hey if the owner ref field

68
00:05:50.960 --> 00:05:56.080
equals the person who signed in then then display that list that's what we

69
00:05:56.080 --> 00:06:01.560
want and we can order by you know right now just do name so do the alphabetical

70
00:06:01.560 --> 00:06:07.240
essentially but we could do you know date added we could make this however we

71
00:06:07.240 --> 00:06:10.400
want to make it so and that's all we need to worry about for this so when I

72
00:06:10.400 --> 00:06:13.800
hit confirm it's gonna say hey we're gonna create a query and we're gonna

73
00:06:13.800 --> 00:06:18.800
like we want to build this out so now you can see what happened there I still

74
00:06:18.800 --> 00:06:23.720
I have this little icon a little orange icon means that that's actually

75
00:06:23.720 --> 00:06:29.240
connected now to a database that's real and now it's gonna repeat all of these

76
00:06:29.240 --> 00:06:34.840
items so there's also a couple things we can do to just clean up some spacing so

77
00:06:34.840 --> 00:06:39.240
you can say the start spacing I think should be like 20 what did we have here

78
00:06:39.240 --> 00:06:44.800
maybe it's like 15 yeah there we go so the first little bit of space there it's

79
00:06:44.800 --> 00:06:49.640
gonna bump it in 15 pixels and it's gonna scroll you can see it kind of

80
00:06:49.640 --> 00:06:56.640
scrolls left and right right now but all I have now is a single column and we

81
00:06:56.640 --> 00:07:02.720
actually can take this away and we can use this other feature called item

82
00:07:02.720 --> 00:07:12.200
spacing so we'll do 15 maybe you had oh you had 16 I think there you go so we're

83
00:07:12.200 --> 00:07:15.760
actually using the spacing here and we don't have to have anything in the

84
00:07:15.760 --> 00:07:22.640
column here and just make sure just look in here quickly check a few things

85
00:07:22.640 --> 00:07:29.400
cool so now that's gonna repeat so now what instead of saying Lily like writing

86
00:07:29.400 --> 00:07:33.760
the word Lily there I actually want it to display a name so I want to go to a

87
00:07:33.760 --> 00:07:39.880
horse document and hey name so that's gonna put the name of the horse and I

88
00:07:39.880 --> 00:07:43.880
also went ahead and added an image so instead of this I want it to go off the

89
00:07:43.880 --> 00:07:47.480
network and I want to pull in the horse document and I think I called it a

90
00:07:47.480 --> 00:07:55.000
profile image okay so the other thing I want to jump to is you have this very

91
00:07:55.000 --> 00:08:02.840
nice like icon I don't know if that is gonna be the final icon but we can go

92
00:08:02.840 --> 00:08:10.280
here and if you just click on this it gets the URL so this giant URL here and

93
00:08:10.320 --> 00:08:16.760
so just as a fallback I go back to my home here I'm gonna tell to go to the

94
00:08:16.760 --> 00:08:20.680
profile image but if it doesn't have a profile image use this image so what

95
00:08:20.680 --> 00:08:26.120
that's gonna do is just put that as a placeholder if there's no if there's no

96
00:08:26.120 --> 00:08:31.880
image submitted by the user and so that way we can also kind of see how it fits

97
00:08:31.880 --> 00:08:35.840
on the page so it is kind of helpful to have that mock-up I just wanted to show

98
00:08:35.840 --> 00:08:42.080
that to you and I think we want to make this should be fine we've got it set

99
00:08:42.080 --> 00:08:47.560
here and I think this is I just wanted to show you kind of the process of

100
00:08:47.560 --> 00:08:51.480
taking it from this repeating column to now it's actually listing this out now

101
00:08:51.480 --> 00:08:55.080
there's still a lot to do here we have to make it so when I tap on it does it

102
00:08:55.080 --> 00:09:00.200
go to a detail page I think there's a horse profile page here so now we could

103
00:09:00.200 --> 00:09:04.240
actually link that to Lily so this is kind of getting outside of the this

104
00:09:04.240 --> 00:09:09.240
project was really about the account creation process but I just thought this

105
00:09:09.240 --> 00:09:13.320
would be a good little snapshot this obviously is probably the most one of

106
00:09:13.320 --> 00:09:17.920
the most simple things we're talking about here and so I just wanted to show

107
00:09:17.920 --> 00:09:21.280
that to you so you could kind of see like how it's put together because

108
00:09:21.280 --> 00:09:24.880
sometimes it's like how we could have made that better bigger the whole time

109
00:09:24.880 --> 00:09:30.240
but now the big it's this type of thing down here is gonna get a lot more

110
00:09:30.240 --> 00:09:34.160
complicated because we have to do multiple queries and filtering and a

111
00:09:34.160 --> 00:09:39.800
bunch of stuff obviously we can make appointments work what I'm gonna do here

112
00:09:39.800 --> 00:09:46.080
is also add like if there isn't a horse we want to have an empty state so let me

113
00:09:46.080 --> 00:09:48.960
just run right into that so just thought I'd kind of show you a couple of things

114
00:09:48.960 --> 00:09:55.360
I have to do this anyway and we'll create a new component here called you

115
00:09:55.360 --> 00:10:00.880
can say like empty so let's use this one

116
00:10:00.000 --> 00:10:06.960
my theme and we'll call it uh empty carousel

117
00:10:09.680 --> 00:10:15.920
and maybe i'll just pull in your icon uh we don't even need an icon really

118
00:10:15.920 --> 00:10:18.800
i'm just gonna i'm just gonna say something like

119
00:10:18.800 --> 00:10:21.200
um

120
00:10:21.200 --> 00:10:24.200
um

121
00:10:27.760 --> 00:10:31.440
and you don't have to say this um i don't even need that i'll just take

122
00:10:31.440 --> 00:10:36.640
that simplify it all like this go to that

123
00:10:36.640 --> 00:10:41.600
and then on this let's kind of fix a few things here

124
00:10:45.440 --> 00:10:49.360
just fixing a few small things that we like to

125
00:10:49.360 --> 00:10:56.880
clean up 15 and 15 and then let's change it to say like

126
00:10:56.880 --> 00:11:00.320
add a horse

127
00:11:02.000 --> 00:11:06.400
there we go and this is just a small bit of code

128
00:11:06.400 --> 00:11:11.600
that um i can reset that so it's going to be kind of centered

129
00:11:11.600 --> 00:11:14.880
and it should just kind of scale like that

130
00:11:14.880 --> 00:11:18.320
and i'll see if it looks like there's a little bit of

131
00:11:18.320 --> 00:11:22.080
oops five okay so we kind of made a little component there

132
00:11:22.080 --> 00:11:25.680
and i'm going to call it empty carousel so if i go back to my dashboard

133
00:11:25.680 --> 00:11:30.480
home and on this list view i'm selecting the list view under the

134
00:11:30.480 --> 00:11:34.800
database i can say uh

135
00:11:34.800 --> 00:11:39.680
here empty list widget so if there's no if it goes and does a search and it

136
00:11:39.680 --> 00:11:44.720
comes back empty then actually show a component and here

137
00:11:44.720 --> 00:11:49.680
empty carousel so if i say show and it's going to look like that

138
00:11:49.680 --> 00:11:53.200
cool so this will let us test it i just needed to get it to this point so we can

139
00:11:53.200 --> 00:11:56.240
actually go ahead and like test it because the requirements of

140
00:11:56.240 --> 00:12:01.600
this is um it's asking you to subscribe before you add a horse so i kind of

141
00:12:01.600 --> 00:12:05.440
mark that as started but it needs to be a place where we

142
00:12:05.440 --> 00:12:10.000
um when i test this uh we can actually check it out so let's just do this

143
00:12:10.000 --> 00:12:13.440
i'll run deploy

144
00:12:15.680 --> 00:12:19.120
and you're always going to see these little red dots up here and it tells you

145
00:12:19.120 --> 00:12:21.920
what's going on if there's an error in some of your logic

146
00:12:21.920 --> 00:12:26.960
you can go fix those bugs um right now it just needs to re

147
00:12:26.960 --> 00:12:33.520
deploy this this piece here so i may pause this and just uh

148
00:12:33.520 --> 00:12:37.040
come back to in a second okay so just a little bit of configuring of

149
00:12:37.040 --> 00:12:41.280
firebase um saved you guys some of the boring stuff but yes it's deployed and

150
00:12:41.280 --> 00:12:44.400
now we get a green check there so we click this little

151
00:12:44.400 --> 00:12:48.000
lightning bolt at the top what i like to do is actually pull this

152
00:12:48.000 --> 00:12:51.760
out as a separate little window i have a really big screen here so i'll

153
00:12:51.760 --> 00:12:55.920
kind of put it off to the side here for a second bring it back this

154
00:12:55.920 --> 00:12:59.040
allows me to keep working on it and i can leave that page

155
00:12:59.040 --> 00:13:02.320
open so it takes about one to two minutes to kind of build out

156
00:13:02.400 --> 00:13:07.920
that entire section and kind of when we open it we're going to

157
00:13:07.920 --> 00:13:14.240
open into a sms login which already exists

158
00:13:14.240 --> 00:13:17.680
and then we're going to verify the text and then on the next screen it's going

159
00:13:17.680 --> 00:13:20.080
to jump to the home screen which is this

160
00:13:20.080 --> 00:13:24.240
that should be kind of how it works it's a very iterative process so

161
00:13:24.240 --> 00:13:28.400
there's a good chance it's not going to work the way i just explained it

162
00:13:28.400 --> 00:13:34.000
and we did this sms authentication which i think is a good idea still

163
00:13:34.000 --> 00:13:37.760
and we may revisit this a little bit because once you

164
00:13:37.760 --> 00:13:41.440
access this we still gonna have to have them you know fill out

165
00:13:41.440 --> 00:13:45.600
their profile so they need to go to this page

166
00:13:45.600 --> 00:13:50.400
here so i think just looking at here is once we verify

167
00:13:50.400 --> 00:13:56.320
what's the flow here so they verify

168
00:13:58.400 --> 00:14:02.480
let's put a number here in text okay

169
00:14:02.480 --> 00:14:05.760
uh let's look

170
00:14:06.160 --> 00:14:14.720
probably on the actions yep so when they're done pin code

171
00:14:15.520 --> 00:14:18.400
let's open this up

172
00:14:18.960 --> 00:14:23.200
it's going to verify it here and then we need to send them somewhere so probably

173
00:14:23.200 --> 00:14:27.040
um do a little it's going to get a little complicated so it's hard to like

174
00:14:27.040 --> 00:14:29.760
explain everything that i'm doing because there's a lot of back

175
00:14:29.760 --> 00:14:33.920
information um so i will say something like

176
00:14:33.920 --> 00:14:40.880
is the display name set and not empty

177
00:14:40.880 --> 00:14:47.520
if it's set like let's send them to the navigate to the home page so if

178
00:14:47.520 --> 00:14:49.600
they have a display name set and they've kind of

179
00:14:49.600 --> 00:14:53.680
set up their profile if not let's send them

180
00:14:53.680 --> 00:15:01.840
to the create profile screen here i don't think we have any

181
00:15:00.000 --> 00:15:09.280
Yeah, we don't have any parameters to pass, so let's jump back to this. Verify.

182
00:15:17.360 --> 00:15:23.960
There we go. I can just delete this. We've got to keep it really clean. It's kind of

183
00:15:23.960 --> 00:15:28.400
constantly checking for bugs while we're doing this. So now we're back up to green

184
00:15:28.400 --> 00:15:34.960
here. And if I go here, I'm actually running a little test here. I haven't tested this

185
00:15:34.960 --> 00:15:46.720
since April, so let's check if it works. And I think I just made it 1, 2, 3, 4, 5, 6. Cool.

186
00:15:46.720 --> 00:15:55.680
So I do have a display name, so that should be empty. And I think what it's doing is it

187
00:15:55.680 --> 00:15:59.520
on successful load, it's just going straight to...

188
00:16:06.800 --> 00:16:10.320
Yeah, so I think what's happening is as soon as it verifies and you're signed in,

189
00:16:10.960 --> 00:16:15.280
it just locks you right into the home page. So what we'll probably do,

190
00:16:16.960 --> 00:16:21.360
we're getting into some kind of fancy workflow stuff here, but we'll create a page that we

191
00:16:21.360 --> 00:16:26.160
send them to that checks, have they set up their account or not? And then if so,

192
00:16:26.160 --> 00:16:31.120
kind of redirects them to two different pages. So what you just saw there... And actually,

193
00:16:31.120 --> 00:16:35.280
let me just do a quick load because we were building it. I was making changes to it while

194
00:16:35.280 --> 00:16:44.400
it was building. So let's go here. Now, when you reload this, it should only take about

195
00:16:45.120 --> 00:16:51.360
15, 20 seconds because it's already built it. So I'm going to log out. Try that one more time.

196
00:16:55.120 --> 00:17:04.079
1, 2, 3, 4, 5, 6. There you go. Sweet. So it actually did work exactly how I wanted it to.

197
00:17:04.079 --> 00:17:08.480
So right here, now I'm actually in this page. There's no... Like this save button doesn't do

198
00:17:08.480 --> 00:17:16.400
anything. We're not actually changing the fields here. And so what we can do here is it just kind

199
00:17:16.400 --> 00:17:21.119
of shows you the workflow that it did catch like, hey, this user doesn't have a name. Let's go ahead

200
00:17:21.119 --> 00:17:26.640
and register them right now. So all of the projects we kind of split into different projects,

201
00:17:26.640 --> 00:17:31.200
they're all kind of happening at the same time because we're just trying to get it up and running.

202
00:17:31.200 --> 00:17:36.480
So I'm trying to get the workflow done. Yes, we could make it very simplistic with just the single

203
00:17:36.480 --> 00:17:45.200
project, but I'm also wanting to make it just make it make sense for how... So we can just test it.

204
00:17:45.200 --> 00:17:50.080
It's going to look a little more complete. And because you guys have some of the pages built out,

205
00:17:50.080 --> 00:17:58.320
I'm just going to repurpose these as I go through it. So I'll probably make... Yeah, I'll make this

206
00:17:58.320 --> 00:18:03.840
work because we have to get it to work anyway. And we'll go through that. But you can see you're

207
00:18:03.840 --> 00:18:08.800
kind of building it on this side and then you're testing it over here constantly. But now, of course,

208
00:18:08.800 --> 00:18:12.320
the way I've set it up right here, it kind of is blocked. Like there's no way to get out of

209
00:18:12.320 --> 00:18:17.680
this screen now. Save doesn't do anything. There's no back button. So you're kind of stuck right here.

210
00:18:17.680 --> 00:18:22.560
And even if I reload it, it's going to consider me signed in. And it's probably going to take me to

211
00:18:22.560 --> 00:18:27.520
the homepage because I don't have the... So that's correct. Yeah, it actually did exactly what I was

212
00:18:27.520 --> 00:18:32.960
thinking. So we have to have a different page to like catch it and bring you back in there. But

213
00:18:32.960 --> 00:18:36.960
anyway, just a little sneak peek on some of the things we're doing. I'm going to do another

214
00:18:36.960 --> 00:18:42.480
session later today, and I'll try to record some more for you guys. But just wanted to kind of

215
00:18:42.480 --> 00:18:45.360
show our work a little more as I know you were both interested in it.