Building your first app with Javascript and NodeJS

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] all right all right [Music] on the same page [Music] oh [Music] [Applause] [Music] hello everyone and welcome to to this week's workshop building your first app with javascript and node.js i'm ryan welford i'll be your host and i'm joined here by david gillardy hello david hello hello ryan how are you all doing i am doing how are you doing i'm doing well how are you doing yeah if you guys can hear us and see us just fine give us a thumbs up in the chat so we can make sure that everything is working well all right murad hello looks like uh that sounds good olga hello cool i say it looks like folks can hear us that's wonderful by the way for all you who are asking about how do you get the badge and stuff we are totally going to tell you that as we get into the session definitely yes so as i said i'm ryan wilford and this is david and we are developer advocates here at datastax um but it's not just us uh on this workshop uh we have a whole host of people in the uh in the chat that are ready to answer your questions uh and this is not a comprehensive list i think this is an old slide no bummer uh there's a there's a couple people missing from this list but yes there's a whole team that is increase the folks yeah uh that is in the chat and and ready to answer your questions so feel free to ask your questions in the youtube chat and we will be sure to get to them uh to get started i just want to do a little bit of housekeeping um so we are live on youtube and we are also live on twitch but we use twitch kind of as a backup in case youtube um has any connection issues or whatnot so that's always a backup we don't really watch the chat there so um we don't really uh we can't really see the questions that come up in there because we're not monitoring that very closely so if you have questions you can ask in the youtube chat where we are much more active you can also join our discord you see the link there on the screen we'll get that in the chat as well but a discord is a growing community of people who are looking to learn more about um apache cassandra and datasacks astra and um it is i forget how many people 18 000 something crazy um and that is kind of where you can continue to ask questions and get help um and just kind of you know be a part of a growing community as well um all right another thing that we're going to use today is called mentee.com um we are going to have a game at the end of this workshop today where you will have a chance to win some swag uh it'll be a quiz and we'll use mendy.com to do that we'll have more details um when we get to that point um and and how to log on and stuff uh it'll be a lot of fun all right so some of the things that we'll be using tools that we'll be using to do the hands-on portion of today's workshop so we're going to be uh using github um for is for our workshop all of our code and repository is is there um we'll be running through there's a whole readme that we'll be running through and and that will walk you through step by step if you get behind or a little lost some most of the questions um that you have will be answered by that repo um and the uh the link to that will be uh in the chat here in just a second and if you need the link later if you forget it um you can type exclamation point github and our new nightbot which we're testing out today um we'll give you the link and you can can head over there um so yeah that's where all the all the the content is going to be if you get lost or behind or have any questions check there first and make sure that that it's not already answered there but feel free to ask the question in the uh uh in the chat as well we're also going to saw mike just or my aunt just did the github thing oh and there it goes cool wait like ryan just said this is the first time we're using nightbot this is something we just added in here and that was really cool to see that work so now if you need a github link you can just bang github and get it yourself that's awesome yep um so gitpod is a cloud-based ide uh that we're going to be using um in this workshop to to run our app uh it is based on vs code so if you're familiar with that you'll be very comfortable but it is cloud-based which means that we don't have to rely on installing anything we can just spin up this environment directly from github from the github repo and all of our stuff is already there so it's gonna be really easy to use um and uh and we'll walk you through how to use that one note one thing to note is uh i think firefox and chrome are the ideal browsers they work right out of the box um if you're using brave or safari or something it'll still work but it might need a little workaround and if you and we can help you with that if that's the browsers that you prefer to use um astra db is the uh database that we'll be using today it is a cloud-based uh database based on apache cassandra which is a nosql uh distributed database um it is very powerful it also um contains a a data layer called stargate that allows us to use various different apis in order to interact with our database we'll be using the rest api today but it also provides things like document api and graphql and it makes it very versatile and very powerful and that's what we'll be using today we'll be walking you through setting up accounts with astra it is completely free um there is no credit card needed to sign up at all uh you get 25 credit every single month uh to use which is more than enough to run even a small to medium-sized business so um we'll walk you through that that is the database that we'll be using today uh nikesh if you are using vs code if you're working locally you are absolutely welcome to do so um some of the things that we run in in the git pod are pre-populated and pre-installed so um you're kind of on your own with making sure those things are installed all of the details are listed in the github repo so you should be able to get it up and running locally if that is what you want um okay so without further ado if there are oh vascar uh i think is asking to me to slow down i will try to slow down sorry sometimes we have a lot of content to get through today and uh sometimes it's in the back of my mind and i tend to rush a little bit so can you share the astrodb link yes i can and you can as well if you type exclamation point astra it'll bring up the link um uh but yeah the link is also in the github repo as well okay uh is it possible to work with intellij i'm sure it is uh you are kind of on your own with making sure that that works though we can't really troubleshoot every possible scenario we're trying to give you a streamlined um environment so that we can get through it all right so let's uh get into our content um unless there are some questions that we need to uh answer jabir asks about menti we're going to be going to be doing the mentee quiz at the end um uh and we'll get the code and the the qr code for that when we start doing that we do not have to install keyboard it's cloud based yep go ahead and just one thing i want to address akash asked uh will we have to install gitpod no no it's completely cloud-based so once we get into the exercises we'll bring it to the github repo and you're going to launch it right out of there so you don't actually have to install it or anything like that one other question that i've been seeing coming through a lot regarding like certifications or something like that there is no certification for the workshop however you can earn yourself a badge right i think ryan i i don't i think you're i think we talked about those at the end in this one yeah yeah you earn yourself a badge though so um if you do the homework you'll see it in the repo we will point it out to you then once you complete and we reviews your homework you'll get a badge you can share it up on linkedin and everything and it shows that you've gone through the material you've got bragging rights that kind of thing yeah yeah they're really they're really cool we've given out hundreds if not close to a thousand badges already okay so we have a lot of content to get through so i'm going to go ahead and start feel free to ask questions and david will interrupt me um gladly anytime i get a chance uh so we're going to go over application 101 so this series or this workshop i should say is definitely geared towards um beginners um so if you're a beginner you are you are right at home if you have experience already with some of this stuff um stick around i'm sure that a refresher is always good and we'll probably we'll be building on top of this stuff but we just want to lay a foundation um so that everyone is kind of at the same point and of understanding and we can build on top of it so this might be a refresher for you you might know all this stuff already that is okay so what is an application we're going to go right down to basics well there's a couple different flavors of applications that we you know consider there's the mobile applications and there are desktop applications you know these are what would probably call native applications right um a native mobile app is something uh for ios probably written in swift uh for android probably written in in java or kotlin and these are you know the apps that you would get in the app store and uh download them to your device and and run it desktop applications um you know are from the windows store or or from other app stores um and they are you know coded in many different languages right and these are kind of the most recognizable forms of applications um but we can put these in a swat chart strengths weaknesses opportunities and threats chart and for for native applications you know the biggest strengths are performance right you're going to be have access to the low level system resources so that you can have as much performance as possible a lot of the languages that you use to write especially desktop applications are very performant um and you can have extended features that tie into some of the system level capabilities as well the weaknesses are there is dedicated languages um and platforms right so if you're making a native ios app you're writing in swift right and you can't you know make a swift app work in android and you're tied to the ios platform and if you want to make an android app you have to make another you know make a duplicate project and write it in in java or kotlin um and there's also the required installation right you need your users to download this app and install it and and there's some overhead there as well the opportunities you know kind of tie into the strengths native integration you get a lot more capabilities when you're you know natively integrated into the os and they can they can be smoother in their usage and and a little bit more of a native feel right people maybe feel more comfortable using native apps um but with threats especially when you're maintaining multiple different versions of these apps for different environments different os's and whatnot uh you definitely get into some security headaches and versioning headaches and all these uh these things that kind of make your job a little bit more difficult so as a alternative to native apps we have web apps right web application development and the rationale for uh for the for web apps is to kind of give us an opportunity to break ourselves off from relying on one specific language for one specific platform and be able to maintain one code base for multiple different platforms right you don't need users to download or install it it's available on the web all the time you just use a browser as your interface and that makes web applications very flexible at the cost of course of some performance and and useful features that native applications would have but if your app doesn't require those then web application might be the way to go so this is the basic uh architecture of a web application right you have your client which is a browser right you have your mobile browsers if it's a if you're using a mobile device you have your web browsers um any flavor of that which most of them are now chromium anyway uh and you have what's called a progressive application which is basically a web application that can be stored locally and used locally rather than um needing to connect to the server all the time uh and then you have the uh front end the presentation tier right and this is um the the what the server serves up to the browser to the client um for you to interact with right so this is your typical web uh technologies and uh which is your html css javascript um those are the kind of the big three that have um uh kind of made modern web uh interactivity possible um and then you have your application to your your your back end right and so this is all the services that you need to develop to develop to make your front end work right it's going to call um functions in the back end through apis uh that will do some work on the server and then send it back to the front end um right a lot of times it's data retrieval sometimes it's um heavier workloads that you don't want to run on the front end anything that you want to keep secure and and not exposed to the public needs to be uh to run on the back end so that it's you know not uploaded to the front end where everyone can see it and then you have your data layer which is all your data storage your databases file system all that that you know long-term data storage that you need need to keep so that is the basic architecture that's the stack um all right cool looking for any questions it doesn't look like it goes we're going on the questions then yeah cool cool all right so we'll talk about the uh front end the presentation tier right we're going to go through these three um pretty much everything but the client right we know clients those are browsers we're familiar with them we don't have to deal with them uh too much uh so let's talk about the front end uh so this is our um our front end this is you know what those the web server is going to serve up to us this is our our ui right um our ui ux part of the the experience um and the like i said the three major tools that have been used html css and javascript have made this all possible so html what is html stands for hypertext markup language it is a markup language it is not a programming language as some people say um but it is used for creating website uh web pages uh it's xml based um it is uh structured using tags so elements are um defined by using tags which are you know as you can see these uh the title um or the you know the head brackets the the title brackets and then you have paid title and then you have the closing tag right so that defines that that element is a title um and then you have uh you know there are structure based tags you know the head the body um you have page formatting paragraphs divisions text formatting um you could have some um basic styling um if you will um and then some some other useful tags for for defining you know whether it's an image or a link or or whatnot um so this is how the early web always looked i remember making my first web page it looked almost exactly like this uh it was pretty bad um but this is how you build the structure of your web page right um and the the browsers will know what to do with this and and uh lay it out the page as you um as you want the next step is uh oh actually i can show that so we're gonna be using um we're gonna be building a to do app today i guess i didn't really specify what kind of app we were just saying our first app so we're going to do a basic to-do app and we have a little code pen here and i'm going to show off that um basis is a basic html this is just html for making a basic to-do app right so we have our uh all of our tags here um and in this uh form tag we have an input and we can define what kind of type it is it's a text right we give it an id and then we have a placeholder which is entry value and you can type whatever you want in here right and then okay i should type an actual word hello world typical nothing happens right it actually fails because there's actually no real interaction all of this is hard coded right we have our list element with our with our different items task one test two test three but i can type whatever i want in here and nothing actually happens right there's no there's no logic to this at all because all it is is a bunch of tags and it you know we have it we have a tag for input that allows us to type in something but it doesn't know what to do with that right so that is our basic html to do app which is pretty much useless all right next um next technology is css which is a stands for cascading style sheets uh oh hey ryan can you make uh when you go to the code pen next time can you make that little bit bigger zoom in a little bit i can't and and by the way while he is doing that just so you all know sorry um right even though ryan is going to show you the code pens and kind of walk through the html css and javascript components all of these are actually provided in the repo itself so we're not we're not having you do those with us long today but if you want to experiment yourself then you can find all those in the repo and when we go to the exercises i'll point those out so you can do everything that ryan is doing and kind of get a little play time thank you to everyone who said bless bless you i normally i pretty much sneeze every workshop i normally can get to the mute button before that happens it came so fast all right you know you know what's that's funny ryan is now that you pointed that out i i think you're right i think you sneeze every okay thank you for the uh for the uh the blessings all right css cascading style sheets this is how uh we style our our web pages as you can see you know in this example it's very simple it's just text it's a white background the input is plain and simple there's no styling here css allows us to style um pretty easily right some people might argue that because it's a little bit it's way different than most um languages um but it is it's pretty powerful so the way that it works is that we can uh there's there's multiple selectors that you can use in your style sheet um to affect your your page so um for example if you use the p tag uh or selector as you can see in the example to the right this is going to style every single paragraph tag so the paragraph tag is is the tag with just the letter p every single paragraph tag that shows up on your page will be styled in this way right all of these styles will apply to it you can set the font you can set the size you can set the color backgrounds borders all sorts of different things but then you can also create classes so uh p.test will create a class for the paragraph tag that if you include that class in the tag it will inherit those styles but if it doesn't include that class it will not inherit those styles so you can get pretty granular with with what styles apply to um to which components or which tags and then you can also um use some selectors for ids so you know we we showed that there was a an id property that you could add to tags [Music] and and you can use those to just have certain styles as well so if you have you know an input tag you can style that a certain way everywhere but maybe an input with a certain id has a different type of style um and you can use um uh they're cascading styles these sheets so you can actually have multiple style sheets you can um kind of have this hierarchy of inheritance um so that you can kind of break up your styles in a very logical way which is pretty pretty cool it also supports animations which is cool um you can do some keyframe animations slide in slide out fade in you know all sorts of different things it's pretty pretty powerful and pretty useful so to show that so hey ryan there's a great question from a keith are these styles browser independent or agnostic and that is totally and it depends i'd say what the vast majority i want to say like what 90 95 of the styles in css are browser agnostic yes but there are some special maybe 95 percent a little high but there there are some special ones that are going to be browser-specific yeah most of the basic css stuff will be will be completely browser-independent it'll work across browsers some of the um more complicated things like animations and some of the when you get into responsiveness where elements are resizing themselves based on the browser window i have i've definitely experienced some browsers um like safari will be really weird about it so there are some um there are ways to basically detect you know in css you can um specify if it's this browser do this if it's this any other browser do this so there are ways to work around it um you'd think that after all these years it would be more standardized but uh but yeah i would agree 95 of um of the css styles are browser independent uh animation r since css3 i don't know for sure but probably that sounds right yeah well yeah there were some rudimentary animations but i want us maybe it was three on yeah i don't i don't remember exactly on that one either all right so as you can see in this code pen we have our html which i believe is exactly the same right we have our list with tasks and now we have some css um which is styling our page to look like this let me make this a little bit bigger so this is the same question going back to a question from earlier um you know with regard to the to the style somebody asked could you could you color can you do some of the stuff directly in html right and you you can do a degree um you can in fact have inline styles and things like that you can you can do some stuff directly in html but honestly at this point in today's day and age css would be the way to go without a doubt um you're just it's doing it directly in html is gonna be very limited in a lot of ways there is a there is a slight shift uh david in some of the like the react and stuff to use css in js so you're not actually using css you're using javascript right which i prefer but that's getting a little advanced um but yeah css is the widely regarded standard as how to do that it'll it'll make your life easier because you can reuse these styles over and over again without having to rewrite them which is always nice so this is the same exact html page with some styles applied to it to make it look much different right um it has some uh inter some interactivity right so when i hover over this task it brings up click to complete i'm clicking and it doesn't do anything because there's no actual interactivity i can still type in a message and you know if it fails because there's uh there's no logic behind it but the styles are are there right we have we have that that next layer uh can you maximize i have it really big already this is as big as i can go okay so let me go back to this our final component is javascript this is where we get all of our uh actual functionality you know our actual logic um in uh in our little applet here um so javascript is a programming language it's our first programming language in this stack and it works with what's called the dom the document object model so the html elements are objects in this case and then there's properties of the elements which are you know the id and and the styles and whatnot um and the the the dom uh provides methods to access all the html elements and access all of the events for the html elements so when you enter input when you click a button when you you know do any kind of like interact uh interaction with the page um there are um java the dom will provide javascript with access to those events and you can define javascript inside html code with a script tag you can also embed it in the header so that it runs every time the page loads but you can also use it as or have it as a external javascript file and import it um import it later which is probably the preferred method just organization uh wise and it could do a lot of things it can change content of an html element an attribute it can change the style of a of an uh of an element and it can listen to the events and trigger logic on those events so you know something some real quick ryan i just want to address real fast um from um god krito uh crete oh i'm sorry if i just totally butchered the name there the question though is i didn't get concept of a web application that's why as an example for a web application so all the stuff that yeah and alex is answering it as well right um yeah pretty much anything anything you might open in a browser is an example of a web application even what ryan was doing a moment ago in that code pen where you saw him modifying some html some css and then you could see there on the bottom this like basic to-do list that's a web application right so pretty much anything that is built to run in html in any of the browsers at all that's a web app yeah it's a it's a pretty broad definition uh we're pretty much well past the days where there are not web applications you know anything outside of a static about us page which is just text to read uh would be considered a web application because there's some interactivity in there even if it's sim as simple as just a form to enter your information or whatnot it's um it is pretty broad um and can vary from the simple to the very uh complicated facebook it's a huge web application right um okay so let's uh take our uh little to-do applet and inject some javascript into it and actually make it you know semi-functional so again same html basis same css uh styles we're just adding some javascript to give us some logic i'm not going to go in depth on this javascript i'm just going to show what it allows us to do so first thing is i can now click to complete and we get this check box and i can click it again to delete and it removes it right so the javascript is changing the style it's adjusting this asterisk to be a check check mark it's also changing the text that comes up when we hover over it and then when we click it it removes it from the list and then i can also uh add an item to our list and it takes whatever content i added to that to that input and adds it to our list right and then i can also click to complete that and click to delete so the javascript is actually giving us some interactivity actually you know functionality behind this uh zamir says i think you're running late yeah probably um now if i refresh this page though all of our tasks are back and even if i entered a new thing it would be gone so because we're not actually storing uh any of this information long term right we need a database for that which is kind of the one of the next parts that we're going to talk about is yes it's great that we have interactivity here but if we want any of this information any of this like manipulation to the page to be stored long term we have we have to have a database and that can either be a local database in browser or an external database um which is what we're going to be using for uh with astrodb but this is um you know basic javascript it's injecting uh information into the the dom the document object model which changes what the page shows us um now some people will say hey i can type document.elementbyid html which will select uh the a certain element and give it a value of ok and i know javascript not quite you have a very basic understanding of of how you can manipulate a web page with javascript but javascript is actually quite more powerful than that and there has been a lot of stuff built on built with javascript in this environment in this web application environment um that uh is going to be very useful so frameworks don't reinvent the wheel is kind of our our advice there are a lot of different frameworks out there that will give you a jump start into using um javascript html css uh to give you a jump start in uh in you know consistent styles consistent components um javascript components that will um give you you know functionality that you don't you know rewrite everything um uh there are html layouts um making sure that you can build responsive uh sites you know that that conform to whatever screen size you're using because now with with uh mobile devices being the large majority of web traffic you want to make sure that it's as usable on a mobile device as it is on a desktop um and this is just a few like a small small selection of different um examples of frameworks bootstrap is a very very popular one tailwind css is a pretty popular css framework which just gives you like a library of styles that you can use without having to hand code everything all right so that brings us to node.js and now node.js is a javascript runtime environment uh that executes javascript code outside of outside of a browser um it gives you a uh a javascript environment that allows you to do things that are mo like much more much wider than the browser environment would give you right node.js can generate dynamic page content it can do some file system commands like opening closing files reading writing on the server side you can collect form data and and modify it and uh and it can communicate with a database and do all the code operations for your database npm is a package manager that allows you to install uh different libraries javascript libraries again don't reinvent the wheel use what has already come before you and um and utilize them to your to however you need to to get your result that you want and then there is something called npx which is uh called node it's a node package runner it allows you to execute some of these libraries that will help get you jump started um in in creating like your first basic app which we can talk about um so with that oh and then react js is a front-end framework now some of you might have heard of react some of you might be very familiar with react and actually i'm going to ask a question we're going to try a poll this is our first time doing a poll so um we're going to do a poll and the poll is basically do you want a react uh refresher kind of react basics on on how to get started with react you might not be familiar with react and so if you want to go over the the basics of getting a react app up and running uh head to the straw poll that is now linked in the uh in the uh chat and an answer if you already know react and don't feel like you need it uh need a refresher then go ahead and answer accordingly i see a lot of people answering in chat i see a lot of yeses so it's probably going to be head to the link yeah it looks like yeah we'll probably do it anyway but i want we i'd like to see the poll work too i'm going to get the results anyway yeah exactly if i'll just talk about react for those of you who who don't know what it is as a basis so react is a javascript derek's saying over discord saying no oh wait i see a key a couple no's okay a lot of yes um yeah i am curious old eyes though ryan yeah first time using a poll um busy dev if we could just copy the dev from your brains and copy it to my brain i'd love that [Laughter] um okay so react is a javascript library it was originally created by facebook it is a user interface framework um it is a tool for building ui components and composing them into a web application using only javascript we're actually moving away from the the three tool or three technology structure with html css and javascript we're moving into into an environment a development environment where we're just using javascript with a caveat there is some uh some html that we'll get into and there are css styles that you can use um but we're primarily focusing now on javascript which is actually really useful to be working in a single language one of the biggest pains uh in web development in the past is you had front end you had html markup language that you had to be familiar with css you had to be familiar with javascript that you had to be familiar with php if you were working you know that was the server code that you were using mostly back in the day a bunch of different languages that had their own idiosyncrasies and uh styles of development um so this simplifies things we can just use one language and it's consistent throughout uh and it's it's really uh really useful so it takes the place of oh actually this is the wrong side so we have a demo that we can do which goes over the basics of react so i'm going to uh take a look at the poll results i see a lot of yeses in the youtube chat though too oh yeah you're gonna show up let's see it should show it in the chat oh so we have to go to the link to see the results oh i see okay all right so 55 yeses two no's and a lot of yeses in the youtube chat i think we're gonna have to do it david all right let's do it let's do it all right so we're going to go over the the basics of react now why did we go over html css and javascript when we're just going to use react well it's that it's that foundation thing you kind of need to know the foundation technologies um and uh and then it'll build on top of that right um so with that let me find my okay hey ryan what what did you use for the poll what was that where did that come from uh uh demian is asking or is it damian uh he's asking so nightbot has it all built in um and i just created a poll um and it generated a straw poll and then that was it generated the link or it gave the link for the the poll uh so it's a it's a nightbot feature um and then the results it's just another yeah it's just another nightbot feature actually i think polls are built into the youtube chat too which there's a button for me at the bottom but i could do it just in youtube but okay so i'm going to do this as a demo oh damian got it um i am going to copy this repo link in the the chat um but i'm going to do this as a demo just in the in the interest of time so i recommend just just watching and learning if you want to follow along and do it yourself um as i'm doing it you are welcome to uh i will i will try not to go too fast um but there is you know there is a time constraint as well so i give the the repo it can go there and let me just point out as well you know because a lot of folks have been asking um you'll see the the links that ryan just dropped there that's going directly to this now the codepen links all that kind of stuff we're going to be dropping those as we go as we go through everything that if you do that bang github everything that we are going to go through today is in that github repo right everyone so this the create wrapped app he's doing the the the codepen stuff the exercises everything is there so if you do want access to it bang github or exclamation point github in the youtube chat yes thank you okay so this is going to be mostly a demo if you want to follow along you can we do have this github uh button here you can open this repo in github it's really just a blank repo so if you want to work locally too it's just a open a folder that's all it is but if you want a cloud-based ide if you're on like a chromebook or something you can open git gitpod here and it'll just open a fresh environment um but i'm just gonna go through this and we're gonna learn some react and you'll see how cool it is i love react it makes life really easy all right so we're going to be using a tool called create react app now what create react app does is it sets up a basic boilerplate react app that you can actually run right away um it has all the all the basic uh libraries that you need to run react obviously react it has a webpack library that kind of allows you to to build the app with hot reload and stuff so you can develop on it quickly we don't have to get into details on that but it has a bunch of different libraries helper libraries to help you develop quickly and the way we do that is we're going to run this command npx which remember is the node package runner which allows you to run executable things from the npm repository or library package manager and we're going to run create react app and we're going to name our app so i'm going to just name it my app just something simple uh now this has to be done in a empty folder with nothing else in it because um oh actually it's creating a new folder this will be fine sometimes you create the react app in the same folder that you're running forget i said that all right so i'm just going to run this uh i might need to make this window bigger so this is just going to it's going to take just a little bit it's going to pull all the the basic libraries that it needs and i set up all the files and make sure to see them pop in here um and we'll get it running this welcome page oh this one right here uh so this is the page uh i'm answering wolf blitzer uh this is the the boilerplate app that we're going to have in the end when we uh finish this create react app you please zoom in i'll zoom in one more time i have some screen real estate issues i can make this a little smaller um so it's uh it is if you use the create react app uh tool this window is the boilerplate basic app that uh you'll get right away uh zamir can we create small games like snake tic-tac-toe yeah absolutely um i saw another question earlier can you make games you can make games in react for sure um wolf literally so you have pre-loaded libraries i will show you where what the libraries are it's yes you beat me to them ryan computer man if you're lost don't worry just watch and try and glean as much as possible um if you have specific questions feel free to ask them we have lots of people yeah uh ready to answer and don't forget that this session's recorded and all of the content that we are going to go through today all the exercises it's all cell services on the repo and it's actually there for you for the homework so you can totally step through it at your own pace we've hopefully done a good job of explaining all the steps and everything in the repo so if it is going a little fast you know obviously we're moving along i would say take the time to go through the content on your own uh and get your badge earn the homework or do the homework and earn your badge that's what i meant to say uh a couple questions that i see uh do we have to download react so if you want to work locally you can you can also run this gitpod environment which means it'll be running in the cloud nothing is installed on your computer but when you run this create react app it is downloading the react library you're not technically installing it you're downloading the library that is used um to to run react and why are we using npx this is the fastest way to get a react app up and running is using create react app and the mpx is what allows us to run this executable called create react app okay so in the answer to where are all the libraries all the libraries that it downloads are in node modules get ready still going it's still going you know a lot of folks are saying that the they're getting the um uh the thing where it says the term mpx is not recognized as the name of a command function isn't that based off the version of node you have installed um i i wait we're doing this during github though yeah if you're using git pod everything should work i'm assuming that you're working locally you might not have np uh you might not have node installed or npm installed you do need those installed to to work locally um this is why we use git pod it makes it much more streamlined um yeah so uh abiachek and others if you're getting that mpx is not recognized the question i have for you are you running in git pod with us or are you doing this locally that's that's the key difference there yeah if you are doing this locally and you're getting that and you want to get to where ryan is make sure i'll drop the link again um make sure that you are going to the repo because there will be a big opening gift pod button right there at the start oh someone beat me to it yep um yeah make sure you go into the repo and you click that opening git pod button that should load up the environment and everything for you yeah yeah abhishek said i was doing it locally so yeah that just need that means you you probably need to install node um and such to to get that or just do it in gitpod for now and a trick i don't know ryan if you do we have a good pod yaml on this one or no i don't think we no actually yeah it's it's completely blank so the terminal might not open there's a there's a hamburger menu on the left side you can open terminal uh with that i know someone was asking about that um which i guess you will need to do if you're using github uh basically what gitpod is it's a cloud-based ide it's vs code in the cloud basically um and it allows us to pre-install some stuff as well like npm and stuff and it's it's all in the cloud environment it's not on your local machine at all okay so now that i've installed it i have to i'm gonna run this command which just uh moves my directory where i'm running commands to my app uh because i need to do everything else within that context and now i'm going to run npm start right away i didn't like i haven't changed anything i just made this new uh react app i'm gonna run npm start and this is going to start this spoiler play app it'll automatically open a window in git pod it should open a preview window and there we go and this is you know very basic um their logo and some text here uh lisa uh exclamation point gitpod is actually not a command um you can do exclamation point github to get the the repo that's what you want okay so now we have our basic uh our basic app up and running and you can see this message edit source slash app.js and save to reload so we can actually make changes so if we go there if we go drop down source and go to our app.js so this is the file um our like main app file and you can see the content here right um so i can actually change this content right away let's see if i can get this okay so if i change this text right i just say hello world and i save it it it automatically refreshes the page and updates the content um so this is super useful to develop and see your your changes live right there's no compiling there's no you know build process it's it's um it's called hot reload um and so i can make all any changes i want to this uh to this page using in this app.js file and i'll see it immediately um on the left am i using any extensions for vs code and not really actively i have pretty air installed but i don't really use it that much um nothing vs code out of the box should be able to do this um it might ask you if you want like a react extension i don't have a recommendation one way or the other um okay so um we can actually do a few other things let's get rid of this link uh the a tag is for a link we're gonna get rid of that and we changed hello world so i can save this uh as well and you can see that the all it is is the logo with the uh the hello world i'm actually going to just because i have space issues move my instructions off to another site if you're following along in the github hopefully you'll be able to follow without it being on screen but i have too many things open right now so we're going to talk about uh components the cool thing about react is it breaks everything down into components um in fact this app right our app.js this right here is what's called a component in react world um it's technically also a page it's the app page um but everything is a component all the way down and you can break components into smaller sub components um until you get to like the smallest you have a button right just a single button which is a component and once you have that component you can reuse it everywhere and and so it kind of very logically breaks down your application so let's uh let's make our first component so we're going to create a new folder in source and we're going to call it components organization is important so let's start with good organization and then we're going to create a new file and i'm just using these the vs code buttons for making these new files i know some people like to use the command line you can do whatever you want i'm going to call this list.js so some naming conventions capitalize your components names you know it's just a convention and we're going to do um we're going to create our our first component and i'm going to do this manually at first i'm not going to copy things over because i want to kind of walk through the initial setup so the first thing that we do is we're going to import react from react so this is basically importing the react librarian and all of its functionality right um and then we're going to define a function called list right that's our name the name of our component we have our empty parenthesis for a note because we have no parameters at the moment and all it's going to do is return uh something right and then we have to export uh our component so that we can use it in other files right so this is a a self-contained file and if we want to use it somewhere else we have to export it so we're going to export the default um list so this is basically saying that if we import anything from this file uh the default export is going to be our list function okay so this is our basic component all it's doing is returning something um so we're going to um if we're if we're making a to do app uh let's think about this a little bit we're going to have a list of items and we want to display that list of items right that's what we call created a list component so let's just get ourselves a array of items uh so i'm creating a const a constant called item list and it's just going to be an array um and these are going to be uh i'm actually going to copy this out of the thing just an interest of time uh these are going to be just items to do to do things right as if we had typed them in and and added them so we have three to-do's we have git milk we're going to buy amazon and then we're going to take over the world it's important to uh build up to the to the hard things in life um so that's why i have it in this order um but i think it's doable for sure um and so now we have this array and we're going to return this array as a list so we're just going to display it um as a list in html and so the way we're going to do that is i'm actually just going to is this now if you're not that familiar with javascript or some of the built-in components uh this function right here map is basically a built-in array a built-in function for arrays so we have our array item list which is our three three strings or three texts and map is a built-in function for arrays and what it's going to do is for every item within the array right we're going to call that give that a name item a variable name item it's going to do this to it right and all this is doing is wrapping that item which will be first get milk in paragraph tags these are the html this is where html comes in in react we're actually we are using html um but this is where we define it in our return statements of our components so for each item in our in our array we're going to take that value and wrap it in paragraph tags that's all this does um so regardless of how long our array is it's going to do that for every single one and it's just going to list them out right so we're going to save this component and that is our very first component but now we actually actually have to import this into our app uh file and use it so the way we do that is i'm just going to import list from and then we have to navigate to components and then list it auto completes so what's nice about ids it has some auto completion so now we're importing that component from that file um that's why we had to export it and now i can use it anywhere i want so i'm actually going to get rid of our paragraph tags here now a couple things a couple of questions that have come up ryan since you're right in the middle of trying to explain that um orlando is asking do we need to include the arrow functions uh yes for the most part yes um i don't have anything oh this arrow function uh yeah it was a little behind it was a little behind yeah uh yeah you're actually you're you're addressing something that if we were talking about a more advanced react course we would get into but yeah arrow functions are very common in with working with react so technically you could write this technically you could write this without an arrow function um but it would be much more verbose and would not really give you any benefit at all all this is doing oh and okay did you have a sorry she said um he he said not there on line three is what i was asking about line three line three i don't have it i don't know yeah i wonder if we're i guess it depends on which file we're talking yeah uh i don't have arrow this is the arrow function here so that's the one i should be list arrow on line three that's what he's asking about so this is not oh oh that line three that yes right um so this is it's not an arrow function but it is a function um so this is uh called functional components where everything is a function there is a another way to do things with class-based components if you wanted to react is kind of moving towards functional components nowadays though both are completely acceptable um but uh this is technically not an arrow function it would be an error function if i had the arrow there right um but that's that would be different a lot of people might format this as an arrow function and it's perfectly acceptable you don't have to though um this is this is fine so i guess i don't really know uh how to answer your question um so i apologize no it's not missing right it's not missing it's yeah that that's valid as well yeah if you're asking if it should have been an error function in this case no you could write this differently you know you could do const list you know i guess equals like that would be an arrow function it would be the same basically uh but in this case i did not do that um okay all right sorry to throw you off your floor there ryan it's okay i was a little confused um okay so we've imported the component into our app.js and we're now using it um and we're using it as if it were a html element as right we're using this tag format um and we we're this is how we use a component and so we're just going to use it right after our image and so if i save this you can see that we now have our list get milk by amazon take of the world uh it's taking each of those [Music] elements in that array and printed them out using paragraph ticks it is a beginner course uh i guess the the main background that is a little expected is some base knowledge of javascript um because i'm not doing javascript basics so that would probably be the only expected background um if you have any specific questions of where you're confused or lost feel free to ask those in the chat i know i'm kind of going quickly we uh we have a lot to get through and um and this is kind of just supposed to be a uh a refresher as well or i guess not necessarily refresher because there's a lot of people who maybe aren't familiar with react but kind of a foundational knowledge yeah and you know what i'll do i you know the react documentation itself their their page is actually quite good um so let me go ahead and get that and i can provide that to folks as well because i think for some of the questions that i'm seeing that are coming in here um you know we don't this isn't going to go into like the the depth of reactor whatever we're kind of covering all the bases as ryan was just saying and kind of building up to an app so let me get you some resources on some of the stuff that you can you can kind of dig into um wolf blitzer if you're trying to run i don't know when you're getting that error but make sure that you change your directory to the actual project directory um because if you if you're at the folder above it's gonna fail probably that's my assumption of what happened um uh why import and not require we're using es6 syntax in this um rather than i guess es5 um which allows us to do just to import export rather than confusing uh yeah you need to get node for sure again git pod is the streamlined way to do everything all the prerequisites are installed pre-installed in the git pod um and it's in the cloud so if you're doing it locally you make sure you have node make sure you have npm everything should work then um okay uh so i'm just gonna uh move on with the use of default in the export line so if i were to import um so i'll just give a really quick example so if i were to export list uh that's actually not gonna work um so i could actually because because i'm by default exporting list that means i can import uh i can name this anything i can say hey from component.list and it's still going to get the same it's going to get this this function here and i could just call this hey and it would work because by default it's going to import this so i don't have to name it by i don't have to name it specifically but i mean that's confusing so i'm just going to keep it list so that's what default does i think you always need a default um there's probably another way to do it where you don't always have to do a default there are definitely ways to import specific modules though [Music] um okay uh yes you can create mobile apps with this uh react native is what you would want to use we have a workshop on that actually that's convenient i'll drop that one actually react web app to a react native web which is cool all right i'm going to move on because we have a lot to get through we're going to talk about props so um props are sure it's short for properties we can actually when we call this component here this list component we can include properties that it can then use to change its behavior so in our list component this is not very dynamic right we have a hard-coded uh item list that's never going to change um but we can change that um we're actually going to uh first we're going to import or we're going to for one of our parameters we're going to define props um just to say that we are going to whatever props are given to us we're going to now use them and then instead of this array uh which i'm just going to cut um we're going to um there's a some syntax changes that we have to do we're going to do this so basically what this is doing is it is um granting us access to a a variable that is passed in our props in our properties right so this is the parameter that's coming through any property that's called item list we're giving ourselves access to so when we call when we call this so it's going to break because i haven't actually imported it yet so when we call this component we can include a property called item list and the formatting is wrong because i need brackets around it oops um so we're defining a property called item list and we're defining it as this array right this array that i cut from the other file and so now we're passing this uh array not hard coding in the list component but we're passing it in as a property in the app level on the on the parent component level um and so this allows us to be more dynamic right we can now reuse this list component and add you know whatever array that we want so if i if i uh if i add another instance of this component and i pass in an item list of get bread and get eggs and i save this now those are added automatically right i can now reuse this component for a bunch of different lists of of strings and will work the same way okay so that's what properties are very useful very key to to how react works and now our component our list component is dynamic right we can pass whatever we want in and it um it will continue to work and we can reuse it elsewhere but we can actually go deeper because this is not as broken down as it possibly can be right we can actually break this out into a sub component and we can create a an item component so i'm actually going to create a new file here i'm going to call it item.js i'm just going to i'm copying this out of git github uh just any interest of time so now we have this is super simple we're looking for a property called item and all we're doing is we're wrapping that that value in a paragraph tag and that's all it does and now we can use this in our list component right we're going to import uh item from the item file and now instead of just wrapping thing in the tag here we can uh call the component and that's what it looks like a lot of items in a row but this is the component that we're using item this is the uh property that we're passing in right item the component is expecting a property called item and then this is the item of the specific element of the array that we're working with that we're passing in and so if we say that nothing should change because everything is essentially the same but we're using it we've broken it out into different components now why would we do that if it's just doing the same thing is now we can uh we can do some more granular we have more granular control over this specific component right this individual item component and one of the things that we can do is we can set some styles and um some behavior for events like mouseovers or hover events so i'm going to just copy in this new stuff so we're now wrapping the property item in this same paragraph tag but we have a few uh events now these are html uh events uh so on mouseover we're gonna call a certain function and then on mouse out when we moved our mouse away from it we're gonna call another event and the uh the effect is going to be setting the background to red and then setting the background to nothing to empty and we actually have and i'll get into this a little bit in a little bit we have a state here uh which is which holds our value for the background uh and we're changing that state every time the mouse moves in and out and so the effect that has is if i say this now if i hover over each item the background turns red and so we had to break it out into individual components individual item components to be able to have granular control over each individual item here um okay do i need a break for any questions david um i you know i think we're pretty much okay i do see there's a discussion here about um uh svgs and stuff like that but i don't think there are outward questions um that you need to answer yeah i think we're good i think we're good okay so another thing that we can do we are making a uh a to do app after all is we can add check boxes to our elements right so every single item is going to receive a checkbox as part of its layout right so we have this input the type is checkbox and we have another state of uh is checked set is checked basically this just initializes the checkbox as not checked and then if you check it it will get checked so this allows us to have more um more control over each individual item okay so we are running behind um so i'm not going to go over state but if you want to go through that github repo um and where at the end step five will go into details of what this is of what the state is and how to use that um it's really useful it's really important but this is kind of the basics of the react uh infrastructure and how everything's broken down into components and how you can pass information to components using properties that is uh kind of your jumping off point i would really encourage you guys to go through uh the the rest of it um there's only one more step that talks about uh state um but this is kind of the completion of our basics so i know if if you're coming in completely fresh like without even a background in javascript this could be kind of overwhelming um once you once you sit down and kind of break it down it is actually pretty simple um and uh and you'll do just fine so uh shruti uh yeah if you go to the link that uh david just sent uh it'll walk you through how to get this code uh actually you'll make this good yeah um and as a matter of fact this this what ryan just did here as well is actually part of the homework right so yes you know whether or not you want to earn a badge or not or something you know we really suggest to go take a look at this especially if you're new to react and kind of step through and just work through this because it's really going to help solidify you know what you're learning and and kind of going through the paces but again this is part of the homework so if you're going to do that to earn your badge you're going to have to go through this on your own anyway okay hopefully that uh kind of gave a refresher to everyone or a foundation to everyone for how react works um i think it'll be enough to understand the the actual to do app from our repo um and how we're going to use it um erican john sorry what's your name it helped it says it actually helped me a lot good i'm very glad um okay let's talk about our next tier databases right we talked about how you know we can have this interactivity with the with the application but if that's if that information isn't stored anywhere it's just every time the page refreshes it's going to go away so we need a database to store that for long term usage so this is our our fourth [Music] layer here it's our data layer and we're going to be using astra db for our um our database today uh when we spin up our our to do app um we're going to connect it to that database and be able to use our app and actually have that information stored long term so with that i'm gonna hand it over to david who's gonna walk us through getting uh our astra uh instance set up right now this oh yeah hey orlando i'm glad you think this is the good part right you know i'll admit i'm one of those people who i've i've coded back in front end i've been an or a dba and such like that and so i kind of have lived throughout all the parts of the life cycle and application development i actually do think one of the most satisfying parts and aspects of application development is when you get that end-to-end plumbing hooked up from your application and through to the backend layer and you're actually doing things and you have a relapse so that's what we're going to focus on now so um notice the link again um i'm going to do that bang github um in the youtube chat i just did another one there and bang is an exclamation point if you didn't know that um to get the link right you should hopefully be seeing this page here um in particular we want to go to step one log in or register to ask for db and create the database yeah orlando exactly yes getting it end to end is where it's at exactly i mean you can have so much fun developing an application locally and using like you know local memory and such like that but once you get that end to end thing going you hook up to a real database and you start really getting going i don't know that's just fun i find it very satisfying okay so um so come with here if you're gonna follow along again go to the repo i did scroll down a little bit by the way for some of those who have been curious about uh the homework and everything notice that there is a homework section in here right you see this big homework section so for those who want to earn the badge and stuff you just go to the homework section follow the steps and you'll see this last one with this link that's going to show you you just click on that that's how you submit your homework right so that's all you need to do and what's really cool is what ryan was just showing you is right here it's step two right so that is you're gonna have to go through that for the homework anyway all right so we want to go down to step one here oh i'm sorry one other thing where this says demo these are the code pens so the code pens that he was showing in the very beginning that's what these are that's what these links are okay so follow me down to step one log in or register to ask your db and create database now you're going to notice throughout this as i go through it there'll be buttons like this create astra to be unfortunately markdown does not let us target blank so when you click on this it's not going to just launch into a new tab so what you're going to want to do is either right click and say open link in a new tab um or middle click or control click or command click whatever whatever os you're in but you want to put that in a new tab right and this is going to bring you to the astra sign up um so i'll just bring this over here and get rid of the one i had now everything astra is totally free this is our database this is what we're going to use for our database in the back end if you're brand new to astra you can sign up with github or google or just create a you know account with your own credentials it's up to you and again this is totally free from that standpoint so i'm going to go ahead and log in now when you first come in um the first time once you've registered it should just take a moment you should come to a screen that looks something like this right you'll see these crate database buttons things like that it'll have a section here and say create your first database or whatever um so you want to get here okay you want to get here and once you get to the screen i'll give everybody a moment to get registered like i said it's all free you'll want to hit create database so i want you to get here you should see something like this give us a thumbs up let us know you're here with me and you can just follow on in the instructions right i'll start doing this i'll do it again um so i'll do it one time just give us a thumbs up let us know you're here now i mentioned this is where we're creating a database right so notice this first field is database name so for this case uh and you want to use the values we provided here by the way for this workshop to make sure we're all on the same page so i'm going to start with my database name it's going to be my to do's workshop because we're creating the backend database for our to do's app cool i'm seeing some come in awesome yes astrodb is free for t um yeah you'll notice that it says that the the the tier is free with the free tier it's like millions of reads and writes 40 gigs of storage uh you can absolutely use this for development prototyping greenfield production workloads even small production workloads will still stay in the free tier um you'll never be charged anything unless you upgrade explicitly and put in your credit cards and stuff so yeah it's all free okay so awesome yes i'm seeing lots of thumbs up great so you can just keep going on i'm gonna explain so we're gonna put in our database name and then the key space all the key spaces is the container of our tables right so for our to do's app usually the key space name should have something some relevance to the domain of our application so this is a to do app i'm going to call a key space create a key space called to do's all of our tables for our to-do's app will be here then notice in the bottom you have a provider and a region again all of this is being showed in the instructions and such you can choose any of the three major cloud providers it doesn't matter you don't need an account with those you don't need to log into those you don't get charged separately this is all being handled by astra this is really about flexibility right so today i'll pick aws and i'm in north america and i'll pick the east because i'm in the east coast once i've done that you'll see i my create database button lights up i'll click that and that is going to create my database and then once i've done that i'm going to come back to a screen that looks like this this dashboard notice down here i have this to use workshop db it's impending so if you see you're in pending or initializing you're good all right at that point you're you're good to move on we'll just give that a second right now this is actually spinning up a three-node cluster in cassandra now if you're like wait a minute what's cassandra what are you talking about and stuff we're not going to those details here we do actually have if alex or ryan or someone can drop it an intro to cassandra to give you more um you know more of an idea what that is the thing to take away is that the database here cassandra which is being used is the same databases being used by netflix by apple by spotify by uber by all sorts of big players um so we're getting a real data layer here right uh but the key thing is once you get the pending or initializing like this you're good and then we can move on to step two all right let me take a look how are we in the chat yes uh aj you can do the react homework using a local machine uh but the part that we're doing right now is explicitly there to set you up with a cassandra database and and use astrends such like that so this part of it while you could do in memory local this part does require that you are using astra let's see okay all right so the next thing we want to do here is go to step two and create a token and what's this about well if you think about it when we're creating a database up in the cloud like we are here then we want to ensure that that machine or those machines aren't just accessible to everybody because cloud instances are going to be publicly accessible they need to have some kind of authentication layer and that's exactly what the security token is for so what you want to do there's one of a couple ways you can do this um one oh my work okay yeah my database just went live so you can either use the ellipsis on the right side if i click on that you'll see generate a token that's one way to do it and again notice i'm middle clicking or i'm right clicking saying open in a new tab or or up on the left hand side the current organization i have this drop down i can click that go to organization settings again i'm going to middle click both of these are going to bring me to the same place right um i want to go to token management and then once i've gone there you'll see i've got this role now for for today's case just pick database administrator right um you'll see that there's a whole set of roles here and stuff but we're just going to make it easy pick database administrator say generate token now at this point you want to leave this up because we're going to use this in just a moment but it's also important notice this download token details button click that button download your details here's why the second that you navigate away from this page all of these are going to go away and this is for security reasons you're not going to be able to get these back you need to download these token details to ensure you can use it later right but for now that's why i put this on a new tab just leave these up and we're going to use them here in a second all right so if you've gotten to the point where you've created your token and you have a database give me a thumbs up let me know that you're with us super cool there [Music] give everyone a moment oh thumbs down does that mean poke are you not are you not there yet if that's what you mean let me know yeah i'll give you a moment oh jason if do you need me to go back over through another spot here um yeah if anybody needs me to repeat something feel free to let me know okay um and just to be sure as i see these thumbs up and stuff coming in i see some dapping and everything like that um where we are uh if you if you go to the github repo oh if it still says pending that's fine we'll just you know that if if the database isn't up and it's still pending or initializing you can still create your token and you can still move on yeah uh the role uh is database administrator yep yeah so jason what we're doing because i just saw your comment there is we're going to the repo here let me drop this real quick go use this in the chat jason go to bang github like i just gave you and then go to step one here in the repo log in and register to ask for db oh you just need the token okay i'll do that one more time um one of two ways on your database uh on the in the dashboard here all the way to the right you see this ellipsis click that you should have a generate a token again open that in a new tab or you can go to the organization up here in the top left organization settings i'm doing the same thing where i'm putting in a new tab just to make it easy in both cases you're going to end up where you want to click on token management and that's where you get your token all right hopefully that gave it to folks who needed to catch up wonderful all right so this next part now some folks were asking earlier right um if we're gonna do anything with apis right that's where we're gonna talk a little bit about a rest api so one of the things that you get in astra are a set of apis rest being one of them and apis being application programming interfaces these are really the ways and i know we haven't talked about that part yet in the in the slides ryan we can go back to it um these are essentially the ways that in application development that we use to talk to other things right so if i have my application and i want to talk to say a database or if i want to talk to another website or something like that i may expose a rest service or i may use graphqlr i might use grpc or i might use all these different ways you can communicate with them but really what they're about is to try to give like nice clear interfaces that make communicating with other things easy right now what's cool is astra provides a whole set of these apis right out right out of the gate so if you click with your database if you click on the database itself and you'll see here you have this connect tab right so if you go to the connect tab there's a whole set of apis that are here you'll see document graphql and rest now today we're going to focus on rest if you're not familiar with rest api you're going to see one kind of an action in here in a moment and just you know uh you know to to kind of compare if you went in times past you know we had other apis like soap was one that was widely used it's still actually used to some degree and everything like that but a lot of the times it required you um to say download libraries or you'd have to have the classes from the thing that you're trying to talk to things like that and eventually came apis like rest that essentially absolve the need of any of that so now i can use these rest endpoints to get get data you know change data update things insert things you know do crud operations create read update and delete type operations against a database like this so what's cool here is that astra just provides these for you right out of the gate so click on rest api and then you see this launching swagger ui there's a link here this is your swagger endpoint open that a new tab this is actually going to be this is for you this is generated for your database okay all right so hopefully you're with me at the swagger npi now what i want to point out is notice all of this stuff what is this stuff about right actually i'm going to go to uh data here um what are all these these are these are rest end points so what this means is right now from our database i have a whole set of endpoints that i can actually use to access data or to say create a table or add a row or read rows or whatever i can delete things so i have all these operations and notice how each of these i have a different type right get put delete post these are the different types of operations that i can perform right so this is an example this is a rest api or a set of actually rest apis that have been exposed from our database for our application to talk to now before when you were watching ryan and we're working with that to-do app right any of the to-do's and stuff that was all local in-memory stuff that wasn't talking to an external data source in this case we're going to hook up a to-do app to the external data source our database here um astra and so that's where these are going to come into play all right so here's what we want to do let's see first one is go to schemas now again i'm following the instruction step 3b here and i want to go to schemas now specifically i want to create a table right so what i want to do is under schemas now take note you'll see there's v1 and v2 in all cases we're going to be using the v2 versions right so i want to find create a table under schemas and v2 okay that looks out it's column my bad where's create a table create a table create a table it's around here somewhere there it is okay so it's down towards the end of the list create a table i'm going to open this up right now and what's cool about swagger swagger is not the rest endpoints themselves swagger is actually just a tool that exposes all the rest endpoints and gives you this nice kind of web app that you can use to explore them so what i want to do is i want to try it out notice i clicked on the tried out button that was over there on the right and then remember that token that we got a moment ago this one this one that says token i want to copy this there's a little copy widget right here and i'm going to put that into this extra sander token this is how i'm authenticating this is how i'm telling when i go to exercise or execute something on my rest endpoint this is how i'm going to authenticate against it so i can actually talk to my database now for the rest of the stuff here we give the values that if you remember the key space we created that earlier was to do's and then we're just copying we're literally copying the content out of here in this case this is actually we're creating a table we're creating a table called rest from readme by id right this is just an example i'm going to replace everything that's here and i'm going to replace it with exactly the text that was in this case now once i've done that i'm going to say execute i'm going to click on this execute button and if it all went well i'll get a 201. now by the way you're like what's a 201 what does that mean this is another really cool thing that swagger does for us swagger is going to expose all of the different kind of response codes that we could have so we know exactly what they are this is really great for development so the 201 says it's created and notice that my response gives me the name of the table so i know that my table has been created right and what would actually be fun is if i go back to my database now if i went to the cql account so you don't have to follow me on this i'm just showing you something all right this will log me in i'm going to use my to-do's key space i'm going to take a look at my tables and take a look see in my database i have a restroom readme by id table right so we actually just used the rest api with a create table command to now go ahead and create the table all right so hopefully i see it looks like oh the key space value is to do's yeah key spaces to do's exactly if you got a 401 take a look it's unauthorized so that tells me that something is up with your key make sure when you copy the token you're getting the one that says ask for cs and in fact copy aster cs along with it yeah okay so we have a table but now we want to put some data in the table right um so what we're going to do here is now i want to move down to my data section all right so oh a trick by the way pro tip copy your token because you're going to need it in a second all right so we created a table now let's go ahead and put some data in so i'm going to open up data again i want to add row but don't forget we're using all v2 ah here we go add row right add row i want to say try it out put my token in and my key space name again is to do so that hasn't changed remember this container of our tables it's the to do's key space that's where our tables are going to be here's the table that we're using we just created it rest from readme by id and now i want to add some row now in this particular case this is just some json that we're going to use to enter in data into our table um you know we didn't really look at the details of the table that we created but it has an id field and it's got a completed field if you think about it for a to-do item right i need to identify it i need to know is it completed or not what's the text so on and so forth oh the homework uh dolph you could like within a week we just asked you do within a week all right now once i've done this i'm going to hit execute and i got my 201 and it gives me an id okay so now i just added a row to the table we created using rest again again this is a rest endpoint and in a moment i'm going to show you how this links in together in code right we're going to put that together to get to end to end but before i do that i want to come back over to my console let's take a look i just put something in this table right and there it is to do from readme all right that's the one that we just put in right there so now again i've used this rest interface now something i want to point out and no point do i need drivers do i even have an application at this point i can literally use the rest endpoints as my api to my database this is now the interface to my database that i'm using oh uh hunji the swagger url i can't actually share it why because it's specific to your database so make sure when you are in um your dashboard and you go to your database you click on the detail page go to connect like you see here rest api and right here the swagger api that is your swagger ui yeah so i can't actually share that when you have to use yours all right now finally last thing i want to retrieve some values okay so we created a table we added a row right we saw that again here that we've we've actually done that in our database but now i want to go and retrieve those so again i'm going to grab the token and let's see it should tell me i want to go in the data section again and i want to retrieve all rows again i want to use the v2 versions right so i'm in data retrieve all rows here it is it should look like this this is no sql yeah computer man this is this is a nosql database cassandra is a nosql database i can't enter the oh if you can't enter the parameter for the ad row ensure that on the top right hand corner you've clicked the try it out button that's right no uh orlando swagger is not a data sacks product um i you know i want to say it's open source it's out there but it's not us yeah it's actually something that we've implemented as part of astra yeah it's really cool you can use it for your java apps and all that yeah yeah this session will be um uh this will be this is recorded for later see you know uh tlf makes a neat point jolly jeepers by the way i love the fact that you said jolly jeepers cheaper that seems like a lot of steps just to add some data i'm guessing this would not be good for databases you were frequently modifying with lots of data um or is this where you throw in some other code to automate adding removing modifying the tables yes we are going to do that in a second swagger is not the way that i would do this for my app this is the way that you kind of work out what that api is going to be like that you then use to implement your app and i'm going to show you the implementation in your app here in a moment so you're absolutely right i there's no way you would do this for like thousands or hundreds of things right that'd be absurd okay so i'm going to retrieve rows again i'm putting in my token and i'm going to use that same key space as we did before again our table name rest for memory by id the one we created right and then i'll hit execute what i should see is the same value that to do for me me that we got from the from the database right so the whole point of this was just really showing um you know some examples creating a table adding a row and then retrieving some of those values so some we did pretty much everything but an update and delete as far as spread goes using rest now two tls point though this seems like a lot of steps am i really gonna do this my app again this is a tool that's used to help figure out how you're going to interface with the database um there's some key pieces of information you're getting here one you know the type i know it's a get two i can actually see the exact api you know the the rest endpoint that i need i can also see what are uh the various fields that are available and such like that and then i actually get you know i see this whole thing being constructed here's a curl command for it right i mean this is this is a development tool so what i'm going to do next is now this next spot this launch get pod ide this opening pod that's that's for you to do on your own that's for for homework what i've actually done is i've baked this for you i gotta reopen my workspace oh darn get pod timed out no uh oh it's sorry i'll just start it up because here's this next part when gitpod comes back up this is where i really want to show you the fun right uh and while that's loading i'll actually just explain a couple things when you go here through the next set of steps launching get pod ide it is going to do the exact same thing by the way that you're seeing happen over here that i'm going to come back to but when you get to this part once your git pod is launched and you run this command right here this is going to be the thing this astro setup this is responsible for making the connection to your database and it's going to generate a dot enb file for you that is what our application is going to use our to-do app is going to use to be for configuration to talk to the database right matter of fact how are we doing over here here it goes all right so it's going to take all right while that's loading i'll just go ahead and load up my.env so when you go through the steps and you're doing the homework and everything like that you'll see here that the the astra setup command will generate this for you right this these are all the things that i need to authenticate notice that token there right notice it has the name of the key space it knows its region this is actually being done for you by astra setup um then what i'm going to do is now mind you i'm i'm doing this real fast this is for the homework because i want you to see this end to end i'm gonna do this real quick you might need to zoom in on your uh pod for font size yeah all right this is this is the fun part and and by the way while we're waiting for that to load so somebody was asking about okay and i think tlf was this is part of what you're asking um now when i go to interface with my database with my application i can use the information that i just gleaned out of what we did here in swagger and i can use that in my actual app so here's what i really want to point out let me go ahead and do this real quick we're going to launch the app all right so this is me launching the app oh jason i wonder if that's something odd in safari with swagger i don't know on that one okay so if you notice i have a to-do app here and i have a set of to-do's that are in these are coming from the database right and again these are coming from the credentials that were that we got from the astro setup tool again you'll do that part of the homework but here's really what i want to point out notice this let me open this up a little bit so check out i'll just close i'll just close this off so we can see here we go check out this right here so this function that we're in this get rest to do's this is the function in our application that's being called to get the to-do's from the backend from the database using our rest api that then is responsible for essentially pushing if you remember what ryan was talking about with react and everything you have components you know they can they can update dynamically and everything like that well what's happening here is you're going to have something in rec that's going to make a call to get rest to do's that is going to go over this rest end point right here notice this end point let's say see it's v2 key spaces whatever the key space name to do's right the table name in our case this will be rest and then we have a where clause uh because in in this case we're actually saying we want uh we want the to do items where the key is a particular thing right but what i want to point out is notice this is this right obviously you notice the curly braces key space name and table name is telling you to fill those out well we did that down here didn't we here's to do's here's rest right so we can use this tool to map out exactly what this is going to be this is that endpoint so when we say execute down here and we're executing some command against this rest endpoint that's exactly what we're doing in this code right and again the cool thing is i don't need drivers or anything i can literally just fetch this directly from the rest endpoint and talk directly to the database all righty i was just how are we going questions ryan uh we're doing pretty good uh there are a few questions on how to get the token and i've i've been answering uh in text again the instructions for for doing that as well are in the github repo um so you can go through that you know when you're doing the homework and stuff you can just follow and um so uh sony jose or sony joe's josie however you say that one sorry uh can you share the env file no i i cannot share the env file why because these credentials that are in the env file are specific to my database you don't ever want to share these by the way how do you get them when you do step seven uh in the homework when you do this this command right here this aster setup this will generate the dot enb for you right you're going to run the command it'll generate everything the dot env for you so you that is specific to your particular application okay yes and how was the token um uh j how is the token added in the react.js call so when you run astro setup by the way ask your setup is just to help your script you can normally if i didn't have something like that that's something we provide normally i would build this env file myself now one way you can do that actually if you come back to your database there's a nice little let's say i'm coding if i go back to the connect tab and i'm coding in node right um it actually has all the instructions here i'm sorry yeah if i was using the rest api my bad um if i was going to use the rest api right here it actually gives these values to you now if you're wondering where that token comes from well remember that page where i said hey you need to download these details that's what i'm talking about right but all the rest of the stuff is is given to you so normally if i didn't have a helper tool like astro setup i would generate i would just create the dot env file myself and i would be plugging these things in um then later on you'll notice uh let's see i'm trying to think of where that actual code is for that one pull that in [Music] i wanna say some utils api yeah right um no that's just that part i'm trying to think i'm trying to remember ryan where the part that brings in the uh environment variables is here we go yeah i knew i was there somewhere um uh it would definitely be in the uh functions in the uh serverless functions so utils um oh miss and utils duh here it is thank you ryan i totally like linked on utils yeah so if you're curious where those are coming from here we go this is what i was looking for so when we're establishing the connection to the database right there's this utils utils folder this asterisk client right here notice the application token so as part of setting up the connection to create the client this process.env that's where these are coming from so process.env says i want to get a variable from the dot env file and then notice that this value matches one of the ones that's here right so when each of the serverless functions uses the the rest client as a matter of fact if i look up here i should have client yeah you can see this get rest client astro rest client so it's it's instantiating the connection an astra rest client uh and then that's where it passes those values and then at that point i can just say client.get and issue the rest you know the rest endpoint here um so that's where that's actually coming from then from a react standpoint um the the part of the code that is responsible for calling this um it's going to take the response from that and it's going to inject it right back into your page and then that's when i'm over here on the to-do app and i'm doing things and say you know i'm interacting with it you can see the uh the logs will give me something this is now where that data is coming back from the rest endpoint and it's being injected back into my dom and substrate react oh jay if your git pod terminal is unreadable you know something i don't know why i've noticed lately in brave in particular that the terminal is garbled uh sometimes if i zoom in if i change my zoom levels sometimes it changes but if i just go into chroma firefox it's not an issue i don't know what happened with bravely recently i use brave all the time so okay so anyway with that um i would say if you want to get through that then you're going to want to go ahead and finish off the homework and everything like that for yourself but for now i think we need to get over to the game yes the game oh and i want to answer one question uh before we do that orlando has a great question if astros the database what is cassandra cassandra so astra is actually built on apache cassandra astra is datastax's serverless fully managed cassandra so like normal open source apache cassandra or or something like that you would have to actually build the database on your own and everything like that in this case we're using astra to not only launch the database as you saw in like a couple of minutes so you get a full cassandra cluster and such like that but it's serverless and elastic meaning it'll scale up and down with you elastically um but then it also provides the apis and stuff like that that we've been using right out of the box right so that's what you're getting with astra that's that's part of what you're getting with astro so astra is a fully managed cloud-based platform built on apache cassandra which is the database hopefully that answers what you were looking for all right cool rahul good to see all right there we go back over to ryan for the game um yeah cassandra apache cassandra yeah that's cassandra is apache yes it's an apache because uh other apache project yes all right some get some music going we're going to do ready for a game with a mentee quiz now this is a game this is a quiz that we're going to do the top three winners will receive some swag uh and be shipped worldwide so uh it doesn't matter where you are we we can ship the swag to you um so if you want to join us you can i'm going to bring up a i have to go to the right thing uh i'll bring up a code here you can also type uh exclamation point minty or bang mente in the chat and it'll bring up the code uh or you can use the qr code if you want to use your phone now something to note is because there's a delay in the stream it's important to watch the tab that you have mentioned open in or your phone that you have menti open in to know when the questions come up and answer as quickly as possible because speed matters you get more points the faster that you answer so menti.com you can enter the code that you see on the screen let me see oops see how many people we have i think if i hear the next one we get all the all the pictures yeah here we go okay we'll give it a little bit of time to make sure that everyone who wants to join can enter if you hit the thumbs up in menti uh we can have some thumbs up on the screen which is fun all right just give a few couple one one or two more minutes um let's see if there's any this is meant to auto refresh it should auto refresh um i believe that is fine hi nora there should be a thumbs up all right uh nikita if you type in exclamation point mentee in the youtube chat you'll see the code come up also i'll bring up the screen it's at the top of the screen as well it looks a little laggy um right there's no thumb this time oh that's a bummer um let's get started it's weird that is weird oh it's probably because i went too far in the quiz sorry all right but we can get started um so there's going to be i believe six questions remember watch your phone or watch the tab that you have mentee in to answer as quickly as possible all right first question what is astrodb it is a local in-memory version of cassandra it is an integrated development environment or ide it is cassandra as a service in the cloud with apis or it's a movie with leonardo dicaprio all right yes it is cassandra as a service in the cloud with apis congratulations all right let's check out our leaderboard we can see who answered the fastest looks like jon snow simon um yeah so don't worry if you are lower on the leaderboard this game can change very quickly um and it's anyone's game all the way up oh jon snow oh wow jon snow's at the top there oh cedric is watching you up oh who could that be all right question number two what does html stand for hippie markup to love high trading machine learning hypermarket to learn or hypertext markup language right yes pretty much everyone got it correctly hypertext markup language let's see what our leaderboard looks like you know i gotta say uh our answers in that one are i think they're a little obvious even if you didn't know i know all right i know i wish you wanting more hippie markup loving the world there pokey congratulations pankaj for the fastest answer bringing them up to fourth place let's see what question three brings what is the name of the package manager for node npx npm netlify or mvn mvn remember package manager for node yes npm is the node package manager and npx is the uh x the runner the note package runner so that's the difference there see our leaderboard cedric is still watching us all right basketball got the fastest answer he's in fourth place and picaj goes up to third place awesome let's uh let's go to question number four we're halfway through the battle here yeah what is css not used for style and formatting text animations and transitions page layout and organization or to compile html which one is it not used for right yes compiling html is what it is not used for very good oh yeah don't put the answers in the chat please just mention all right pikachu gets the fastest answer and brings him up to first place and aj's in second and basker pal is in third all right question number five how does react organize source code with react modules with react components with react divisions or with react chapters all right yes react components is the correct answer most everyone got that correctly i mean is this suitable for web development yes of course that's what it is oh totally yeah yeah all right andre with the fastest answer makes an appearance in the top ten but conjunct uh maintains first place it looks like there's been a couple of uh couple of upsets let's see what the last question brings us question six now remember if you're in the top three you will win so get ready to screenshot your screen if you get in the top three what is the name of the object tree updated by javascript the john jom java javascript object model the rom random object memory the dom document object model or the mom and we all need a mother all right yes the dom the document object model is the correct answer all right let's see our leaderboard now remember if you are in the top three take a screenshot of your winning screen from mentee and uh and you're going to email that screenshot to jackpotfire congratulations pankaj to our winner aj is in second and rahul benjani is in third place take us take a screenshot of this screen right here and uh yeah if you're talking to me take a screenshot right now uh yeah and so if you uh send your screenshot to jack.fryer at datastax.com you can see his email on the screen uh he will contact you for all the information needed to send some swag so congratulations to first second and third and for everyone who participated thank you so much for participating yeah 17th out of like 120 is not bad that's pretty good yeah all right cool let me uh i believe we have see we have this question yes quick survey to help us um this is kind of open-ended question i'll leave it up as we close out here um but what did you like the most and what should we improve we're always looking to improve our workshops make them more accessible and uh and easier for people to digest and and learn from so um why don't you answer that while we close out you've ever been with us before in one of these workshops you might notice that you know we we tend to like make little changes and try to evolve things a lot of that comes from your feedback so we do take that very seriously yeah rahul asks what are the goodies what's the swag i believe it's a t-shirt uh mug and pen i'm not sure if it's yeah what's and what's cool today is you can now when you get when you get your voucher for the swag if you won you get to choose oh do you choose your slime oh that's new yeah yeah we got a new system now so that's cool hoping that's uh gonna be gonna be more fun and there's more goodies coming by the way um so uh i mean i i actually like the shirts myself i literally have a whole wardrobe of all these shirts oh there it goes cedric c yeah oh there's portal backpack pen stickers t-shirt yeah cool uh so we are uh we have vouchers for our uh our certification um for the uh the cassandra certification if you want to uh get some of those vouchers you can go to the link that you see on the screen i'll i'm also typing it in the chat um so you can go there and you can claim some vouchers it'll be open for the next uh 15-20 minutes i believe and they're normally 145 dollars each and they're valid for three months fill up for two attempts and you can get your certification in administrator developer or kate sandra courses now if you don't know what these are if you go to datasacks.com certifications you can get more information on what those are you can also go to datastax.com academy.datasacks.com my apologies and all of the course work uh that is needed to to go through to get these certifications is available for free at academy.datasacks.com and so you can uh if you're interested in learning more about cassandra and getting certified in cassandra which will look great on a resume you can do that and you can get your free voucher for two attempts which is great um homework we have talked about doing homework um all workshop this is how you go about doing it so the homework is specified in the github repo all the things that you need to do it's not difficult um it's basically just going through the exact stuff that we went through today taking some screenshots and uploading them to a an issue on the github repo so this is the process you go to issues um at the top you can create a new issue uh then you can use this template a homework assignment template and click on the get started button and then all this uh uh stuff is pre-populated um and you can just fill out all the the pertinent information your name your email your linkedin profile and then all the screenshots for you for your homework now if you to get a badge you you do the homework you submit your screenshots you'll get a badge your name we need your name and your email to issue a badge that's pretty much uh a requirement there so that's why we ask for it um and we will uh we will grade the homework and we actually manually do that we take a look at every single um submission and we will let you know if any improvement needs to be made or or what not um but we'll we'll take a look at the screenshots and we'll approve them and issue the badge and you can use it um on different social media like your linkedin profile or um wherever you want to use it so just to just to be sure that the to to get your badge right the homework itself to get your badges in the repo right it's in the github repo there's a big section that says homework just follow follow the steps that you're going to need to create and complete the first create racked app that you saw ryan do you're going to need to have the working to do app that i was going through and then the very last step of the homework is gonna have a link in there that will create a github issue you just put your all you need is an image from the completion of both two images that's it you put that in the issue that will be enough to get your badge we'll review them once we've approved it once we've gone through it then the badge will be issued right there in the issue so everything you need is in the homework section of the repo yeah all right so what's coming up if you go to datastax.com workshops you can see all the workshops that we have is currently scheduled um but a few things that are coming up we have a uh a france data sex france meetup hosted by cedric our very own cedric um that is on the 10th of september uh we also have next week the introduction to graphql um that is on the 15th and i believe there is a repeat on the 16th yeah um and we also have um cassandra day australia and new zealand uh on the 17th uh so if you are in those areas if you are in australia or new zealand uh you can attend that and um get to know some of the the folks that are out in that uh region of the world learn more about cassandra um and just get connected uh with that community as well that's on the 17th so those are things that are coming up uh just wanted to give a another quick plug for our discord uh if you go to dtss dtsx.io discord which we should probably have a command for but uh you can join our discord thank you everyone for asking questions in our youtube chat when the youtube absolutely when the stream is done the youtube chat goes away and we can't address those questions so if you have any more questions go to discord and ask them there and we can answer those we have uh lots of lots of people not just us uh that is that are active but a bunch of other members of our community that are very knowledgeable and can and help you out um as you need it um consider subscribing to our youtube channel we have all of our past workshops are recorded and available and you can watch our backlog of all of our workshops covering a wide range of different topics from backend to front end to cloud based infrastructure it's it's pretty comprehensive and we regularly do repeats of these workshops and uh and so if you're looking for a live workshop of one of these keep an eye on that um datasacks.com workshops to see when uh when those are scheduled and if you subscribe you can get notified when we go live um and you can join us each week we go we do every single week so it's a lot of content all right with that thank you everyone for joining us we hope you learned a lot and had a good time um yeah we hope you have a great rest of your week and we'll see you next week for our next workshop absolutely and don't forget do your homework earn your badges right about them on linkedin all right see everybody thank you yep see ya 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: 3,096

Rating: 4.930131 out of 5

Keywords:

Id: lXM0-C6c9Dk

Length: 131min 8sec (7868 seconds)

Published: Wed Sep 08 2021