Build a TikTok Clone in React Native and AWS Backend [Tutorial for Beginners] 🔴

hey what's up guys welcome to a new stream welcome to a new week uh and today uh we are gonna do the aws back end for the react native application that we have started previous week and we have started the tiktok clone so if you didn't see that video i would highly recommend go check that out or if you are interested only in the aws backend that's perfectly fine you can find the source code in the link in the github repository so what we are going to do today uh let's quickly have a look um not here yeah so we are going to implement first of all authentication because that's a important part of almost any application that you're going to develop using rack native so we're going to set up the aws auto amplify with authentication that will give us uh pre-made screens for signing in signing in signing up uh forget password and um yeah and much more and you'll see how easy it is like it's it's it's incredibly easy i think it's like three or four lines of code and at the end we have all these screens ready for us after that we of course need to save our data somewhere and for vet we're gonna create a graphql api uh we're gonna get into more details about like uh the ins and outs and what is the graphql api uh again we're gonna set it up with aws amplify and the api will save all the data to dynamodb but that's also a lot of things are happening automatically so at the end of the day you don't even work with dynamodb directly you just set up everything uh you just write like how will your your models look and aws will take care uh for you about everything else so that's uh that's the awesome part and lastly uh we need to save all these videos all these files somewhere in the cloud and for that we're gonna use aws s3 uh the storage solution from uh amazon web services and again you'll see that it's not very complicated to set it up and uh record a video and then upload it there so yeah um hello everyone uh where are you coming from today where are you watching the stream um thank you very much for joining and thank you for all the support you guys are showing lately yeah let's let's wait a little bit for people to join and then we can start to work so guys uh yeah what what other important things uh i have to tell so uh hi alexandra from moldova uh hi gabriel um ivy vic hello everyone so guys yeah if you're new new here thank you very much for watching uh on this channel we are doing uh this kind of uh clones in react native and uh also we are using aws for the back end and i'm doing this because uh i really think that uh learning with project based learning uh is the best way to yeah to learn any new technologies uh because yeah a lot of people i know a lot of my friends are struggling with uh in like a tutorial uh life cycle like where we watch tutorial after tutorial but but they never start actually implementing something and that's why i decided uh to start doing these live streams uh because that's how i learned all the technologies that i know um that i know and that helped me get an internship at amazon uh so yeah just by doing things just by messing around by having problems and then trying to solve them by yourself uh building an actual product that you can see and you can be excited about uh yeah it will make your life easier and the process of learning a lot more fun instead of watching just some random uh yeah to do ups or i don't know uh fury so yeah yeah if you're interested uh please join our discord uh channel uh the link is down below we have a great community where people are sharing their progress uh if they have problems um you have a community is pretty helpful and everyone is helping each other and from time to time i also try to help everyone who is having problems and yeah if you can also contact me down below in the comments if you have any problems and i'll try to help uh hello from in the hello please teach us how we can add filter library as uh tik tok uh filters you mean like uh video filters and like photo filters things like that if you're speaking about that um we're not gonna do that today i'm not planning to do that today uh because we have a lot of things as you saw uh planned for today but maybe in future if a lot of people are interested maybe we can implement filters as well hello hello so guys um yeah let's get started and yeah as i said we're gonna implement authentication we're gonna implement graphql api and the storage but first of all we are gonna start with a graphql api and before getting into that uh like what is graphql api graphql api is an alternative to rest apis and it's a syntax to define how the data from a backend will be queried and usually the advantages of graphql api is the client is the one who decides what data he needs and not vice versa like for example if you are asking data about posts but but you are interested only in the idea of a post and i don't know the image without any like comments without any i don't know users and stuff like that uh you can do that with graphql by specifying like okay i need the post with id and with a image and that's it uh in rest api it's a bit different you say like i need this post and they will throw at you everything that they know about that post that we have in the database and also graphql makes is make makes it easy to aggregate different source of data and aggregate uh yeah different types of data for example with one query you can receive a post with all the comments and for each comment you can receive information about the author of that comment so it very easily for the client uh aggregates all the data from different type from different sources from different database tables from different yeah even different apis so yeah to better illustrate that uh here we i will show you what's the difference between a graphql api and a rest api here on the left we have a rest api and let's imagine a situation a usual situation where in in any like application with posts um yeah for example there is a list of posts which is the feed and each post has comments and each comment is submitted by a user and that is an offer so to render for example the instagram or tick tock feed where we render the post we render free free most common uh top comments and their uh users like image and username we would have first of all to create a get request to send a get request to the server to get all the posts and for example we receive back free posts then for each uh each of those three posts we need to create to send one request for the comments and that's like three hour requests here for each of the post and then when we receive data about the comments for each comment we would have to query all the offers so that's like more than 10 more than 10 requests to the server for a situation where you have like free posts with each of them like free comments uh on the other hand having a graphql api you can receive all these data just by doing one request and you will specify like okay i need i have a post with top three comments with their offers and then graphql will aggregate all this data on its end and will return it to us in one request and that's much more optimal and more performant and graphql works based on a schema so a schema is defined by in in today's video we will define the schema and we will define how uh each object will look like and how we will be able to query them how we will be able to create them so there are um yeah custom types that we create for example a type offer and the type offer has an id a first name a last name and a list of posts this is an array uh type post as well has id title offer votes and also graphql schema contains uh query and this is um all the operations where we need to receive information from uh from the api and this is very similar to a get request in a rest api it's like getting the posts getting the yeah the users getting everything anything you want there is one more which i don't have here and that is a mutation an annotation is similar is a operation similar to post request in a rest api basically when we want to create something in the database then we will run a mutation for example create post create user add comment delete update and so on so yeah this is a very important part because on our end today we're gonna write only this schema and based on this schema uh aws amplify knows how to create all the resources everything like database and for each type for example for an offer for a post it will create a separate table uh and so on so a lot of magic is happening behind the scenes but this schema definition is something that we will need to know and um yeah that's a very short introduction into graphql if you want to know more definitely check out more resources there is a lot of resources that you can find on google medium and and youtube so um yeah without further ado let's jump into um initializing our amplify because that's what we need to do before uh adding the api so i'm not sure i think i'm missing um no i'm not i don't miss it's here so first of all let's set up the aws amplify project and you can find that by accessing them you can find more information how you how to install aws amplify on this link it's docs.amplify.aws and where you'll press on start and then you'll choose react native so here is the first tutorial [Music] before starting you would need to have node.js installed on your system and uh for this chapter i'm gonna go uh quickly through it but i expect you to do it uh yourself and i expect you to have this installed on your system before getting in uh to the next step because that would take us some time if we would do it live stream and i have them already installed so you would need node.js npm git uh yeah initialize a new react a native application we already have one then you would need to sign up for an aws account so to create one you can access this link an aws account can be created for free however you need to uh attach your credit card and most of the services that we are going to use in this in the tutorial and that you are going to use while you're learning most of them uh have free tier even here they explain and the three tier means that okay you have like a limited amount of resources that are uh given to you for free uh for you to yeah to learn and to test them out uh but don't forget to yeah delete those resources when you're done to be safe for example we already created around four or five projects and i'm still paying zero to aws because i'm under the free tier on the other hand at my startup we have around 15 000 users and i'm paying less than 70 dollars per month and our application is heavily based on videos so it's pretty affordable i would say so um yeah then we will need to install globally the amplify cli there is a great video that you can check if you want to visually to to follow the tutorial after which you need to configure amplify and it will walk you through some creating some users some policies uh which will give you a access key and a secret uh access key you add it uh into your system and then you are done setting up amplify so i expect you to follow this uh yourself it shouldn't be um with any errors it's pretty easy and then we can follow together the next step so let's set up our full stack project uh we already initialized the project now let's run amplify init let's go to our project amplify init to initialize the project and what's cool about amplify that uh you don't have to supply any arguments but but instead it asks you everything with questions and you just type like all the options so first of all enter a name i will leave it as it was like tik tok environment development here if you're using visual studio code choose a visual studio code i don't have my webstorm there our application our application is a javascript application and react native from here uh then yeah source buff is the root folder build command yeah everything we leave as default and now it will take a couple of minutes uh yeah we just need to say yes do you want to use aws profile and here if you left your profile during setting up amplify as default you will select default however i created it with a different name so yeah right now we will probably wait a couple of minutes until it sets up so i have my coffee here all i already talked for 20 minutes my my voice is cracking i recently um yeah let's see what people are saying what is the difference between graphql and rest api yeah i think i uh i introduced that in the slides and hopefully it answered your question hello from brazil hello can graphql handle the relation um what do you mean relation if you are speaking about the relationships between uh models and types for example a relationship between a user and a post yeah graphql is very good at that and uh yeah once you set up this like it works like like a charm and everywhere where you have a post for example you will be able to access a user and while you have a user you'll be able to access all its posts so with just a little setup it works very nicely hello from lithuania thanks for videos and your best vadim thank you very much yeah i have uh have a very close friend in lithuania yep so as we see amplify have uh set up uh it created for us a couple of files for example amplified json uh the amplify folder like we'll not get into a lot of details right now however uh what we need to do is to run amplify push and amplify push we'll take this not push but yeah push right or should we first of all uh add something yeah before pushing because we didn't add any services uh we will first add some services and then push uh yeah the next step would be to install all the libraries that we need and we can copy them from here um and yeah if you're using npm stick with npm and use npm i'm using yarn this is just my personal preference is not nothing like nothing is better or worse yeah yeah amplifying it then we add all the we install all the dependencies like aws amplify amplifier react native and so on and then we re with freelance of code like we configure the amplify in our application so the dependencies have been installed when npm packages and the next step is only if you're working on mac os and you have set up the project to work with for ios uh and after installing the dependencies we need to install the pods and yeah if you are running on mac os run np export install ios this will make sure to install all the native ports of all the libraries that we currently added yeah it installed and the last step is to add the three lines of code like importing amplify importing the config and setting up the configuration for amplify in our app.js so let's go here i think up the gesso's for expo and index.js is for react native so here in index yeah we can import amplify set it up add some semi columns uh save and then let's try to do yarn ios to run the application on ios and to see if everything is still working and running yeah it will take a little bit of time come on come on yeah it's compiling all the new libraries that we added and it usually it's only the first time that it takes up takes so much time and after that it runs much faster so guys um are you follow did you follow the first episode of um of tiktok and also i'm interested if you're doing it yourself or you're just watching and what what is your experience like if you can tell in a couple of words hello uh anurag yeah meanwhile our application installed and yeah it looks like it's running the same way as we left it previous time and yeah probably i should have uh do a quick walkthrough for people that didn't watch the first uh episode so um yeah we what we developed in the previous week um we set up uh the tick tock like post page uh displaying the video we can press to pause the video and we can press to play again the video it displays uh all the information about the creator of the song the caption uh and all the icons and also uh like button is working we can press to like we can press to unlike and then we have the cool feed that tick tock implemented uh that is when you scroll it snapping to the view here we just display the same video but they are different and we can see that we just drag a bit leave and it snaps to to the center it works really smoothly i checked it on the device it's like very very very smooth so also we set up all the navigation pages like for example the search uh yeah other pages that is the same one but because we didn't create uh we focused only on the main part of tick tock like videos and feed and so on so guys um yeah hey brian uh priyank uh thank you very much for the donation uh i love your hard work thank you very much thanks that means a lot to me i actually uh i don't know if i told but um yeah i set up a goal for myself um recently i rejected an offer from a job offer from amazon that was intended to start in uh in summer of 2021 and uh i set a goal for myself to yeah to start earning from from all the projects that that i'm doing including youtube and stuff like that to start earning the same like amount that amazon would have paid in order not to get discouraged then yeah have a mental breakdown then so thank you very much you are um supporting that cause and thanks thanks a lot so let's get back where is them yeah okay so we talked about the graphql api um okay guys the next step is to add a separate service because what is amplify amplify is a set of multiple services it's nothing new it just uh combines a lot of services that aws already has and makes it very easy to integrate with uh with front-end application like rack native react and other yeah other frameworks and whenever we need something separate we have to add each service individually uh and that is also helping us maintain the application uh clean and small because it doesn't come with everything installed we will need to add for example if we need the api we just call amplify add api and it will make sure to set up locally and in the cloud all the services that we need uh for the api so amplify add api it will again ask us a couple of questions so here we can create a graphql or a rest api we are going to go with a graphql because we are cool just joking so uh choose the default authorization type for the api so here we have a couple of options uh for development builds uh it is it is um yeah we can set up the api key however this api key will expire after seven days or we can set up to to to expire like after 30 days or so on or you can use amazon cognito user pool however we for that we first need to to add authentication so yeah probably i will go with the api key description no we don't need the description how many days from now the api key should expire so i would set a maximum value like 365 days um yeah and let's go forward uh yeah no i'm done uh nothing advanced do you have an annotated graphql schema we don't have now but we're gonna create pretty soon so we select no so choose a schema template here we are suggesting two templates to to start from one is a single object for example a to-do and one is a one-to-many relationship for blogs posts and comments so we're gonna select this one because we have like posts we have users we have one-to-many relationships and um yeah we it's it will be easier for us just to change some some things in this schema to for our use case do you want to edit the schema now yes i want but i will select no because it cannot open f in my case it cannot automatically open and i have to go manually to amplify folder here we go to backend api and we see schema.graphql and this is the file that we're going to work with to set up our graphql api um so here the initial uh schema that they gave us as a template has a blog uh each blog has multiple posts uh and the post has comments so in our case a blog probably we can rename it to a user and the user will be a model it will have an id it will have a name a name it will have a or should we go with a username username let's go with a username because that's what we are going to use for the handle here so yeah let's go with v with this username it will also have an email the email will be a string and it will have a list of posts uh we just have to rename it not by by blog but by user fields id yeah okay so the next thing we have a post and this is a model that will define the data that we need for one tick tock post so what do we need for one tick tock post we can have a look uh in our hard-coded data here so we will need an id uh we will need a video uri [Music] let's add some spaces here so we'll need video uri the video url will be a string and it will be required so the exclamation mark means required cannot be null uh so the next one uh it will have a user but we're gonna get to that a little bit later uh description yeah it will be string we don't sorry we don't need title song name song image so for the song i think it will be better not to say the song name and song image inside them the post but to create a separate a separate type basically a separate table in the database for the songs because i expect that a song can be used multiple times by different users and by different posts so we're gonna get to the song a bit later comments shares and so on [Music] comment shares no we will create them a bit differently so i think that's it from the main data that we need for a post then here we renamed if you remember blog to user so let's rename it to a user id basically a post will need to have a user id in order to know like which user posted that uh post yeah and yeah that it will also have a user relationship and this is how we uh let me just rename everything not to to miss anything by user and which field will define this key it will be user id this one so and here as well user id and comments at the moment we will not need or should we leave them because we will need them later comment a d post id post um no we will not implement comments right now so we will add them later if we will need them so basically um to connect a post with a user we define we define a user id on the post in order to define like the actual id like the string specification of id of a user who is publishing this post and then based on this id we can create a user relationship so basically from a post we can connect this post with a specific user and here it's not going to be a blog but a user and how we are going to do that we're going to do it based on the user id field here so you know that it will find a user which has an id that is equal to this user id so that's how it creates a connection from post to user and using uh this key that we are defining on a post we are creating an inverse relationship from user to posts so it has a list of posts and the key name is by user that we define here and the fields is id saying that uh we we do that based on this id so yeah that's um that's how we do it um yeah let's also define type song and this is going to be a model and a model is something that when we define a model amplify knows that this is a top level type and for this type we it needs to create aws dynamodb table like for database table so each one should have an id name it's string and artist right or how did we say no song name and image right or um yeah let's leave it let's leave it simple name and we will just provide one name for it uh but in future if we want to separate like here like the artist and the song name like we we we can also do that but we'll keep it simple now uh and also image you are right the image you arrive will be also a string right yeah and we can say that image is not quite required it can be without the image as well i guess um yeah that's mostly it so song now the same way as we uh make a relationship from a post to a user we need to make a relationship from a post to a song to know like which song it uses there so we'll have like song id it's gonna be an id and the relationship to a song song connection fields and which fields it will use it will use the song idea that we uh defined here song id yeah i think that i didn't do any typos so uh yeah for our initial purposes this schema should be done so come on and after creating and writing the schema basically how our data will look then we can run amplify amplify push push amplify push will make sure to create all the services in the cloud uh because yeah right now it we set up everything here but amplify needs to know like what to do with with them and what to create so so do you want to generate code yes uh the code will be javascript um [Music] file name yeah the same yes uh maximum statement depth we will leave it to two and i'll explain it a bit later what that means yeah we'll wait a couple of minutes until it creates i just i should just check something um yeah here someone is calling just one second yeah i'm back so uh yeah it will take a couple of minutes until it creates all the resources in uh in the cloud and until then let's uh let's see what people are saying um cool cool next build could do one time a full tutorial with no jazz even paid course like this i'm glad to buy it um yeah maybe in future i will do yeah i saw a lot of people are asking for merin stack which is manga express racked and node yeah i'm interested to do that as well because that's what i'm using at my startup um the thing is that it takes a little bit more time uh and probably it will yeah it will need to do like a longer live stream or a different format like in multiple videos and yeah even maybe i i will do um a tutorial on that as well borja hello borja how are you doing i i'm better i'm better um yeah i healed from kovid i had it the previous week so i am better now thank you very much greetings from spain hello from spain i hope to be in spain soon as well probably after new year's we'll see each other for him hello from algeria hello hi how are you doing so so so what's going on so guys are still here are you following is it interesting is it too fast too slow how do you feel saying we are waiting for you yeah thank you very much hope hopefully everything will go as planned so um yeah everything ran successfully which means that our um let me which means all our resources has been have been created in uh in the cloud and to check them we're gonna write amplify uh console api and this will open aws console where we can check uh the generated api and everything that it created so it open up this window and here here we can see all our queries and all our yeah queries for mutations and um yeah and stuff like that first of all i would like to go to the schema and if you remember we defined this schema here and in our case it was like 24 lines of code and we defined in 24 lines of code the schema like how our data will look however amplify automatically for us wrote completed our schema and wrote 288 lines of code and it was it specified like all the queries all the mutations everything that we will need automatically for example it specified like uh how will input for creating a post will look like how will a input for creating a song will look like um and much more information here it defined all the mutations for creating a user for creating updating a user deleting and you can see all the mutations here same way as for the queries get user list user get post list posts get song list songs and so on so for you to understand like at my startup uh all this i wrote myself so 288 lines i would have written myself because i'm not using amplify there however here like it's much easier like we just defined how it will look and amplify handles uh it itself so if we go to queries here is where we can run interactive queries for example we can run [Music] list posts to get a list of all the posts in our application and right now of course we will have zero posts uh but if we yeah in the items here we select only the fields that we need for example we need only id we need for example description and that's it and we run yeah of course at the moment we don't have any items we don't have any posts but soon we'll add we'll add the post in our database and it will return all the data here so that's how we can easily test the api with the queries in the aws console so what's the plan let's check so we created the user model we created the posts model the songs model now let's manually from aws console create one user and a couple of posts and also implement these queries in our um in our application uh to display to connect and to fetch all the posts from our api that we just created so um i'm gonna select here annotation and i'm gonna press on a plus sign so the notation will be add user and we're gonna select here create user and for create user we see that we need to provide an email and we need to provide the username which is required the id we can provide if we want to but it's not required and if we don't provide any id when we create a model it will auto generate one for us so we will leave it empty so for email let's say yeah test and username test user yeah and here we need just to select things that we need to query back like we create it and then it returns us the data back so let's run this mutation add user and we see that it created a user with id auto generated let's copy it because we will need it pretty soon we have a mail that we provided and it says like it was created at this um at this time so uh you can follow uh doing that we uh from the left panel by providing all the value here but i would rather uh type the query simulation myself because i think it will be a bit faster for me so for example let's run a query get user and the user we need to get by id and let's provide the id that we just selected and here we we can specify only the fields that we need to receive back so if we specify only by d we get only the id if we specify also like created that and username that's what we get back yeah id created that and username okay so now uh let's create a new mutation uh mutation add post to create a new post the notation is create post it has a input and the input will see what it has so for the post let's see here what it has so we need to provide the description uh song id that we didn't create yet so we will have to go and create a song id we need also to provide the user id and the video uri okay but before that but before that i will add another mutation add song create a new song which we don't have yet into the database so it has a input and what parameters a song has i think name yeah name so i'm gonna provide the name here and the image uri right image uri i'm gonna id name so for the image uri i'm gonna take it from our dummy data that we have here i hope you still if it still works or you can just copy a url from any images from google and paste it in your application um yeah i think that's that's it so let's run the add song first query mutation i mean and it created the song with name nf search we will need this id and this id we need for add post mutation can i do them in different lines so for the song id we provide the idea of a song that we created description test post from aws user id yeah user id i will run the first query to get the id and to copy the user id that we created provided here and video uri i will take it again from from our dummy data or you can provide any video uri that is publicly available copy video right paste let's run add post and uh it it created the post and it gave us back by d because that's what we request back um let's create a couple of more posts for example test2 uh add post and test three add post now um yeah here on the top let's create a query to get the list of posts to see if we added all the posts to our database so get list posts list not users but posts and here we need to receive uh items and items is an array of posts and for each item we need uh the idea of a post we need the uh description for example and yeah let's let's run this query right now we don't need this at the moment so our list post return us as you see free posts first one test post from aws test2 and test free and they all have a unique ids generated automatically so that's how we add data and create data uh in our um database using our api that we created uh from the aws console we're gonna show i'm gonna show you a little bit later how you can create this data automatically not automatically like from the application itself but yeah for testing purposes and at the beginning um yeah this is a way to add it just by going to the upsync queries and running the mutation directly in aws cloud okay so the next step would be to actually integrate our um our application and to fetch the posts from uh our api because currently we are getting the posts from this dummy data but yeah that's not gonna be the case anymore our data will be dynamic we're gonna upload it to api to our database and then we're gonna fetch it and display it uh dynamically so uh yeah let's get to it um before that i think i can and i should add everything to git uh setup set up amplify and api yeah so yeah right now let's have a look where are we fetching this data and displaying it and that is going to be in the source screens and our home screen if we open index we see that we get posts from our data folder that is our dummy data posts so now we need to display the posts dynamically and to fetch them from our api to do so we need to import a couple of uh libraries so i'm gonna import if i remember yeah let's do from aws amplify and we're gonna import the api and also a graphql operation then we need uh we need to define a yeah like we need to define a schema and to define all the fields that we need for this query that we're going to run the same way as here we define like id create that and username the same way we need to define here like what data and what query you want to run so one way is just to define this as a as a graphql code here uh yeah inside your file or in a different file however uh amplify is so nice that it takes care of it automatically and it generates all this code for us so in our source folder if we go to graphql here we see a couple of files mutations queries and subscriptions we open the queries and here we see that amplify already defined all the queries that we will need these are very general and they are querying all the data that it has um if you need something more specific you can just copy this uh copy this query and add it to a separate file uh outside the graphql folder because uh the graphql folder is automatically written to when you do amplify push so if you change something here it will be overwritten in future so we need this list post query from here and it will do a query to the list posts it will return the items with id video you're right description user uh everything about the user everything about the song and so on cool so let's import it here [Music] so import uh something from uh what we have here graphql then queries and what query list posts yep yep okay so um so we when we open the home page at that point in time like when we first open the home page we need to fetch all the posts from the api so to do an action the first time that the component mounts we we can we define the use effect um like like so use effect we give here a function and this function will be called the first time that the component mounts and we give an empty array as the second argument to the use effect if we don't give anything this function will be called on every update so make sure to write the empty array there uh yeah i imported the use effect from react and here uh and here um and here we need to do the query to the api however the query to an api uh is asynchronous what means what what means is like uh we need to wait some time until the data comes through the internet uh and is available so it's not something instant uh it's something that happens behind the scenes and we need to wait so to do that in a user fact we cannot have asynchronous calls directly we need to um put them in uh put them in functions like like following like we declare we declare a function fetch posts which will be a sync and here fetch all the posts and after that after declaring it we just call the fetch posts like this come on why it's prettier come on so here we need to fetch all the posts i will put them into a try catch because some errors might might appear or some yeah uh during the call so we we need to make sure that we are catching all those errors so let's say const response is equal to a weight api uh graph ql and we need to give a graphql operation here and which operation the operation that we imported from our queries list posts first one come on yeah i think that's uh that's it so let's just console log the response and see what we receive back from the server response and here let's console error the error let's save let's check our emulator let's turn on the debug and let's open them inspector console here so we see a couple of warnings uh nothing very uh crucial there uh however we see our data but we consol log and let's open our data data it has a list posts list post has items and these items are all the data about our posts that is coming from prove api so we see free posts test three test two and test posts from aws the sample that we created manually in aws so we have them but we need somehow to display these posts so how to do that we will need to store somewhere this post in our component in order to display them and we store them in a state variable so let's define our state variable for the posts posts set posts and this is a use state hook and initially it will be an empty array let's import the use state from react and here where we receive the posts um instead of console logging we're going to call the set posts setter for our state and set the post from the response dot i think is data dot list posts dot items is that correct like let's check here uh data dot list posts dot items yeah baseball ray set posts like this alright so here we are rendering the posts now we can delete the dummy data that we had here so let's save and [Music] here we see test post from aws from coming from test user then test user two test two uh and test three that's great the video is displayed uh the description the user the username is displayed the only thing that is not displayed is the uh the data about the song because if we remember in our dummy data we had the data about the song directly [Music] in our post model but now we have like uh we have them in a song object like separately so let's go to uh components index and where do we have song name so here we need probably post dot song dot name save and a search all right that's good and song image no no no here song dot image dot u right is it like that yeah we see the image uri uh and the next thing is i forgot to add image array to the user that's a bummer so i will i will have to wait like around five to ten minutes until it adds a image arrive there or are we just ignoring it and all right all right all right all right so let's let's yeah let's go to our amplify back end api schema and in our user model we need the image uri uri which will be a string all right so let's just run amplify push to do the changes for the user model because we forgot to add the image so guys yeah as you see it's pretty easy to connect a database and right now our application is displaying the data that is coming from our graphql api and if we add more data in our console it will automatically display it here yes and yes hello hi yeah right now we'll have to wait a couple of minutes until this our scheme updates so guys are still here how are you doing are you enjoying this all right all right what about resource use it for flat list what do you mean very source use for flat list we are using the data that is coming from the back end right now and we are displaying the data in the flat list not sure if that's what you meant alexandra yeah very much cool okay yeah i'm just um checking something from the previous builds so where was that yeah it created a i mean it updated our api so let's go to aws and we will run update mutation so you'll have you'll see how we can update um a user so right now image uri if we run the first query let's get user we see that the image is null because we didn't specify any images yet so now let's run a mutation update user update user and it needs a input and for the input we need to save id to specify like which user we want to update come on why i miss so much my um my ultra wide screen during the live streams so where i am right now what happened there i don't understand my query where is the queries okay let's run try again so mutation date user update user input id is this one and what we want to update we want to update the image uri so for the image uri we're gonna provide the image that we already have somewhere right user image let's go image so back we want to get the id and image uri let's try to has invalid an image arise invalid why i think i just need to refresh the page because it didn't update with a new and right now if i paste the same code right now yeah right now it sees that it has a image array so yeah right now our user has an image uri and that's how we run an update and the things that we put in the input those things uh are gonna be updated so for example currently uh the username of our user is test user if we want to update that we can run an update mutation uh test2 we can run it and if we run the tick tock again we see that the username updated to test2 and the username has an avatar right now so yeah that's that's uh that's everything that i wanted to show you with the api we're probably gonna get back to it a little bit uh later when we implement like uploading um creating a posts by uploading a video and creating automatically users when you sign up with a new account and so on but for displaying uh yeah that's it so let's check some comments data use it uh are using pagination for a lot more yeah right now i didn't implement pagination however you can implement pagination and i explained it in previous video um it's pretty simple and everything is taken care by amplify because for example let me write a query here and i'll show you what i mean how you can handle the pagination with the api so let's write a query list all the list uh all the queries that start with list for example list posts uh it has uh limit and this is uh how many posts you want to get so if you remember we have free post but we're going to say like we want just one post and here we defined the items what we want to to receive and besides items and let's say description and besides items we will also query the next token and the next token is a is a token for the next page so let's run this query and we see that in the items array we see only one post and the post has a description test post from aws now if we take the next token if we copy it like that and provide it as a variable to the list post next token if we run it right now we again see only one however it's a different one it's a different description and that's again how you go to the next page so let's put the second page we see test three and again it has a next post however if we put the next page here we see no items and no next token meaning that this is the last page so that's basically how you do pagination i'm gonna not gonna implement that in the project because it will take uh it will take some time uh vadim where are you from uh so i'm originally from moldova a very small country besides romania and ukraine are using expo for this project no i'm not using expo it's rock native cli because a lot of people who asked me to use react native cli previous projects that we built were uh using expo so if you are interested in expert check them out all right yeah my voice is cracking let's drink some water let's stay hydrated i drank so much tea while i had covered like i can't handle more tea all right so that's it with fetching data from the api imagination and so on all right so what's next the next is something uh pretty interesting authentication so most of application that we build nowadays need some kind of authentication to be able to protect your data to be able to um connect data with users and to use it on multiple devices in order not to lose data and so on and especially when we are building some kind of a social network up the uh authentication is crucial and usually authentication takes a lot of time to set it up correctly to set up the uh for it to be secure and also like to set up i don't know like signing in with apple with google with facebook and so on however uh amplify gives us a lot of good stuff automatically from the box so you're gonna see how easy it is to add authentication to our application so as i said each new service that we want to add to our project we need to call amplify add and the service name before that let me just commit everything api my phone go to add git commit so now let's run amplify add authentication of enter and yeah i'm gonna close everything so i will select default configuration if you want to set up social providers which means signing up with facebook google apple amazon and so on then select uh default configuration with social providers however you'll have to set up projects in facebook and google and get a token from there so we're gonna go with a simple version of default configuration i'm gonna select username because that's how we will log in [Music] and that's it that's everything that we need to that amplifier needs to know from us in order to set up the authentication flows uh yeah the next step is amplify push this will push all the changes to amplify cloud to aws cloud and create all the resources that are needed so until it creates let's also check them [Music] yeah if i add what else no let's also check the tutorial to make sure that we did everything so also on the docs.amplify.aws uh here we can see how to add authentication amplify add off that's what we did amplify push awesome the next step is to install the libraries not sure if we installed mostly mostly all of these libraries yeah i think we installed them amplify amplifier rack native cognito and net info let's just have a look here we need to say yes in the package.json let's have a look if we have um plify amplify amplifier rack native uh codegnito and netinfo yeah we have all of them so we can skip this and yep next i'm gonna show you how to implement them authentication itself now we just have to wait until amplify sets up everything in the cloud alex is saying love is hard work thank you very much i i missed so much um like working and doing this live stream because previous week i didn't do i wanted so much to do it but then i decided like i should rest and get better from coved and i couldn't wait till this week to to go live this was probably the first time in like the last three or four years when i spent like i don't know like three days without working staying like mostly in bed and watching movies like alex my girlfriend couldn't believe it but i'm staying in bed and watching movies like that's so rare for me we started watching the casa de papel it was so nice like i couldn't stop watching it and that's the first movie that i could watch uh like more episodes in one day usually more than two like i cannot handle i cannot stay in the same place and watch a movie but this one i think in two days we watched one season so yeah it was really interesting so come on come on come on so guys how are you doing how are you feeling all right so all the resources have been created in the cloud and yeah let's have a look yeah you can also do amplify console authentication and it will open the authentication console but there is nothing much to see there or do there so the next step that i'm gonna do is uh in our app.js i'm going to import [Music] from react native amplify or no amplifier rack native and aws amplify react native i'm gonna go and import that with authenticator and i'm gonna wrap the uh export default application i'm gonna rub the application in the wave authenticator function so i'm gonna say with authenticator and pass the application down there i'm going to save it and wait until refreshes we have authentication flow setup so two lines of code like importing authenticator then wrapping that with authenticator and application and we have all the screens ready uh for everything that we need for the authentication which includes signing in but we don't have an account right now so let's go to sign up page uh for the username i'm gonna go and write my username here i'm gonna create a simple password and i'm gonna write my email and even a phone number i'm gonna put a random phone number here i'm gonna sign up and uh amaz aws should send me a confirmation code so this is everything set up by default from them so this is in order to confirm the um yeah to confirm the email address so the confirmation code is this one you should receive it on your email i received it right away so confirm and yeah that's it right now we can sign into our account so i'm gonna write again my username yep like this and the very secure password tadam i'm in the application so in a couple of seconds you saw that i created an uh a new account into the application i receive an email on my email with a confirmation code i confirmed an application uh my email just by inserting the confirmation code that i received and then i signed up into the application uh and right now yeah uh if we open again the application it's gonna remember that we already signed up and it's gonna open uh our application right away without going through the sign-in process how cool is that guys like like in a couple of minutes like how much like five minutes probably we set up an authentication flow which is secure which is scalable and pretty easy to install and also it is very flexible because you might ask like how can you adjust the design and styling on your own needs you can do that as well and you would have to create the screens yourself and just call some functions that you will import from uh amplify so you can get more information about that on their website it's pretty simple as well you will for example import a function like sign in and you'll call that function with a username and password that you you receive and so on however you'll have to implement all the designs to handle all them displaying the errors uh and so on yourself so if you want the flexibility and if you want to um a custom authentication screens like you can easily do that however we'll stick with this default because it's pretty simple and it does the job so yeah that's uh that's it with that's mostly it with authentication we're gonna get into some details uh soon so uh alexandra is asking how are we feeling i'm feeling great i'm just yeah my my voice is cracking but i am good i'm good i'm drinking water i'm here hello hello excellent fast and simply yeah that's what i love um for and for a lot of purposes like this is more than enough when you want to build like i don't know a prototype a testing application a project for your portfolio like this is more than enough to to set up and you have everything you even have like the forget password screens which will receive a code on web email and so on so it gets your it gets the job done and i really wish that i used amplify for my startup project because i would have saved so much time for example i spent around uh one or two weeks setting up uh just uh signing up with apple because yeah it was pretty tough but with amplify it would take me like i don't know 15 minutes okay guys so um a bit of technical details so [Music] for the authentication flows amplify is using a service called cognito or hopefully i'm pronouncing it correctly maybe it's no but i think it's cognito so yeah um and it manages all the users in uh in this cognito the thing is that uh there is no uh out of the box relationship and connection between a cognito user that we that is created when we sign up and a user in our database and that's uh basically as far as i researched i didn't see any out of a box connection and relationship basically what that means when we sign up it creates a user incognito you can sign up later it remembers like your password however it doesn't create for example a user in uh in our graphql in our database so if we do list users uh we will not see get user get user what's happening no no no list list users i meant uh we will not see a new user created for example we're gonna see only the one that we created manually so to do that we're gonna do some hex in our application when we open the application and yeah in our application that means that the user will be already signed signed in we will do a query to our database and check if there is a user already registered for this cognito user for this authenticated user and if there is no user registering now database for this use cognito user we're gonna do so we're gonna create a new user save its email and stuff like that and later on um we will be able to attach like a post to a user because we need um we need a database user to be able to attach a post to a user hopefully that's clear probably this is the most like tricky part that might be more might be more difficult uh other everything like is simple magic like some some commands and stuff like that so before starting that let's um do a git add git commit uh authentication and yeah let's start okay okay okay so in our application when our application loads uh we need to do all our stuff that i just explained so to do that we will just need a use effect i use effect yeah i think you already are familiar with the syntax of a use effect and here in the use effect we're going to define a sync function because we're going to need some asynchronous calls so i don't know fetch user i think like this and we'll call it right away fetch user so um get uh currently authenticated user [Music] check if the user exists in database if it doesn't meaning that it's a new user it's a newly registered user then create a new user in database so this is going to be the flow that we are going to try to implement right now so first of all get current authenticated user uh we're gonna do by calling [Music] um authentication service uh and the function is current authenticated user and we're gonna also say that it should bypass cache to be to be sure that it actually does a request of a service server and it doesn't take it just from cache as you see we didn't import of authentication so let's do that here import authentication also api we will need and also a graph ql operation from um aws amplify all right uh what else we will need we will need um we'll need to import annotation uh that will help us create a user in the database uh so from from our graphql folder graphql graphql now where is it oh it's from source graphql mutations not queries we need to import the create user mutation because we're gonna create users now all right this pre tier is set not to have um spaces uh yeah after the curly braces but i'm used to have them so they it looks so ugly without them i don't know like look how how beautiful it looks like this but now it once and i didn't set them up with my preferences so we imported of the off package and we uh call the current authenticated user so let's go ahead and of course console.log because console.log is the power of debugging tool user info save open our debugger and here we see cognito user the one that i was talking about and if we open the cognito user it has more attributes the key the pool all the information that it needs and but the things that we need is under attributes and we see under attributes by mail of the authenticated user we see that the email is verified the phone number uh phone number if it's verified and it's not yet verified and we see um s uh ub sub uh i should read what it stands for because uh yeah i i don't know what it stands for but this uh sub is like a uniquely identifier of a user in a in our cognito pool so this is like an idea of a user in our cognito cognito user pool where all the users live so that's very important because with this sub with this unique id we're gonna connect uh a cognito user to a database user so we're gonna have the same id for uh here as a sub and we're gonna have the same id for the id of a user in the database which which which which pretty fast to show you what is talking about yeah this id will be the same id as the sub and that's how we're gonna know like which user uh is which like which cognito user is which database user yeah that's how we're gonna make the relationship uh and one more thing and the thing is that username as you see is not under attributes but is in the in the data itself so here is the username okay with all the information uh known let's check uh so let's have a just a quick uh check if there is no user info that i don't think will ever happen but let's be sure let's just return basically if there is no current authenticated user but it shouldn't come come here if there is no one yeah however we are checking that and we are just returning to be sure defensing programming that's called so now we should check if there is there is a user uh with that with that id that i was showing so let's do um get user await api graphql and here we'll give a graphql operation and what operation the the get user get user that we didn't import yet so we get user and the getuser needs some variables it needs like to know the id of a user that we want to receive so the id will be user info dot attributes dot not id but sub so we are trying to to fetch a user from our database with id at uh similar to yeah with id from the user info attribute sub the one from uh the cognito user so let's import this get user query i'm gonna duplicate this line because i'm lazy to write it rename it to queries and get user getuser okay so if get user dot data dot get user if this data exists that means that there is already a user in the database we can write console log user already exists in database so if it exists we need again to return to stop the execution of this function however if it doesn't if it doesn't we need to create it so let's define how our our new user will look so our new user it will have an id and the id as we said previously will be the sub field of uh our cognito user uh it will have a username that we're gonna take from not from attributes just from username as we saw that this is the only thing outside attributes uh it will have email probably user info dot um dot attributes dot email come on attributes dot email and what else user id username email and image uri so image uri at the moment we don't have any mechanism to upload the image when the user uh logs in so we're gonna do some uh some hacks and assign him like a a random uh image like get random image and we're going to implement this function above to return a random url for for for the image so uh yeah let's i have here prepared a couple of uh random images and let's implement the function uh get random image uh function so let's return a random image at position at a random position so let's do math floor yeah something like this my floor uh a random number multiplied by the length of the images so that's how we'll get a random position and this function will return us a random image url all right yeah get random image okay so our new user we can console.log to see that all the data is correct before sending it to our database so let's console log it updates let's scroll a bit and handle promise reject must provide source received undefined received undefined looks like your no yeah we have uh and handle pro promise rejection no credential application rd or no this is okay this is uh this uh this error with uh application id from the pinpoint um yeah it's a it's uh just ignore this warning it's coming from the from a service that we didn't set up it yet but uh it's it's not a problem so i'm only wondering why it's not here yet so console log user user info let's make sure that it cognito user and it stops somewhere why where does it stop that must provide source uh might be maybe this get user graphql operation get user variables id api graphql api graphql where is this error it's fetch user [Music] they have a typo somewhere graphql operation get user let's just try to console.log this one save and see if we get them yeah the sub we get it correctly must provide source received undefined must provide source who must provide source which source queries we imported get user is defined oh i know we named our variable getuser the same as uh getuser yeah the same as the operation the query get user response get user response get user response save and right now uh right now yeah right now we see that this is the object that we are gonna uh save to the database so we have an email we have an id uh image which is randomly and the username that's nice now we need just to send this new user to uh to the api instead of console logging here so let's say a weight api graphql graph ql operation and the operation will be create user create user and we need to provide the input not user but input for the newly created user data so like this why are we complaining again okay you want it like this all right so let's say uh no let's check right now in the okay it's saved so let's run list users again however i see a and handle promise now if we run the list users now we already see the test user that we created manually and also the vadim saving user that is linked that is linked to the cognito user basically this is this is me this is the user that signed up uh to to our application to the tick tock and if we run the application again come on let's close it and let's run it again um yeah we're gonna see here user already existing to database because it's gonna do a query with this id it's gonna see that we already register that user in database and it's gonna stop the execution so if we do again this query we see still two users which is expected so yeah that's how we um that's how we connect a cognito user with a database user so i'm gonna go ahead and uh commit the changes uh connect cognito user with um database user all right so how did you find this out was this clear someone is writing you are the best hello from brazil hello hi uh how are you sir hello sir i have made tiktok clone but i couldn't host it with aws how to solve this please give me any solution uh hi hello uh why couldn't you host it with and develop it with aws do you have any like um yeah limitations okay so um yeah that's it with authentication we created the users and now let's check what are the next steps all right the next step is the interesting part to create a post to record the actual video and to upload it to to the cloud and after that also to create a post to display it in the feed and so on like that's the last tab to connect all the dots in order to have a fully function functional app that is going to allow users to sign up sign in authenticate with their account then create a post their post will be displayed in the feed other people will be able to see it like it and so on so this is the step tool yeah to make it uh to make it a workable app so i'm gonna use a react native camera so we can open it up and it has a pretty good documentation on how you can install it react native camera is going to be used for uh for uploading videos for recording videos uh yeah i'm using the same library at my st at my startup because yeah as i said it's heavily based on video so yeah it's pretty stable it it gets his job done so the first thing is we're gonna we have to install the react native library and let's go ahead and do that yarn add react native camera a riff says make cereal what do you mean serial so you have a dependency installed and yeah the next step is only if you are working on mac os we are going to install the pods npx pod install and yeah this is mostly everything we need to do for installing the the library because racknative does vow to link linking itself so we're gonna skip the manual install and we're gonna go to the ios other required steps we need to add these permissions uh in the info file so let's copy these permissions from here and let's open our ios folder here we're gonna go to tick tock or the name of the project of your project in the info we're going to scroll down till the end and before closing the dictionary here we're gonna paste in the the code that we copied the one for the permissions from uh using the camera microphone storage and so on yeah this is for uh ios and for android for android we need uh to add to the android manifest as well the permissions required permissions uh we're gonna copy these permissions here we're gonna go to android application source main android manifest and here on the top where we see the permission for the internet we're gonna paste in our permission for camera for external storage for recording audio and so on uh and the last steps is to add these missing dimension strategies in android app builder build.gradle and in the default config android app build.gradle android scroll down here you find here android and you find default config so in the default config we paste in the missing dimension strategy and yeah that's probably it so i'm gonna probably continue uh from here running on the android because the camera runs better on android and it has like a simulated camera so let's go ahead and run i'm gonna probably close ios to spare a bit my computer let's hopefully you can see it good here let's close all the application that i have open there and let's wait until it builds what do we have here nothing okay hey hydrated guys drink water okay command failed good so let's have a look why it failed l error while merging decks are hive the number of method reference dex file cannot exceed 74k so sometimes uh we have this error i'm not very technically informed about this error and why it happens because i'm not like android developer however we need i know that we need to we need to set up uh these decks multi multi-decks uh library uh in our project because uh right now our file exceeds seven sixty four kilobytes some of the files so yeah i have it here uh and to do that in our gradle build file we need to uh to add the implementation of the multi-dex and then we need to enable it in our default config so let's go back to our build.gradle scroll down where we see implementation in the dependencies and yeah let's add it somewhere here let's save and back to our android default config let's add multi dx in order not to do some typos i'm gonna copy and paste it here save and if i build again and run hopefully now it will work come on let's go uh all right so attempt to invoke interface method on a null reference what's happening there um yeah right now it builds and um let's wait a bit uh gabriel is saying thank you very much william for your stream i'll see the repeat time to launch here thank you very much for watching so yeah and join us uh the next week and yeah make sure to continue it watching and do it yourself and publish the result in our discord channel serial is an exclusive social media app in india made for celebs oh that's nice maybe i should check it out ah come on come on come on come on why does it take so much okay hopefully it worked um yeah right now it asks us to log in because we are on a different device we are on android and we're gonna uh sign in with the same uh username that we already registered um like this sign in save and yeah we see it working so we installed our camera now we need to use it somewhere so for vet we need to create a new screen we need to create a new screen for recording a video for our camera so let's create a directory uh camera camera and here let's create the index file index index.js uh let's also create them styles dodges we will need it later and here let's start from the beginning import uh react from react import probably will need a view let's say a text from react native uh we're gonna also need a rack native camera that we just installed from react native camera [Music] import styles from our styles file and let's define our component camera so here we're gonna return a view styles dot container uh inside the view we will have um what we'll have we'll have a rack native camera or let's just display a text and make sure that we see it uh hello there hello there export default camera and let's also define the um the styles style from react native and cons styles equal to stylesheet create export default styles all right so uh right now we need uh we need to render this camera whenever we go to this page because right now on this page we display the same home home screen so let's go to our navigation home button tab navigator and where we import home let's duplicate this and import camera as well with a name camera let's scroll down and see the tab with a name upload and for the component instead of a home we will display the camera let's save refresh and go to this page and we see here hello there component so guys um i need one minute i'm gonna come back pretty soon don't leave me please guys i'm back oh i feel much better now uh so okay we displayed hello there in this component let's go to our component and instead of a text uh render the actual react native camera and here we're gonna uh send a couple of options so um first thing is let's define some styles here star hills dot preview [Music] and for the beginning probably that's it yeah let's also go ahead and define the styles the styles our container will have will be displayed as a flex one the direction will be column and also let's say the background color will be black our preview uh component where we will see uh the preview of a camera we'll also have a flex one uh and justify content flex and and we're gonna align items in the center uh yeah that's probably uh it so let's save refreshing and right now we can see our preview of a camera so yeah i think that we can yeah this is the preview uh if you're gonna run the application on a real device you're gonna see like the actual preview like of your camera like whatever you see in the room uh this is the simulated version of uh of a camera on an android emulator so right now we need to define to define to create a button that will start and pause the recording so let's add the button underneath here view um and for the start we're now let's we'll need to to register without the touch touches so let's define it as a touchable opacity why i always struggle to write touchable opa c d right that's how you write it please we need to import it from here on press we're gonna call them on record this is gonna be a function that we're gonna implement a bit later but let's just define it as an empty function this will start the recording the actual recording on press can we touch styles directly here styles styles button save i'm wondering so the height will be 50 pixels with will be 50 pixels uh background color let's say uh white where we will change it depending on uh if we are recording or not so let's save okay it's here uh our okay let's add a line item center for our container as well uh all right it works [Music] let's for the button margin vertical on top and the bottom 10 will be enough uh why does our preview disappeared i'm wondering why [Music] a line self center come on yeah yeah okay okay uh let's make the button around so to do that we're gonna set the border radius to half of the width and height 25 like this and yeah i think that's yeah it's pretty simple but it's um it's quite close like to what what what we need yeah like tik tok i'm checking right now uh it has also some some animations but i think it's pretty good so let's all right background color not white but let's give it a red color that's how tick tock has it something like that okay that's that that's good enough so also this button will have two states whenever we are not recording it will have this uh shape uh however when we start recording it should make it should be like a square to indicate that uh when you press you stop the recording so to do that we're gonna we will need a state variable uh to know if we are recording right now or not so let's define a const is recording set is recording default value use state the default value will be false because it's not recording initially and here for the styles we need to adjust the shape of a button or we need to create two different styles for example uh button record and button i'm just gonna copy and button stop and where and we'll based on the is recording we'll decide which styles we will assign so if is recording we're gonna sign button stop otherwise we're gonna assign styles buttons start or record record uh is recording you state let's import that i forgot is recording why you don't like it prettier okay let's come on let's say here true and adjust the styles of this button so uh to make it square we're gonna set like a i don't know a free border radius uh like this and make it probably just a bit smaller margin vertical let's make it 30 30 and margin vertical 20 20 20 plus 20 i guess so if i set it to false save yeah yeah that's how i want it to be so we style the button and right now whenever we press record we should tell the library but it should actually start uh it should actually start recording [Music] yeah let's uh go ahead we need a reference to direct native camera because in this function we need to to say that hey camera you need to start recording or hey you need to stop so to do that we're gonna use a reference to the camera so i'm gonna uh declare it here const camera use ref that's it let's import it and in the rack native camera we say reference is this not wrap but camera camera save so if if we are currently recording we need to say uh camera dot current for the reference stop recording camera stop recording otherwise if we are not recording we should say camera start recording a weight camera current uh record a sync something like that right record a sync and yeah this will be a sync function and the data will contain the url of a file that has been recorded and it's going to be fulfilled whenever we press stop recording so let's here just console.log data to see what we have and we can say set is recording to false and here set is recording to true all right so let's press start recording hopefully it will work it might lag a bit yeah you see it lags and i will press stop recording all right i see a problem there stop it stop it please please please please please until stop come on come on please so the thing is that we are setting the uh is recording uh after after visa wait but as i said like our function will will wait here until we stop the recording so we need to put it just before this this await but better but even better we need to define uh some listeners on the react native camera to set this uh recording status automatically from the camera without assuming that it will um it will start recording just when we say to record because it might take some time so uh if we check the documentation rack native camera we should see here some uh something with on one camera ready on status change function to be called when native code emits status changing relation to authorization change camera status [Music] no one recording start and one recording end these are the two functions that uh callback functions that the library will call whenever um this event is fired so rack native camera is equal to a function and whenever the recording is started we need to set uh is recording to true and one recording and we need to set it to false so we need to uh also delete them from here because we we are doing them based on callback functions this is much better and safer than we were doing above so let's open our application again so let's go here i think that there might be even some problems with um permissions because they didn't see i didn't give any permissions so let's start recording yeah that button changed let's stop the recording it's very like if the camera is working like super like on on a emulator and let's see our here we see the data that we console logged so we see that the device orientation was uh one which is vertical uh is recording inter interrupted no because we manually stopped the recording and the array uri is the is the uri of a file uh which lives in uh in the memory of a phone in the cache of the phone so yeah let's uh that's how we uh record a video in rock native if i'm not mistaking let let me just have a look i think we have everything we have starting recording we have stopping recording and um yeah uh there are more options that you can uh set like the video quality if you want a lower video quality to record uh the codec the format if you want to to have like audio or not and so on like there are a lot of options so if you are interested check out the react native camera documentation but that's everything we need as minimum as we need to set up the camera recording okay the next step the next step we need to create a screen after we record the video uh the user will be redirected to a screen where he will insert the um uh the caption the description of the video and then he will upload it to um to the database so let's create that screen here directory uh create post create post i'm gonna copy and paste the styles uh from there and index to save up some time and i forgot to do a commit get commit minus some react native camera okay let's continue so create post let's close others uh create post i will delete most of the things from here let's just text hello create post and in the navigation we need to create this uh to define this page in our index because it's not in our bottom tab navigator because we don't want to display it in the bottom tab navigator um as a separate page but it's a page in our root we can define it here so uh here besides home we're gonna duplicate the home and we're gonna import our screen create post from screens create post let's name it create post component create post stack screen yeah i think that's that's how we will do it maybe it will need options to display the header there but i'm not sure so let's save and let's implement the navigation the navigation we're gonna implement in our camera so whenever we finish recording whenever we have this data we need to redirect to the create post page so uh for vet we're gonna use we're gonna need the navigation class navigation equal to use navigation core not core but native [Music] and let's say navigation dot navigate create post and we need to also send like the video file url to because later we'll need it there so it's in our data dot uri the video uri data dot uri all right uh let's save let's start re let's start recording and whenever we stop recording we should be redirected to that page let's stop come on come on come on come on come on don't be laggy don't crash right now please yeah we are redirected i don't know where yet oh i know i know i know i know because we copy pasted the styles in the create post styles and our container has a background color black so if we save right now here hello yeah it's good so in the navigation let me try to see if i can add options header shown true i want to show the header save yeah it shows the header with create post and with the back button let's define also title and i think tiktok has just the title post okay for navigation is good um our create post page what will it have it will have it will have just the input for the description of a video and a button to post of course tiktok has more information there for example to talk per people to share it automatically on our social networks but we're gonna keep it simple uh in order to be able to finish it so um text input how is it how is it called the input in react native why my brain just froze react native text input is it just yeah text input like that text input so let's define text input we need to set a value on text change and probably some styles right and also we're gonna have a button touchable opacity and here it will house button on press on publish on publish let's import the touchable opacity come on and here let's define a text like text um publish we need to define a state for our uh description uh to hold it somewhere so let's define const description set description equal use state initial status is going to be empty string the value will be the description on text change we need to call set description styles dot text input save save say my name say my name come on refreshing why it's so slow on publish is not defined of course it's not defined because we didn't define it on publish save right now we will have to go and record the video but that would start lagging so i will do a quick hack here and save it where is it index our stack navigator initial route will be create post and it should resurrect automatically there will you please initial route name create post your initial route come on or i can just comment out the home screen and yeah now we see it here so uh i did that in order to [Music] to be able to work with the styles and to style this page properly so let's uh let's do that just text input and button okay text input i don't know let's define a wave 100 percent why i can see it height 150 and background color i don't know white come on what's happening let's open again up where are you come on am i did i do something wrong loading oh yeah the actual actually it's it's there you see yeah the only thing that probably we need the background color uh is not a valley style property called color save yeah like that and also some margin i don't know then the text input has number of lines number of lines like five does it work yeah it works like that and i would also like to define a placeholder the screw option the placeholder is real the problem is that i'm writing but nothing is happening uh probably something on text change set description uh what is the value of on text changed on text changed or maybe on text changed right on text there is no such things on change on unchanged text okay gotcha on change text on chain right like that yeah right now we can write and it saves in the in our state variable uh let's go ahead and style the button but then uh background color i think it was some some kind of a pink i'm not gonna match it perfectly but something like that button button do you want me to create a view here styles let's save yeah right now it's better button [Music] let's align the text to the middle um justify content right justify content center save or align items align items save yeah let's add some margins to it margin would add even 20 margin or let's try up 10 to be the same as the text input margin 10 and then define a height 60 70 somewhere there all right justify content center as well to align it vertically and for the text style styles button text we need to make it white color white font font size 16 and weight bold and the height can be even less 50 will be okay oh yeah uh for the container i want to space put the space between so the button will be at the bottom space between you go to the button uh yeah yeah that's right so um yeah before publishing we need to upload the video to uh to the storage uh upload video to cloud and after that create a post in the database with api so the first part um is a bit interesting because we are we um let me check if i have something here yeah we need to upload the video to s3 and s3 is the aws storage solution so to do that we need to add a new amplify service called storage so let's call amplified ad storage uh we'll select content images because we want to add uh yeah content like videos uh please provide a friendlier name tick talk clone bucket name yeah it's okay uh who should have access yeah often guest users uh let's press space for all of them like to be able to create read and delete and then enter the same create read no guest users will be able only to read and not create or update uh do you want what lambda triggered no no not now and it should uh add it so let's run amplify push uh yes and yeah this build is taking quite some time but we are doing so much today like we're implementing authentication we're implementing the api now we're implementing uh the storage cloud storage uploading a video so it's it's quite a lot of uh of work how do you feel guys the best people are remaining till the end of a stream yeah we're gonna wait a bit until it publishes but until then let's define the function that will take a file and upload it to uh to the storage so let's declare a function const upload to storage range upload to storage and we will send it a image buff a local image path from the phone and that the image path we need to upload to the storage so let's put everything into a try catch uh to make sure that there are no errors that will crash replication uh castle error error so um before sending the file to s3 we need to get the base64 version of a file like the blob version of a file uh into a variable and we're gonna do we're gonna get that using uh fetch uh and we're gonna fetch the image path this will return us a file uh from where we can take the blob version of it await a response dot blob so this blob file we can upload to s3 so s3 response is equal to await storage dot put and put is for uploading files there so we need here file name const file name file name dot let's say mp4 so the file name goes here and after that our blob like what data we want to upload blob that's it and after that we will of course have to console log the s free response yeah let's import the storage from um from amplify import storage from aws amplify and and now we have to to call this function upload to storage uh but as you remembered um we we need the image path so we get the image buff from uh the route parameters because from our camera when we redirect we send a parameter video uri so in our create post page let's say whenever we um mount this component for vet we're gonna create a use effect we need to call the function with with a file url so to get the file url we need to import something else called use route to get access to the route and to the route parameters and that's from react native navigation native so we get the route const route use route and in our use effect we call uh to storage route dot params dot video what am i doing uh and the params from camera we're sending the video uri so video uri yeah that's uh good let's fix with prettier why use effect is not defined okay we need to import this effect of course okay so let's let's go ahead and disa uh go back to uh to to the previous version of the navigation uh because we need to actually shoot a video to have something to upload so let's go here it will go video uri it should open our home page so what's happening uh yarn android yeah i think we need to uh run again yarn android because we installed with storage how are you guys feeling less and less people i hope that you'll um you'll get here in them after the live stream because yeah it's a lot of work it's more than three hours and um but you can take it like in multiple days or i can say in this part of the live stream the pink on the pin code of my card and nobody will steal my money because nobody will watch that's how i should test probably so let's go to the upload here let's start recording let's stop recording hopefully it doesn't break come on come on come on stop stop stop stop stop enough enough enough chill so let's open our debugger and see if we have anything there yep i think everything worked as expected and the response was key file name but to be sure that it uploaded the video to um to the cloud let's run amplify amplify amplify amplify console storage i think it doesn't have just api console file storage viewing as free it will open the s3 service from where we'll be able to see if we actually uploaded the file uh objects public file name mp4 300 kilobytes let's uh open it and try to download and see if it uploaded correctly yeah we see the video here it uploaded correctly it has i think six seconds or even more or okay weird so yeah the video has been uploaded um the only thing that we need to change is instead of having a filename.mp4 hardcoded we should auto generate uh an id for this file because whenever we upload a different file we need the diff a unique name so to do that uh we will use the uuid library uh np um so let's quickly install it yarn add we will add it and let's import them version four and for the file name we're gonna generate a uid which will make sure that it's a unique number uh and we we know that it's gonna be unique because a iu id version 4 contains a timestamp in it so it's based on time so let's do uuid version 4 dot mp4 let's save um that's free key so um yeah we need to save this file name or the key from the response because we'll we're gonna need this key [Music] for the video uri but yeah um we're gonna need this key in order to save uh to save it to the database with a post that we're gonna save so let's declare it here uh const um video key set video key use state it's going to be null in the beginning null video key so in the response let's set video key to the s3 response dot key like that and you with that video key we have everything and with a description that we already have in state we have everything to create a post whenever the user presses on the on publish so we uploaded the video to the cloud now we need to create a post so let's do it try catch error console error now let's import the things from amplify uh such as api and graphql operation and also let's import the permutation mutation create post create post from uh graphql mutations so here const response weight api graphql graphql operation create post and we need to send the input right input new post we need to define it we can define it outside the try const new post is equal to so what does a post in our case have schema not schema here um amplify backend api schema so a post has a video right a description and a user id so yeah let's take this oh and a song id is it required yeah it's required i think we're we're gonna just hard code it uh and if you want to implement you can implement a song picker like i don't know a drop down or a search bar where you will search a song and based on the selection you will add a song id uh but we are gonna uh so it has video uri it has description which is the description from the state um it has user id and song id user id and song id so for the song id as we said for now we're just gonna hard code the song id but we have here list songs items id yeah this is an id of a song the user id the user id uh we will take it from a current authenticated user so we will need alpha as well here let's add it here because we need to do some uh queries beforehand user info is equal to of current authenticated user and we need to await of course so the user id is user info dot attributes dot sub if you remember do you remember and for the video for the video all right the problem is that at the moment we don't have a video uri at the moment we have only a video key and later on based on this key we will know how to fetch the video uri from the database so perfectly we would have to change uh the name from video uri in our data in our api to video key to reflect the actual uh data but right now let's just write in the video uri our um our video key it's not a full uri it's just a key so but we also need to check if we actually have a video key because if there is no video key let's console worn video is not yet uploaded and let's return because if we press on publish too soon the video is not yet uploaded so we need to wait a bit uh until we have a video key so for a new post we have we have everything publish is a sync i don't know let's try let's try uh hopefully we will not have any errors right now i can't promise but um yeah let's go ahead and save and see if it works oh and also we need to do some navigation we need to navigate away from this page to the home screen use navigation const navigation equal use navigation let's add a new line here so after we uploaded let's do navigation navigate home go home so okay let's start let's start recording let's stop recording it should go to the next page it should upload a video with a random name let's make sure that that happened yep we see here some digits.mp4 and this is the new file that it uploaded and now if we say test test uploading from uh application and if we press press publish let's hope that it works it went to home uh why it went here okay that's not the most important uh we'll check that but now let's go to our that server here and list posts items items id description video uri let's run so we have test uploading for application yeah our video is has successfully been uploaded um yeah that's awesome uh right now let's let's think why it went oh because yeah yeah yeah it went here because um if we look at our navigation in index uh from create post it went to home but our home navigation the last uh the last screen that we wear in the home navigation which is our bottom tab navigator was this create video so we need to specify exactly on which screen so navigate home dot screen i think uh also home i mean like go to the bottom type navigator but to this part to to this home and let's try to save let's try to record again hopefully it will not crash because it's so laggy stop stop stop stop stop stop please please please yeah let's write some comment here has a possible unhandled promise this time it might not work yeah it went to uh to home it went to home to the home page so if we refresh our flat list and currently we cannot refresh it just by dragging down but if we open again the tick tock application right now we should see the new posts but the videos will not be displayed because we don't have a uri there we have uh video keys so here we see test uploading for application from a user with this random avatar that we created the same here it has something there so let's uh go ahead and display properly the video based on the key from the stop from our storage we just know the key we don't know yet the uri so we need to fetch a uri based on that key so let's open source components post index somewhere here so yeah let's define a function get video uri so if um if post dot video uri let's check if it's already in uri then we don't need to do anything so if it starts with uh i don't know http then let's just return post dot video uri however if it doesn't start with http meaning it's not a url already that means it's a key so we need to it's a sync function so we need to get this uri from the storage let's import uh somewhere here with storage import storage from uh aws amplify aws amplify all right um and const response equal await storage dot get and we get a post pause the video come on video video uri and this is the key of the storage so let's just console.log right now to to see what's the structure of that response uh okay did update did it update did it update save no not this one um oh we are not calling it get video uri uh you alright get video you alright save save me your location uh your rate match is not a function you array much match match what's that i don't know calls to your right and call get video right i need to return something so i'll return you arrive match what's happening there so yeah uh all right so yeah the it just returns as a link that this response so we can actually say return await storage so this is the link save and you're right match is not a function what's going on uri match is not a function um what's going on console.log uri so where is the problem arising oh it's a promise it's a promise it's a promise a wait uh all right all right all right all right [Music] yeah it's interesting because um yeah let's we'll probably have to just declare a state variable because receiving this is um is asynchronous so let's do video uri uh set video right you state initially it will be like this so we let's call this function in use effect close fact so um get video uri so basically in that function we're not gonna return but we're gonna set it to state set video uri to post video uri and here we're gonna set it again to a weight storage like like this and yeah here we call it uri is video you alright from our state let's save and hopefully now it should work so the first video possible and handle promise rejection no everything is fine so we saw that we waited a bit until the video has download has been downloaded and this is the video that we uploaded from the application the next one again is a video we uploaded from from the application and if we scroll these are already the videos that we manually uploaded so as you can see yeah it took a little bit of time uh but yeah it's it's a lot of moving parts like we need to handle like uploading a file to to the cloud using us free and the storage service from aws also to create a post in the database then to fetch it to display it to render a lot of moving parts but hopefully it's it's clear and you manage to make it working because i'm gonna add and commit get commit minus m uh create post and storage yeah that's let's have a look yeah we upload video to s3 everything is working fine as expected uh the video is attached to the user that is currently signed up so if um if you register a different user and upload a video then we're gonna see a different avatar here and we're gonna see a different username here so everything is dynamically attached and connected so uh yeah with that said i think we have a pretty solid tick tock application and of course it's uh far from the original tik tok application because that one has a lot of uh functionalities a lot of features but also it has a lot of developers working at it and not just a random dude on the internet doing it in two days in uh two live streams of three hours each so hopefully you understand that i'm trying to to develop only the most important parts and these parts make a complete application i mean right now you can authenticate you can create post you can see posts you can uh upload different videos uh everything is on the cloud and to be honest it's pretty scalable with um uh and this i am pretty sure can handle uh hundreds of thousands of users uh because everything is serverless behind the scenes and um yeah it's also pretty cost effective so guys i hope that you learned uh something new from these videos um yeah if you have any questions feel free to ask me now if anyone is still here and not tired thank you very much for staying until the end if you're watching this uh afterwards uh also thank you very much for watching this long live stream and i really hope that you took something valuable from it and yeah let me know down below in the comments uh what i should do next week should i continue with a tick tock and um improve and add more features like i don't know like comments maybe video filters uh liking pagination anything or you're interested in starting a new project maybe you have something in mind that you want to clone that uh that would be awesome um yeah hello vadim i am actually following your twitter clone but i got stuck with the amplify part i never use it and i expected you to explain it that's great that you are following twitter i think twitter was uh our second application or third um yeah i i explained it as far as i could in a live stream of three hours so you can see what i'm doing and do the same thing also check out the documentation they have pretty good documentation and you can learn a lot from just from reading the documentation also there are a lot of free tutorials on the internet that you can find but i'm planning to do more specific short tutorials with amplify for example like 10 minutes video how to set up authentication or things like that very specific uh that will help you move forward when you get stuck during this live builds so i'm planning that out thank you very much alright guys i think we should call it a day and i'm pretty happy with what we have managed to build in um during two videos i am looking forward to see your results as well so when you finish please shoot a video of your application advance and publish it on our discord channel i'll be happy to to see it and give you feedback and also don't stop here i always encourage you to go one step uh forward like implement something more for example uh implement a way to add songs and to select a song when um when creating a post implement a way to add likes to the posts and comments and shares to add more information to edit your profile pictures like there is so many things that you can do and you can take as an example the things that we already built because most of the things we already built for example how to create a new page we already did so you go back to that part you check how we did and you just adjust it for your need how to create a model how to fetch a user how to update a user everything we did you just need to implement in different places and you can get a pretty um functional application um yeah and that's actually where most of the learning happens so guys without further ado i think it's three and a half hours i'm pretty pretty tired but also very excited and quite happy with the result um yeah thank you very much for watching if you enjoyed this video please leave leave a like share it with one friend subscribe to the channel of course and let me know down below what are you interested uh to see in the next videos so guys as usual also um thanks to uh priyank i hope you i pronounce your name for the donation uh i really appreciate it so guys see you on discord and let's continue our chat there as usual take care stay hydrated and write clean code bye bye guys let's end

Channel: notJust․dev

Views: 45,120

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native aws amplify auth, react native auth, javascript, typescript, react tutorial, build a tiktok clone, tiktok clone react native, tiktok clone tutorial, aws amplify, react native, react native tutorial, javascript tutorial, programming, tiktok clone, react native clone, react native app, react native for beginners

Id: 7okW52MQgSE

Length: 213min 5sec (12785 seconds)

Published: Thu Nov 19 2020