Build a TikTok clone!

i found someone new now i have more room no more formats to on the same page [Music] me [Music] [Applause] [Music] hello everyone welcome uh to our building a tick tock clone with javascript workshop i'm ryan wilford and i'm joined by kirsten hunter hello kirsten how are you i'm good awesome so thank you for uh being patient with us everyone we had a little bit of technical issues at the beginning that's why we're starting a couple minutes late uh but if you can see and hear us well uh and just fine let us know give us a thumbs up in the chat so that we know that we're coming through loud and clear all right thank you lamar we have a thumbs up make sure everything is working well uh while i'm waiting for that i will go ahead and get started with some housekeeping um just to go over a few things so we are streaming uh on youtube and actually i i think we are only streaming on youtube today uh not twitch so hopefully youtube continues to work just fine um uh we uh you are welcome and encouraged to ask questions in the youtube chat we have uh several people uh that are are ready to address your questions and and i'm watching the chat as well we can uh answer your questions live as you have them so please um this is an interactive workshop so please ask your questions in the youtube chat and we will get to it another place that you can go to ask questions uh especially long term questions that are maybe outside the workshop is our discord uh so you can go to our discord i'm gonna drop a link in the uh the chat and you can join a growing community of people that are interested in learning about cassandra as well as all sorts of other development technologies as well um so one of the tools that we'll be using today uh is oh let's see okay looks like we have some thumbs up that's good awesome um okay so one of the tools that we'll be using today uh is astrodb that's going to be the database that we're using um for for this workshop so astra is a a cloud-based database as a service it's built on cassandra it is completely free to get started you get a a monthly credit every month to to use and no credit card is needed to sign up so it's completely free it allows us to utilize a nosql database a very scalable and powerful nosql database for all of our workshops and all of our projects and you get enough credit to run a small or medium sized business off of it as well if you're interested in that so we'll get into some details on how to get all of that set up um in a little bit um uh junaid uh asks shall i go ahead and log into my astrodb account sure absolutely if you if you have one all set up already then you can go ahead and log in and get ready for that but we will we will definitely walk through everyone on how to get all that set up a little bit later um netlify we're going to be using netlify for some kind of a local development environment and we'll go through the details on that but it allows us to access things like serverless functions for our app which is very useful we're not going to be i don't believe in kirsten you can correct me if i'm wrong we're not going to be utilizing the um the hosting uh side of things actually actually we are yeah okay i added that because uh the um it was having trouble with the ports on um in there so cool so we'll we'll be checking it out a few times um as we go through awesome so i guess what that means we will be using the hosting site of netlify which means that you'll actually have a a tiktok clone that is deployed to production by the end of this workshop um which would be you can share with your friends it's great and finally um we are going to be using a new tool today maybe some of you uh have uh are coming from last week's workshop this is a kind of a repeat of last week's friday workshop um and uh and one of the things that we're testing out is this new technology called app assembler which will allow us to kind of build this app from the ground up kind of in a guided way so we're going to be using appsembler and you can go to the link that you see on the screen you can also type in the chat hands-on exclamation point hands-on and that'll bring up a link to appsembler and you can go ahead and create an account real quick and log in to the course there and kirsten will take us through all of that all that content so without further ado i'm going to hand it over to kirsten who's going to walk us through this content and again feel free to uh ask questions in the youtube chat i am keeping an eye on it and uh and i'll interrupt kirsten if needed all right take it away all right so um if you go to that link and then you chew you may have to register um or uh or you could just log in if you've done it if you've done it before um and then once you register you're gonna pick the building and tick tock clone with cassandra stargate and node.js and that's what's on my screen right now so um you can actually see the steps that we're going to go through this will help you decide if if this is the correct method for you so what's going to happen is i'm going to walk through some basic things and then um we're going to go over the pieces of technology that we're using uh give you a little bit more information about those then we're going to have we're going to launch a lab it's is if you've done git pod it's like git pod but we have a little bit more um control over it so uh we used a a code tour to help walk you through the steps and then we'll come back to studio after each section and um and take a little quiz this is going to help make sure that you have good understanding of what we've done so let's start with what will you learn so as as brian said you're going to work with cassandra it's a nosql database what's very interesting about it is that um the data is organized differently in cassandra really not going to highlight that but we do have some other courses that highlight that but basically in cassandra you put data into your database um for the kinds of queries that you want to make not not in tables like like uh like a relational database but um just make make those queries blazing fast and cassandra is actually used by um many of the top uh what fortune 100 companies um netflix uses cassandra and apple uses cassandra they have such a huge amount of queries um that um that they need this kind of performance um so then there's astra one of the things of the other things about cassandra is it's a little cheeky to set up at first a lot of people get scared off by that um so astr's great it's a free hosted and managed cassandra instance you go in you click button you get a database you're ready to go we are handling all the scaling and um and the tr and uh and managed all the settings of this android has many settings uh but you know so we have some basic ones for the free tier um and then there's stargate so cassandra speaks cql not um not sql and uh some people don't really want to work with um with database uh languages while they're while they're working so um so we actually created stargate um another thing i want to point out is both cassandra and sergey are open source so if you like it but you don't want to use our hosting then you can make your own cassandra and you can set up your own stargate and sergey exposes cassandra visas via html apis so um graphql document and rest so you don't actually need to to do those cql commands and then finally we're going to work in react.js if you're not familiar this should be a good intro if you want a little bit more we have a react basics tutorial on github um so your computer uh to do the course um you need to have some comfort with the command line you need you need to be um okay using the terminal and then a basic knowledge of node and reactor helpful but not necessary um i would love for you to let me know um what technology experience you have um so you know have you worked with cassandra javascript new dot js java python go um if this isn't another another technology that you want to include there just go ahead and let us know in the in the chat room so give me a thumbs up when you're done let's see does anybody have any questions about um about anything that i've covered doesn't look like there are many questions at the moment okay well i will move on yes and then so as i said cassandra's is the nosql uh open source database number one thing i didn't mention is that cassandra tends to want a schema which is different from other database um implementations but we have a document api that that kind of does that for you so you don't have to have a schema um so astra he used to say it was a free 25 credit but basically you get millions of transactions uh 5 million rights 40 million reads uh 80 gigs of 60 gigs of space um so that's going to cover you for a lot of stuff and uh astro does have stargate in it so if you're not familiar with um how cassandra sets things up basically it's a a bunch of nodes and one node um as you can see up here capacity is 2.4 terabytes and the throughput depends of course on the machine that the node is running on but um it's you know thousands of uh transactions per second per core right so that each of your nodes can do that any any query can go to any node and it will figure out who has it um you can configure the nodes um uh so that you know where the data is for something but the the uh the whole system knows where those quote where those uh queries should go as well so um they they just chat with each other we call it gossiping so cassandra is designed to be distributed so you can decide how many nodes you need we do we do give you three with your uh astra one of the cool things is that you can add nodes or remove nodes without any downtime um the other notes will take up the slack and then when the node comes back online uh it's good you you can um you can have multiple data centers and uh nodes in different data centers and this is just um what what cassandra can do for you all right um let's see all right it's knowledge check time cassandra has the following features so uh cql which is similar to sql it's it's really unfortunate that it looks it sounds very similar but um but that's that's true so um very fast reads really so many transactions per second um this is it's never going to let you down um we have in our enterprise product we have uh sites where they've had no downtime for seven seven years so um that's great um that's reliable uptime what it doesn't have is relational tables those are your um standard oracle my sequel uh database tables it just it does it it does its queries differently all right so i got it right okay astra um depending on i mean we will scale and adjust your database based on um what where the traffic is coming from um we can make it global um you don't have to do the ops side of cassandra with astra um and again if you want to build something on cassandra and have it on your own system um starting with astra is a great great way to explore um what the database does and how it does uh everything um yeah so i mentioned those things don't click this sorry i should have gotten rid of it okay you did that so what is astra is it a self-hosted mongodb database an image to run cassandra on your own system or a managed cassandra database in the cloud with a generous free tier and that's what it is and then check the chat real quick okay all right uh moving on all right we're we have a quick we have a quick question kirsten about um uh benefits of cassandra over say mongodb uh which is popular in in mean and mern stacks um what i would say is and kirsten you can hop in if you'd like to is cassandra and they're both nosql databases and they both have strengths in different areas um and you know we're not going to necessarily say that cassandra is uh the best in every single use case but it is very flexible and it is probably its biggest strength is scalability and availability it has great resilience to um to downed nodes or failures node failures um allowing you to access data regardless of if you have a failure so one of the big differences is that is a document oriented database pretty strictly and cassandra is a tabular or table based database but astra gives a an api layer that allows you to use it as if it was a document oriented database so it has some some really good flexibility in that area i don't know if you have anything else to add accuracy no i i do have one thing to add which is that um as we're aware that there are you know tons of people using um using uh cassandra um you know like i said netflix and apple there's just there's a huge number of big companies that are using cassandra so um i would say it's actually good to learn not it's a it's a great thing and uh as well as uh learning about cassandra these things are gonna help you get a job so um so learning about cassandra is is very important um so that's that's where we go so um go ahead and read this uh astra overview if you already have an astra um account um then you can use it um you're going to go to astra you're going to create your database workshops and tick tock we'll check that a little bit later to make sure that you did that all right let's go to the next page um so using stargate and astra how can you interact with your data so you can use cql there's a little there's command line things that work with straight cql or we actually have an interactive console um in the astra information and um and you can use sql there i'll show you that in just a second um it has a rest api uh exposes the the data so that you can work with it um all these are all crud right so um create read update delete you can do anything with your data um using these apis we have a graphql api we're going to actually have a um intro to graphql uh course next week i'm very excited about that and then we have the document api what we don't have is sql cql is very is similar to sql it's kind of a subset but for instance you won't be doing joins because your tables will all be set up for those queries that you plan to make all right let me go to astra and walk through um what you are going to do there you can sign in with github or google it's fine easy peasy okay so databases i have i have created so if i want to create a database i can click create davis if you haven't been to astra before it'll it'll pop up the ability to do that um automatically but i'm get you know you can give it a database name and a key space name so i have oh i can generate a token how cool um so i'm going to go ahead and connect to it and i'm going to show you if you look up at the top there are a bunch of ways to connect and and you can see i have a cql right there in in astra so okay and kirsten what are we naming the database and key space at tiktok and um well workshops for the database and tick tock for the key space okay no sorry there we go it's the first one great all right so um let us know if you've gone through the astra step that's very important um and for those of you who are looking for the astral link you can type in exclamation point astra in the chat and it'll bring up the link i just did it and so you should be able to see that link but you can do that yourself as well okay are you guys um i'd like some thumbs up when you're good and i'll make a note that later on we're gonna do something that's going to make sure that the correct database exists so if you get it mixed up that's fine it'll just create new ones for you all right our can we get some thumbs ups looks like some are still getting to the astral site so okay yeah all right um let's uh let's let's talk a little bit about the astrocyte so back to you know that don't need that okay so i'm gonna go back to the beginning and um look at that it's the free tier so excellent um and i have some credits that i don't really need but um and it's helpful um so under organization a little actually let's let's try the one click um so if you're going to connect here then you're going to need a token to to make it work so i'm gonna go let's see i'm gonna go back and create a token so if you if you click on the little dots here you can generate a token and we're going to create a database administrator and these are all the things that the database administer and this administrator can do so i'm going to generate a token um we'll make sure that you get this next time as well but if you want right now um download the token details um you'll get a csv file this is important because you're never going to see this screen again that's the only way to keep your tokens available so what you're going to use when i when we put in the token is this this one with astra cs and you can copy that to your clipboard and we'll work with it later you can also download the the csv um to save it for later in case because if you navigate away from this page the uh you won't be able to access that key again you'll have to generate a new one so if you want to download the the csv or download the tokens what is that yeah download the details um it'll it'll save a csv on your computer with with those yes yeah it's um here i'll i'll show you what it looks like it's it's not beautiful but you've got this astra cs token that you can copy and paste all right let's go back to the course okay now we're gonna launch the workspace lab and uh this is a docker image and it um it may take a few seconds mine came up very quickly because um because i had done it previously nora asked if if i generate a new key uh the projects with old key won't work they will still work um all the keys are valid and you can generate as many as you need you can delete keys if you want to end of life them but the old keys will still work the role was database administrator which is just a high-level role that we're using for the workshop because it's easy to do everything that we need in production you'd probably choose a very specific role for things it's not yet bond um i i don't know i don't know that we've tested it on the brave browser again this is a um a new system for us so um i've launched into the um the workspace and as you can see at the top there's astra getting started and um and that will start us out looking at the system okay so hey because i know that sometimes that window at the top does not uh show up you want to show them the code yeah so if you wanna if you wanna do a code tour down at the very lower left uh the code tour is is uh set up so um yeah and i think you'll probably have to zoom in a little bit because the text is quite small um karen asks what a docker image is a docker image is just a um a kind of containerized environment that [Music] you can kind of start up and have very specific um what's what i'm looking for maybe kirsten you can find the words i'm looking for but basically you can you can create an environment with very specific settings and um and start it up exactly the same every time if anybody is interested um i will show you the docker file um so the the docker file tells it what to do so um it's a it's a ubuntu image from from linux server and uh it runs very various commands as it builds the docker image so these commands aren't actually run um live they're just stored in the docker image so okay let's let's get to it um this is going to take a little while and we're going to create a react app is that better size wise it looks good to me yep it looks good to me okay so this is going to take a few minutes probably um so this and you can see over here um it created that uh react app um we we're gonna it's creating a basic react app and we're gonna go in there and configure it to do what we want but it has it doesn't have the the pieces yet it's still generating that content um you have any other questions while we wait i just want to make sure that everyone was able to successfully launch the workspace um i'm gonna mention that they're stuck at launching so i wanna just uh if you were able to to successfully launch the workspace give us the thumbs up uh if you are still uh waiting for it to launch um let us know in the chat so we don't get too far ahead without you i'm just sending an email right now uh so uh moon moon deb how to launch the workspace there should be a um a button in the there's a section on the left side of the assembler um uh of course that has um a button that says launch the workspace uh yes so if i'm if you if you're in the um if you're in the tutor in the the course then on the left here is uh is what you're looking for all right how are you doing um i sent uh uh i don't see stuck at launching um well jeanette uh was finally able to to have it come through and then there's a few others that have thumbs up so i think it might just be taking a little bit longer than uh than we initially expected but it should take you know less than two minutes usually so okay janae um you have an old image um i i'm talking to them about um about fixing this but um let me see if i can oh it would be i don't know that i can figure out oh great i think it's because you did the wednesday or the last week one um all right um i am not sure what to do about that um so the easy answer here is um to create another user in the app assembler system so you're not tied to an image that is out of date um so i so just to repeat what what kirsten said if you're running into a 502 error um it's possible that your the image that you're getting assigned is an out of date image and the fastest way to get that fixed is to create a new user in appsembler and kind of get a brand new image pulled so uh if you are running into that 502 error that is our recommended fix just to get up and running quickly hopefully that's not sorry about that yeah sorry about that um you know like i said it's a new system and um we aren't fully um knowledgeable about all the ways that we can administer it so yeah junaid i would just create a new account um it just takes you know a second and um and then it will work just fine cool thank you junaid okay so dan had a 502 a few hours ago when they tried to uh yeah and but it's working out fine it was configured incorrectly awesome all right so i'm gonna go back to your screen all right um now i'm going to get back to yes okay so uh hooray it's done um we made a astro tick-tock application and uh you can do all sorts of yarn things you can actually use npm if you want but they like yarn so um modules obviously that's the the node modules that are needed for the basic react app so it pulled those in for you um under public you've got your index.html that's what is going to be served and um if you look inside of the index.html it's really not that exciting but down here we have a div with the id of root and that's where the javascript files are going to inject what needs to be seen so um and then under source you you see all these things so the index.js um is what puts the stuff in uh the root div in index.html um so but but what is it doing what's app so app is at that js and it creates a component for uh to shove into the to the root so it's kind of um like a a chaining thing right so we have index index.html and then index.js injects it um so i'll i'll go over this again but i just want you to sort of be comfortable with what we have so um i am going to go back to authentication which is where we are and i'm going to give the terminal a little less b so we can see stuff all right now we're going to do astra setup workshops tick tock and what that's going to do is make sure that you do have that workshops um database and a tick tock key space um we're going to do that by using the admin token that we picked up so i'm gonna go to my csv file and i'm going to copy then you again you can follow these if you haven't done it before right so you can create a database um and and then generate token so um you may get um oh great just a second the um the leaf lowers are here as soon as as they always are all right so i'm pasting my link i'm going to close my door and my window i will be right back sorry so let's give some time for uh those are that having issues to catch up um karen i am trying to figure out uh why the co-tour is not opening for you um do any of the uh pages show up in that uh code tour um window in the bottom left uh if not you might need to reset the uh the workspace and relaunch it um clicking open code two or five oh so yeah so i'm assuming that the uh the code tour let me let me share my screen so i'm assuming that you're not seeing these entries uh that you can click on these should automatically show up you shouldn't have to click on the open the folder button so if that is the case you might have to reset the workspace and just relaunch it yes copy the link from the csv file you're copying the one that um starts with astra cs so if you look at my window you can see that i put in the astra cs token that i just generated and if you didn't create a token or you can't find your token um just follow the instructions that you see uh from astra setup and follow the the um steps to create or you can actually do create token as an action on your database so all right so you can see i do have workshops the database and it's active so we're happy um and then we're looking for the tick tock key space and it's already there how's everybody doing this is like important uh that all this works danielle it's an organization token yep yep the tokens are organization wide not database specific so you should be good if you run astra setups then um it will create that workshops and tick tock for you it will take a little time um because it's going to have to create a new database and it's going to wait until the database is active before it it says it's done so um the workshops tv is um it it'll it'll it can take um several minutes especially when we have multiple people um doing the the creation at the same time so uh don't fret about the db creation okay um is anybody stuck anybody nope okay i'm gonna move on but one of the things that um you can do is if you if you didn't get what you needed and the other stuff doesn't work you can always click back on this step authentication and that'll make sure that you have everything one one of the things that astra setup does is it creates um another hidden file so they're hidden all right let's uh i'm gonna look at the dot emv file that astra setup created so it stuck your key in here because that's needed for applications um it has my dbid for workshops and we have the key spaces tick tock um it always creates a database on us east one but um we can make it do something else and then if you are doing graphql you can have an endpoint to to use for your database okay and we're moving on okay let's just go through this quickly what we're going to do here is we're going to make your workspace the aster tick tock into a git repository all we need to do is tell git first of all um it doesn't matter what the email is so i just use tic tac example.com well this is very messy let's clear so you can see what's going on all right um and then i'm gonna do a username uh thank you um and then i'm getting it what it does is it creates an empty get repository but now it's a git repository um by default the files in your workspace are not going to be committed but we'll just add them all except the ones we don't need and then i'm gonna do a git commit and you can see it created but git commit all right so now we're gonna need to go to github so click on open github and then i'm gonna find um i have a lot of repositories all right um so this one i'm going to delete because i i want to create the um the correct repository all right all right and then i'm gonna now i'm gonna create a new repository if you have this window there's new there are other um places but what you're doing is a new repository so depending on your view you may have a different kind of button um and then we're going to create one called tick tock clone all right and um we don't have to worry about stuff because we're going to commit our things and change the repository so let's go back back to the door come on no yeah okay so i've created a new repository you can see it's tick tock clone it's public all right so if we have any um we don't have anything to commit because we already committed all our files so i have a little uh script here it's called get remote and what it's going to do is ask you for your github username so mine is synedra okay and then what we're doing is we're adding a new origin to the repository your repository and you can see that you have origin set up for that particular link but we want to use main because we're moving away from master um and then we're gonna do get push origin that's gonna go up into github and main is the branch that we're pushing so okay well let's let's check main okay so it was empty and now it's got the files that we committed three leaving us as a readme to tell you uh what we did to make it happen all right respect the culture i need to move a little faster i suspect um let's do the knowledge check for this section and this is back in the studio so what url should you visit to work with astra the angeler um you can get it in the chat with bang astra but i'm sorry exclamation point and um it's going to be astra.betistax.com it's really important because if you want to manage your database in or in a different environment um we need to get there all right so that's right what role should you pick for your token for this workshop um i'm i'm going to remind you that we need it needs the capability to create tables and um other things that most of the tokens can't do so we pick database administrator okay what what source code management system are we using for the workshop um there's a little you know throwback to rcs and clearcase but we're actually using git okay now back to the lab okay um so you should be at um i'm gonna click next tour and if you need to um reset anything or go back and look at any step you can do that right so if something didn't work now um okay um but what we want to do here this is the the um standard boilerplate react files and we're not going to use the report web files function which you can see is imported here and then it is called here we don't need that so i'm gonna update the code so insert the code all right and now you see it is exactly the same but we don't have those calls so um it will work for us so we're gonna applejas right now shows you a logo um if you run this and um there's some pieces that we don't really need so we're gonna go back to a super vanilla um component right and it's just a app and there's nothing in there yet but we'll get there all right um i wonder if this works yes okay this is gonna take a little while um we need um a little bit more uh react goodness for manipulating the dom or the the structure of your application okay let me answer a couple questions um okay um i um he is trying to push um thank you so um i think um perhaps let's look at um set up github repository so uh this command that i'm on right here is the one that you want to do to set up the main branch so you might have might have missed that one let's see what else uh danielle the first step on that git hub setup is to go create the repository on github does that make sense oh i guess all that's fine okay i'm done with yarn add react router dom i'm gonna go ahead and move forward but totally fine um ask questions we'll try to get them to you and because the tour is set up the way it is you can easily go back and do that step again if you didn't get it correct so um i'm going to add the import for react router dom it's not it's not working level yeah i don't know why i did that okay if it puts it in a weird place um sometimes the code tour uh messes with the with the lines that are specified so i'm just going to put it at the top okay so your file should look like this and then um we we're gonna have two um subdirectories under source we're gonna have pages and that's for the different endpoints so we're gonna have a home page and an upload page and we'll look at those in a second all right there's a lot of things we want to add to app so once again we're just building a component but now we're going to switch if it's upload we're going to use the upload component if it's not upload it's going to use the home component so let's insert code [Music] it's almost right if you end up with two export default apps you just get rid of one so we're importing home we're importing upload so those are the things that go in pages so we're going to create um some the components part but the things that we're going to manipulate it within those um those pages that home and upload so we're going to create the components directory i'm going to copy in a header and a followers column we're going to overwrite the css file because currently it's not set up for the elements that we use so we'll get a new one and we're going to go ahead and pull in aster js collections and uh figure which is used uh much further so let's see if there's any questions let's see um yeah daniel i'm really sorry that um that your commits aren't working um did you create the github repository um uh yes we we also need i know the node and npm versions but those are included in the image okay jack header all right so this is what we brought in it's uh not exactly exciting it says header uh in each one but that's that's a component um just like the app component this is the header component if you import it and then you can use it um followers column same thing very simple right but we're creating those components um so let's see what we're doing yeah there it is add a header to the hash wrapper let's go ahead and make sure this works yes it's good except you didn't erase the other stuff okay so this is what your app should look like and i will move on no note that you don't actually need to um save stuff it just automatically saves as you go so that's one of the cool things about this vsql instance i'm going to go ahead and um we need that already oh no apps yeah okay um so what we're doing is um we we updated the css file and now we're going to look at it so we have a container it's got flex direction the header has a background color of yellow followers column has a background of red feed is white and suggested box is is blue and this is just so we can test to make sure that our layout works correctly let's uh [Music] put that back and we're gonna customize home.js so home now has um has cards for um following and unfollowing the suggested box has a lot of information and it's going to put top five not following in there we'll figure out what that is in a little bit um oh here it is top five not following so basically there's some people that are following you and or that you're following and there's some people that uh you're not following and we can deal with those differently in the component all right and the way we do that is the edit function and we'll get to that a little um in a little bit did i do that i don't think i did okay so upload is going to um do upload video so it is let me see if i can get there's okay okay it looks good so we're going to have data this is what the data is going to look like in the database um and this is where we get thicker we give it a unique id um that's just random so moving on let's make sure that we all know um the right answers okay wait let me see hmm let's see all right which file does the heavy lifting in the index.js index.html app.js which file but it says which file is responsible for grabbing the application component and injecting it into index.html let's take a quick look at index.js it is um so what it's it's rendering the app into uh the route so if you look at the knowledge check that's the one that's responsible for grabbing the application component and injecting it into index.html once the files and source component and source pages do create templates that can be used to build components create react components to be used in building the display to find different pages for the application so um this bottom one seems like it might be right i should probably change it to a different question but what you're doing is you're creating react components to be used in building the display which files define different page views uh if you look at the the um the file setup um you're looking for the things that are in pages so home.js definitely pageview and upload.js these two are valid components but they aren't the whole thing they don't um they don't render by themselves they they get used in home.js and uploads all right back to the lab all right how's everybody doing are we doing are we doing well it seems to be uh we don't have a lot of questions coming through um which is good oh there's a um for anyone who wants to see the fully grown application um it's it's in it's in your workspace under slash opt slash workspace slash tick tock so um that that can be used as a reference um if you're if you're trying to work with it um okay so we're going to talk about netlify netlify is a cdn and um they'll host your code for free um we very rarely even though we use netflix for many of our workshops we uh i haven't gotten any um problems from them to for having so many sites so nutlify is is fantastic especially if you're building something like a react app they um they will host things that have um uh um no no.js and um and it's just a really easy way to do things so we're going to visit netlify you can go ahead and sign up if you don't have so i'm going to do a new site from get and it's going to be on github and then we'll look for tick tock there it is so we're going to use main the branch to deploy and so all of all of the um call to settings the default settings are just fine okay so um under site settings now the cat's here yes yes cat okay um i'm gonna look at build and deploy because one of the things we're interested in is um oh environment environment variables so we don't have any but how are we gonna how are we gonna tell netlify what our token looks like so they can make changes well we'll take care of that in just a minute so i'm going to go back to code tour and i'm going to use netlify link and that will file link is first going to ask me to authorize so in if you're on a mac you can command click to launch another window to do the authorization and what how do you want to link this folder to a site okay the one in blue is good we're saying i want to see the sites that um that have this repository associated with it uh and then i have two so we're we're gonna pick this ecstatic pike because that's the one i just created all right so now um my netlify knows about my github repository so if i make changes to the github repository the site will update um now the workspace knows where the netlify is so i can do things to interact with that so remember we have the the emv file we're gonna do um netlifym import m and it's gonna tell me okay i imported these things uh let's look again and refresh and look at environment look at that all those um things were uploaded and uh netflix i can now use them when it makes the calls so so that's great all right down here all right um now we're gonna build it and deploy it what we have it does take a bit of time let me check the questions and see what we have yes sorry this this does take a bit but it will be done soon yeah and i and while we're waiting for that i don't know if you um mentioned it in detail kirsten but what's really cool about netlify is because it's connected to the github repo anytime you push changes to that main branch or that master branch netlify will automatically rebuild and redeploy your app so it's uh it's a really cool like um ci cd pipeline that's built in um just it's really really useful yeah it's it's a it's very it's seamless right you can um and you can deploy to the main site directly too so if you just want to make a build and and then deploy it it'll do that but it is watching your github repository if anything changes it will redeploy must be very optimized today yeah it definitely seems to be taking longer than usual there it is okay it was only one minute 48 seconds but it seemed much longer uh then we're going to deploy to production and i'm i'm gonna do something that i didn't put in the steps and should have put in the steps in fact i'm gonna put it in the step now um so we're gonna update the the calls to use your site okay so uh if you refresh you'll see this so i'm gonna run with my site and now let me um when we click on on the um launching it should go to your site we're gonna do the knowledge check now okay um what does netlify do for you um post your site in the cloud yeah that's that's what they do um source your code the encode is stored on github provides serverless functionality works with node.js okay how can you make your site visible publicly um using nutlifydev adding a site to nutify and pushing your code or putting a hole in your firewall always fun but it's actually this one all right in a minute we're going to actually go see it um actually you can do it now so website url that that line there whatever it is for you command click and there it is so we just did goofy things with css to make sure that things are going to show up where we want them so in terms of layout this is the what css is doing for us so you should have um you know your own netify.app endpoint that you you or anyone else can visit um so yeah like i said matlify is really cool all right so let's go back and next tour um i'm just gonna set up a couple functions so the serverless functions um are going to live in the functions directory and we'll actually um set it up so that now if i knows that's where the functions are so it's going to create a rest client oh it's actually a document collections because it's using the uh document database so uh the namespace right is astrodb keyspace which we saw is set up correctly to tick-tock so it's pulling that from our environment and then there's post create a post um so it is going to return 200 but it's not going to give you anything so um you're not gonna have a a sign on your file so let's insert the code and moving on post.js is it reads the contents currently in the database so i'm going to insert that code and then go forward now in inelafi um dot tommel um let's get rid of this um we need to tell netlify what do you do to get this thing going and we do an npm rug build publishes builds functions our functions so and that that just defines the directors the subdirectory that we're keeping our functions in mm-hmm so um that is not right but we'll get it okay um um and so we're using the file system to read the file and that's pretty much the only change that we have here all right now we're sticking the data inside here because fs is is fussing about the import so that's good should be good yeah okay and next okay so we've made changes to the database in fact i did it.js it's complaining about something [Music] ah right so you might have more curly braces than you want because it it didn't totally completely do it um all right it's not red anymore now we'll go back we're going to get ad dash a that should add our new files git commit dash a dash and i think more data and then get push origin name so we're gonna go to the add data endpoint i'm nice okay i cannot use import i'm sorry i'm trying to find our the where does the error come up um it says you can't import i can't use import if you just go to um um data.js that's wrong anyways hmm okay what did i at what day all right um sorry about this it was being funky was it complaining about the imports that that's at the top of this file the um which file is where the error was so i was trying to yeah um let's see we're gonna use index.js hmm now this should work now um is there a malformed import in app because the the error might show up at index.js but some of the sub components will might have right but there but it is a component so all right well um i'm going to copy workspace let's see um so so damn let's just do it unless bear with us as we do some live troubleshooting as always happens at some point yeah copying the files in may be better and then looking at them for the user experience all right let's see that okay that's good okay okay let's uh let's check out the system can i find module astra.js collections let me install it wait um i'm just uh pulling in the thing that it says it can't see um we're going to do this again later visit the app so um we're going to move on and we'll figure out everything later and i think i'm gonna go ahead and uh just copy and all the working functions and we'll we'll just work with what um what's in the final document because we've lost a lot of time and i apologize um in fact i can do that now so i'm gonna make a new terminal copy opt workspace functions two functions okay um yeah so it's not updating uh yet but we will see them shortly all right so we're going to go ahead and do the knowledge check for this section uh what data format is used when using adddata.js well i put a big ball of data in there and um the format it's not xml it's definitely not html so it's json that's um that's the the type of data that most apis like to work with all right do i have to follow the schema um yes every cassandra database has a schema that that was true before but now we have one um the document api allows you to use schemas calls which is what we're doing um and then yes to know how to sort things no we just um it just deals it's a collection it's very much like um you have collections and they have documents in them um so what happens if you get a 401 so let's take a look at post and so you're doing a post stop find right so you're calling the end point um if you succeed that is if you are still in this try block then you'll return a status code of 200 and get the rest which is which is the uh the return here so um but what if you get a 401 is that does that succeed um so let's look at the choices and and see what makes sense okay is it the authentication error means your permissions aren't right the post.js call will return a 500 error because it did not succeed nothing because it doesn't match the 200 or the 500. um it will work because the status wasn't 500 well it doesn't actually uh fail um the it the same way it's it's uh the st it will go to the catch block um if it's returns an error if it says no i'm not going to do that but it doesn't matter if the status wasn't 500 what's going to happen is the authentication error is going to cause a 4 500 error because it did not succeed we could look at the status and then give different responses in the catch block if we wanted to to give better information to the user about what went wrong okay we have different card elements um but they're very similar to each other what are the cards used for so we looked right in that there's followers um there there was a suggested box and they're using different cards to display the information it's the easiest way because you can have a card for one video and it has the um it has the information that it needs um so it's not organizing information in the database it really doesn't have anything to do with the database creating layout elements with personalization is correct how are things sorted what is the sorting based on well let's go take a look at home.js let's see where was it still there okay that's the home what we're looking for well we'll get to it in in just a few moments um but let's check and see nope all right it's sorted by followers where the user is following or being followed so um what elements are passed through other components um whether the follow should be toggled um suggested accounts and the user uh maybe awesome hmm now you don't even get to show them that let's see sorry guys my brain is foggy all right well if someone gets it let me know so this is uh nothing okay so we're done with the the quizzes and we're ready to move on to hooking everything together so we're going to get those card components it's a lot of copying get new styling my home page and in this case what we're doing is uh removing the app component and putting it directly into index.js so let me show you what happened what happened is in this uh file that's being run we've defined the app but we're going to do other stuff too right that's that's just so instead of having an app um dot js we we are creating the app component directly in index.js so let's look at home.js so we have um we're we're going to do add data and then we're going to fetch all the tick tock posts to the feed and this is how we toggle user from follow to unfollowed it's a toggle so if they're followed here they become unfollowed if they're not followed then they become followed and the edit is how we do it um it.js so what edit does is it's going to update the user with the information that they that follow or not follow and again we have return codes you get a 200 uh content type actually seem to be important um and then we'll catch um if there's an error all right um let's go back oh not the string if i call so we're going to make the um the stringify better for showing the users when we get that so this is what um what is happening there's nothing for you to do here i just wanted to show you you know what the in what the imports are for this particular thing and then if we get loot users then um we log them to the console and we filtered them by uh user is followed all right so so creating the data fetcher um you know one runs to edit and then you we're using effect um that's that's what we do like to add the data okay now we've got the users in descending order and we'll go ahead and map them and we're going to tell home.js that we want to pass the top five following variable into followers column and the feed we start mapping onto a card component um this is where we define the variables um that are important for our data so basically we're actually using the timestamp that that matches when the user make the call all right we're going to give it another try and it does take a few minutes for them to update the um the site yeah it's still an old one it'll come in a moment all right let's let's see what the questions look like um um ryan did you have anything so i there are no new questions um in the chat uh as far as i can see uh which is fine um i don't have anything in particular too okay um so um just for speed i'm going to um copy more stuff from [Music] the working because i lost all the time uh and we did the functions let's talk um pages and i'm totally cheating here this is just a big ball of cheating but it's okay um i promise we'll be done [Music] and what are you doing i'm taking the the files from um from the completed uh task to here so we have the correct versions and and uh and that's that that allows us and then we can see the files when they come in so um i think that's all i need we got that we got that work good yeah okay let's try it again cool all right we'll check that in a minute um so let's see what we've got now so followers column is uh using the micro card oh let's look at the micro card um so basically we're gonna have this micro card we're gonna pass in a user so that we can um personalize the um the card and this it's just a stack of cards like it's a this is the element um if you look at um let's look at the pages right so at home um in followers column we have top five following right and then the mini card we're doing uh not following user right so this is the suggested box the suggested box is full of people who don't follow you or you don't follow and if this is saying you know you should follow these people all right and um let's see if it's up yet hmm let me look at app.css all right all correct maybe i just need to shift all right let's see um it seems to be well oh let's go to that'll that'll help so if if you go to netlify you can see and it's possible that it didn't build correctly so i'll check it um but if i go to the main netlify site i have my new site here and i can click on it um it failed so now i can look at their build so they did this to build the thing uh oh so it failed because my image elements don't have alt pro so it says card.js is where it is upset and card and header all right so let's look at header um this is okay and then it complained about microcard and this is um alt so the alt is what shows if the the um if it can't display the image for some reason it doesn't work that's the text that you'll see it's also very useful for um like blind people and um and other um people who can't see the screen because the alt text will inform them as to what what they're looking at so we're going to call this user profile okay and shoot shoot my trackpad just for energy it'll be like this is just technology day it's just been been the best day for all of us trained to do things all right so uh i mean i i mean you know our our video stuff was was and all right so let's look for uh i think that we got them all no how can i check i can do it now if i build here and we'll see if it builds but that's one of the awesome things about um about netlify is you can just look and and see the run and see what happened and get that information so it's great basically we have changed this workshop to uh debugging and uh and but um you know i hope i hope you know giving you information about the um about you know what the code is doing is helping you to understand like react um is designed to you know to have little components that are built together and then have pages that display them so all right looks like no axios but we did that that's a big download too all right all right let's um let's see if there's any questions i know we're losing people it's very sad but we're happy that you guys are here and um and remember um in the in the environment that you're cr that we've created we have the finished code over in the opt workspace so look at i'm gonna um actually um so we aren't really we weren't going to have homework but i think we can at least um have homework that um i i would love for you to go into opt workspace tick tock and build a second site connected to netlify and um just go through everything there then you don't have to fill with a code but you'll have a working um you'll have a working component and so it's not very hard you just need to go you know through the get steps and the github steps and um and the netlify steps and then you should be able to uh just run it automatically all right i got axios we're gonna do another five build again i swear i clicked that install axios button but maybe we aren't really there yet we'll see okay so it knows npm run build um and netlify.toml is where it got the information about what npm command to run to to build the application so in the meantime i'm gonna run through um the functions uh just to uh see what's happening um but don't that's what okay so i'm going to copy and well i don't need to do that but let's look at card.js so you can see that it's an element uh that is a component card and then it defines what happens uh this is what it returns to the caller so it returns exactly this um so that's card and then so we're passing the user to my to micro card so that it's um it's personalized for that one user and then we're gonna add the user avatar and the user username and the username for this card i wish i had a picture of how all the components go i think we'll do that in the future so you can see that home.js has these elements in it and those elements have those other elements in them so we're going to use edit.js to follow and unfollow this is the edit.js this is for following and unfollowing and it's just updating based on what was passed to it i'm gonna use on.js so this is what we're gonna do for uploading videos um get the collection and then we're going to create so users is actually a collection of of the posts not the users but that's what she called it so um but it it does work correctly and again we're gonna catch any error and it's always gonna be 500. i probably will change that in the future because i like better error messages um so you see that we're using put we're putting to the edit function because it's an update it's not uh create right so um it's gonna take an existing thing and update it that's what put is used for um and then let's see what else we have okay so it an upload so upload is the um is the component but we could pass in a user when we ask for upload and then um we can use the username for that but she has this hard coded which is fine um this this should be a prototype or something but it'll work um so it's you've set up your you know your your post here um and see we're gonna add so we're posting because we're creating a new video and we're using that add.js function that we just looked at um and then it's just gonna log the response and or the error all right so this is the upload page you see it you know it has many little bits inside of it um and there's there's no cards in this one because it's it's just the upload page okay so next all right we're going to try again no we're not going to use netflix we are going to um cool it looks like it worked okay let's see so we you know last time it didn't deploy because it didn't build but i want to see what's happening so i'm going to go to the that's a good deployment uh it failed oh it's building so um i can watch this see what's happening it's kind of fun so you can see it does exactly what i did right and the creating optimized production build can take a little while looks like hopefully i'll be able to show you the site so so yeah guys i think um i think it would be good homework for you to um use the netlify learn to do oh my mini card you should be able to push what you built in here just straight to production correct yes yes but i have an image i have an image problem but yeah my build is is not um their build is pickier so you know they they have the rules on on their build so i'm gonna go ahead and and maybe we'll try to push that to um to production and see if that works um i i don't on on my you know when i build like i i don't i'm not picky about um image alts but uh the netlify system apparently is offended if there's no i mean it's good for uh usability for people who are using different interfaces and creating an optimized build all right let's see oh you know one of the really cool things is that we can also run this docker image anywhere you can run this docker image anywhere and it will do exactly um what you need um so you i if you want let me uh i can let's see um uh i have it on i don't have it it's not on docker hub right now um but i can do that if we would be easy all right that's good i can there we go cool excellent just multitasking so that i can give them a doctor instance would you guys uh actually i should ask because it would anyone uh be interested in um a an excellent doctor exam of this um you just you just um grab the the package you run it on your file and it's good okay so now we can actually do the publish deploy so i'm messing with the production system i don't suggest that you do it in the future you can use the staging and and that's uh and that's fine as well but since we're you know doing stuff live let's do stuff live wow look i got my i got my tick tock all right so so we've got uh lana these are my top accounts that i'm following um and i could try to follow someone um let's check the javascript console oh all right um home.js okay hey kirsten uh jason asked in the uh youtube chat if the um environment will be available outside of the workshop time um not the the course part but this part um i i will load up a a docker image um that that is exactly like this this part um and uh you can grab the docker image i i don't i'm not sure where we can host it um you know that's it usually an expense but maybe i can find a little tiny thing where where you can just play with the with the image on a remote server so yes this part of the environment will be available um and i will continue to update things um as i learned things so uh let's let's see e dot okay we're looking at homo jazz um wasn't very good at telling me what was wrong but yeah okay 34. let's see this one thirty-four ah so basically it's saying the error is console error and error dot is uh hmm well let's see if we just return error and not er er okay um okay i swear this worked before so what i did um there if you're not familiar with the fun of debugging in chrome or you you just open the javascript console so you can see that the post works fine right so post lists the posts and that's why it's in the middle and then let's see what else there is okay so as building let's check and optimize production build so um folks it is like a docker um a doctor image for you to do this again it doesn't have the information in the course itself but um you can go through the steps and the tour will be there so that should be good uh yes um it it's supposed to last for um the thing is it's the image i don't i think they because we're on a free trial i think they're gonna turn off um the the studio right the adjacent that's the the image but um not the course but if you if you have an image then you should be able to continue using it directly uh using the url uh of the of the same all right um let me do the build excellent okay okay let's see what we got all right and if i follow can i get it all right well we can fix that well um okay we're at time uh thank you for following along while we play this again you can go into um the uh opt workspace tick tock and that has all the uh things running correctly and if it doesn't um then you can do the same thing i'm doing here um and uh you know try it out figure out why it's complaining and it's complaining because i said follow right and um and that's just um it means that something in that path is not correct um and i'll get that in just a minute but i mean i i mostly want to know do you um um jason i don't know that we're gonna do this workshop again we are not um we don't we have to pay money to uh to keep using assembler which means that a lot of people have to um have to make things work that said we do we do have the tick tock workshops that we do outside of appsembler in different formats and we will most likely do that again so keep keep an eye on it and if you want to take a look at some of our backlog we have done this workshop in other environments um and you're definitely welcome to check those out as well you can and you can um you can use the tour um which i designed to really make it easy to understand what is in the application but um i think we we don't have mentees so we can't do a survey i i will do a survey at the end of the course next time yeah and we do have um i was going to mention so i'll i'll just move on to the uh some of the outro uh stuff that sounds good i i i think they've suffered well we really appreciate everyone uh joining us for uh this experimental workshop using a new tool obviously there are a few things to work out um one of the things that we would like to invite you to do if you're willing or have any any thing to say is on our discord we have a channel um dedicated for workshop feedback and we'd like to know um generally what you uh what you liked or disliked about this format especially using appsembler as a as a way to kind of convey these workshops obviously we you know doing these workshops live helps us learn a lot of things as well so we have already a list of things that we are going to work on to improve so if you're interested or have anything particular that you'd like to to relay uh join our discord and and there's a channel for that information um so i'd just like to to give you some more resources in case you're interested we have a few other uh places that you can continue your learning um when it comes to apache cassandra and any of the datasets technologies that we have academy.datasacks.com is a great resource for learning some in-depth information about cassandra and we also have datastax.com dev which is another uh another resource for um the host different courses um for cassandra and um and astra content we have a stack overflow-like forum called community.datastacks.com that you can go to to ask some questions from other users as well as some of our community managers that are very active in that form and then obviously the youtube channel uh where we host workshops every single week uh on a variety of different topics from front end to back end to cloud-based technologies it is a a really good um resource to have so if you'd like to subscribe to our youtube channel and you'll get notified of when we go live that would be awesome um yeah i mean uh one of the things that i wanted to mention is um that all of our workshops are recorded so um if you see a workshop that looks interesting to you we might have done it you know a few a few weeks ago and you can just watch the recording and um and figure out what's going on so um so yeah it's it's uh it's good too definitely uh one of the one of the things on academy.daystacks.com is there's different learning paths and if you're interested in in getting certified in cassandra there are there are uh three different paths that you can take and all of this uh course uh work is available for free on academy.datasex.com and those developer tracks administrator tracks and then the kate sandra um track as well um so for the workshops if you would like to go to datasacks.com workshops you can see all the upcoming workshops that we have scheduled currently i think next week we have a intro to graphql if you're interested in that and then we also have a a netflix clone workshop that is coming up in the next few weeks i don't have those specific dates at the top of my brain right now but that is coming up soon and then again obviously our uh discord um is a growing community of people who are looking to learn more about cassandra uh and also there's that channel for the workshop feedback so with that thank you everyone for joining us uh today for this workshop yeah let me um let me drop a link okay um okay um it's it's loading right now um uh it's it's up to upping is being sent up to docker as we speak so that should work um in i would say a couple minutes um and uh that is again that is exactly the the workspace environment that we have and you can always use it and you know what um if you go ahead and pull that docker and run it and go through the steps and you find problems then let us know i mean it we we want it to work for everyone and so even if it's just that something doesn't um doesn't make sense to you um that's great feedback so yeah and i'm actually going to post this also in the discord um because obviously when the stream ends in the next minute or so uh the chat isn't going to be available so if you want that command um and if you miss it in this one uh in the in the youtube chat it's also available on the discord as well so um with that thank you everybody yeah thank you so much for joining us we hope you uh had a good time and thank you for sticking around with us through some of the technical difficulties but have a great weekend and we'll see you in future workshops 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: 554

Rating: 4.8400002 out of 5

Keywords:

Id: nk28RF27b74

Length: 129min 52sec (7792 seconds)

Published: Fri Sep 10 2021