🔴 Netflix Backend in React Native & AWS Amplify (Tutorial for Beginners)

so i think we're live yeah what's up nudges developers welcome to a new live stream uh and today we are gonna build uh we're gonna continue building our netflix clone and we're gonna implement the back-end uh the back-end for for the application in the previous video we have built the ui if you haven't follow along uh stay tuned then i'm gonna show you what you have to do in order to uh yeah to get started with this clone so what exactly we're going to build today uh let's see first of all we're going to build the authentication uh we're going to create uh protect our uh application with an authentication flow where users will be able to sign in create an account uh yeah forget password receive password change their password and so on all the information all the flow that you need in a real application we're going to implement today the next one is the graphql api for all our data that we have in the application and if you have follow along my previous tutorials here is a good news today we're gonna implement something new uh so stay tuned because there will be a lot of new information and new technologies uh that we're gonna use today and especially here in the graphql api where we will try to create this application to be offline first so that our clone will work even when our application will work even when offline so yeah stay tuned for that uh so the next step will be to create the media storage and no not about this one uh but the media storage with aws as free uh where we will keep uh all the all the movies the actual movies that are gonna play so yeah uh what are we gonna use for the front-end technologies uh we are using react native with expo and uh typescript and for the backend we're gonna use aws amplify before because that's uh yeah that's a great service that makes it very easy and fast uh to deploy the back-end for your application especially mobile and web and specifically we're going to use cognito for authentication flow op sync for our graphql api and amazon as free for our storage yeah that's uh that's too much details uh you'll get uh to know them as we go because a lot of things are automated uh and created by amplify so a lot of things are easy uh special thanks to expo for sponsoring this video uh yeah expo uh saw my project my builds that i'm doing on this channel using using expo and i have been used it uh ever since the beginning in almost all my clones and they just reached out and said that they would like to sponsor this type of content so i can produce more uh more clones and videos like this in future uh and yeah the good thing about this is there there is no like obligation from my side i i'm not obliged to say something good about expo i should say what i think and i think that's really really great about this sponsorship because it will help publish more videos in future so uh who am i and who am i and uh why should you trust me i'm a full stack developer for over seven years now i am currently the cto at a small startup called vitinium i also worked at amazon as a software developer engineer and uh yeah i'm passionate about coding building impactful startups and yeah helping others sharing uh my journey and my knowledge with you guys here on youtube but the most important thing is that i'm not just a developer and not only me but also the new channel members are not just developers so thank you very much for the new channel members that have subscribed um has has bought the membership on youtube um yeah thank you very much for the support uh yeah it really means a lot to me uh all right so the if you want to follow along this tutorial what do you need to have you need to have react native and expo environment setup you uh should have an aws account in aws cli set up on your machine and also you'll need the dummy data with images icons pdf presentation everything you can find accessing this link assets.not just.dev netflix this is the second video in this series uh in the first part if you if you missed it we did it a previous week uh where we implemented all the ui of application i'm gonna show you what we have at the moment um uh in a couple of minutes uh but yeah and i highly recommend uh you to check it out follow along try to build it yourself if you are learning react native but if you want to build only the backend for this and you think that the ui is too easy then you can follow you can clone the repository that we created previous time and check out specifically the ui branch and that that is going to be the code that we have uh at this moment that we are going to implement um yeah the back end so after that install the dependencies with yarn install or or npm install then if you're using mac os and developing for ios also run npx pod install to install all the pods and then run the project with yarn start so that's what i have here i have run the project with yarn start and i ran it on an android device or emulator the project should work both on ios and android so here it is this is already the detail screen yeah this is the home screen and uh on the home screen we can see that we have a couple of categories and each category contain multiple movies uh these movies you can just scroll horizontally and yeah the whole page you can scroll vertically and yeah check the movies that are available uh you can also click on one movie and here uh yeah my emulator is quite slow and here we will see details about uh this specific movie um yeah we we see all the information about movies we have a year how many seasons and so on and down below here we see the episodes from season one and we also have ability to uh change the seasons and see uh yeah different episodes from from different seasons uh yeah that's how we navigate three seasons and then we can press on one uh episode and it will load in our player where we can play it if we wait a bit until the video loads uh yeah it should start playing yep here it is here we can make the video full screen and watch it and yeah that's mostly uh it about our ui we have implemented all the important things and now we what we will have to do is to create a back-end for for for everything that we have done all right so how are you doing guys the intro is done so hello hello everyone who is in the chat also sambuda thank you very much for renewing your subscription i saw that you you renewed it but vetoes after creating this presentation so i'll include it in the next week okay thanks a lot for your great tutorials i learned a lot from your channel this is the first time i'm watching you live oh welcome here yep you can ask questions uh yeah you can ask questions guys uh i'm gonna try to stop between features and uh try to answer them or we can stay at the end and i can do that okay let's um let's get started and all right so the first step is to set up aws amplify project in our rock native project for more information you can access this url let me open it and here is the one second and yeah here is the getting started guide we can start yeah choose react native and here you can see how how you can um sign up for an aws account how you can install and configure the amplify cli so if you haven't done that uh before and after that yeah you'll also have to configure amplify here there is a guide that you you will follow it's pretty straight for what you have to do and after that we will set up our full stack project uh by running amplifying it in our project so let's open it let's open our command tool let's open our a new terminal and here let's run amplify init yeah i think it wasn't the right terminal that i opened i'm still getting used to vs code uh the name for the project netflix is okay enter a name for the environment uh for the moment it's gonna be dev and finally i can choose the visual studio code editor which is supported by amplified project type is javascript will rack native source directory let's leave it by default default default default and now we will wait a bit until it creates uh everything there do you want to use an aws profile uh yes and then i'm gonna choose a profile that i already set up which you should set up during configuring amplify what is your vs code theme uh the theme i think is material darker i had it the same theme in uh webstorm and i really like it it's not too fancy just quite dark and that's it is this the last video for netflix uh buttons no that's not gonna be the last video we're gonna do one more but i'm gonna announce what exactly we're gonna do at the end of the video so stay tuned uh to see what we're gonna do next okay so amplify has uh has been added uh and that should have uh created a couple of files in our uh come on yeah which we have created a couple of files uh one of them should be aws export uh and this is uh you have a configuration the like high level configuration of a project it should be in the root folder and then it should also have generated an amplify folder and here is uh everything all the code that amplify generates for you we're gonna use this folder to uh for for configure our api and stuff like that uh but more on that later so uh if we go back to our um [Music] getting started yeah amplifying need then let's install all the libraries that we will need uh you can copy it from here uh let's open the terminal and let's run it all right i have to do yarn install where you're not why did they open a javascript debug terminal all right i cannot run the emulator but i can run via browser yeah the application should also run in browser i tried the previous time but it was uh the fast refresh was not working properly for me and i had to wait a lot of time for every change so that's why i switched to testing it on emulator but you should should work on ios android and web how do i download the expo uh check the link in the description somewhere there uh you have a link where you can access expo website and we have an installation guide which is pretty pretty simple you install it and then you you can create projects after that with expo in it and also you can run other projects with it how about the icon pack uh the same icon pack for material theme material material icon pack something like that it should come together so okay we installed the library let's also install the native library with npx pod install uh and that's only if you're uh developing for ios if you're developing on a windows on or on a linux machine don't run this code because it will it will not work so you don't have to do that don't worry then we have to configure our amplify okay let's run that code let's open our application um the entry file for our application which is app.tsx and here uh let's import amplify first of all import amplify from aws amplify we will import the aws or yeah config from from this file that was generated where is it aws exports so make sure if it's in root then we will do dot dot slash aws export only work all right i hope it it recognized however if your aws exports somehow uh went into a directory which is source then you'll do like source and so on some people had issues with that i don't know why okay and then we will run amplify amplify.configure and we will send the config there save and i think it could not find the declaration file yeah uh yeah that's don't worry about that that's just a typescript uh error saying that there is no declaration file okay let's uh let's run again our application on the device run android device uh where is it did it run all right already i missed it it was reading uh a chat okay let's uh run it on the android emulator and come on building javascript so guys how is it going do you like my new studio i was fighting so much this week with these panels they were always like falling down let's see if they will stick till the end of a video at least someone will stick till the end of the video um yeah there are alternatives for amplify uh which is building your own server with i don't know let's say node.js express uh mongodb and so on but uh that's also a good alternative in some cases um but it takes much more time to to to build to build it uh customly like a custom server and specifically you will waste a lot of time on features that not that do not define your application like the pipe working i don't know let's say authentication uh all application needed uh but it will not differentiate your application and it will not mean uh it will not define if your application will succeed or fail as a startup or as a company yeah i have more experience with startups so that's why i'm speaking about that so um while we've amplify you will see in a minute how fast it is to uh to create this um yeah this these features that uh that are very common in a lot of applications like storage authentication analytics and so on why do you say that amplify is not available in your country where where do you live oh it takes so much time to to build a javascript does expo mean react native um so expo is uh is a set of tools on top of react native so at the end of the day you you write react native and that's it's actually iraq native everything is rock native however expo gives you a lot of things out of the box again when when you're building startups or well when you're learning you want uh to move as fast as possible because uh speed matters in uh yeah in in business and uh that's why i always prioritize things tools that make it easier for me to build so that's why i managed to to build an application a fully working application in 12 hours i think if i would try to do that [Music] like one or two years ago without knowing the tools that i know today that would that application would have taken me i don't know like uh at least a week or two something like that um yeah i think even more but with the right tools uh that speed up your development that's much easier so yeah expo is one of that um yeah it it helps you with managing managing a lot of dependencies for you so there is no native code that you have to manage from your side they also help with building building your project and and deploying to the market uh and i tried this via cloud build uh during when publishing the cr v crypto and it was really really easy to to do and and again they are doing a lot of configurations like signing the application like uploading these certificates to market and so on we are doing it for you and this way we're saving you a lot of time uh okay so it has uh updated which means we don't have any errors which means that we have install uh initialize amplify correctly let's move uh forward uh yeah we are done here okay the next step is to implement authentication and you'll see how easy it is to create all these screens and uh all the authentications flow with amplify let's get going and um uh first thing that we're gonna do is to add the uh authentication service so i'm gonna open no i'm gonna i'm gonna yep somewhere here i open too many uh terminals okay so first thing is i'm gonna add the authentication service and with amplify when amplify is not something new amplify is just a collection of more services that are already available on aws and they make it much easier to go to set up uh in your front-end applications so whenever you want to add a new service you would follow this pattern amplify add and the name of a service we're gonna do the same for authentication for api storage and so on so let's add the authentication first uh do you want to use default authentication and um security configuration yeah we're gonna go with a default configuration for now uh you can also set up social providers which is signing up with google with apple with facebook and so on i have done that in the uh 12 hour stream the v crypto if you are interested you can check that out there uh how do you want your users to be able to sign in we're gonna with username do you want to configure advanced settings no i'm done here okay it has been created uh but where is it oh yeah i went ahead alright so uh yeah let's uh add authentication here we will have to install some libraries and the libraries for expo a rvs uh i think we we have installed all of them yeah not sure about aws react native but we'll see if we have any issues we'll install vet library so back in our app.tsx besides uh after importing the amplify we will import also uh with authenticate hopefully wrote it correctly from aws amplify react native and yeah instead of exporting this function inline here we will export it down below default application and now we will wrap our application in them with authenticator authenticator function it's not actually a function it's called like higher order uh component but uh yeah treat it as a as a function so let's save uh let's save and now the the last thing is to actually call amplify push and this will uh push all the changes that we created locally and everything that we have here in amplify that has been created by by adding the authentication and they and amplifier will create these services uh in cloud will create the cognitopool with all the users will set up all the permissions and so on so yeah we'll have to wait a little bit here yeah and here we can see that uh we there is one change for the authentication and the operation is create so let's answer with yes and and this will update the resources in the cloud okay we already see the login form uh but will not be able uh yet to sign up so we'll have to wait but you already see uh how easy was that to to integrate the authentication let's wait until everything is updated in cloud and then we're going to create this account could you use phone number for authentication yes you you can also use the phone number as authentication um [Music] you will you would select it when you you set up authentication yeah uh where to start to become a full stack web developer as someone is answering learn html css javascript node.js sql nosql api rest api yeah yeah that's uh that's a lot of technologies uh so definitely you would start with web development probably where you will learn html css and vanilla javascript to create design and make make websites interactive you'd also need some basics in um yeah in in programming in general uh you you can do that in javascript um then then you'd have to to pick up probably a framework that will make a lot of things easier such as i don't know react jazz react native if you want to get into mobile angular view something like that but pick one and learn one don't uh don't be afraid that there are so many and you will know only one just try to to focus on one in the beginning and uh put all your effort into learning that the technology that framework because you you'll have all the time to to learn others uh because if you start learning a bit of react and then oh my friend is learning angular let me learn angular word that youtuber is learning i don't know vue.js i probably should do view jazz then you'll lose focus and uh you will not you will know just a bit of everything but not you'll not be good enough in any of them so try to be focused and um and yeah always learn by building by building pro actual projects because if you just stick to tutorials and books and just watch and read you'll get bored and you'll you'll lose motivation to do that but try to watch a tutorial in whatever you learn in the tutorial implement that at the same time in your project or yeah and that's that's how you actually uh build knowledge uh all right so we our resources has are updated in the cloud let's try to uh create an account in our emulator we see that we are shown the login form and here we can say that okay let's sign up first for a username i'm going to choose a very secure password put in your email because you will receive a confirmation code for the number you can put whatever you want and then let's sign up invalid form okay that's probably indeed invalid format one two three four five six nine one two three four five nine zero zero and plus come on but yeah it's plus one oh i don't think they had this validation before i think they there was an update with phone number validation because i don't remember this uh this issue before but yeah that's that's nice okay so uh confirm sign up uh we should receive a confirmation code on our email uh let me open it and check if i already received it but yeah you should receive it instantly yeah i received it let me copy come on i cannot copy come on like this okay i would better write it so confirm uh and we are back to our login screen where we can uh put our username and password like this sign in and we are back in our application the good thing about this is that everything is handled by amplify so amplify will manage the tokens will manage everything uh and if we close the application and enter again we will still okay got it and reload yeah if we reload our application we will not be shown the login screen we will be redirected to the application uh directly because yeah amplify keeps track of everything of all the authentication flows so have you seen how easy it is to integrate authentication in an application uh yeah what we had only to import with authenticator and wrap our application with this and we have all this functionality out of the box this is uh very very easy and fast to do and also it's much more secure than it would be if you would have implemented it so yeah also it is flexible and it allows you to to integrate it with your own designs so if you have your own design you are free to do so and i created um my own design for the login screen in the vcrypt application uh you can check that out uh so yeah what else should we add the log out button let me show you just how you can log out i'm not gonna design a button or something like that it's going to be a pretty simple in the screens i can go into the tab tool let's say and edit screen info view let me check here i'll create a button with pressable and on press will be we'll call a function on logout that we're going to implement in a moment and here we'll have a text log out let's create this function const on log out yeah the button is here um yeah i can add some styles padding 10 background color dark gray yeah something like this and what else what else okay we will import amplify now we will import uh authentication from aws amplify without track native and in our own logout we will call just authentication dot sign out and if we press right now on this button we are back to our uh login screen so if i uh refer the application we will again see the login screen and uh yeah that's that's how simple it is to to create the logout you just create a button somewhere and on press you call authentication dot sign out let's login log back in in our application my super secure password nobody can guess it and we are back here all right all right um yeah i think that's let's let's commit everything because that's it with our authentication get add it commit minus m uh oh and dictation hey hey priyank thank you very much for uh the support will there be a skeleton skin hello uh i haven't planned a skeleton skin in this video uh but if you are interested i'm gonna see what i can do in future but yeah for this video we already have a plan and so you mean something like uh to show a loading skeleton uh yeah that was that is going to be shown uh when the data is loaded is loading that's what you mean uh all right all right okay yeah so we are done with authentication let's see a couple of comments if there are any you use context or redux it depends on the situation if application is small and simple i prefer to use context [Music] in my startup application i'm not using either context or redux for the global state management i'm using um employee apollo because our backend is a graphql api and with apollo we can easily query uh and um apollo also serves as a global state management because it caches everything into a global data store so that's why i haven't used redux for for replication uh really looking forward to not just as backhand yeah that's i'm also looking forward to that build as well node.js is backend i'm still thinking what application should i build with not just backhand or just as simple not just backhand without any front end we'll see i'm still figuring it out if you have any ideas feel free okay let's let's let's move forward the next step is our graphql api and today we're going to take it one a step further and we're going to implement the offline first graphql api and what does that mean is that uh yeah we have this uh my uh we we go with this assumption that publication should work while offline it doesn't mean that it will provide all them all the feature all the available features but at least it will show some cached data it will not crash it will show something to the user so to create this offline first application amplify and aws [Music] gives us the opportunity to use data store and yeah vc the data store is helping us cache where is it come on ctrl z yeah the data store helps us cache our data on the device it helps us synchronize the data on different devices so for example you if you use netflix both on mobile and on on browser as a website it helps us synchronize the data for a user between these two devices and it also helps us synchronize the data between uh the local cache and our uh graphql api which is our uh which is managed by up sync so it may it it manages a lot of thing behind the scenes uh that's the first time i'm gonna use data store so let's hope that everything works uh flawlessly uh and yeah let's get started from the documentation and from everything that i have prepared for today i'd say that data store will make a lot of things easier for us the syntax will be much easier for querying and doing all of this and yeah let's see let's see how it goes we are learning this together okay let's first of all add amplify um api okay so this first step will be amplify uh api uh we're gonna choose a graphql api uh api name netflix is okay uh authorization type for this api uh you can go with an api key or amazon cognito user pool and the second option will allow only the authenticated users in uh yeah well authenticated users in our application to query their uh to query the api uh while the api key will allow anyone knowing the api key to query the api so the second one is more secure do you want to configure advanced settings for the graphql yes let's configure something advanced because we need something from here configure additional of types no configure conflict conflict detection yes we want to configure conflict detection and this is specifically for our data store and this will help us um uh merge two data that conflict so for example uh you update uh your watch history both on uh sma on your phone and on on on the browser and these data are different so they should be somehow merged so that's why we need to uh set up the conflict detection and we're gonna uh opt in for auto merge um yeah do you have an no we don't have yet a graphql schema but we're gonna write it uh pretty soon uh but schema template so we will have a single object field no we will have a one-to-many where we'll have like movies yeah episodes seasons and categories so in our case it's going to be one-to-many relationship it doesn't matter which one you choose because uh by the end of the day it only uh creates a template for the default template but we're gonna change um anyway so yeah it doesn't matter which one you choose here do you want to edit the schema now yes and it will open automatically here no why you open it no it's okay uh yeah probably i'll have to install graphql later the extension all right so we have here our schema.graphql and if it didn't automatically open it you can find this file in amplify backend then api slash the name of your project and here where is the schema.graphql and this is the file that we need to uh where we need to define how should our graphql work look uh and yeah we based on this schema behind the scenes will happen a lot of things so for every uh type in our graphql schema that we annotate with a model amplify will set up a database table with amazon database amazon alex how's the name dynamodb yeah we find amazon dynamodb we'll set up all the uh permissions uh to connect with it we'll set up the up sync models and so on so yeah this is uh the thing that we need to write and everything else is taken care for us automatically so uh what types do we have in our application for that let let's open uh what let's open our dummy data and that will help us understand what information we need so let's open assets data first categories uh and categories has an id category has a title and a list of movies and that's it okay let's first create i'm gonna add some space here and i'm gonna create the type category which is a model it will have an id which is required it will have a title of type string which is also required and it will later have uh movies that we're gonna define shortly movies uh okay the next step here is let's open the movie and here we'll see what the movie contains like this okay let's define the type movie and this is again a model and our move will contain an id let's open move and see id title year number of seasons title this is a string what else here this is a integer is it number or integer i always forget that can someone in comments and in the chat confirm if it's in or integer or number uh number of seasons that's also integer uh and i'm gonna have them as not required probably just to to make it flexible plot our plot will be a string cast again string what else creator creator string and then it will have seasons and seasons we'll also we'll define them a bit later okay i think that's it with a movie right no it also needs a poster it also need a poster poster which will be a url to an image so the poster will be a string let's have it like this okay for the seasons the seasons will be a new object a new type season model and what does a season have a season has an id and name and episodes season has id id name a string and it will have episodes that will define in a moment once we define these are connections that's why i'm leaving them for the end first i want to define all the types and the last one is the episode episode alexander is saying that it's called ind thank you alex the episode is also a model and an episode has id title poster duration plot and the video id id let's just grab them like this title is string yeah yeah thanks the poster is also a string the duration is string oh what was that i deleted it after duration is yeah it also has a plot string i think it shouldn't be required at least i saw some movies without it and the video and this will be the video url actually which is a string which should be required the episode will have a reference to the season because knowing an episode we will we would like to know which season it belongs to like this isn't right yeah and yeah we're gonna define shortly okay so let's now that we have all the types defined i think they yeah all of them are here let's define the connection between them so here is an example we have how to do the many-to-many connection so let's suppose yeah here we have like a blog which contains uh multiple posts and each post contain multiple comments so for example the blog contains this array list of posts that we can get using a connection uh and they reference the key by name which they define on the post type and we connect the opposed to a blog by matching the blog id what with yeah yep yep alex is saying that without commas here yeah thanks and uh yeah we we match a post with a blog by uh matching the blog id from uh here with id from the blog uh yeah let's let's let's go and start from the top category a movie will belong to uh to a category yeah a movie will belong to a category and that's why we need a category category i d which is of type id which is required yeah let's let's do it with id as here then the movie will have uh a key let's define the key here uh key uh let's take the name and fields okay the name of a key will be by category and the fields will be the category using this uh key we can reference the movies here so the movies will be an array of movies and this will be a connection which will reference the key name equal to by category and fields will be the field that we want to to match from uh from this uh from this model which is by id yeah now uh whenever we query a category we will be able to get all the movies that that category contains and that way we will be able to uh just by using one uh one query to the to list the categories will be able to render the whole data here on this page because one category contains the title and contains a list of movies and that's how we're going to be able to to get them each category will have a list of movies all right and yeah let's let's create the next um [Music] the next connections and the next connections is uh yeah movie with season movie with season okay one season will belong to uh a movie so for that reason we will need a movie id to know like which movie is this season from this is gonna be an id required and we will want to define a key on this model i'm gonna yeah uh the key will have a name by movie and the fields will be movie id from here let me put this into i like it better like this so for the seasons uh because we have a created a key on the season we can we can say that the seasons will be an array of season which is a connection using the key name by movie the fields id from here and we have to do the same thing with an episode and a season an episode should have a season [Music] id which will be an id and that's a connection no no no that's not a connection there's just an id on the episode we create a key we have a name by see then and the fields here will be this is an id here the episodes are really will be an array of episode which is a connection using the key name by season and here fields yields with id let's think that's it with uh yeah creating the the relationship from the from the one to many like like this let's think if we need a reverse relationship from for example an episode to know which season it belongs at this moment i don't think that we will need it uh but we can we we if we you if you want we can do it like this so the um uh the season we we can season um we can create a relationship from uh from the episode to the season and by querying one episode we can uh query the details about the season by defining this connection and here the fields will be equal to the season id like this and that's the same thing with for example movie we have a movie id and we want the relationship with a movie this will return a movie connection fields will equal to movie id the same thing for our movie if we want to get the category that it belongs to but i think we will not need that here so i'm not gonna add it okay let's remove everything for the blog that we have here so we define the schema which contains four types the category of movies which has a title and a list of movies a movie type which contains all the information about the movie and the list of seasons that it contains the season also contains a name and contains a list of episodes and the episodes is information about one episode which also contains a video url which will be able to play so that's how we structure our uh our api our graphql schema now let's let's try to to push everything to cloud amplify push remove the commas yeah thank you very much hopefully i don't have any commas and now uh yes here we see the authentication has no changes but we created the api yes syntax here or expected i found this one yeah we still have one where is it where is it oh i didn't save it probably that was the reason and let's say yes syntax again uh expected found equal where it wishes which is with an equal sign where they have it equal key name equal oh here oh wait a second why do we have equal signs can anyone tell me yeah that's weird yeah that's it no we still haven't it happens okay let's try again let's first of all save what what do we have here why don't you turn on auto save settings in settings search for auto save and then choose uh after delay and should we delay in milliseconds okay i'm gonna try to do that now because i always forget to do that after the live stream let's see if um i know an argument filled in key because it's feels filled double dots fields all right i'm doing some types of typos here okay but not directive key argument fields of type yeah i think it was the same issue yes again oh i didn't save okay auto save file auto save yeah that's that's good enough let's see yes and i think now it works do you want to generate code for your newly created graphql schema yes we want uh it's typescript uh it's gonna generate it in the source yeah no problem let's do that yes uh enter the maximum statement depth uh let's go with two and if we need a bigger depth we'll create custom queries and this will define how how amplify generates the queries for us uh if we are lazy and we don't want to write them manually we will use the generated ones and the depth means uh yeah how many relationships should it query so when querying a category if the depth is two it will carry category and movies if the depth is trees it will contain it will query category movie and in the movie it will also query the seasons and so on so the bigger the depth the more relationship it will query which is less [Music] yeah less optimal and yeah sometimes you need that but i would rather uh write the those specific queries myself just to know exactly what um relationships i am querying yeah now let's wait until this um resources are created in in the cloud uh jonathan is asking um not really sure is it possible to create grid component watch list and focus on performance i have similar but i have problem by resizing images and delay to final position my question is regarding a change orientation and landscape oh i think i'm not sure exactly sure like the what is the questions but if you want to to get these updates of a change you can use the hook of used dimensions not just them not just importing the dimensions because this variable will not change whenever you change the orientation uh but use the instead the hook use dimensions and whenever you need the uh to resize i don't know the image to full width uh yeah if you if you want it to work both on landscape and on on portrait whenever you switch then you would have to use this hook use dimensions and it will update the width whenever you you change the screen like from portrait and landscape not sure if that answered your question come on and generate it successfully yep graphql endpoint okay so this command should have generated us a folder called source and here um all the types that we will need okay but most importantly it generated as the source graphql and here we have like queries mutations and subscriptions uh in queries we will see all the queries that we that we have for example uh get category uh yeah this this is a query to to get information about one category by giving it by d we also have a list category uh yeah and so on uh for the movies and just just look at how much code generated like 466 lines of code and yeah that's that's as that's a gift for us in order not to write everything uh let's open our console and see these uh resources in our cloud let's run amplify console and it should have open it here um yeah it was an issue because i have to select the region that i created i set up amplify wave in my case it's ireland but uh in your case it can be different it depends on what you selected when you configured cli so make sure that you select the region that you have and here yum where is it netflix hey it was the first one okay for the backend environments we see that we have uh authentication category and the api category if we open the api here we can see what's behind the scenes so if you are interested more into knowing like how it created everything how it set up everything if you want to access directly the database you can go here you can open the viewing up sync uh here you can also see all the data sources like the for example the movie table and this will open the dynamodb table for the movies viewing up sync yeah the internet is flying why why it doesn't remember my region yeah it's weird it doesn't remember my region so for the up sync here we'll see the netflix dev which we can open it and here we uh we first of all we can see the schema that has been generated and here you'll see that the schema is much bigger than we have created and that's because it has amplify automatically generated uh the other parts of a schema that that it needs for example all the input variables for creating deleting an episode [Music] it also includes the types for example the ones that we created in in our schema.graphql here you can see it's very slow i don't know why for example type episode with um with everything and yeah this schema yeah it has a lot of uh features and information out of a box created for us uh what else i can show you i can show you how you can run queries on your data by going directly to queries and here you can say okay give me a list of movies uh and for each movie give me the id the creator and the title where is it and the title and you can yeah first of all you'll need to log in with the account that you created in the application and you can run and at the moment we don't have any items uh you can also create uh create movies from here by selecting annotation uh and yeah here you can create a category uh you can create an episode a movie and so on uh this is quite technical and we have done this before but i would like to try something new from amplify and this is if we go to our amplify console in the overview where is it yeah netlife netflix here uh i would like to set up an admin ui and yeah this is a dashboard from where we can create setup manage our data we can also invite our users to help us manage the data so yeah this is a very easy way to create a admin dashboard where we can uh first of all you can manage various sources like database schema how it is defined and so on but uh in my opinion the the the best thing about this is that you can manage data so for example in a netflix clone the movies are not uploaded by users uh but they are uploaded by yeah like editors and stuff like that or in a blog application also the blog posts are uploaded by by someone else on a different dashboard and you in this case you don't have to create a dashboard you can set up the admin ui uh and invite your other users to collaborate with you on this one um it has been enabled let's open the url from here back in environments let's open it will ask us to log in i'm going to try to log in with my credentials i'm not sure why it says incorrect username or password probably it's because i don't have to log in with this one but what i can do is go back to amplify yeah amplify press on the netflix so i can press here on the open admin ui and this way it will automatically log me in with my account let's open until it loads everything and here is everything about our backend so we see that we set up our data model we configure the login and sign up from here you can see the graphql api you can go to directly to op sync from here yeah it's a way to manage the whole application from one place and i think it's really nice uh i'd like to to go more in depth into it and see what other interesting feature it has but this time i want to play around with managing the content uh let's go to content it says that an additional deployment is needed to enable content management capabilities for your api navigate to data and hit save and deploy okay save and deploy yep i guess yeah and from here you can actually create the data model but i think it's better if you if you do it from uh as we have done it with from the schema save and deploy i actually want to deploy changes made to the schema deploy let's hope that we didn't break anything uh and it says that is deploying deployment in progress the ui really looks nice yeah we can see the users from here like all the users that are registered it's that's cool we can manage with groups if we create different environments i see here that you can switch environments what else can we do from here it shows you how if you don't have any resources it shows it shows you how to add them so you can do amplify other analytics to enable this uh this category um yeah functions authentication data yeah that's it's really cool let's see uh yeah how how easy it is to manage the content from here um privet stoza distributive what is that can you elaborate but but please don't spam come on can you please start similar type of series using rack native cli not just express js and mongodb yeah i think that's uh the next build is gonna use a custom back-end with not just an express and mongodb a lot of people are asking for that maybe the pages are loading slowly but at least the stream does not have delay software that's that's a good thing nice loading loading loading let's close our tabs that we will not need it rolling roll rolling yeah it takes some time how to stop execute query netbeans please ask for no idea who feels your coffee glasses you never seem to run out of coffee in your videos unfortunately i ran out of coffee but yeah from time to time my girlfriend alex is bringing me a coffee but i don't need one at this moment so thank you if you're listening i know you're listening what will uh prefer for big production builds amplify firebase or custom backend um when i started fittinum i didn't know about amplify and i started it with a custom build a custom express node.js mongodb backend uh where we have our graphql and yeah while you have a lot of flexibility there and it might be easier to get started i don't know um but yeah you you spend a lot of time on on on things that that do not matter in in the big scheme so when yeah as i said like when you're a startup and you have to move fast let's say i was i spent like a week implementing uh signing with social providers like facebook apple i think even more than one week with facebook apple and and so on while with amplify you can do that in in a couple of clicks like in two lines of code or something like that so yeah nowadays i think that uh if i would start again i would definitely go for for amplify with serverless with lambda functions [Music] because yeah that's first of all faster to develop uh it has better performance and it's scalable uh from the get go so you code it once and your application can can start handling like 10 100 1000 users but it's ready to to get like thousands and millions of users um and to yeah to manage to manage the load so i think that's that's really powerful because if you are up uh yeah hits the market and becomes viral uh you wouldn't want to to spend your nights just managing your server servers and trying to to scale up to meet all the demand so that's why i think the templify has has an advantage here and if you know how and what services to use and properly um configure them then you will not have any then i mean it's going to be also cost effective there was an error loading your data let's try to reload it's still in beta i see and local setup instruction please provide your console log and our details content capabilities are still we'd love to address this issue [Music] do i need to yeah first of all let's pull the latest changes uh in our application and maybe it will work then let's go back here let's pull the changes doesn't have any changes okay and what's there okay so for a category query it's interesting why the content here doesn't work loading loading okay you know what let's uh let's try to create uh some categories uh this is our data but this is data modeling um okay i'm gonna do something uh something else let's open uh amplify console and see that would fix it and from here i want to open the api and create just one simple category and then query it inside our application api to the viewing up sync queries and here let's do a create category mutation and for the input i just have to give a title which is let's say popular on netflix and we need to id my annotation i need first of all to log in to do this [Music] my mutation yeah it created this category i can create one more just to see that we we get all of them let's say trending now oh did they create or not no okay now we have two uh two categories let's go back in our code and first of all we need to generate our data store models and the data store models we can generate with amplify here it is come on here no amplify cogen models let's run this one amplify cod gen models this will generate the code for our models based on our schema so yeah each each model in our schema will become like a type here that we will be able to uh use to save query and so on the following type do not have of enable considering okay that's not an issue now compile successfully okay so in source now we have models and here uh yeah in index we have for example the category the movie model and so on okay let's now uh query our categories on the home screen to do that let's open our screens home screen and home screen tsx uh here we need to import the data store data store we can import here import data store from uh aws amplify yeah like this and then we will also import the model for the category and let's do it here import from it's here source no one more directory source come on where is it we are in home screen we need okay one uh two times source models models and that's it and from here we will import the category yeah category uh okay now we need to uh to save our categories that we will fetch from uh from the backend we need to save them in in a state variable so we will be able to display them for that let's port react and also we will need the use effect hook and the use state hook we'll use that here it goes const uh categories and set categories this is going to be our state initially our categories will be an empty array and we can comment out this import statement because we don't need dummy data anymore okay now it should show um yeah empty screen because we have yeah empty array of categories let's define this use effect that is going to run every time we mount this component okay and yeah let's add the empty dependencies array to make sure that it runs only the first time when we mount here we'll define a function fetch categories it's going to be nsync function and here let's call this fetch categories and inside here let's say const response equal to a weight data store data store dot query and we want to query the category let's console log the response just to make sure that we get something that responds okay and here data structure yeah i think i made a mistake here data store save uh where is the query yeah await datastore query but how did i write oh it should be data store and now but anyway value for component probe for the screen home screen must be available what did i do wrong here what's going on patch use effect yeah the issue isn't there and and the array is our category uh which has a title yeah category category uh yeah we we see the two categories that we queried that's good uh and that means that we can uh set the categories in our state so let's uh yeah instead of this we can yeah we can do it directly set categories with a result that we get from the data store and for the use state here we can save it it is of type category which is array and now our issue with typescript disappeared okay data is not categories.items but now is just categories because our categories is okay now we already see popular netflix and trending now yeah that's um that's how you guys uh query the data from the data store and now i think if i uh close the application i'm just i just want to try this i'm not sure if it will work and if i turn off the internet i should still i should still see those categories because they should be cached offline come on i cannot turn off the internet probably not okay i'll test it another time let's run it again here emulator uh but let's go back to our admin ui and let's try to refresh now maybe now it will work as it has some data what do you think will it please work yeah that's weird admin ui so are you running on android oh god my internet is so slow i hope that the live stream is at least decent uh when i open the new admin wireless console i can go to user management the content never leave the state fetching items and i have okay yeah it seems that other people are experiencing the same issue in come on no no solutions let's open that very weird okay but at least we can query this data and okay now we will probably have to add all the movies manually through amplify weird i want it to work come on what's this data deployed should i try to save and deploy it one more time but i did i think it okay uh let's try to to do them manually at the moment so we will uh okay we have create category let's add the movie to this category create movie and the movie will have cast category creator number of seasons upload poster title and year and let's take it from our dummy data and add it there where is it assets data movies or no yeah movies okay the title is what happened title suits year 2010 the poster poster poster poster this one so fun so much fun i'll just add one movie probably okay two movies with different plot number of seasons okay let's say two creator and for the category d i'm going to copy the category d that we have here and this is the category that we created there so if you don't have it here you can get it by running a query get list categories and here you will do the least categories and you you'll query by d items in items you'll put id and title and by running this query here list categories we will see the ids that we need from here okay back to our here cast and yeah that's it probably create movie let's create it uh my mutation and i'm gonna add one more with a just a different with just a different two here a different poster for the same category my mutation and one more for the other category so i'm going to copy the other id i'm going to change the poster so hard i'm gonna change the poster to the third one and for the category the i'm gonna put a new category id let's run the mutation it created the movie and let's try to uh to what to check yeah but how long this session will be like 12 hours no i think we have maximum one more hour probably one more hour yeah because we still have to implement the storage after this okay running running running we will have to query the relations between models query command alternative post okay okay uh yeah it's gonna be interesting it's gonna be a bit different than we are used to uh because we've uh when we were using the api to query our data and not data store we we were able to uh let's say receive uh when querying the categories we were able to receive the categories and also the movies from that category at the same time so it was a bit easier uh to do that we just needed one query in data store apparently uh to query uh relations we need to yeah query them separately so first of all we will query the categories and for the categories we will query all the yeah all the movies of that category if that makes sense uh and here let's think where we will do that here we have a list of categories we give it to render item home category render add item home category let's go to that render item home category and here we will have to do some changes we'll have to do some changes uh because our category is not gonna contain the movies with movies we will query separately for each category and now we can say that yeah we don't have to define the type manually because we already generated the types from the model so we can say that the category is of type like category come on okay go re which we will import from models yeah from there that means that we will need as well we will need a state that will keep track of all the movies and also use effect let's import them use effect and use state okay category from props then we'll define our state for uh movies movies and then set movies this is going to be use state empty array at the beginning and the type of the state that we will keep there is going to be an array of movie that we will import from models here and it's going to be an array all right now let's define our use effect that will uh where we will fetch the movies for this category like this use effect uh const fetch move this is gonna be an async function and let's yeah call the fetch movies here we have our movie id okay we can say that set movies and we'll set them with the result that we'll get from datastore dot query we will query the movie uh where the category d is the category of this movie so here where is it querying occurring relationship yeah we'll just filter yeah we'll we'll query all the comments that we have in our uh database and then we're gonna filter based on the on the id movie yeah probably i'm gonna do them separately cost result is equal to we will await and then we will filter let me do it like this so for each where is it movie we will keep the movie only if the movie dot category id is equal to our category dot id so we will keep only the movies that are in this category and then let's set them the result into our state and what else here in the flat list for the data instead of category.movies we will we'll pass the movies from our state that we have uh on moviepress we'll receive a movie and it says that um yeah we didn't define any time for this but we now can define but it's a movie and probably that's it yeah let's save and see i want to console log result save let's try to reload and check the vlogs uh yeah guys uh how long is the session yeah it's uh probably less than one hour and then we can stay for some q a if you have any questions following from zimbabwe hello are using transcoding to lower resolution in this project i'm not gonna do that uh in this project live at at this moment uh i'm thinking that uh this is quite an advanced feature uh and yeah aws has a very good services for this i'm using some some of these services at vitinu because we work a lot with videos and i might do that in future if there will be demand for this running application and come on okay we see the first uh all right it's working it's working yes that's uh that's exactly what we needed wait why is it did i yeah guys that's what happens you see that it keeps printing like the movies and that's because i forgot to add the the empty array here for the use effect and it was fetching it was updating the state and because it was updating the state uh it was updating the component and because of that it was running get the use effect and it was an infinite loop so don't forget to put the empty um array and this will make sure that it runs only the first time okay now now now now now the next step is to press on a movie and then open it into a new window and then setting a time for a long period my emulator is so slow i think my ios emulator was working better okay yeah the home screen in our case is done we are fetching all the data from uh from the using data store which is synchronizing automatically with our amplify so yeah the next step is to do the same thing for our source not source for our screens movie detail screen uh let's go to the index and here yeah we are just importing a movie from our data but what we can do is to import data store and query the movies from the data store import data store from aws amplify we will import the model the model is movie movie from source and models we will need besides a use state we will need the use effect to fetch them the movie current season okay we don't have any state for our movie const movie set movie equal to use state uh and initially it's gonna be null and the type of this state is either a movie or null or no initial is going to be null but later it's going to be a movie okay okay okay so let's let's do cons or use effect use effect let's not forget the empty dependencies and let's define the patch movies past movie not movies it's going to be only one movie page movie okay and inside here we can set movie to await datastore data store dot query uh movie movie and we want to query it by id and i think it has where is it create delete query yeah just passing by d as a second parameter and by d will be the id will be we don't have it yet uh we should take the id from our route from uh from our route because we already send it in if i'm not mistaken if i go to components what do i do what do we have in components home category no home category navigation movie detail screen and there we send the id of a movie you see whenever we press on a movie we send for navigation id and now inside our screen we need to receive this id and to receive id we can easily using the import the use route hook route from react navigation native we will take this route here const route use route and the id will be route dot paragraphs dot id and that's how we access by d from the route parameters what's that argument of type moving and define is not assigned to parameter of type state movie or null let's say here or undefined and initially it's going to be undefined does that make sense let's save and here params yeah our route can be okay let's save set movie let's open let's open and see what we have here we'll have an issue here for the season names i'm gonna yeah at this moment i'm just gonna say yeah this is the names that's it no it's an array right with an empty array season names what okay no don't you worry it's okay save and why you are not going to that screen it's just impossible so slow i find it's not a movie dot season movie dot season where did i do that here okay we're gonna say if our movie is undefined uh we can return um we can return activity indicator activity indicator that will show like a loading screen because initially our movie will be null and we don't want to to render anything we want to wait until we query everything and then we'll gonna be able to display it thank you very much for the support guys let's go let's go let's go let's open it yeah now it doesn't display anything because it's still loading the speed is killing me suit is that correct yeah the creator of themselves yeah but that's actually the data from that is coming from the uh from the database indeed all right that's good that's good um yeah if we go back if only my emulator would work faster should i try to run it on ios yeah if i open another one but all of them had the same uh the same data only the different posters so yeah but it is going to be the same where is activity indicator no idea what's what happened to the activity indicator maybe it's the color of it is uh different i mean is the same color as the background i'm not sure what happened to this does it have any yeah i'm suspecting that the color of activity indicator is the same as the background okay so for the movie we are querying it uh however the seasons i think if your server server and clear the cache speed problem will get solved please i didn't switch to ios simulator let's try let's try that let's hope that it will work better there let's also restart the server here expo start dash c is to clear cache because android is android yeah and let's try to run it on ios okay meanwhile let's think about our next step we have a movie but we need also a list of episodes right a list of episodes a list of seasons to query and list of episodes uh okay current season is the first season for an episode is the first season dot okay but besides that we will need an array for const uh seasons set set seasons this is going to be a use state of type season array of season which initially is going to be empty not seasons but season and we need one more for our episodes in that season it's a lot of queries is gonna happen episodes episodes set array of episodes current season will be undefined in the beginning and it's going to be of type season war undefined and current episode as well undefined in the beginning and the type of it will be episode or or undefined let's import the season and episode from our models season episode and season names [Music] season names season names let's yeah let's let's say the season names no we're gonna work with seasons dot map and first season we'll take the name and that's only if seasons is defined otherwise it's going to be or otherwise it's going to be an empty array with season names okay a lot of variables here so whenever we receive a movie whenever we uh yeah we set a new movie in the state we need to start fetching the seasons and whenever we finish fetching a season we know already a season id we need to start fetching all the episodes in that season in that seasons yeah set episodes yeah that's gonna happen every time we change the current season that's gonna be fun okay let's uh figure out with the seasons because yeah the seasons are a little bit more straightforward when should we fetch our patch seasons edge seasons so when should we fetch our seasons whenever our movie variable changes movie if changes so and also we should make sure that it changes but it doesn't change to null so if movie is equal to null we don't want to do anything here because we need the movie id to fetch the seasons we will return uh no it doesn't want to do that return yeah and if we have a movie then we can fetch the seasons sad seasons will be equal to a weight data store store dot query we're gonna query the uh seasons and after we query all the seasons that we have in our uh here we will season we will filter to uh to have only the seasons uh of this movie so this isn't okay i'm gonna say s and filter only one s dot movie id on the id should have a movie id it doesn't have a movie id why does it have a movie id um why does it have a movie id before doing anything let me just try to console log the movies just to make sure well we don't already have the seasons there okay our application has run let's hope that it is going to be a bit faster here let's sign in uh what happened come on come on come on okay we see them now we press on one of them and define is not an object current season dot episodes current seasons dot episodes current seasons dot episodes current season yeah here is not gonna be [Music] it's just gonna be dot not even items okay okay okay okay it's a lot of things going on here currencies in the name but i still i should have i should see back on so long that i'm doing here movie i don't have yeah i don't have the season that means that yeah we we started correctly and we need to query the season separately here here we need to query the seasons filter as move but yeah movie dot id is equal to is equal to our movie dot id movie dot id okay we save it there cost movie seasons equal this one and also let's set the current season to the first one set current season to the movie seasons at position zero okay current season at position zero yeah we have to do a lot of checks because like current episode can be null so the video player will not display probably um let's do a current episode check here and if that is true we'll render the video player episode uh video player episode of the current episode what else flat list episodes that one yeah it's okay episodes is an empty array there okay what else is there here current season.name let's if current season is not null only then we will render this speaker because yeah because that means that we haven't queried the [Music] something like that and then on value change movie seasons no set current season is seasons at item index season names that map okay i think that save let's try less right now i'm not sure what will work and what one right now it kind of makes sense because we don't have yet them what let's just have a look at the seasons variable let's go here what do we have array empty array yeah because we don't have any seasons in our database that's true okay let's go and create one and yeah we're gonna go to amplify console and let's copy the movie id that we created this is the last one right okay let's add a create season and this one will be pretty easy for the movie id we pass the movie id for the name season one and let's carry back only by d yeah my mutation is this one oh it's still crazy movie no worries it created a season and let's create one more let's just name it season two my motivation okay it created two seasons okay refreshing our application let's go to the to the last movie here or which one i think it's this one because it throws something it shows something but i'm not sure why what season oh here it is season why doesn't show properly the selector let's have a look at the season names i want to check the season names because that's what renders the v-speaker season names bro please put an episode of anime anime in there uh okay okay okay let's open this one array season one and season two then why you do not show properly here picker season names current season hmm oh maybe it doesn't work on ios with speaker let me try one thing speaker here on value change i don't need anything here selected value a and here we will have label a value a key a maybe it's an issue with ios there hey come on refreshed hmm that's fun that's fun what's going on here with ios speaker i just want to make sure that it has nothing to do with and the background color style background color white if i put it here will it work yep it has to do with background color okay let's let's have a look at how we can style it for ios to make sure that [Music] the text is displayed with uh with white native picker style color style color item style yeah i think that's what we need color white save no come on come on come on background color red always helps that's item style ios item style geez custom slider so so so how to fix it pretty quick just to do uh where is it item style on this one with background color white and just not to waste any more time here background because that's not the goal of today it's not to make it perfect just to make it workable and yeah it's here season season okay it's not it's not the best one definitely but it works i hate it i hate it why i cannot set the color of a text color white uh okay moving on um seasons we have a season we set the current season to vet one and whenever we change the current season whenever we change the current season we need to uh to fetch the episodes of that season okay that's one more use effect for us let's do it use effect this use effect will run only when the current season changes current season and we'll have the same thing if it's if current season is no longer or undefined we don't want to do anything otherwise we will uh const fetch episodes which is yeah of course i think const season episodes will be uh let's do it like this await datastore dot query and we will query the episodes episodes we will query the episodes and from all the episodes we will filter and for each episode we will leave it only if episode uh season does it have it like this happy season dot id is equal to current season dot id this one can be null okay like this and then we will uh set them in state sad episodes with season episodes but we just queried that's a good idea to use normal text where is it from here text as rec native text but i i don't use text here with the picker item with the idea yep okay episodes episodes episodes setups the thing is that we don't have any episodes yet let's create some of them for first of all let's query all the least seasons so we can get like these so the seasons that we just created items id and name run list seasons on rice token expired let's log out and log in again ctrl z here and let's run the list seasons here we have season one and season two and we can add a new mutation to create where is it create movie no create episode create episode duration let's say one hour 20 min [Music] plot hello poster for the poster let's get them from our dummy data assets data movie and here we have a poster save idea let's grab one season id from here let's put it here title pilot and the video url will take the same video from here okay let's run the mutation and these created an episode and let's create what one more [Music] second episode 01 second let's change the poster to something different for example episode episode two why wire jumping episode i'm pretty sure i messed it up episode 2 season id the same let's create it and let's add just one episode 2 of the other season list seasons let's select the id for the second season and we're gonna use it as a season id here second season first [Music] sold let's run the mutation okay that's now we can restart reload here let's have a look what's happening here use effect current season okay we never call fetch episodes that's the issue fetch episodes let's save something happens season episode episodes on let's go all right no not this one [Music] um what's going on if i do not do the filter will you show all the episodes array episode i'm not sure why it doesn't display but it uh oh because we also have to set the current set who rent episode to the season episodes at position zero if yeah if there is any okay i see already i see the video for the first episode and if we scroll down uh here is uh only for the season two and if we switch to season one we see two videos pilot and the second and probably i messed up something with [Music] with episode 2 yeah probably i don't have that that image but why it doesn't display but if i press it uh i see that they have two different plots and i can play again the movie if it can detect my clicks yeah but the most important thing is that whenever we change the season it changes we can change through uh different uh episodes and yeah probably it uh it loads the video that's why i cannot play it but it uh the good thing is that it works and with that said i think that we have uh it's an own bug in this speaker library yeah that's a bummer but it looks good like this all right but i think it had a a mode you can define different modes but i'm not gonna spend time on this at the moment yeah with that being said i think we are done with the data so our home screen fetches all the data from our back end and whenever yeah uh we open the the screen for one movie we fetch the details about the movie we fetch uh the details about all the season that the movie has uh and also we fetch the episodes of that season so if we select with season one we see different episodes and this is all uh yeah dynamic and um coming from from our back end it is cached on our mobile phone storage so if i turn off the internet but i know that on ios emulator i cannot do that without turning off my actual internet uh then we would still see the cached data at least that's how a data store is supposed to work so with that being said let's yeah we can clean uh clean up some some of the things that we have here yeah this component and ended up being quite quite long we can also define yeah we have some some red warnings here from typescript don't worry about them but if you're a perfectionist let's open the video player and say that the episode yeah episode is of type episode save and now uh video player episode um yeah that's interesting the thing is that it will never go here if it's null because we have this check we can say as episode right yeah that's uh that's an interesting issue here for episode item 102. yeah it's the same with with the types that but i'm too tired at the moment to to fix but yeah basically we have to properly define the types on everywhere on for example an episode item here for the episode for on press and so on so if we do that let's it's going to fix the red issues okay what's next in our case the next step is to configure the storage best free storage for our media let's first of all yeah start configuring it because it will take some time and then i can have a look at the chat let's open uh to add the storage we'll call amplify storage uh yeah content images that's what we need let's provide the friendlier name yeah netflix uh media should be alphanumeric netflix media please provide a bucket name netflix yeah it's okay who should have access authenticated users only yes only authenticated user should be able to uh to view the the movies from from our database that makes sense what kind of access do you want for authenticated users we don't we don't want them to create or update things [Music] we will only probably need to read the movies from there because they will probably be yeah added by in a different way by admins and not by users so let's try it like this do you want to add the lambda trigger no and let's run amplify amplify push hello from sri lanka hello from canada hello guys hello daniel okay create update no change yes do you want to update code for updated graphql api do you want to update code yes not sure what was updated in our api but okay what about the payment and downloads uh regarding payment and subscription that's gonna be um yeah that's gonna be next week so next week uh probably on friday at 3 pm gmt we are gonna implement the payment and subscription uh in the netflix clone but more on that later let's now finish it with storage let's go come on so for uh for more details about the s3 we can have a look at the getting started guide and now we don't have here as free storage for the libraries yeah getting started we can add the storage we already configured our application so we don't have to do that and that's it the the manual setup we don't need to to do that because we followed the automated setup yeah all all the content uh leaves in an s3 and in front of that as free amazon puts a cloud front and this is a cdn a content delivery network and this uh will cache uh your media at the closest endpoints to the users so for example if your bucket if your media bucket lives in a data center in usa and if someone from europe access your uh a movie the first time it will of course go uh and take this movie from the usa data store but during this first time it will cache it somewhere in europe in a in in a data center uh in um in cloud front so for example it will cache it in germany and then the next user that uh opens our application from from europe they will get the movie from the data center from germany because that's the closest one and this way you improve a lot the speed of delivering this this media it's it's really powerful and it created it i'm wondering now the amplify admin if in this case it will help us with something what do we have here storage deployed storage yeah let's open the vest free bucket here and probably it's going to be an empty bucket at this moment yep no objects uh okay um yeah let me just try to to check in our component in our project what folder structure it has because uh we're gonna upload some videos manually here and download them in our application uh let's say what what did we have um where did we have us in netflix no this is netflix in twitter we definitely had it in tweet there amplify twitter twitter twitter no this is the amplify things deployment no twitter clone this one this might be yeah and here we have a public in the public directory where we we have our files okay that's what we are going to do uh in our case as well uh okay so let's create a folder called public create and inside this public let's upload let's upload some images for the posters so let's go to live streams netflix assets not in assets in that where hmm come on i don't have them but yeah i'm gonna upload something like this yeah it has added let's upload it i'm just making sure and now let's try to to to first to download this image and to display it in our application uh where is it list files first of all let's list all the files public level list yeah and that's going to be in where source in component in home category and here what do we have an image and image okay let's let's try in uh in this component to add the storage dot list did it import the storage correctly storage will import from amplify from import storage from aws amplify we list everything not in photos but i [Music] think yeah i think i have to rerun the application because i installed a new one maybe did it rerun i missed it again run on ios simulator yeah array zero list and like this now oh here it is here it is when did it start when it was empty yeah when it is empty yeah so that means that yeah our key with image like this works so we can actually uh call the uh download files to download it with a get and the key and the key name where is it get this one and then result we will console.log and here is the url that we can use to in order to download the image so if i copy it and if i open it in a new uh we see the the image from uh from our s3 storage but the interesting thing is that this url is pre-signed so uh it has a token inside this uh if you see here unsigned payload and sign payload and so on um and this url will only work from our application i mean it will only be possible to generate this url from our application so the images will not be able to be displayed from or hacked and stuff like that and the url will uh stop working after some time because yeah this signed url is temporary whenever you open the application web application will generate a new signed url and it will display so that that's how it works uh and for for the image for an image here that's interesting one movie image item which is item item this one okay that's interesting we would probably have to to create a separate component for uh for this for this um yeah movie here because we need to yeah to query the image from the storage and display it there so let's quickly create a new folder how is it called movie movie item which will be in the list there new file index.tsx [Music] functional react native movie item okay and here we will just copy the item from here paste it and render movie item with movie is equal to item import it component and movie item here in our movie item let's import pressable and image on movie press where is it here let's grab the movie movie where here movie oh my god navigation a lot of things we need here and use navigation what else styles come on styles what styles let's just copy paste that movie item styles from here okay and so it's all right and movie item here styles we have to import them what else not item but we're gonna receive a movie and this is going to be a prop type movie where movie is a movie that's how you declare the interface in line on movie press okay okay we don't need to send here anything because we can take it from the props and define is not an objective movie poster here movie poster okay we are back where we started that's good and and here yeah we can declare a use effect to start fetching the the url of the image storage like this and we're gonna keep the const image url set image url use state when we receive a result we're gonna call the set image url oh my god set image url input no input use effect use state save what else what else storage storage from aws amplify and what else image url will go into our image here save and yeah we see the the image url which is this one however we will take this key from the movie dot poster so for all of them it will be empty however if we let's say let's go to our uh option console let's update a movie let's update a movie with id list seasons list categories i want least movies list movies title list movies let's take the first movie or which one let's take this one and run annotation on uh update movie and the input will be as following the id of a movie that we want to update is this one and the poster will be the the image key from our s3 bucket and let's carry back id and poster poster and then foster list movies not least movies but my mutation yeah it updated and if we refresh our page come on yeah opening one of them should have the the poster but it doesn't why let's go come on i think our data is just taken from it is not updated because if i do now list movies and here put poster one of them should have that poster list movies no why update movie with this id i send this poster list my mutation and now if i run list movies what's happening did i take a wrong id let's try this one so this is the idea of a movie i am updating the poster but it it gives me back the same one why update movie poster it doesn't update let's just add a new movie i'm not sure why why it happens like this input id update movie let's create a movie where the poster will be this one and the category d will be let's list categories what title and let's take you the first one for the category id and let's run this mutation create movie it created the movie and let's let's update it and have a look if intros our image are you kidding is it the same list movies hello it should be there at least movies and categories yep yep let's rerun it and see okay now now we see them we see the poster that we are fetching from our storage from s3 and yeah at this moment uh uploading the the image to s3 was manual like we had to come here and upload but later on if for example your application would have uh had a custom dashboard where you can create and upload movies out um by selecting a file then you can use the uploading a file like storage.put and this will automatically put this file in the storage so for example in twitter where the user is the one who is creating the item items in the storage who is putting their files there and also the user is the one who is viewing and uh looking at these files where uh yeah we it it made a little bit more sense because we were putting an item and then downloading it and yeah but right now we have to manually add images here and then with um with yeah as free with storage we can we can set the image url one thing that we can customize here um that's a bit extra so we can check for example if movie poster starts with movie dot poster if movie poster is already a url and not a key then we can [Music] set it directly to the image url starts with let's say http that will make sure that it works both with uh storage media and with with urls so let's put it like this if movie poster starts with log console warn hey yeah why why are not displaying image url image uri oh and uh and return oh boy and here we want to return because we don't want to update this url and now yeah it works both with s3 storage keys and with custom urls but that you you can see here and and yeah the same principle the same concept goes with uh with other uh files for example with movies as well let's say here yeah movies create folder and let's upload here a couple of videos let's upload have a dm i come from reg background and i'm starting to learn ragna you may know which playlist of your you'd recommend to start with uh for very beginners i recommend starting with tesla but if you have experience with rugged that's going to be too easy for you so i would suggest you to start with uh instagram twitter uh or or yeah instagram twitter vets it's more focused on like data and stuff and the more advanced uh builds where uh airbnb and uber where we focused a lot of the maps but yeah start with something like twitter instagram spotify is a good one what's up okay the files are uploaded what else okay list of episodes let's let's let's list list episodes list seasons and let's just add a new season with id and name this is season one let's add an episode to the season one uh my mutation this one create episode create episode and the video the video will be movies right that's how we called the folder movies slash video 1 mp4 video 1.mp4 mp4 third never mind let's just create the this episode uh and let's open it i think it it was yeah this one it was here and it was in the first season hey sam thank you very much for the donation thank you on behalf of everyone here thank you i am quite busy about the obvious obvious gave me a little bit of energy busy we're tired what did i say i'm already mumbling okay for the season one we should have one more episode if we just refresh here should be season one where is it oh it was for season two yeah this one hello again and now we need to uh to do the same as free download with s3 get to get the url of this this video because yeah others yeah we can play them not sure why the player doesn't actually play come on it worked on android why you are not playing let's open the where video player index does use native controls work here if i do it like this video player video player let's try to add uh to to play it manually like this use effect video if video then video dot current dot play async come on do something is it because of a poster yeah i think it's because of poster you saw we followed oh okay the value of use poster should be dynamic it should be true when the video is posed and falls when let's let's do it like this status let's see what our status contains because i think that's where we will start those come on uh did ggs finish has just been interrupted is buffering is loaded okay is loaded is looping is playing status dot is playing i think that's what we need to do so use poster is only when status dot is playing is false he's playing status is playing if status is null we should also use the poster and or when status is playing like this oh come on yeah for android somehow it worked with true now let's continue with false because um yeah let's try to uh play the from season two the video from our s3 bucket because right now we cannot play it as our yeah the episode video is a key to an s3 file so let's do it like this use effect use effect oh no we have episode yeah uh yeah let's query and we will save const video url url and set video url video url is going to be a state use state not like this and and and we're gonna call stor reg dot get and we're gonna get there episode dot video and when we receive back by info here we're gonna set it in state set video url but let's do it the same way here so if episode dot video if it starts with http when we don't need to download to generate this storage key but we can uh set video url directly from the episode dot video and return and in our video your right is video url save let's open again um yeah the box behind me is still working uh and if we change the seasons and select the third one which contains an item from s3 let's wait and see what happens i think it gave us an error we can do dot catch oh can find variable storage okay okay we can fix that easily import [Music] storage from aws amplify save and let's open it again select season two select the third episode here again something promising the av player instance he's filled with error code what's happening here oh okay if video url if video url is empty string then let's return null because i think it fails just to load and again possible handle or error this one works this one uri crowd front here function bone dispatch what then oh video url yeah it's this one what's wrong with it yeah the video plays here why doesn't play on video format is not supported yeah maybe [Music] yeah that can be the case to be honest uh to test this let's try a different video let's try the video that we are uh playing from ssdata movies let's open this video and download it and then upload it to our s3 bucket from here can we download and put it in our s3 here no not like this but where is it close upload and let's try to upload this and going back to our upsync i'll create a new uh episode with video with this video that we just but we know that works on our device okay like this see again let's open and for season two um which one is this oh look at that you saw that i'm not sure where was it but it was displaying the video that the first video maybe it needs time to to download it that's why yeah it should be it's from the s3 is either the first one or the third one that's what we created here look here yeah the video the video has downloaded and is displayed and this video is coming from our s3 yeah if we change to a different one it works if we change back it's a bit weird why it doesn't work here a video url is equal to nothing okay this one works and going back to this one yeah that's weird because when we go back here yeah the video works as expected but whenever we change it oh we need to run this use effect i think whenever our episode changes hmm wait a second oh okay i get it so the first time when we displayed the video is set through property source uri video url but whenever we change the episode we are calling this use effect that unloads the previous video and loads the next one and here we are using the episode video not the episode the video url and yeah uri will be video url and we're gonna do that whenever the video url changes not whenever the episode changes and now it makes sense to put this yeah just to it's logical that this one will happen first like episode changes we fetch the the video url and then the video url changes and triggers this use effect and we change the video in our player let's save now it plays perfect we change it plays valver1 we change again it plays the first one and so on so yeah now now it works properly and the videos are coming from our s3 bucket and yeah we can put it in full screen we can exit and so on all right so yeah that's that's how you implement the storage uh i'm gonna get at everything storage and i'm gonna also push everything to origin main so get pulled yeah right now uh yeah the code should be updated on uh on the repository that you can find the link in the description below so i think that was it from the planned things that we had for today so real quick overview uh we set up the aws amplify project uh the backend for our netflix clone uh yeah yeah we we have installed everything we have configured then we have added authentication so whenever a new user comes to our and our application he will be able to create an account he will be able then to uh sign in to his account and only then he will be able to uh to view them movies yeah this is a way to protect our application uh when we implemented uh the offline first graphql api uh using upsync and datastore and this was something new uh yeah it was it was fun for me it's still interesting and i'll still have uh i want to to get into more details and see uh the whole benefits of this data store um yeah we set up the admin ui uh but where from where we can uh manage our data we can manage our user we can see all our users that are in application um and also you are supposed to be able to edit the content here uh i receive an error uh because the admin ui content is still in beta so probably uh we are fixing this bug yeah we'll see then what else and then we added the storage for uh for our movies and for our posters uh and all our data now leaves into an s-free bucket uh and is served to our users through a cdn through a content delivery network where the the images the media the files everything is cached in the closest data center uh to the user so in that way we know that everything will run as fast as possible and you'll not wait to download a file from other part of the globe uh yeah that's it that's it for today next week on friday at 3 pm gmt we will continue netflix long with one more video because a lot of you have asked regarding payments and subscriptions in netflix so that's what we're going to do we're gonna implement netflix subscriptions uh where you will be able to register you'll be able to see the movie movies but only when you buy a subscription and only when you have an active subscription you will be able to watch maybe we'll add multiple times types of subscriptions like a single family and so on yeah we'll see next week what exactly features we will implement if you have any ideas please let me know down below what do you think what do you want to see next in this build we're gonna have at least one more uh yeah one more episode here okay so questions guys is how are you doing let me see i'm currently working on a startup that connects buyer and seller together when buyer queries for sellers within a particular location can google api help to bring all sellers within that location uh you can use a graphql you basically you can use simple filtering based on uh latitude and longitude and that's what i did for uber so um let's say is it here [Music] i forgot it a line yeah no all right so basically okay uh you will save the latitude and longitude of your buyers and your sellers and for each seller you will do a query you'll do a query to your database and you'll query uh all the buyers or vice versa where where latitude and longitude is in between um is in between two values like the latitude of yourself minus i don't know 10 and plus 10 in between that oh my god my brain is uh is tired i cannot explain it properly yeah check out the the uber clone we we did this there when i was doing the first part of your netflix tutorial it took a really really long time to load the video after adding a poster thing but eventually it loaded yeah i think that i don't know maybe i uploaded the like the posters are too big i don't know i love your videos very much but sorry i have to miss your live stream because i'm going to watch your revenue cat video now oh that's really awesome so you would enjoy the next video that is going to be next friday or for netflix where we will use revenue cut again to implement subscription in the netflix great stream thanks a lot thank you very much is it possible to do news up with aws amplify as a back-end of course everything is possible new sub nothing special and adding news from amplified dashboard aws the airport yeah yeah yeah you you should be able to to add the news from this content management um or you can develop a custom dashboard which will take more time if you need yeah custom custom features but here you can add it yourself you can also invite other users to collaborate and to add news and for the beginning if you're just starting me i think it will be enough uh uber please what about uber have you got any plans to make a game using rack native that's an interesting idea i have never thought about making games uh there was a time in my life when i was a game developer but that was quite a long time ago so i don't think i'm gonna get back to that but maybe iraq native as a challenge i don't know quite weirdly we have a tech stack i would rather do it in unity but okay guys i think we are almost for four hours in the stream so i'm pretty tired i have never been to the toilet in four hours uh okay thank you very much uh everyone for joining thank you expo again for sponsoring this video and making it possible see you next friday where we will continue the netflix series if you enjoyed this video please consider subscribing to the channel because i know that ninety percent of you are not subscribed so yeah uh youtube algorithm is good because we are recommending you the videos but uh take take a moment and subscribe and turn on the notification bell not to miss any uh future live streams [Music]

Channel: notJust․dev

Views: 42,376

Rating: 4.6124568 out of 5

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, typescript, react tutorial, react native, javascript tutorial, react native clone, react native app, react native for beginners, learn react native, react native project, react native project tutorial, netflix clone, netflix react native clone, aws amplify, react native expo, expo sdk, aws amplify react tutorial, video on demand app

Id: EmUnNH31E8A

Length: 232min 58sec (13978 seconds)

Published: Sat Mar 20 2021