Build a TikTok clone!

[Music] [Music] [Music] i found someone new now i have more room no more formats to change [Music] me [Music] love that guys [Music] hello everyone and welcome to a a little impromptu workshop here on friday um i am ryan wilford and i'm joined by kirsten hunter hello kirsten how are you yeah hello gabriel nice to see you um so to today we are doing a uh a workshop building a tick tock clone with javascript now this is a workshop that we have done a few times but today's gonna be a little different and i'll get into uh why that is but if you guys can hear and see us just fine let us know we want to make sure that the the stream is working so give us a thumbs up in the chat uh if everything is looking good looks like we have a few people here a little small little stream today um i'll get into some housekeeping here uh let me make a small um just a little bit of housekeeping so we are streaming today on youtube and twitch uh twitch is kind of our backup stream in case youtube has some problems or goes down or anything um thanks david thanks jose for the thumbs up um so yeah twitch is kind of a backup we don't really monitor the chat over at twitch uh so if you have any questions during the stream feel free to ask us on the youtube chat and we have some people that are ready to answer your questions um we are going to be yeah yes oh yeah yeah i was gonna get to that um speaking of questions we are also have a discord in case you are unaware uh we have a growing community of i think we're close to 20 000 maybe we're a little less than that um but that's where we we can answer some some longer form questions and questions like outside of the workshops when we can't see youtube chat obviously um but specifically oh hold on they can't hear you hold on i can hear you let me figure this out uh oh i think i know what's going on sorry thank you not yet not yet all right try it now okay what's up can you hear me now just a thumbs up would be cool problem is okay they can hear you i cannot man we always have weird uh problems you can hear me though i can hear you okay you can hear me oh my goodness they can hear there's always something that happens every time huh oops all right try it again yes you hear me now what is going on no let me make sure oh you know what i think i know a few more seconds skype is probably the wrong output there's a lot of moving pieces speakers all right say something yes but now they can't hear you apparently they won't let me hear you while they hear you all right try it again hello there we go everything's working fantastic man yes there's so many things technology okay we're good thank you guys for being patient while we um you know shook out the bugs for the okay i'm catching up with all the chat yes i i realized that you could hear all of you could hear both of us i could not hear kirsten so it was not going to work as a conversation between us if i couldn't hear her so everything is working now though so we're good let's move back to yes so intro discord if you want to ask us questions outside of the of the workshops discord is the place to do it also today we are going to be using some new technology to do this workshop and we want your feedback um and the best place actually the preferred place for that feedback is in our discord channel there is a new channel for workshop feedback um that you can give us some some feedback on on how you think the workshop went how the tool worked for you we'd really love to hear that this is kind of an experimental um workshop in that sense so please uh join our discord if you want to give feedback and if you if you raise an issue that no one else has raised before like if you're the first person to note something that's not working in the workshop and it's a good suggestion uh there will be swag so usually we do mentee and you race at the end and some people get swag but this is actually a place where you know if you pay attention you work on you figure out things that could be better um you could just get some cool stuff so yeah yeah all right so some of the tools that we'll be using uh we're going to be using astrodb for our database on this project um astrodb is a fully managed cassandra instance in the cloud it is uh a it's completely free to get started um it's globally scalable there's no operations obviously it's fully managed and uh for the free tier you get 5 million rights 30 million reads and like 40 gigabytes of storage uh for the free tier and you will not be required to enter a credit card or anything to sign up um it's completely free you get like a 25 credit every single month um to use it so that's the the database that we'll be using today [Music] we're also going to be using netlify for our global cdn and hosting solution for our app this will allow us to to deploy our app actually to production today and it also gives us access to using serverless functions as well which is important it's something that we've used previously if you've if you've joined us in workshops the the new tool that we'll be using is called appsembler and we have a link here this little the uh the link that we'll be using and i'm gonna post it in the youtube chat here and yeah it's also in the um in the uh lower left hand corner in the links that we have so you can click on that if you want yes and one of the reasons we're using it is because um we really want to have a great lms experience we want to give you we want to have the opportunity to ask you questions as we go and uh store up you know your answers to those questions um as things move along so um you know this is we're just trying to make a great um experience for you and that's one of the reasons we really need your feedback so that we can make sure that this is working for you yeah so the way appsumbler works is it's going to be kind of a guided um tour through this app and we're going to build it um as you go kind of from the ground up and appsumbler is going to be this the environment um it's going to provide an environment in which to do that so if you all would go to the link that i posted in chat also the link that you see on screen um and you can uh get started i believe the sign up uh is is it just a like a normal email this is a regular email and a password uh one of the things that we're looking to incorporate in the future is uh just like for our regular uh site we're gonna add um google and github uh sso like login so you don't have to type all that stuff yeah that would be good all right so now i'm going to hand it over to kirsten who is going to guide us through this uh session and actually i need to make your screen a little bit smaller so what you see on screen is me moving around a window but it's what you should see when you are all signed in and select the tick tock workshop so kirsten let's give them a couple minutes to um get started but i'm gonna talk about uh the different pieces of interaction that they're gonna have so the courseware is actually here in upsembler but we're going to launch basically a vs code instance that will be yours uh it'll be yours for 14 days um if you start again after that you'll get a new one but um and and that will actually have a tour through the code through building the code all of the things that you need to do and then at the end of each piece of the tour you're going to come back here and and we'll walk through answering a few questions um and you know so at the end you'll actually have a graded score and um and if you um if you went through the whole thing and you got like 80 which is not hard to do um then you'll get a badge so um how's everyone doing getting that set up yeah give us a thumbs up in the chat if you are uh successfully signed up and if you're at the course the course is building a tick tock clone with cassandra stargate and no.js yep just click that uh start course button and you will be on the page uh you may have to click what will you learn but um uh the course is um the link is datasacks.tahoe.assembler.com and you need to register so um and the reason you need to one of the reasons you need to register is uh it helps us to organize um the the answers we get in the quizzes but the other reason is when you launch your lab that lab that is hosted in the cloud for you um it's based on your username and the course that you're doing so um it doesn't like overwrite uh someone else's content all right so i'm gonna kind of we we've talked a little bit about what we're going to work with but uh cassandra is a nosql database it's different than a lot of other nosql databases uh it tends to have schemas but it but we we have ways to work with it in a schema-less way one of the things that people find very intimidating about cassandra is um it's it's very fussy in the setup and and configuration uh and so we're using astra astra actually creates a cassandra instance for you and we do pretty much all the management for you so you can just get right into working with the data it's great um cassandra normally you can only work with it in cql but uh our amazing engineers built a tool called called stargate which is basically an engine that runs on top of a cassandra instance and it it exposes a graphql api a document api and a rest api um both cassandra and stargate are open source our company contributes greatly to them but you can run them on your own servers you can put stargate on top of a cassandra instance you have anywhere so you're not locked into what to our stuff um and so we'll be working in react.js um and um ryan actually created an amazing tutorial um uh that you can uh can go to and learn uh about building things in react yes it's quite quite basic thanks for the kind words but it's just it's it's good i mean you know the components and the and the layout and you know it's it's it's actually a pretty decent system i like the way it works but it's kind of nice to get some context so for the course um real quick could you zoom in your screen a couple times it's a the text is a little bit small i want to make sure that everyone can read it is that good that is good right there i think it's good if anyone needs it zoomed in more let us know um so you'll need a computer although it's possible that this stuff might work on an ipad in the future but we totally haven't tested that so um you need to have some comfort with the command line um you know we've had people who are not comfortable with what goes on the command line and what goes in the code so um that can be a sticking point uh the nice thing is this will still be available so if you get lost or you feel uncomfortable with where you are you can always just watch and then come back and do it later if you know node and react great um but i should can you drop the link to that github repository ryan for anyone who might be interested yeah um i will update this later but you're talking about the react one right the react one um i i'd love for you guys to just on the technology experience do you have less than a year one to two years three to five years over five years we're always interested in knowing who comes to our workshops so we can make sure and give you content that really works for you so i just fill in these bubbles and then submit it shouldn't take long so i'm gonna go over these with a little bit more information um cassandra actually um one of the things that's uh amazing about cassandra is it is so fast um really big companies a lot of fortune 100 companies actually use cassandra because they're they can't uh handle uh most of the other databases can't handle the kind of um uh scaling and and uh throughput that cassandra provides and also i mean we have uh with our enterprise uh system we actually have clients who have gone seven years with no downtime you can put in new nodes you can take out nodes everything just keeps working which is fantastic if you're a big company you can't have five minutes of downtime that's a big deal um so astra is a serverless instance of cassandra um and like ryan said it's it's it's free up to a lot and um and you're only charged for what you use there's no credit card uh when a credit card comes into play is if you get to 80 of that um allotment we gave you then you'll get an email and it'll say hey you know you're kind of getting close to the ceiling um did you want to give us a credit card it's your choice if you don't it'll stop giving you stuff until the beginning of the next month um if you do you're in good shape and again sergey does the apis today we'll be working with the document api we actually have different um workshops some of which focus on rest some of them focus on the document some of them focus on graphql to just really help you to work with the different systems so cassandra as you can see um most of the the installations we have for astra is our our three nodes so that means that you get you know two to four terabytes and the throughput um it it could be uh tens of thousands uh per second per core depending on how those computers are configured and you get to choose like how many places do you want your data replicated um how confident do you need to be that all the places where that data is replicated are accurate um they they talk to each other we call it gossiping uh to figure out where to get it but you can ask a question of any node and it will find the right other node to get that data from and give it back to you so it's super um it's very flexible it's really nice um and like couchdb they don't require a schema those are document databases um and the the stargate document api also doesn't require a schema um there's a cql query language for cassandra most cassandra instances do require a schema cql doesn't handle joins and transactions are unbelievably fast um i don't have a button here but i want to talk to how do you organize your data so with a relational database you put your data in a bunch of really related tables um based on the data um with cassandra you create um tables that are designed for specific queries so when that query comes you don't have to do a giant you've already done all that work there is duplicated data throughout but um storage is cheap so it's it's actually okay you're in charge as the developer in making sure that things are um correct so um it's a little bit more work for the people setting up the system but it's also blazingly fast um so you can have nodes you can have nodes um in a single data center or you could have multiple data centers they'll all talk to each other right um and then uh if you want to sort of puzzle over this um it again cassandra is really made for fanta fantastically high levels of transactions and speed to get that information back to your application uh places like netflix and apple um use cassandra for this reason all right now we're in a knowledge check so we're gonna we're gonna check to see um what what the what things are true about cassandra this is a multiple choice uh it's a ch it's check boxes so it's not just one so um let's see there's there's cql which is similar to sql very fast reads reliable uptime and relational tables take a minute and um and and fill that out on your side yes robbie um ap cassandra is ap um it's very very much about availability um it's it's it's the number one thing but it's the performance is also incredibly important um you can control the consistency as it turns out um so you can say when i write stuff to the database uh two-thirds of the nodes with this data have to return and say they know it but you can actually say a hundred percent i it'll make those rights a little bit slower but it gives you the control um to decide what's important so i'm gonna go for so we got cql i talked about that for sure very fast reads yep yep it's very fast a reliable uptime but what about relational tables that doesn't seem right we would do query based tables so let's see what we get okay so that's right it's as if i wrote that quiz all right um did everybody have it did anybody have any questions um uh about uh the cassandra section if not i'll move right along all right um so astra again astra is your it's cassandra in the cloud it's fantastic so this is the stuff that ryan was talking about um one of the things that we didn't mention yet is that um it scales up or down itself it sees what you're doing and it says oh you need some more stuff um so um it's really it's like hands off you don't have to worry about it just you and your don't want your lab don't don't click that button that is a bug okay so um astro yes next okay so what is astra is it a self-hosted mongodb database is it an image to run cassandra on your own system or is it a managed cassandra database in the cloud with a generous free tier i'm gonna go with this one cool i win again i wrote the question so all right so um i am going to actually skip this part because um we're gonna do it again when we get to the lab and um but feel free to take a look at this step it talks to you uh about um how you create a new account with astra and i i oh i did that earlier today okay um don't pay no attention to the things all right so um so let's look at the first one and the last one right um what what language does cassandra understand like so if you're using stargate and astra you're dealing with a cassandra database so sql does not work we don't have the joints it's a slightly different implementation it's very similar um and then stargate so stargate can gives you a rest api a graphql api which is actually featured in our netflix build netflix clone and our document api so i'll move along now we get to launch it so go ahead and click this button and um i already i already launched it earlier so it'll be fast for me it only takes a couple seconds though so yeah and um so i yes that is perfect okay and when it finishes loading perhaps yes so i'm gonna start up at the top it's gonna ask you which tour to start with so we're going to go with astra getting started now the first thing we have to do is uh is build a directory with our new application and this will take some time so for those of you who might still be waiting for the uh the workspace to launch um uh-huh this we're not leaving you behind uh yeah it'll only take a few seconds then great time to ask questions if you have it about um you know our tech stack this this react app does take a little bit of time yeah so for those of you who may not be uh uh familiar with the the basics of react basically what we're doing is we're using a tool called create react app to give us a starting app a boilerplate app that has all the basic files that we need to get up and running and so the the create react app um function here or tool here is just going to create uh that in our in our new folder which we've named astrotic talk um so that's what that's what this is doing right now it's important that you name the the directory astro tick tock because we use it a lot so um at any time in the future you can use a different name but i suggest you do the um and and you know what if when we get to the astra part um it doesn't matter if you're if you're just registering for the first time it doesn't matter what that database is called um and the the astro setup step will actually create the database for you if uh you don't already have it so actually you know what would be i think a good idea would be to do a quick run through of the after piece that's actually a good idea while they're watching and then when they get there perfect um okay so um i'm gonna sign in so you can see you can sign in with github or google and we will have that for the learning system um as soon as we can but it requires some magic stuff so i'm dropping a link to astra in the chat uh so for those of you who are have run the crea react app part and are waiting for it to complete follow us along to astrid we'll get that all set up yeah so um if you are just registered for the first time it's going to ask you to create a database and a key space so the database actually the name is not that important it's mostly for your information about what you're planning to do with that database in between your databases and your tables is key spaces and so key spaces is buckets where you can put similar stuff like you could put products there and you could put images there or you could i mean you know you could do whatever you need so um basically what you'll see is this and um you can pull whatever you want here because we'll we'll take care of it in a bit um so when you look at a database the database i have is called workshops and i have a key space of tick-tock so the key space again this is where i shove my tables right so when i want to interact with my data it's they're going to live in the key spaces when you create your database it's going to ask you for a provider and a region it doesn't matter uh don't pay any attention to the pricing information again you're gonna have plenty for this workshop and several more workshops in the month um you could actually run a small business on uh that 25 a month but uh pick a provider that you like um and the region that's closest to you um and then um it'll take care of the rest um when you first create that database it will take a little while to say pending and then eventually it will say active let's see how oh hey we're done with react setup okay well we can go back through and do it again um so we're gonna now run astra setup um uh real quick i just wanted to make sure uh that some folks didn't get lost when the code editor this uh the vs code here opens up there should be a a window at the top that drops down that you can select the first step of the code tour if you don't see that however in the bottom left and kirsten if you would zoom in on on the vs code here too because it's pretty sweet um oh is it sorry yeah in the bottom left and i'll turn off my my video here oh boy oh yeah if you hover over it it does some weird image it's just so big you will see a code tour uh window on the bottom left if you drop that down you can see all of the steps that we're gonna go through and you can just click on the first one astra getting started um so that's where you can find it if that window at the top doesn't open up initially for you yeah so um so right now we're on the authentication step you can talk because it does tell you this is step one of four in asterisk getting started it's very helpful it tells you stuff all right so um zoom in one more time it's still a little small thank you it seems very very big um how's that a second more more um i think that's good uh i'll let i'll leave up to the folks watching if they want it zoomed in a little bit a little bit more so it's up to you guys okay so um here we are we've done astra setup we're telling you that we want to have a database called workshops with a key space called tick talk so um but now it's asking for a database admin token so you're gonna go to uh astra and in the drop down well let's just look at it right okay so here i am i'm in the astra dashboard but i want a token so i'm gonna go to organization settings under my name in the upper left hand corner and under organization settings there's token management now these tokens are organization tokens it's why it's under the organization set um that that means that your token can work for multiple databases that means if you come back to do a different workshop you know sometime you know next week you could just keep using the same token so i'm going to create a token and it's going to be a database administrator this is important because i want to create structure um i don't just want to interact with the data i also want to be able to define the tables as well or create databases so um it tells you what that token will do and you generate the token now just like any other token generation just like on github or all the other places you will never see this again you can download the token details and you'll get a csv file with those details in it but for this particular case what you need is the third thing don't get the client id or the client secret you want the token this right here this is what you want and you just click on here and you copied it and come back and tell your astra setup and uh if you get a pop-up uh just say allow it's just asking you if you want to be able to use copy and paste yeah in the instance now for me this was very fast yours might be slower if you don't have the same uh database already set up but um this also means that if you um come back and do this again later um it's just gonna see oh you already have those things great it's very fast so um let me move to the next um i just want to make sure that um yeah let's let's have a check make sure you know did everybody get um through that or are you getting through it if it's creating the database um um that's fine um it's we're still gonna have to uh to wait for that so we can do the next step because let's see something thumbs up in the in the chat if you have um successfully finished the create react app step which can take some time and then have uh set up the um the database and gotten your token um just want to make sure that we we don't run too far ahead and leave people behind yeah also because some of these things can take time if we're waiting um we can uh let me talk a little bit about the git repository so the way matlify works is that um it basically creates a site that's connected to um you know a github or a get lab repository every time you commit to that repository it updates your uh database administrator um every time you update your code it updates um your cloud instance so it's pretty amazing but in order to make that work we have to create we have to make our current directory um a uh a git repository so um that's that's what we're going to do um so how's everybody doing um so there there's a question about what role for the token um it's a database administrator for the token um yeah we've got a couple answers we're good um so i haven't seen any thumbs up and i'm hoping um the people are finding it um clear maybe we should yeah i i suspect that the database is uh is uh spinning up and that could take a couple minutes right so um it's fine um hope we got a thumbs up thanks ravi all right all right so i will go through this part uh we're gonna do a little bit more fiddling so um let's let's see so um so the first thing you have to do to make get not complain at you is to tell it who you are and uh what your name is um it doesn't have to be a real email it doesn't have to be a real name it's fine um so get in it is great what it does is it basically creates the repository structure around the files that you have um and it creates uh what it actually what does it um is it creates this dot get directory where it keeps track of your branches and the other information um and your commits and things like that so that's pretty cool so we're gonna get add dash capital a which is a lazy way to say make mine change set all the things except we don't want these things because they're not useful to us and then i'm going to commit it now it's not going to github at this point it's going to commit into that dot get directory um on your local system so um so i now have a git repository on my local system but i need to put it somewhere that netlify will be able to see it so i'm gonna set up a github repository oh and i um pay no attention while i just do something secret here um i i might have run through this uh about 72 000 times um there it is all right so um i'm gonna delete this because that's what we're gonna create so pay no attention this is not interesting at all okay so what this says is go to github and if you don't have a github account just create one that's cool uh you should have a github account especially if you're looking for work coding um nobody likes coding interviews but you know what's cool is making a thing and when somebody says show me your work you can just be like yeah here's my github and you can look at all things and just do a good job on the readmes and people will be thrilled so um github i'm going to create synedra oh no it's already centered tick tock clone now again please use tick tock dash clone because i made that assumption in some of the steps we'll be doing later you don't have to do anything else the default is fine you don't need a ruby file we've already got one it's going it's cool so i've created i need and when you get to this page just ignore it it's not interesting because we're going to interact with it on the command line all right so we didn't actually make any changes but we could commit again it's like yeah no nothing to do um so this is a command that i created to um to help you set up the remote now it's gonna ask you for your github username and you'll put that in there so it's telling you i did i'm gonna do this right so you know how to add that get remote right and this is the tick tock clone in my synendra directory but you put in your own username it'll do the correct remote and then um it it shows you you know these are the remotes that are currently set for your repository so you can make sure yep that looks right all right how's everybody doing yeah has everyone uh successfully created the github repository uh i saw one note i think david mentioned that the link uh on the code tour to open github might not be working and if it doesn't obviously you can just go to github.com i will fix that later actually you know this is such a cool tool let's see what we got let's see what happens if i open github it doesn't work all right well yeah well now we know okay yep yeah i can uh we don't have to fix it live kirsten i just i love this system i know you do but all right so um uh let's go to the knowledge check for the set i gotta hurry up i've only got an hour and 15 more minutes oops it knows thanks sorry it i i you know again i might have been testing these things all right so the first one is what url should you visit to work with astra this is important i if you don't know um you're gonna be stuck later when you wanna do stuff with astra astra is a ui it lets you interact with um your account and um and so you need to be able to do that so um it'll take a couple of different answers but we'll go with astra dot datastax.com um so you guys answered this one really well like what role should you pick for your token for this workshop i do encourage you to look at the other uh permissions and roles and figure out you know how you can create the um authentication setup that you want but for this we need a database administrator what source good management system are we using for the workshop i uh did a uh i did a call back to rcs there's get and uh and there's clearcase um you know there's lots of other ones we could choose but i think we're using it okay so now we're ready to get back to the lab for the next step so i will click on that step and we're ready to start the next portion of the tour so when you see a step that looks like this um that has insert code what it will do is it'll actually replace the code that's already in there so right now you can see there's import and uh report web vitals and then it calls report buttons but yeah we don't want to have that so i'm going to insert code and you can see now um that file index.js does not have those two lines so that's a good question well i just wanted to mention so that's kind of how this uh tool that we're using is going to work um it's going to edit the files you know allowing you to kind of see what what the um the new code that we want to enter in it's going to allow you to just enter that and just by clicking the button but we do also want to make sure that um there's an understanding of of what we're doing rather than just clicking buttons so yeah i just kind of missed it that's a little bit easier yeah that's why we're we're sort of covering it so um a couple of things that happen on this uh default react app is that they have a logo which is the react logo and then they use it here um that's not what we want so we're gonna take the app.js and we're going to just make it just like it is except without any logo stuff and now we're going to spend some more time doing a thing that takes some time um so one of the things i've been thinking um as i set this up and i'm just gonna sort of talk through my thoughts um one of the things we like to do when we have workshops is have you do the work so that you understand what you're doing so that you can take it with you later but would it be okay if we secretly installed the react application and then we told you the first thing we would do is to install the react application but we've already put it in your astra tick tock that would save us some time at the front and similarly here maybe um maybe we put react router dom in the directory for you already um and then we just have a step that tells you uh that we've done that and this is what it would look like if you did um so since some of these things do take a while um would that feel comfortable to you um we don't want to rush through things but on the other hand you know your time is valuable and we want to um we want to make sure you know that you feel like you're getting good value all right i talked to just one all right so now uh we we installed react router dom but app.js doesn't know anything about react router dawn so we're gonna insert some code and what it's gonna do is pull in three elements from that that library to be used a little bit later okay so some of these uh steps we actually have you edit the files and some of these steps we're just gonna pull in files because it saves time and um and then we'll look at them uh in further steps so that you can understand what they're doing so i'm gonna create source pages now the structure that we're going to end up having here is we're going to have uh source pages is going to have our layout pages so we're going to have home and upload those would be the two endpoints that people can visit on the site um then we're going to update um app.js now what we're doing so we what we have here is kind of a little bare ass naked app thing right so that's not what we want we're going to make it so that it can redirect you to slash upload in which case you'll get that upload which is the upload.js we just brought in and home is the slash so bring that in now um again the second thing the the second subdirectory that we'll have is components and those are not pages those are things in the pages so there's gonna be a followers column there's gonna be a header there's gonna be a feed um so um we're gonna make the directory which is source components you can see over here this is actually a live um reference of what's in your directories so when i create components it shows up now i'm going to bring um the header element and i'm gonna bring the followers column element and uh the app the dot css that we that we got from um from react it has a lot of stuff that we're really not going to use so we're going to bring in a file with basic styling and then we're going to do more installations which again i could have done beforehand and i could have just told you how to do it but um people like doing stuff what's up david um you're still working on get that was a while ago yeah jet's actually been pretty quiet um please yeah if you are uh if you have any questions please feel free to uh to ask in the in the youtube chat um we don't have a lot of people so this is true time to shine like there's plenty of time for you to ask your question and uh we'll never say that it's a dumb question because it's never a dumb question um you know sometimes we don't um state things as clearly as we should so in this case uh this is one of the things that we pulled in so it's it's an a it's a component a react component it's it and uh basically it just says header in an h1 that's it very exciting um the followers column similarly fantastic uh we will we will be making those more exciting later all right so we're gonna import header and this is one place we can have problems um so we're importing header from components header so that means i want to be able to shove header stuff in in my app okay so this all right i'm gonna ask you to do something that you shouldn't have to do because this particular element and i we we haven't come to an agreement about how this should work so i need you to copy this and i need you to go under hash shredder and paste it um so so you see here we're importing header from components header right and then we're shoving that in here and as you know what that's going to do is just going to put a little div in there that says h1 the header right so um so i kind of like react because it's like it's like um it's like legos right yeah you build a bunch of things you use them in other apps it's it's super cool so um this is all right so um we have a container and we're going to use flex for it there's a header the so this is basically the goofy clown car version of layout right we want to see where is the header where is the followers column where is the suggested box right so that we can make sure that it's got all of the pieces that we need so home not just um again we're just gonna copy it but we'll take a look at it later yes um so here's the container again we saw that right in the in the css um importing followers column from followers column and and we're shoving it in here and then we have the feed we have suggested box so cool like that kind of makes sense um i'm gonna pull in a new upload.js so upload all right that didn't work let's try it again uh yes so if you have that problem you can just delete all the contacts or you can just redo the copy so in this case what is the upload well that's where you add new videos to your tock clone right so this is what the data looks like and we're going to use a a netify functions add which we don't have yet but we'll talk about that in a bit and then this is the the rest of layout so let's see how this works now we were having an issue where we were running out of um file watchers there's too many but um i had them bump that up so um that was good so yarnstart is going to start a local development server uh with the code that you have so um it will it will serve it for you react allows you to basically run your own development server on your local system which makes it super great for um for development okay let's visit our site all right let's try it again is it up no uh oh right um see if we can go to sorry i've been testing this on my own system um no i think we'll just go on to the nutlify okay so we'll note that that doesn't work yet but we'll get it we'll be able to check it in just a minute so um let's check out the knowledge check for okay so do you remember which file is responsible for grabbing the application component and injecting it into index.html let me come back and show you like the main files that we kind of have seen so js that's the component right um home.js no no that's not it um so how about index.js okay so what is this doing let's just think about that right hey kirsten real quick um will you go to the app.js file real quick i want to make sure of something a potential hiccup um and scroll up to the top uh-huh in the file okay so for for me um when adding the header tag uh actually for me it inserted the header tag at the top of the file which is actually going to cause an error that's why i um talked through copying it and pasting it because that step is not correct right gotcha okay sorry i i must have missed that i was probably no no okay so so what is the index.js doing what is it doing so it is actually rendering um into the daw right there it's using the app component and then it's shoving it into the document get element by id root which if you take a look in your public at your index.html um this is where root lives right so it's a pretty boring html file right but um so it looks to me like index.js is doing that heavy lifting right there so let's try that okay what do the files in source components and source pages do create templates that can be used to build components create react components to be used building the display define different pages for the application it's both files in source components and source pages what what do those do why would it be better in the github ruby file you have to copy it and change um uh and change windows a lot so we're trying to make it yeah so dude if you um if you have feedback for um for the tool that we're using for this workshop let us know in our discord we have a a channel for that um if you are stuck on a certain point um we'd love to help you through that and and get you back on track uh so if you if you have a specific issue that you're facing let us know um but the the feedback for the tool we have a a discord channel for that um if you'd like to offer that okay so um this is um got a typo uh the top one should be home.js so which files define different page views um home.js followers column.js header.js or upload.js means multiple multiple um answers are okay so so we saw that actually um in in uh in app.js right the the um uh home home.js right because uh it's got the switch and the hash router for slash and slash's home which is again this doesn't say header it has says home and upload so those are the correct answers all right back to the lab okay where were we oh we're ready for nuttify now okay so if your um yarn bail is still running um oh i wonder if that would work i don't know i don't think so i'm gonna have to figure out how these things work but no it doesn't work all right um i am going to go back and i'm going to hit ctrl c um it will happily paste things into your terminal for you but if you're already running a process nobody will listen to you so just hit ctrl c ctrl c not that not that not that there it is okay sorry not on my laptop all right so um so network um we did a quick introduction to nullify um it's really cool it's a cdn um there's lots of different cdns where you can host your your um your files but um netlify actually allows you to use serverless functions and we're going to add functions in the uh the piece of the tour right after this one so um yeah let's just do it all right um if you're interested in more information about um netlify uh you can go to their getting started documentation so you're gonna need to go to netlify um if you don't have an account uh sign up if you do log in so i'm logged in and um i'll just get rid of this one and we'll make a new one yes and oh yes i think this is one of those things that won't let you copy and paste oh no no that's cool all right so from here uh what we want to do is we want to take that repository that you push to github and use it to drive your netflix site so i'm gonna do a new site from get um github i i might have a few repositories so i'm gonna look for the tick tock one all right i still have a lot but anyways so i'm going to use a tick top clone everything is fine um i'm gonna deploy did i push my stuff to not the fine i'm sure i did not well you know what i'm just going to take a little detour because i seem to have not done the things all right so it's good i just didn't do that i guess yes thank you good all right so now back to where we were we were creating that wi-fi site i bet it will be happier now so um let's it doesn't so what's interesting is that what happened there is normally it looks at my um my repository and it makes some guesses about it like i think you want to use maine and also it looks to me like it's an npm thing so um you don't need to change anything you just deploy site now what we need to do is we need to tell that so now netlify knows about your github repository but your workspace where we are here doesn't know about your network site so we need to fix that so i'm going to do a network link one of the things about running uh vs code in docker is that it won't be able to auto launch things but you can um just hover over this uh you see it's command and click if you're on a mac i think it's right click if you're on a pc anyways so we're gonna do an authorize says it's good and come back and you can see oh hey you're logged in good job the first answer use current get remote origin that's what you want just hit enter and you can see it's like oh adoring goldick all right well that's that's a lovely name um but if you look at your environment file which was created by astra setup it's got a lot of information that the code is using in order to work with the database and uh your netlify published version is going to need that too but you don't want to put it in the code right because that's insecure but what you can do is you can push it to the netlify site and it will keep that information associated with that site so um it'll tell you after you run this uh that these are the their environment variables that it uploaded now we're going to build it'll take a little while and do we have any questions um so there was one uh problem with the starting server now when you started the server locally it did not uh bring up the uh a page you could actually see the no no i i need to learn how to fix that problem so um right so we're not able to view the yeah the local development server in this environment but we're using netlify to host it and we'll be able to see the results there yeah um cool so we're running the netlife build awesome yeah you're welcome jose um something else about this co-tour is if you want to play with this stuff a little bit more outside of the workshop um there is a docker image and you can just pull it and run it and then you can do everything locally and all the links will work we'll figure out how to make it work on assembler um it just um it's it it it it's there were a lot of things okay so now we're gonna deploy it um the dash p means production and i will of course tell you that you should never ever ever not in a thousand years deploy to production without first deploying to staging but in this case it's a demo so i'm just gonna stomp all over the rules the network my status if you do that in your work so this is actually really nice so it shows you what the admin url is you can see you know what what what netlify thinks and uh there's a site url so i'm gonna command click on that blue site url look at those things i told you it was like a clown car so um so now you can see um that the application is doing what we want right basically all we did was the layout and we wanted to make sure we knew where the different things were going to go and now let's do a negative knowledge check okay what does netlify do for you does it host your site in the cloud this is a multiple choice you can choose multiple things host your site in the cloud does it store your code does it provide serverless functionality or work with new.js and python what what do you think brian um i think that it hosts your site in the cloud also provides serverless functionality yes uh store uh does not store your code but it probably works with node.js and python it doesn't no python no python well i'm you're i'm sure you're sad about that well there's other options all right um how can your site be seen publicly would you use netlifedev add a site to netlify and push your code or put a hole in your firewall i think add a site to nutify and push your code oh i'm so clever all right so now um i think the next thing is just yeah time to head back all right anybody yes no not host your code that's a github okay so remember i talked about functions uh that you could have serverless functions so we're gonna take a look at a couple things so add data.js um uh we'll put a new entry into the database so it's gonna post.create a post my first post right and it's in a try catch because we're gonna ask but post.create is actually calling the um the stargate document api and and something could go wrong right so um it's going to create that and unfortunately i'm gonna have to figure out how to get to that owner we'll see all right um uh and so a post.js um is going to uh do a post.find so our collection api um again that's going to be a call to the api um to get the posts and we'll set that up and then um so now we'll find out tommel is a it's it's a it's what you do to tell network stuff like um so we have our functions in a functions directory right that's great but um how does it know that well it knows that because we're telling it there's a lot of things that you can figure in your netify.com and now i have to figure this out um i'm going to run that if i fido i think i think if i do it from within the console [Music] let's see so it's actually very complicated um the project is running at 172-2405 and then um it's gonna wrap it up into 3000 and it's going to wrap it more up into 88.88 and i'm not sure which one won all right so let me try something um i'll put it in the the chat if it works 88.88 um girl hmm function not found all right well let's see if we we're probably gonna not be able to play with this so your stuff isn't gonna work which stinky um all right i'll fix it but all right um all right well i'm gonna need to work with the assembler people on that okay so basically add data was gonna add one thing and uh and post was going to show you the posts that are currently in there um you you won't have anything in your database although i do have things in my database so what i do will actually work and what you do will work um if you uh run it in docker on your system or as if you wait uh just a bit for us to figure out how to make those links work um so yeah let's i don't know let's see i asked them to open up these ports all right well okay sorry about that um all right uh let's do the functions knowledge check this is important you gotta know how this stuff works because this is great it means that you can keep your code in the cloud you don't have to host it anywhere so uh what does the functions directory hold predefined react components serverless function definition or components to use in pages hmm well i'm gonna go with the very cleverly and sneakily named one that has the word function but but it's great it's just like lambda in fact it is lambda behind the scenes so that means you can have your cdn um take care of of you know the functionality you want to add as as well so what file is used to set specific information for nutify like the functions folder and what action it should do um when publishing we were just there it it the netlife part is pretty easy right but what what was that end part it was tommy awesome okay so what do the functioning files have in common so let's in order to answer that question let's go ahead and look at those again so we got adddata.js so um it makes an astra client um it creates a post okay and then the post creates an astra client and then it does a find which is you know probably get right so um so let's look at the knowledge check so you got an astral client does everyone use create actions no no you can actually and if you use astra client with rest like you can do the whole thing right re uh you know get put post delete all the things you can do them so so it's definitely not using create or get but they do call external apis that connect you with astra okay uh let's go back so you see uh you can actually poke around in your code and it doesn't mean you get lost we already we just did the functions knowledge check so i'll click on that one and go to populate data which of course is not going to work because you can't use the browser but um let's just look through it right okay so um we're gonna so right but right now we're just hard coding this right but over here in our resources directory you'll find a data.json right this is the stuff that's in the database pretty cool so um what we're doing here is we're changing adddata.js instead of doing the hard-coded thing we're going to pull it in from that data file and then we're going to iterate over the items in that json file and we'll create posts so let's do that and then we're not gonna do that because we're not smart enough to know how to do that yet sorry i mean i was up all night what we could do is is um push it to notify and then use the netify site to see it um yes that is a good idea i will okay so in order to do that the excellent plan i'm going to um i'm gonna get add a and then i will get commit um testing functions um get push origin main um another way you could do it if you didn't want to use the git commands uh is to just do the netify um build and then notify deploy dash p because that will use the local files uh and not this yeah yeah that's good i just i i i like to keep my yeah repository and fair enough i just wanted to give another option to others who maybe didn't follow the git commands that you did so you could run the netlify build command and then netlify deploy dash p and that will do essentially the same thing in this case right but it is nice for us to point out here that i'm pushing um or maybe i'm pushing i don't know maybe i'm not pushing but i'm theoretically pushing to github and netlify is watching my repository as soon as nullify realizes that i've made changes to my application it's going to rebuild so we'll go back there after this happens and we'll just take a look at nullify and see um where i can check the status of that um of that deployment just any minute i don't know what's up with git the internet does not like me today i'm tempted to start again but but i've invested so much time already it's on cost fallacy i'm just going to do it again there we go let's see and if not i'll just do that if i build and push it up yeah i'll do that there we go well at least somebody's listening something worked okay uh let's check and see if you have any questions uh no questions so far yeah it's been pretty quiet all right um while we're waiting for that why don't we go ahead and do the data populate knowledge check and then we'll come back to our window when it is hopefully done something so what data format is used when using ondata.js is it xml and json hdmi and then there is kind of a clue in the name of the file i think the data.json file a javascript file thank you very much no it's json actually if you talk to the guy who made json he says okay i guess he's like the jason people and the json people he's like i call it i like to call it jason it's one of those well it's i mean he can call it whatever he wants he invented it um okay um do i have to follow the schema uh yes every cassandra database has a schema no the document api allows you to interact using schema's calls yes to know how to sort thanks and i'll actually say you probably know what the answer is folks because i mentioned it but um cassandra by its nature does require a schema the document api is something that stargate makes available to you where it handles all of that and it it actually provides a lot of really cool functionality for accessing pieces of your data blobs um with with particular uh calls so um for certain um applications it's really amazing but we're just gonna go with no and what happens with an error so i'm gonna go back here um post.js is called as wrapped and try catch so what happens if it's called to astra gets a 401 um so let's look okay so it it does post off find um what happens if it gets a 401 is it return status code 200 is there an error do does the error need to match this 500 or is it just any error is always going to be a 500 which is really bad um application writing and you should never do it uh but uh since we have this 500 do we have to have a 500 does like nothing happen let's uh let's think through it all right so this authentication error means your permissions aren't right that's what a 401 means the post.js call will return a 500 error because it did not succeed note that um if you're a nice developer you would actually catch a 401 specifically and you would return a 401 telling them that you need to fix the permissions for their token right because that's what happened um nothing because it doesn't match the 200 or the 500. it'll just work because it wasn't a 500. or oh i didn't publish the changes it's not a correct answer it's not so um it's the top one right and um and and here you know i will i will say um it's really nice if you can give people super um verbose error messages when goes wrong especially when it's three levels right so the react application is calling the function which is calling an api like where did it go wrong so um oh no what did i get i don't know that's that's terrible ah maybe that's the correct answer nope huh well um maybe this one nope it apparently the quiz is a little bugged yeah when you click show answer what does it say oh you have to do the correct answer and the other correct answer that's a trick question yeah it totally is all right uh okay so uh where are we oh builds complete uh netlify deploy okay so if i go to here and then i say dot net [Music] does it do anything maybe it might have to be on a different porch hmm let's try no just know all right well um trust me folks it does work um but we're gonna move on uh okay um let's um this is going to be um we're going to kind of go through this pretty fast because there's a lot of pieces and i want you to at least be familiar with them so you can look at them later um so we're gonna update our components we're gonna add new information now we're gonna add some cards and those cards are used for layout so we're gonna have a feed it's gonna have cards we're gonna have suggested followers they're gonna have mini cards there's gonna be micro cards um so we're just gonna copy all those things and then uh we're gonna update our app.css because now there's gonna be other things to style pulling in the home.js and index.html and the so um what we just did for the index.js i'm going to show you because i don't think i actually have it in a step but um you remember that the app dot js have the app component in it but we're just actually putting that component here in index.js it's a thing that runs everything anyways and so it's not super helpful to um to have a separate app.js file so um it's just another layer of abstraction so um we went ahead and deleted it um and now we're going to just use this this version that's within the um index.js okay so now um one of the things we want to do is follow and unfollow users um and uh let's look um so again we're creating the client so this is a function right it's going in the functions directory um users um um it's gonna users update so that's one of the collection things that's just a that's a put on the uh the item which has body user id um so the next thing is we're going to um have add.js which is what upload.js will call to add new videos so let's take a look at that so um we're taking the event.body that we send from upload.js um and we're going to create a new um a new post okay so the implementation in home.js um so what i'm doing here is um we copied in a pretty big file the home.js um so i'm just going to highlight different pieces of this just so we can talk a little bit about what it does so if user to toggle is set um this is how we toggle it so again we we're um doing a put to edit and we're sending the user and uh the data is basically is followed um and so with this call this toggles it right so if it's true then it'll make it false and if it's false then it'll make it true um so upload again remember i said there was a a pile of data that we would send uh to the add function so this is how the data works um it's um these are the the pieces of information we have um the if you if you looked at what we had in um in uh home.js um we're sorting users by whether they're followed or following or whatever so that that makes it you know valuable to know right or is followed is is it followed by this user um so so that's that's very helpful okay so again we would like it to work but it's not going to oh yeah you know what um maybe i can bring up one that is working i don't know i guess i need to start it fortunately it doesn't take nearly as long as it used to all right um now i want that console where's the console i wonder if they have browser preview on that other one i don't know okay um right let's do this no oh that's why it's not the right one it's my catacuda one there we go all right okay well that'll do just be a couple minutes um so we don't actually have a final exam um normally we do have homework but um we don't have it this time um but i would love to answer any questions you guys might have around um the oh yes yes so um so uh i will you can actually you can go to any step in the tour um you just go back to create.lifesite so um the first thing you're going to want to do is you're going to want to visit netlify and you have to create a site new site from get right and choose that tick tock dash clone uh repository once you've done that you can come back and you do a netlify link it'll ask you to authenticate with netlify you'll need to do a command click to open that authentication url i just click the green button and then um when when the link comes back what it'll do is it will um ask you uh what um what github what netflix site you want to use so it's got these weird names like adoring uh gold lick um you know it's there's just a youthful salmon quirky allen you know so uh but you don't actually care what the fancy name is right you're just um going to oh it failed that's why it didn't work um sorry weird okay um so um you're just going to pick that the one that shares the same git hub repository as the workspace does um this uh netlify env import.emb you're just gonna you can actually just look at the file and see okay so we took that db admin token that you had um we said it in a couple places because different code uses different things the asterisk dbid that's the unique value it is actually your cluster id as well you may need that later and it tells you what region it is and um and the the key space that you've chosen and then this is the graphql endpoint which is useful for some of our other workshops so it took all that stuff it just basically did all that stuff for you right but you have to tell matlify so when you do um this netlify env import emp what you're doing is you're uploading those environment variables into the netlify environment for that site um and then uh the build is just a build uh does basically npm build um deploy deploys to production and then a net effect status tells you um all the things you might want to know about your nullify so was that good is there did you have any specific questions um we'll see if they respond um so kirsten were you able to um push the final version of it to nullify and see it'd be interesting to see yeah uh no i tried and it's i think it's on a different i think it's on a different um uh port um is the pro think i need to figure out where it is i think that even on nutlify it's on a different point so um if i go here um oh it failed that was the problem i mean i just remembered um so source index.js has a problem no no one doesn't hmm um uh in uh window uh mentioned in step seven add functions um the uh the ad personalization the microcard final is missing in resources folder let me take a look at that that's very possible oh yes it is um okay i will i will um fix that out but let me um so let me teach you a a trick um unbeknownst to you there is a full um instance of the completed application um it is in opt workspace tick-tock and uh so what we're looking for is we're looking for a source components microcard and we're going to put it in resources then oh that looks right so i guess all we need to do is change that copy yeah i don't know where michael card final is well i'll figure it out um it'll be fixed soon but okay so one of the one of the resource files or was just missing okay yeah um but um anyways um so so um you know guys um we we would love to um to get feedback on how uh you'd like this uh normally we will have a um a uh homework and or a final exam we will also what what that actually does for us is it makes it easy for us to see you know how people how people are learning the content we're giving i mean this this um workshop had a lot of content and i you know i tried to take the time to explain it but there's so many different pieces that um we know it can be overwhelming so you know did you like the code tour parks did you um did you like you know how the the course is in uh appsumbler um you know what would you what would you like to be better we will also have a survey at the end in the future but um yeah yeah to that point um if you want to give feedback if you have any thoughts of how this tool works and how you like it or dislike it or have any suggestions the place to do that is on our discord and i will get a uh a link to that um i believe this is the right one um and you can you can join our discord and there's a channel for workshop feedback uh so go ahead and go to that link and and join us there and give your feedback there okay kirsten do you have anything else no i um i can't well um actually i was trying to run it locally but i am afraid that i don't have one that's all set up oh but i could i could use the one in the other place hmm let's see all right um yes astrid made a mystery sounds good all right and here we go yeah it's all good but i don't really want you to do that i just wanted a window all right cd um workspace tick tock and then so um yes yeah this this will work but um it's it's going to take a long time because i have to install all the all the pieces but um but yeah we can i we don't it's probably going to take 10 minutes and we should probably give them their time back um if they uh don't want to ask us about anything yeah um so i'll go ahead and just do some final um wrap-up stuff so i will take back this and again remember people if you put good feedback in that work spot workshop feedback thing there there is swag that you could get it's groovy swag so it's like t-shirts and hats and water bottles so all right so thank you all um for going through that new tool using app assembler for this workshop uh again like i said feedback join our discord and give us your feedback i'll show you other resources that you might be interested in uh if you go to academy.datastacks.com we have a lot of different courses that you can take there to continue learning about cassandra and and there's a few different tracks there for certification um if you're interested in that um datastax.com dev is another place with a few different cassandra related courses you can check that out community.datastacks.com is a stack overflow like forum place that you can ask questions uh and and get answers and stuff so it's really useful um tool and uh kind of a community that's building there as well um and then obviously the youtube channel that you are currently on we do workshops every single week multiple times a week uh so if you'd like to subscribe and get notified for um when we go live on with different workshops or when we release different videos because we do make some standalone videos as well go ahead and subscribe and be notified about that um i mentioned certification so there is a uh a few different tracks for certification there's the developer the administrator and the kate sandra these are all cassandra based certifications and you can go to academy.datasacks.com to find all of the courses that go through all that content so you can prepare yourself for the for the certification if you're interested um and if if you want to know of upcoming workshops what we have kind of in in line for the next few weeks you can go to datastax.com workshops and you'll see all the all the upcoming workshops that we have scheduled and you can sign up register for them with uh with eventbrite and uh and uh look forward to seeing you there and of course one last plug for our discord uh you can join that i i believe that the link i have a link in the description or in the uh the chat that is more updated so join us there ask your questions uh outside of the chat if you'd like um and uh with that thank you all so much for joining us on this friday we hope that you enjoyed it and learned something and we also hope that you have a great weekend yeah and have fun um i um i'll try all of the i'll update the course with how to graph this uh also via docker so if you want to run it on your own local system uh you can do that as well all right uh have a good weekend everyone see ya thanks and as always don't forget to click that subscribe button and ring that bell to get notifications for all of our future upcoming workshops imagine a being gifted with powers from the goddess of cassandra who grew those powers until she could multiply it will move with limitless speed and unmask hidden knowledge with those powers she was able to fully understand the connectedness of the world what she saw was a world in need of understanding from that day forward she sought to bestow her powers on all who came into contact with her empowering them to achieve wondrous feats

Channel: DataStax Developers

Views: 644

Rating: 5 out of 5

Keywords:

Id: g4rBeRVysvY

Length: 112min 16sec (6736 seconds)

Published: Fri Sep 03 2021