0:00:24
what is going on guys welcome back to
0:00:27
another session of
0:00:29
and fix brought to you by the rule
0:00:32
all right um you must be observing that
0:00:34
it's only me me today
0:00:37
um the other raw coder which is tori uh
0:00:46
he can't come due to some work
0:00:50
so yeah you're pretty much stuck with me
0:00:54
tonight and um yeah
0:00:56
let's make this a fun ride all right so
0:01:04
before we continue let's do the
0:01:06
acknowledgement of the country and pay
0:01:08
our respects to the elders of the past
0:01:11
present and future so here goes
0:01:16
i begin today by acknowledging the
0:01:18
traditional custodians of the land on
0:01:20
which we gather today and pay my
0:01:22
respects to the elders past present and
0:01:24
future i extend their respect to
0:01:27
aboriginal and torres strait islander
0:01:32
all right guys that was brilliant um
0:01:36
and dance and smoothly done
0:01:42
what we're gonna do today is basically
0:01:48
authentication when saving a board
0:01:53
let's see how we get along with that one
0:01:56
it'll be a fun ride i'm pretty sure all
0:01:59
right so let's get started
0:02:03
hey gagdev good to have you giza gang is
0:02:13
i'm gonna just play a bit of background
0:02:23
do you wanna pick a letter uh
0:02:28
and then i can basically
0:02:31
play that kind of a
0:02:39
to be honest more for background music
0:02:43
that was the one so b
0:02:45
what do we have for b
0:02:48
so we don't have anything for b but the
0:02:55
how about this one
0:03:06
so now that that is done and i'm going
0:03:10
to share my screen and take you guys
0:03:38
okay so there we go
0:03:41
so we can open i really hope that
0:03:46
tory pushed the changes
0:03:54
oh excuse me that was a random one
0:04:06
like to update yeah why not
0:04:08
i'm guessing oh my gosh
0:04:18
what did um jacob say
0:04:29
thanks for joining though good to have
0:04:32
all right cool so let's
0:04:36
a shortcut or phone authentication
0:04:39
because we really want to get this mvp
0:04:42
out of the doors asap
0:04:48
um so today's target is to
0:04:53
when we try to save a board we will we
0:05:01
passcode all right so that's what we are
0:05:04
going to do we already have the passcode
0:05:08
home.html installed in there which is
0:05:14
yeah so this is a password
0:05:17
um we're going to be implementing that
0:05:25
index.html so i think um what would
0:05:32
actually i'm going to
0:05:35
i'm going to pull first
0:05:38
so i've got all the basic changes
0:05:50
so i'll create a new branch
0:06:23
check out that one
0:06:39
okay cool so we are on a brand new
0:06:42
branch so now what i'm thinking we could
0:06:47
we'll be just using this passcode
0:06:50
ui in both the places which is the html
0:06:56
index.html you need to um
0:06:59
keep an eye on the
0:07:12
okay so i'm thinking that might create a
0:07:18
html as in this one and then just
0:07:24
that file in both the pages
0:07:35
uh best photos of reviews on
0:07:41
i see what you mean
0:07:46
probably come back to that
0:07:56
um so where will we
0:08:38
let's add html5 it's refined
0:08:50
okay so this is how we do it basically
0:08:54
in my opinion the best solution uses
0:08:57
jquery so if you've got this one
0:09:00
function include contents upload.html
0:09:25
torikom make it cause um is uh is his
0:09:29
today she has some work movements
0:09:32
as an account for work events that
0:09:37
wants to go to so that's
0:09:45
um why am i hiding why am i including
0:09:56
including any demo in in another html
0:10:02
um so the reason why i wanted to include
0:10:08
demo file into another one
0:10:11
is because i'll show you why
0:10:18
if i run this what am i saying
0:10:30
okay so run this one
0:10:36
you know how we have this passcode here
0:10:40
what we want to do is we
0:10:44
show this passcode when
0:11:00
yeah so we want to
0:11:07
ui when we hit save
0:11:14
so which is why i was thinking
0:11:18
instead of duplicating the
0:11:29
another a separate html file and just
0:11:36
here and then in the index.html
0:11:51
does that make sense
0:11:54
i used to have all the old js and html
0:12:12
uh i'm not sure what you mean gang dev
0:12:14
as in then to penetrate the request
0:12:17
anyone are you being sarcastic
0:12:21
because the best practices
0:12:24
according to my understanding would be
0:12:31
in a separate file and then
0:12:35
import them by script tags in html
0:12:42
you are being sarcastic never mind
0:12:50
in my opinion the best center huh
0:12:55
html this method is simply and clean
0:13:00
okay so if we do that one then include
0:13:04
content load b html
0:13:08
ah okay cool i see
0:13:10
so what we can do is basically put that
0:14:01
actually not that yeah
0:14:11
yeah that would do it
0:14:18
why do you enter password more than once
0:14:22
you used your degree
0:14:32
then with them into string then add to
0:14:42
yes so that's what i'm trying to do at
0:14:53
and then i'll be loading the file with j
0:15:07
just add a script block
0:15:14
no but this isn't uh this isn't um
0:15:18
so how people will get the ui part as in
0:15:22
the simple html because i don't i don't
0:15:25
want to duplicate the code
0:15:29
and i'm not using as in javascript so
0:15:33
this is how i plan to do it
0:15:45
ui html will come here
0:15:54
script block in this file
0:16:05
use jquery to add as html
0:16:20
i think i understand you know
0:16:24
you mean do this entire bit
0:16:34
writing the html do them as string
0:16:54
add it to the document.global
0:17:07
so i need to convert all this in jquery
0:17:11
and then i can add it to the
0:17:18
and then it can say show passcode blah
0:17:24
i see i see what you mean now
0:17:31
that actually makes sense
0:17:46
you would be doing the same if you had a
0:17:57
you would be doing the same
0:18:05
this is in this approaches a lot
0:18:17
code in a separate file and just basic
0:18:27
i might go with this one for now
0:18:30
one file is the best practice though
0:18:39
workaround as well in this case
0:18:44
ah come on it's a friday night i deserve
0:18:52
because we we just want to bang this out
0:18:55
as soon as we want to um i'm just going
0:19:00
thing in in a separate file
0:19:03
and then do basic in that way because i
0:19:08
fry all that code at the moment
0:19:13
had a long day had a long day
0:19:17
so if this one comes there and then
0:19:21
i would want to display
0:19:30
part code ui which is here
0:19:34
and then i'll get the script tag
0:20:03
the id for the holder so that would be
0:20:27
i wanted to pass code
0:20:45
and then basically all of them close
0:20:50
yeah this should do it
0:20:55
let's check if it really does
0:21:06
okay cool so it doesn't do it
0:21:11
uh reference down i need to bring in
0:21:17
on home page don't fail to
0:21:21
on pages on on home page load is not
0:21:44
okay reference is on there okay it's not
0:21:48
right so i need to import
0:21:56
yep i need to import the jquery
0:22:19
download jquery yeah
0:22:22
that's fine production
0:22:29
let's install this
0:23:06
so it's three point have a
0:23:14
all right let's run this one now and see
0:23:51
okay so it's not coming up
0:23:55
same error you'll be on script.js yeah
0:24:09
you want draw new card
0:24:23
leave me reference here
0:24:33
yeah you get there
0:24:34
i know but there is
0:24:42
the in that case what we do is we
0:24:51
how do we add a background music vidcon
0:24:57
is one of our royalty-free track
0:25:01
uh you won't have any cooperation
0:25:06
yeah it's it's not um
0:25:09
there isn't an option to
0:25:15
but we can yes always make it not a
0:25:22
okay seems like that didn't do it
0:25:30
jquery didn't do it
0:25:36
jake oh we needed to doing that one
0:25:57
okay cool so that comes there
0:26:03
delete it from the other one
0:26:17
okay how about if i
0:26:18
change the music because
0:26:21
i can tell it's making us both be sleepy
0:26:41
that's not bad isn't it
0:26:50
okay let's see if this does the trick
0:27:02
okay so this doesn't do it do it either
0:27:06
jquery script r script.js
0:27:36
all right so that wouldn't do it
0:27:53
actually let's just get a cdn for that
0:28:38
now what we can do
0:28:58
there is our exit music as well yeah
0:29:07
uh so reference to it one
0:29:26
yes jack dev um the healthy energy
0:29:29
drinks are on their way can't wait to
0:29:36
as in i should be getting them either
0:29:39
tomorrow or monday
0:29:43
would you want some as well
0:29:52
can just include a cbn to be honest
0:30:26
yeah that sounds like a plan
0:30:34
okay so if we do this one
0:30:43
yeah let's see if this does the trick
0:31:03
how come the other
0:31:05
in that one is said there is a function
0:31:13
yeah id is that one
0:31:27
there's no one an idea
0:31:40
ah it's a class that's my fault
0:32:01
cool so this is looking good
0:32:09
let's see if this works it should work
0:32:13
perfect so do you really need the script
0:32:22
yes we do because the j
0:32:25
query is working from the script tag
0:32:34
so if i remove that it goes away
0:32:43
because whenever it comes back
0:32:49
for now what we need to do is add this
0:33:02
to our index.html as well
0:33:12
these are links and this is where we add
0:33:44
actually script tag that one and then
0:33:49
to be honest i'm not really liking this
0:33:54
i need to make this
0:33:57
this duplicate code globally accessible
0:34:04
we'll come back to it
0:34:16
so i want to load this and
0:34:38
and that one will be by being a function
0:34:57
now what i want to do is i want to apply
0:35:02
confirmation prompt
0:35:25
let's see if this gives me
0:35:44
cool so this is coming up here as well
0:35:56
so now what we want to do is we want to
0:36:02
only show it when it's
0:36:17
changing your iphones now
0:36:50
confirmation prompt yeah that's fine you
0:36:54
can keep your hair
0:36:55
and then we can basically
0:37:06
i want to get rid of this this is
0:37:29
where is that one showing
0:37:39
oh jquery is already here
0:37:44
done it over there then
0:37:46
don't need this here
0:39:26
okay because it's being
0:39:28
painted off to the head and needs to be
0:39:57
anyone if that needs to be about that
0:40:01
then i can basically
0:40:32
because all the js
0:40:35
jquery tags are underneath
0:40:38
so that can go away as well this is
0:40:47
okay now i need to remove
0:40:52
hide it by default
0:40:55
so we need to hide this by default
0:40:59
which is how we're doing it
0:41:11
confirmation prompt
0:41:31
right that is over here
0:41:38
no you might not be there
0:41:41
be in one day open your legs
0:42:14
disco you change cryptojs
0:42:44
if this is script.js then we need to
0:42:52
close alert and index to html in the
0:42:58
now in the scripts
0:44:19
hold that one and we need to
0:45:04
save we want to bring
0:45:08
actually on load we want to make it
0:45:55
right which is great
0:46:00
it's looking good and when we do
0:46:04
when we click save
0:46:17
then when we click the save button what
0:46:51
so when we press save
0:47:22
be in the front end
0:47:37
click on some patch notes
0:47:55
so knows from db now
0:47:58
i'll be toast message
0:48:01
close toastmasters
0:48:16
are you going to join for password user
0:48:18
does any action um no so get there i'm
0:48:24
gonna ask for password when the user
0:48:27
wants to save because
0:48:30
we don't want everyone
0:48:33
to be hitting this
0:48:40
we want to ask the passcode
0:48:46
the user would click save in that way it
0:48:49
would tell us that if the password is
0:48:52
not the same as the admins password then
0:48:56
they can't basically save it
0:48:59
only the admin would save it
0:49:04
i thought that i thought the passcode
0:49:06
was only needed for board
0:49:10
yes so it's only needed for board admin
0:49:16
so that would bring us in another
0:49:19
functionality where we would want to um
0:49:23
if it's not the admin then we
0:49:27
so either we do it in a way that if it's
0:49:31
not the admin then
0:49:33
we don't sh we don't show this save
0:49:37
but there would kind of have a complex
0:49:41
functionality in there in the time that
0:49:44
but alternatively there's a workaround
0:49:58
leave the same button there but only
0:50:02
if the password is
0:50:05
which admin wouldn't know already
0:50:11
anyone except the person who doesn't
0:50:13
know the password will won't be able to
0:50:15
save the notes essentially
0:50:19
does that mean only the admin can add
0:50:24
there are two scenarios
0:50:27
only the admin would only be able to
0:50:29
save everything to the database but
0:50:33
anyone can basically add notes
0:50:58
add notes to the board itself
0:51:00
but only the admin would have the
0:51:06
they would know the passcode that they
0:51:14
what's the difference between add and
0:51:21
i say add that means that we are adding
0:51:24
the board on the ui
0:51:30
when i mean save then everything from
0:51:34
the ui is being saved in the database
0:52:06
so where's the same functionality
0:52:10
many more always offense questions
0:52:16
took thank you thank you gaga yeah again
0:52:52
okay this is save button which is fine
0:53:05
document and what if i do
0:53:28
so if the user is different to admin how
0:53:31
will the admin save
0:53:34
save one knows from the known form
0:53:44
can save everything
0:53:47
as on the screen at that time
0:53:51
by entering their password passcode
0:53:54
which only they would know because they
0:53:56
would have created a passcode when they
0:53:59
were creating that board
0:54:13
i'll say add is only in on the browser
0:54:19
but when they click save then
0:54:22
it will be saved to the persistent
0:54:24
storage which is dynamodb obviously
0:54:27
if i'm the user and i add the node
0:54:32
is only in memory in my database then if
0:54:37
you have no control of the notes i've
0:54:47
why would we have no no concept of the
0:54:51
node that you have added
0:54:55
we are actually taking everything that's
0:55:00
on the screen as you
0:55:08
gets as in kind of packaged in a object
0:55:14
which then gets saved in the dynamodb
0:55:28
how do you get something off my screen
0:55:39
that's all in action so
0:55:43
created a board and then i send you the
0:55:46
link you access the board and then
0:55:51
when you and i am both of our of our
0:55:56
as in on the browser
0:55:59
itself and then everything that's on
0:56:03
this on the screen or the other browser
0:56:05
if you want to say it
0:56:08
that's all being saved as an object
0:56:15
and that one board hat
0:56:18
has multiple notes in there
0:56:23
and the whole board is an object itself
0:56:30
you will you will you will um
0:56:33
see that i'm pretty sure when we um
0:56:44
yeah yeah that makes sense
0:56:46
right um i really didn't need to find
0:56:52
what's being done when
0:57:13
that's clearly not it
0:57:17
popular board notes map
0:57:20
oh this is all tories code
0:57:24
i need to understand it
0:57:30
and it will websocket
0:57:33
load the board cards if exist
0:57:38
redirect to no load doors page
0:57:47
i can start from here
0:57:49
it creates a new board which is fine
0:57:53
get bored name which is that one
0:57:57
creates award in post board ah okay here
0:58:01
this is basically the one
0:58:08
stash just posts a board name
0:58:12
grab one down with you from the board
0:58:18
created board pause board name yet
0:58:22
girl board names from the specified url
0:58:26
don't need that value their
0:58:40
the board by name not post notes
0:58:44
ah so this is the pause page notes
0:59:10
get both from query strings
0:59:15
set local storage let's have a board
0:59:22
no no not that one redirect to home page
0:59:30
go to board url not that's not the one
0:59:52
uh huh there we go
0:59:56
this is where we need to
1:00:04
there we go perfect
1:00:06
so this is where we need to do the check
1:00:16
we need to show it over here
1:01:25
all right well we would have to come
1:01:31
i just keep it there
1:01:41
okay yep i need to add this one
1:01:45
let me check this one
1:01:47
and i need to add this one
1:04:01
right that one is all done
1:04:10
right guys thank you very much for uh
1:04:13
thanks for joining um been a pleasure
1:04:16
having you all and
1:04:18
yeah have a great um saturday we won't
1:04:23
streaming tomorrow and um
1:04:27
yeah we'll see you back here on
1:04:29
sundays so if you want to check how we
1:04:31
get the passcode and the
1:04:36
only when the user
1:04:39
knows the passcode feel free to join us
1:04:42
on sunday because we're going to be on
1:04:47
same time same place and a different
1:04:50
task all right have a good have a good
1:04:52
one guys for the best
1:05:06
i did a little cartoon
1:05:10
oh and no one's here now
1:05:13
as in no one but he shared we will add
1:05:20
all right have a good night get there
1:05:22
and i'll see you on sunday cheers bye
