🔴 In-app Subscriptions in React Native Netflix Clone (Tutorial for Beginners)

hello everybody oh my god what's up everybody uh today we're gonna implement subscription in our netflix clone and we're gonna do that with revenue cat so welcome to this live stream and yeah what our subscription is a way to monetize your application and in this specific case we are gonna uh make possible to yeah to to allow only pro pro members the ones that are paying a monthly subscription to our application uh to access uh the movies to be able to see to watch them and yeah that's basically like how netflix works so that's what we're gonna do today uh yeah so um first of all we'll have to build our application we're gonna build it for uh android only uh just to save time because building takes a lot of time uh then we're gonna have to deploy our application to the market and i know that a lot of people are were asking for this uh yeah the deployment probably will not be a tutorial but you're gonna see like what you need to do in order to to have your application on market and we need this step uh because implementing uh in-app purchases and subscription uh require that the application is on the market and yeah after these two steps we're gonna implement uh everything that comes to in-app subscription we're gonna install revenue cat we're gonna set up all the products uh on the market and on um revenue cat application dashboard then we're gonna set it up in our application check the subscription status of a user and based on that allow him to watch movies or not uh and then yeah like he'll be able to purchase these packages that we're gonna set up and so on uh yeah thanks to revenuecad for sponsoring this video uh you can get a free revenue cat account following this link yeah revenue cat you'll see in this video more about uh revenue cat but it makes it really easy uh to integrate enough subscription and specifically when it uh yeah it's available for multiple platforms even for native ios for native android but for react native i think it makes a lot of sense because we are building at the same time for both ios and android and without revenue cat we would have to manage this subscription uh separately on ios and separately one play market and in that case our code will look um will be a lot of code uh it's not maintainable it's hard to to keep up with this uh however yeah revenue cat uh gives us a single source of truth so we integrate with revenue cat revenue cad then uh manages the subscription both on ios and on play market and this way it simplifies a lot of steps yeah we are going to see more uh more about it in today's video because we are going to integrate it with it i've also integrated revenue cat in my startup application so we just finished it and it was really a great experience like it was easy and in a couple of weeks we finished the the monetization of our application and if you're new here hello welcome to to my channel my name is vadim i'm a full stack developer for over seven years and at the moment i'm working at a small startup in the sports industry it's called vitinium you can check it out if you're going to the gym uh i also worked at as an software developer engineer at amazon and yeah currently i'm sharing all my journey and all my knowledge with you here on youtube and if you enjoy what uh what i'm building uh please consider subscribing to my channel because yeah these builds take a lot of my time to prepare and that time i could invest in the startup probably but yeah i'm choosing to to do it here all right so uh let's go to the next step uh what will you need in order to follow up with this tutorial you're gonna need a react native and expo environment setup you're gonna need an aws account and aws cli setup because the back end of our application is on aws more on that a bit later you're going to need the revenue cat account you can sign up following that link and yeah you're going to need the dummy data images icons pdf presentation yeah in this specific tutorial uh the only thing that is updated in uh the assets is the pdf presentation so if you need this pdf presentation with all the links uh to easily follow up with them uh follow this link and download this presentation uh so this is our third video in the netflix series we have on our channel build in the first part we have built the ui of netflix in the second part we have integrated it with a amplified backend and we integrated authentication then the graphql database now all the data in our netflix application is coming from our amplified backend then yeah we'll also set up storage so all the videos all the images are stored in an s3 bucket so if you're if you just came to this video i encourage you to follow along the first and the second part uh however if you're interested in only um the the enough subscription then you can clone the repository uh not the ui branch but the back-end branch back-end branch uh by following this url uh netflix clone on my profile and then choose the back-end branch so that's where we're going to start then install all the dependencies and next step would be to initialize the amplify project by running amplifying it and then pushing it to the cloud by running amplify push but before that you would have to need you would have to have the amplifi the aws cli set up [Music] right after that you can run the project and that's where we can get started let's have a little demo of the project what do we have at the moment let's our application is here so yeah this is our home page let me put it here yeah this is our home page of application it will display movies it will display categories in a vertically scrollable list so if there will be more categories you'd be able to scroll down and so on uh yeah with our dummy data we had that but in our backend database we don't have a lot of categories and the same thing as uh movies in one category they are horizontally scrollable so if you have like 10 movies you'll be able to scroll through them uh yeah then we have the movie page and let's try this one because we added data only about one movie and it's not this one yeah my emulator is kind of slow today [Music] maybe the irishman and we have here any seasons episodes let's wait until it fetches no we don't have anything here i think it's this one let's try yeah we have here yeah on this page we're displaying a video player it's gonna load uh in a moment yeah it's there we display all the information about the movie um yeah all the description cast creator and so on then we uh we have a season selector so if there are multiple seasons we can uh choose what season we are currently watching so let's go to the season one and here down below we display a list of all the episodes and these episodes are stored in uh are stored in s3 the videos so we can play it here you have my military is quite slow but i think for you it should work pretty smoothly or on an actual device so if i go to the season two i think there we have more episodes yeah we can try to to select another one and it's gonna be updated in our player i stumbled upon the same one this one yeah nonetheless yeah uh that's uh that's our application that's what we have at the moment it's built using uh expo let me try to scale it up so you'll be able to see it okay here okay the introduction is done hello guys how are you doing there where where are you joining today from the same place the same city okay coffee in let's get started so uh the first step uh in today's video will be to eject from expo and that's because in-app purchases are not supported by expo so if we want to continue we would have to eject uh to a bare workflow and while doing so we get um we are able to integrate a lot of native code that yeah and one of them here is uh in-app purchases uh let's let's open our project and it's here i'm gonna close everything and let's open the terminal i'm gonna stop the the server not to mess up anything here and now we can run expo eject what would you like to your android package name to be uh let's say uh add the package name that uh that represents you for example your name or your company name so i'm gonna go with not just and then the project name will be netflix clone netflix clone and the same bundle identifier for our ios and now we'll have to to wait a bit until expo ejects and sets up and creates uh the ios folder and the android folder that we will need for setting up extra native configuration and native libraries uh regarding the uber clone um [Music] i was quite busy this weeks and i didn't have time to to do a video about that demo of uber clone uh however uh i'm i'm preparing right now uh the node.js development uh platform and uh for vet i will need this demos and i will definitely do it but i cannot promise that i'm going to do it this week so yeah i'm a bit busy these days with with work and university and youtube and everything so yeah this is the first time when we have to actually eject from an expo from expo and a lot of people were asking like um okay like there are a lot of limitations on expo i don't know if you need something and yeah here is the solution it's it's as simple as running like expo eject eject uh when you need it and when you face these limitations because uh most of applications um that i've been working on didn't need any native code and they were perfectly fine for for expo however yeah if you need for example in-app purchases that we're gonna need today we can eject at any time yeah this today's video will be a lot of building a lot of waiting so if you have any questions let me know and let's discuss them let's go let's go to do did you guys follow along the previous videos have you tried implementing it yourself i'm really curious what sing is saying let me tell you that you already have an impact in this world you are my mentor thank you very much that's that's really sweet and i'm really happy to to be able to help you in this way do we need to learn hardcore concepts of typescript um yeah interesting question um it depends it depends on at what level are you because yeah if if you're still uh learning i don't know like for example javascript or react native then typescript is not mandatory and you can accomplish everything uh with javascript as well but if you have mastered javascript and react native uh yeah i would um i'd recommend you to uh to start getting used to typescript because uh it's gonna help you a lot in future so let's uh let's run uh okay then our expo has ejected and now we have uh an additional android folder for all the native configuration of android and one for ios here sorry uh so let's run the server here yarn start and then we're gonna try to build it and run on uh on device and to make sure that it it actually works okay let's close everything from here and let's do yarn uh android and we can close the window for that can include redux in some projects um yeah a lot of people are asking about redux oh no why you are opening another emulator no i don't want that this one is slow yeah regarding redux yeah i think that uh i will i will use it in some projects yeah again i cannot promise that it's going to be the next project but what i can say is with the next project we're going to build with node.js and express so that's exciting that's something new please please android emulator i need it on this emulator can you make a video for ios certificate configuration in react native oh my god this like configure configuring certifications on ios it's it's something specific like yeah i remember when the first time i was setting it up for for my startup i spent so much time and there is no like good guide from from a to b like what you have to do like so many certificates so many uh keys so many projects to to create their like yeah i can understand your frustration should i stop the build process hmm yeah it's hard uh like we're deploying to ios um i don't think it's hard it's it's confusing it's very confusing and like a lot of steps like you do but like you just do them because you you read somewhere like oh go there create this uh certificate and download it then put it there and you're like come on like what's happening but however like after you set it up then everything runs so smoothly and after that i think it's much easier to to deploy updates to ios than to do it on android and you can do everything from xcode just to build it you make a push a button like deploy it like ship it to to app store and that's it so after you configure it i think everything is is all right and with time everything starts to make sense and we're doing this for security reasons make a youtube video react native firebase cms api crude all right that's a challenge not sure i'm not sure if um if i'm gonna do firebase soon but maybe maybe i will do i'm looking forward to our um [Music] like express and node.js api build um i'm still thinking like what application we should do there what application should we build hey manolis thank you very much for the kind donation that's really nice good job you've inspired me on starting to develop with frac native keep on uh good job thank you very much i'm really happy that uh yeah i helped you get started with rack native and how is your experience so far what are what have you built have a build for people that are joining we're not we're not just wasting time we are waiting for the application to build so we can test it on our device so meanwhile uh we can have some chat let me know in the oh express energize would be great yeah i'm looking forward to that and most probably i'm gonna build a graphql api on on node.js make small shop with car check check out yup yup yup yup um that is also coming i'm not sure if that's going to be the next build i'm going to build a e-commerce so it's in my to-do list e-commerce e-commerce and node.js and express has been the most requested uh builds so far fiverr can be a good challenge fiber is is such a let's say horizontal applique it's huge but it's horizontal like it has a lot of um of features that are very important to to the platform so i think if i start building fiverr i would need like i don't know uh 10 episodes to build like the most important parts of fiverr because when you think about like i don't know instagram the most important uh feature of instagram is the feed and uploading up photos and videos to the feed yeah twitter the same but on fiverr is like uh yeah it's multi-vendor like a lot of users a lot of service providers um projects gigs uh van chat and so on like yeah it's it's a lot there but maybe we can think of a smaller scope for it and what is a cms solution for native um cms solution for native uh you mean a content management system in react native or for a react native application because if we're speaking about for a react native application i don't know let's say cms for this netflix clone where you a manager would be able to to manage your movies then like any solution can work because uh it's external to react native so you just connect uh other um solution i don't know like uh strappy and so on with the back end of your application and you manage your content there hopefully that that's what you asked i'm building a touristic guide of my island on which island are you man i'm looking forward to to eat to not jazz and express make a video full e-commerce yes yes yes we're gonna do that do you have a video about how you learned programming uh i don't have a video about how i learned programming i mean i have a video uh yeah with the best way and the fastest way to learn like any technologies like any languages programming and so on and uh the things that i talk there is actually how how i learned programming so go check it out on my channel come on why why it's so it's already eight minutes of building yeah it's not nice to discuss but we we gotta work why come on device android please go through environment setup steps you done so far please didn't get it please tell us your story we want to know more uh yeah what exactly about how i learn programming yeah um if you're asking about how i learned programming i think i started um around seven or eight years ago when i started my high school and we had like programming there and we started learning c plus plus and i don't know from the first lesson i really enjoyed it and everything made sense so yeah i spent a lot of time in the beginning doing things on my own like i don't know if they were teaching us if statements i was already learning like four four loops and so on because it was interesting for me to to to try to learn more and and yeah soon i started participating in contests like local in my country and yeah the first contest i i had zero points because uh yeah i knew the basics of programming but i didn't i didn't reach the point where uh to learn how to read information from a file so everything in in the contests is like the first step is you have to read the data from a file so i solved a couple of problems there but i didn't know how to read from file so that's why i had zero points oh the build is successful so remind me to continue the story that's the first part come on i am from uh lara's greece awesome i'm also from an island i mean i'm also staying right now on an island i'm using linux for react native and work smoothly yeah i i also was working on linux wavefront native for a long time and it was working pretty well why don't you create your own streaming platform oh what's wrong with uh however streaming platforms do you have a video when the app uh gets the live location of a user yeah we are doing that in uber clone yeah while we are waiting the application to build uh let's see what's our next step and the next step is you have to clean up a bit some of the permissions because by default a lot of permissions are added to our application and when we are requesting a lot of permission we need to to have good reasons for that so i'd rather go to android app source main android manifest and here the ones that i need to delete is everything about location because we don't need the location of a user in this application so let's delete let's search for location and delete this one this one and background location we don't need camera we don't need record aid auto uh like this we don't need to read contacts write contacts calendar no um right settings no what else don't read phone state no no fingerprint no biometric yeah what else was there uh contacts camera yeah i think that's that's it i mean these are the most sensitive uh permissions and if you enable them um you need to take some steps when you deploy the application just to say like why do we need the location to describe and why do we need the camera and so on um yeah the application is still loading so our next step would be to build and publish android but before building and publishing we would have to sign to sign our application and here on racknative website there is more information about that let me open it here you can follow the guide here where yeah publishing to google play store and the first step is to generate an upload key so we can do that i hope that you can see i can zoom in a bit right come on zoom everything is slow today zoom zoom oh i guess all right so yeah the first thing is to generate an upload key and we do that using the key tool [Music] utility program that you can find that comes with java when you install android studio so on windows the key tool must be run somewhere in the program files java jdk bin [Music] on ios you can uh find it using the following command however i have it already in my uh i have it it's set up in my uh how is it called um [Music] i don't remember how is it called so i have it globally so uh i can go to android folder and then to the application android then up and from here i can access it like this key tool so let's paste the command that will generate our key and here it will ask us for a password uh yeah the most secure password remember the password you will need it uh yeah for the last name yeah i'm gonna yes you can fill in that you should fill in the data regarding like um your information all right so this command generated uh in our application folder it generated a my upload key dot keystore we'll need these uh to set up the signing using this key so the next step would be to um yeah to set up the gradle variables uh and we can yeah let's copy the variables from here and let's go to our android and inside android there is uh where is it the gradle properties so in the android folder not in the application but here android gradle properties so let's scroll down and add in our variables um my upload key that's that's the name of the file so we will leave it like this if you didn't change it uh so if you change it then check out what's the name of this file and then update it here so i'm gonna add the password here there is also a way to set up the passwords uh if you are on the mac os to set them up in the keystone keychain so in order not to write them here so let's save this file and then we're gonna open up android up and here build.gradle but don't open it from android build.gradle but android app build.gradle that's important and here our application has loaded but let's continue with this one so yeah yeah here we will need to set up the the release keys the signing key for our release build let's scroll down to android and then we have signing configs sign income things and currently we have only four debug uh we're using a debug key store and let's add here the we have to also copy the lisk so release uh we first of all check if we have a upload store key file and this is a variable that that we set up here and then we yeah we specific the file we specify the password and yeah these variables will come from the gradle properties after that we also need to do two to two for release here for the build types let's scroll a bit and here is the build types for release we need to say signing config not debug but release let's update that let's save and yeah the next step is just to build it yeah let's build it and wait five more minutes let's hope it's gonna be only five uh yeah let's go in our android folder we are in android folder yeah if i do pfd you see here uh and here we can do gradle bundle release and this will bundle our application for release mode using the you have a signing that we have set up everything here yeah and this will be ready to be uploaded to play store market and let's have a look at if our application still works after we eject it from expo uh here is our sign-in page let's sign in with our account that we did created in server right password because it's very is the most secure password yeah map is just the emulator is slow i mean let's try to refresh come on uh video call application can it be your next project probably not the next project because next project i promised all the the node.js window.js project maybe sometime in future and good evening vadim from kathmandu nepal hello i have a friend there please make tinder clone that would be an interesting project and tinder for developers nothing is wrong but streaming industry is growing plus it a lot of things can be improved in twitch yeah but uh competing with such players it's it's kind of difficult not gonna lie so yeah twitch might be bad but you would have to come up with a project that is 10 times 10 10 times better than twitch in order for the current fans of twitch to to decide to to move to a new platform because in twitch in the streaming industry everything ties to the content creators so uh the content creators are i don't know 0.1 of the users in a streaming platform but this content creator all other people's are are on the platform where the content creators are streaming so for example all ninjas fun wear on twitch when he was streaming on twitch and then they moved to together platform when he moved so you would have to to compete with this it's not an easy industry my team and i are currently working on a streaming platform that's nice um what what is your specific niche like i don't know streaming for for gaming streaming for for programming or something else because i think that's the only way to to actually compete with these big players to start in a very small and very specific niche where you can add extra value for for for that specific people that they cannot find on this general twitch or other players other streaming platforms what is the point where are already so many um it's not an issue but there are so many if there are so many that means that there is a lot of demand and there is a lot of money to be made there it's another point that it's it's quite difficult to compete with these big players you're gonna be smart about that i know but there are still a lot of improvement look on dating apps that market is so crowded but people still building dating ups with good promotion we can go to the top yeah that's true but it's in my opinion uh it's it's better and easier to to succeed in in less sexier less sexy market things that are not that crowded because come on like if building a new dating app probably will uh will not be the next facebook or will not be the next big thing that everyone is talking about that's just my opinion you can generate with android studio the the key yeah probably you can generate with android studio as well why you are stuck on this tab should i wait or should i restart it's five percent come on i know that this live stream will be a lot of waiting but please the streaming industry is growing and i want a slice of it yeah that's an interesting position thank you luis then actually i've been thinking recently i've been considering this idea to to move the streaming to twitch so to stream on twitch and then download the video edit it out and upload it on youtube edited just because the video will be much more condensed on youtube because i will be able to cut out the parts for example these i don't know 10 minutes build that we are waiting right now uh in a live stream i'd be able to cut it out and um yeah the video will be much smaller and to the point but i'm still considering because that would imply much more work like editing a three hours video or four hours video would probably take me a lot of time so what do you think guys would you like like um edited video more contest or do you like this uh this approach where you see everything like from start to the end and you go with me even when yeah i have issues and i have to google and even when the build takes 10 minutes i'm interested in your opinion uh my target is gaming industry it's for like uh streaming so i'll start there and work my way up to be honest i would suggest you anything else than gaming industry just because twitch is all about gaming industry so this [Music] this niche niche is is dominated by twitch i'd suggest anything else like i don't know streaming for coders for programmers because you have a lot of people streaming on youtube on on twitch but maybe you can make something better where you would incorporate extra features in the streaming platform that are related specifically to coding i don't know like there might be a lot of ideas in that industry and and you would have the advantage because there are not a lot of sharks in this industry i'd suggest you read the book uh blue ocean and uh you'd find out like how to avoid the red oceans and the red oceans are industries where there are a lot of competitors and in this case that's streaming and specifically streaming for gaming there are a lot of big players and to dominate that industry you'd need a lot of money uh or a product that is ten times better than uh the leader there so unless you do that it's gonna be hard to compete but there are there are other ways there are ways like to uh to create your own market and dominate that market and yeah in a blue ocean you are the only fish and you eat everything jonathan i like the live stream because if you experience issues we can also learn from your pain okay i should start crying the build is at five percent and i stopped it one one time keep it on youtube live no editing that's more time consuming for you okay that's interesting personally i prefer it this way because we might learn more if we have any similar issues and know how to solve them yeah yeah but that's an interesting point to be honest because initially like uh and everyone that i was talking to i was skeptical about this live stream because if what if you go and get into a problem what if you don't know how to implement something what yeah like oh what if you would have to use stack overflow or google but then like you realize that with all the tutorials and builds on the internet they seem too perfect and i think that's a bit intimidating for new developers and i think that's the reason of all the imposter syndromes uh to new developers because you you're thinking like oh man like that programmer but i saw like the tutorial he knows everything like he knows all the all this stuff from this file that i have no clue what what it means but he's just writing it and like come on like i'm i'm worse than him or something like that but when you do it like this this way live and you see that a lot of times i'm googling very basic information uh yeah from time to time i'm i'm googling the same thing over and over just because that's the real truth about programming like you you do not remember everything and just knowing where to find this information and how to google that's uh it's really important like to to achieve anything here so yeah maybe there there is a a vibe to these live streams but five percent build that's killing me hello blaze you can do multi-stream both on youtube and twitch yeah i've been i've been doing that um but yeah my my target my my goal with this is not just to to capture more audience i'd rather prefer to uh to focus on one platform so to both in doesn't make a lot of sense because here on if i'm streaming only on youtube i can talk with you guys here in the chat and you you feel the connection but if i'm doing on both then i'll take a question from twitch i'll discuss about that and you'd have no idea like what i'm talking about or something like that i don't know if that makes sense i'm definitely gonna read that book thank you so much really really appreciate the advice um yeah you're welcome i recently finished it like i knew about it for a long time i it was in my to read list and now i finished it i started learn like reading i mean listening to more books recently because i'm going to to the gym and every day and the road to the team is around 15 minutes so it's 15 minutes one way and 15 minutes another way or 20 minutes when i'm coming back because it's uphill and yeah in a couple of days i finish a book so now i'm burning all the credits that i've been building up on audible can i do live tutorial tomorrow i shop commerce uh e-commerce i'm going to do ecommerce but definitely not tomorrow you can use react native rename why do i need to to rename i've been using this package to to rename the package name but i don't need it at this moment damn come on what can be the issue should i just i don't know stop the server should i just try to build it in something was happening oh come on don't say that it was because the server was running now it started executing come on we wasted 20 minutes because the server was running come on that's what we're talking about today stack overflow and googling is what a developer does in real life that's actually true and knowing how to properly search and where to search i mean not where but how is is very important because yeah i i'll stop there your followers are increasing and getting crazy yeah people people are coming here it's really nice youtube algorithm encourage live contents that depends it depends but actually actually i would say that yeah live live streams perform better on my channel than normal videos but as far as i read it's it's not it's not the case it shouldn't be the case now youtube is um yeah is releasing by youtube shorts i mean they have been better testing them in usa and i think in india for a couple three months or so and the youtube shorts is like a competitor for uh tick tock so yesterday i was i was working and i had this idea like what content um should i produce for these shorts and to try them out and see how they go and um and yeah as always uh thinking to to do something in short format like where i would explain um a technology so yeah yesterday i think like oh why not do it why not doing it for the short because you have one minute and trying to explain a concept or a technology a programming language trying to explain something in one minute it's quite challenging uh but it's fun because you you should get down to to to the most important stuff so there is no like talking around or going around things or no like introduction of 30 minutes and yeah i i already have two shorts on my channel one about react native one about expo and uh i have more pla planned but didn't film them yet so yeah it was really fun yesterday i i filmed them i edited them in a couple of hours so we'll see we'll see how they'll perform how people will enjoy them if you like this type of content let me know and yeah if you have any other ideas of concepts or even if you have a question maybe you can ask me and i would answer you in a form of a video a short video like one minute and that would be fun if you're using expo my app will be large uh the size of application will be large and if you're using rack native no uh yeah that's true uh x publication like um the default like hello world application is around 25 megabytes um but hey i mean like we are in 21st century like like storage is not the biggest problem nowadays and yeah when people have like maybe maybe i don't know like for for very specific cases like i don't know if your target market is is a specific like niche and you need to have like the application like less than one megabyte i don't know why would you need that requirement then yeah that makes sense and you you cannot use export because yeah 20 megabytes by default application but i don't know like in my experience i didn't have issues with this um with this limitation it's yeah like weighing in the pros and cons like if the size really matters in your project and it's a deal breaker like if the size is more than 10 megabytes like it's not gonna run then yeah like go with rack natives ally but if the speed of development and the development experience matters more than the size and i think expo is a great choice you have found a away your way with popular apps live building quite a good application of blue ocean rules um yeah yeah it's it's kind of a saying um when i started um yeah i had this idea to build this popular application uh live with rack native of course and yeah after doing a couple of them i saw that i'm not the only one and there are other channels uh other big channels on youtube that were doing the same but then when i felt like oh my maybe like i should do something different but that just validated that there is a very easy demand for this kind of content and also nobody was doing react native so that was my blue ocean live builds of popular application iraq native and also aws amplify 92 execution i think i can cut uh out a lot of small parts from this live stream and just upload them on the channel oh why i didn't put just my face my beautiful face almost done yeah almost done 92 percent uh but i think that we we can continue i think we can continue while it's building with the next step and that would be to to create the application on play market because we have to set up something there um and we can do it now so let me just open the play market one second i'm gonna one second opening the play store let me will there be a stripe tutorial in future uh definitely yeah i'm looking forward to integrate stripe and i think the the best application for stripe would be uh e-commerce so when we are gonna implement e-commerce then most probably we will gonna use stripe not like you you are a big channel too just see how we're we grow together yeah thank you very much for the support guys it's really been a nice journey so far like in the last couple of months but yeah we we have a long way to go i mean i have a lot of plans so just just wait for them especially with with a platform that i'm planning to build loading loading loading the the live stream title should be loading or building dot dot okay so let's let's create a new application we are in our google play store uh play console uh and let's create yeah this new application web name will be netflix it's gonna be an application yeah our application will be free because anyone will be able to download it and the subscription will be an extra feature so you will download it for free but pay inside that developer pro okay let's accept all the policies and create our application yeah this is the dashboard uh for our new application and i really like the new dashboard because when i uh when i was uploading my startup application like a couple of years ago it was it was a bit different and now with this checkbox and like a very easy to understand guide it's much easier to to to set up everything and upload it so first of all let's start testing now uh no let's um let's first of all set your uh set up the application and let's view what task for tasks we will need here let's select the first one and uh some functionality is restricted because we have a login screen so we need to provide uh some details about how to log in for people at google that are reviewing our application so they would not have to register and so on so we need to provide them valid account to them uh yeah just log um in this application doesn't make sense because we're not going to actually uh deploy it we're going to just upload it to to play store uh to test the in-app purchases but if you're developing an application for yourself you'll need that after saving let's go back to dashboard and yeah complete the next steps here odds no my app does not contain odds back content rating let's start provide your email address and no no no no it's entertainment violence no fear no yeah our application doesn't have any of these yeah you would have to to select like specifically what's in your application because initially if you if you have something for example if you have simulated gambling and you put no here your application might get to the market but after a couple of weeks it might be removed because we are checking it constantly if you um if you provide uh the information correctly okay uh concentrating done uh what can i do like expo if i have windows 10 yeah expo works on windows 10 as well target audience let's select 18 and uh over not to could your store listing an intentional appeal to children nope save dashboard and newshub now our application is not a news application let's go back what else select and up category and provide category oh it's not category my whole life was was a lie i thought that it's category but someone uh mentioned it that it's oh my god then i cannot tell this this word category right did i say it correctly now every time i'll say this word i'll like have like a tick so our category is entertainment okay let's save you need images um yeah i need images but because this application i'm not intending to to release and i don't encourage you to release this application to market because because of obvious reasons uh yeah let's go back to dashboard because of that i will use some some images from uh from vcrypt of it i prepared so short description netflix clone educational purpose only yeah this is for educational purposes only up icon uh let's upload an application icon and this should be uh 512 by 512 pixels so i'm going to select um the icon that i had for vcrypto i'm not gonna waste time to create a new one for this one uh here is it 512 by 512. feature graphic this one should be 124 by 500 and this is for [Music] let's see i think this one one nope let's see if i have anything here uh 124 right i think it's where did they have it android nope don't remember where i had it store from now let me try this one nope [Music] i'm gonna that's the easiest one images save okay phone screenshots i have them live streams uh screenshots here right no not netflix crypto store oh here was that image that i was looking for okay let's select a couple of them let's upload that yeah 7 inch tablet screenshot i think you can leave them empty yeah i'm gonna try to leave them empty and yeah your changes have been saved and that's it with setting up the application right yep now let's uh let's follow the release your application and here are some uh some tasks so let's select countries and regions and yeah this is for the close track yeah you should be in testing and closed testing and here let's add countries and regions i'm going to add all of them if you want to make it possible to test your application only from your country for example then you can choose to do that and then i'm gonna also select testers to specify which testers will be in this application i have already an email list here we where my email is added and make sure that this email is very male that you are signed up in google play on your emulator so if i go here on google play uh you'll see the time sign up yeah here on google play you'll see that i'm sign up with vc mail that's an important step let's save changes and what else create a new release let's go to releases create a new release and here we will be able to okay let's uh upload our dot aab file yeah here if you see i'm logged in with my account no why did i okay so our build has finally after 19 minutes succeeded and we can find the the build file which is dot a a b in the android folder then in our app folder build uh outputs bundle and release and then we have this up dot release a b so follow this path and you'll find the file for your application so let's upload it here let's open netflix android app build outputs bundle release and this one you can provide here release notes like if you provide some updates some bug fixes you can specify them here and they will be available on play market whenever a user will get an update they will see like what exactly you the update is providing okay yeah we need to yeah we finish signing we finish building we publish to play market the next step is to create a new application in revenue cat so i suppose that you already registered on revenue cad and now we're gonna start setting up everything that we need there so let's open uh our dashboard if we are logged in here you can go to apps and add a new application and we are here let's call it netflix um we're not going to set it up for uh app store for ios if you're interested how to do that uh i have a video a separate video on how to set up revenue cat on my channel so you can check it out [Music] but yeah we're gonna follow with only google play store because [Music] everyone is able to deploy to play store both people with windows linux and also with mac os so this way everyone can follow along for the package name we named it dev dot netflix netflix clone i think right netflix let me check up source main android manifest and here here is dev not just netflix clone that's it and for the service account credentials you'll need to generate these credentials uh on in your account and i already did that and you just have to follow these steps we are pretty self-explanatory with screenshots it shows you what to do to in order to create this service account and at the end of this guide you will be able to download the json file yeah here when you hit create a json file will be downloaded so that's what i already did i downloaded this json file and let me get the content of it when you will open the json file come on not with notes no no no no what's going on one second yeah i'm going to copy everything that is inside with json file and we can can go back to this page and paste it the service account credentials here this is a way to allow revenue cat to talk with uh play market in order to to get all the products that we're going to set up shortly so let's add and yeah our application has been set up and in a moment we're gonna come back and continue configuring everything from here uh back to our build it has uploaded here it has a name and let's save review release and start rollout to alpha yeah this is an important step and your application should be in closed testing in order uh to be able to receive this in-app subscription that we're gonna set up so make sure that your you follow all the steps that we followed here on google play uh now let's go to yeah uh i'm trying to to remember i also had a bug uh with configuration with google play store and i'm trying to to remember what exactly was that so i can tell you what to do in case you encounter it [Music] testing yeah that's with tests account oh uh no that's that's that was about um where is it license testers testing so if you go to the all applications not on your application page in the settings here is license testing and if you set up here your email you'll be able to uh to test the enough subscription without actually paying so it's going to be like a fake payment in order for you to be able to test everything so add a license your account as licensed testers here and then we can move move on netflix okay uh here let's scroll down uh until we see monetize and uh below the products we will go to the subscriptions uh your app doesn't have any enough products yet come on [Music] okay okay before uploading we will need to where is it to install the purchases package uh before you are setting up it there so let's let's install react native purchases and that's the library that we're going to use uh to handle the subscription subscription and this this library is provided by uh revenue cat so let's install it in now our application but first of all let's make sure that we are in the root folder let's install it okay then uh if you are on ios run npx pod install uh then we need to enable billing uh in our uh for for android billing permission so let's copy this permission let's open our up up source main android manifest we had it here opened and yeah let's add below the internet permissions permission let's add also the billing that is what the issue here was that we didn't have billing permission enabled in our apk okay our library has been uh added correctly we set up the billing permission uh if you're on ios you need to set up in-app purchases through xcode so open xcode go to project target capabilities and add in-app purchases however we we are ready to rebuild our project and upload a new version to ios but if we want to upload a new version we will also need to increase the version number and to increase the version number i think it's in android up build gradle let's see here if we have a version default config android yeah version name uh version code will be two it should be different and version name let's say 1.0 this is how we increase the version in order to upload and update let's build again our application cd where are we pfd why netflix and then android yeah make sure that you are in the android folder and run red blue bundle release to rebuild our application hopefully this time it's going to take a little bit less time but we'll see let's let's think if we can no i think we cannot follow with the next steps uh so guys let's get back to questions let's get back to chatting and george finally in the live video keep up the good work thank you very much what um yeah what what time is actually uh currently at the moment in where you live and does this time uh suits you is it a good time for you lucky thank you so much mister thank you very much for watching you know what i think i can uh while it's building i can explain uh this tab yeah i can explain how sorry um yeah how revenue can't manages everything and how they group everything into these products entitlements and offerings and we do this in order to make our life easier easier for developers and uh yeah let's start with products the products in revenue cat are the one-to-one mapping between um you have the products in revenue cat weaver products from play store and apple's apple store or even stripe so if we go here in the dashboard we have a product and whenever we set up a product you'll see that we will be able to select to which store we are referencing and yeah that's why this is a one-to-one mapping so that the products in revenue cat are attached to a product in app store or play store and this is the actual thing that user buys like the the and the most uh simple thing like in our hierarchy that the user buys where is the keynote then comes our entitlements and um without entitlements let's think how would we decide if a user i don't know is allowed to to watch a movie or in let's say in netflix there are personal accounts where a user is allowed to watch a movie there are family accounts where multiple users from the same like account can watch movies and so on so we would have whenever a user starts watching a movie we would have to to check if the user has a pro membership on play store or if that user has a annual membership on play store or event user has a pro membership on app store if he's coming from ios or if he has a annual membership on app store or if he paid with stripe and so on and you understand like how easy and how um how fast this gets out of control and then like our these if statements are getting like out of hand and revenue cat introduced these entitlements and yeah this is the levels of access for example we have a gold entitlement or let's say a pro entitlement that allows users to watch this movie and also we have like platinum entitlement or family entitlement which will allow like multiple multiple people to watch from the same account and inside these entitlements we put multiple products so if a user has at least one of these products he's entitled to this to the features that this entitlement has so in our application we are not checking like this one two three four five uh products if the user has one of them we're just checking if the user is entitled has a gold entitlement and that's it and from yeah from this crazy if statement and we we are getting to to a simple like if user has a gold entitlement let him watch that movie and if two users are watching from the same account and that user is a has a platinum account let him let them watch otherwise make them pay okay then comes the offerings and offerings um is a way to yeah for offerings we have these packages and a package uh is a group of equivalent uh is a group of equivalent products so for example the gold monthly package is a group of gold monthly from app store and gold monthly from a play store and so on so we are just groups of equivalent equivalent value from different stores when we take these packages and put them inside offerings and this way we will be able to test different offerings in our application without uh ever needing to update our application on market or update any code we from the from the dashboard of revenue cad we can create different offerings and we can uh specify which one is the current offering so for example if you're running a sale let's say this week you decide to offer like 50 discount on all your packages then then you can yeah you can create this offering with with the discounts and make it as current and that's what the users will see in the application when they will try to to upgrade yeah hopefully that's that makes some sense uh it will definitely make more sense when we will actually implement that and you'll see how easy it is to to check if users are subscribed or not let's check if no our application is still building and i really hope that this time it's not going to take 20 minutes lucky films thank you so much thank you for joining alexandra hello how are you doing uh rodor i need your help um i try to to write your question if that question is not related to to this build yeah try to reach out to me on discord i'm gonna try to help if i'll be free how about without revenue cat uh yeah without revenue cat it's crazy like how much setup and code you have to go through and yeah it makes it much more easier with with this and that's it that's everything that i know oh we have some progress here what is the estimate amount a programmer of 18 years can earn i don't think your age makes a big difference uh it's just about your skill and [Music] and yeah like in which country you're applying because yeah different countries have different salaries for developers so if you are a skill developer and have experience sky is sky is the limit you can make a lot of money in this industry um yeah are you developing the application indirect native or just android studio would you buy the current m1 macbooks or would you wait for these year ones uh i was considering buying the i was considering the current m1 macbooks and yeah it's pretty interesting like i think we'll see a great uh boost in performance specifically for developers i saw like how much faster the builds and stuff like that are there but then i realized that it's too early and i depend on a lot of software that might not yet be uh compatible with um the current system of macbooks so i'll still wait a bit and probably i'll i will wait until there is one with 16 gigabytes ram ram memory can an interquarter earn more than 50 keys what do you think of course like i don't think that your ethnicity makes any difference so it yeah as i said like not your age ethnicity your gender or anything like that everything that matters is your skill yeah your ability to to sell your skills to um yeah to to make the company that you're applying to uh yeah to sell your skills to them so they will hire you so yeah always keep learning and start applying to two companies and and you can achieve that that's that's that's very easily achievable i mean nowadays and you can do even more was it fun working at amazon as an intern oh definitely it was fun um yeah i had a like a separate project there uh but they only worked uh in the office for i don't know like two months like february and march and then the pandemic happened and uh we went home for two weeks as everyone and then after one year everyone is still working from home so yeah two months i worked there and then the rest uh i was working from home and yeah i didn't have like a lot of like personal connections there probably if i would go every day at the office it would have been different but yeah i really enjoyed like working there like there are a lot of smart people like working and and also them like the culture at amazon is really it's quite close to a culture of startups and yeah i'm coming more from the startups world and um yeah that's what i liked about amazon because let's say even the simple fact that there is no like uh team of i don't know developers and then team of devops and then team of maintainers testers and so on there is no such thing uh there is just a team working at the future at the product at the project at something and they're responsible for everything like it's a small team of um they call it two pizza teams a pizza a team that can be fed by two pizzas and usually that's like six to ten people monks which are working on a product and this team is responsible for for development for testing for deploying for maintaining for the whole life cycle of uh of um the feature of a project and in this situation uh there is no one to blame so yeah you cannot blame the tester or the devops people that some something is messed up like you're responsible for everything and this way you will you'll make sure that you do everything correctly uh from the first time and yeah like you you feel this um ownership in the in the project that you're building because if something uh happens uh at two o'clock at two in the morning you're uh and you are responsible i mean you you are uh responsible that week for for this kind of stuff you're gonna get up and fix the issue like in two in the morning and yeah that's that's what it is build successful let's uh uh a real quick create a new release let's go to our uh place play console close testing manage track create a new release and upload and i have it here let's upload this one and here yeah i release note you can say added in up purchases let's wait until it uploads yeah alexander is saying uh is inviting everyone to joining the not just development community uh on discord so if you haven't already links are in the description we have a great community there where you can ask questions share your success and yeah we've we the people from from the community i'm tempted to buy the current ones but i'm also hyped with the new ones so i don't know what to do [Music] it depends like if you actually need it at the moment because for me the decision was easy like i don't need it at the moment i have a 2019 macbook or something like that or yeah so i'm able to wait one more or two more years for for the new ones to to come but i think that yeah they will they will will be there the new macbook 2013 macbook i think that was the one that everyone had like for eight years review release and start rollout rollout come on and let's now go to our to our monetize subscriptions and let's hope yeah now we are able to create subscriptions because we enabled billing so the first subscription that we're gonna create um let's call it netflix uh netflix netflix monthly that's that's good enough and uh make be just for you to know just a note that the product id is global for your account so if you write here right now pro you're not going to be able to use pro for other application that you are using so that's why it's it's advisable to prefix your product id with the name of application let's say netflix pro and also let's say monthly yeah this this way and the name this is only for internal mapping like nobody will see it the name this is what the users will see let's say yeah pro member ship i don't know something like that watch movies as you wish uh for the pricing let's select a monthly billing period the default price let's set it to no 100 i don't know why it's it's not in euro or usd's but let's go event that's around 5 euros i guess let's let's hope or no no no that's a lot i think 20 is five euros no yeah 100 it doesn't matter it doesn't matter with you come on yeah this one is 450 okay and free trial if you want to provide free trial if you want yeah to to be able to resubscribe and so on so let's save let's activate the this product don't forget to do that and then we can add a new subscription we have it here let's add an annual subscription and we can say netflix pro and well something like that or annoy i don't know i'm not a native speaker okay okay and here again pro um pro annually select building period here will select yearly and the default price let's say that it's 700 i don't know and for the annual period let's provide a free period free trial of 30 days or of seven days let's save add also free months yeah i mean like you you you can add multiple options multiple uh products uh but i think like you get the idea like how to do that we're gonna keep like using two of them if you want you can add more okay we created them in our play store now as i said that products in revenue cat are one-to-one mapping between a play store or apple store with the products on revenue cad let's go and set them up on our revenue cat so in products let's create a new product and for the identifier we'll take the let's say first one monthly and for restore this is play store okay we added it and let's do the same for the second one store play store yeah you you'll create this mapping for all of them like if you're setting up for app store yeah go ahead and do that as well add them here then let's create our entitlement and uh currently we're gonna have only one entitlement it's gonna be like pro pro access to all features uh in netflix i would say that uh there are like two entitlements i think they offer like the individual membership and family membership and these two are two entitlements but yeah we're gonna focus on on one entitlement and if you have this entitlement you will be able to to watch all the movies uh let's open this entitlement and attach a product let's attach the pro monthly play store and also let's attach the anal and we we attach here the identifiers from this entitlement and if user will have any of this product it doesn't matter and annual monthly play store app store anyone he'll be entitled to this to this pro uh okay that's it with entitlements let's now configure our offerings and that will be the last step here so the offerings let's say that it's the default one standard set of features okay and let's add the packages in this offering and here in the packages um in the packages we need to select like what uh billing period this package is and then we say pro monthly let's add it and for here we will attach a product a product all the products that are monthly from different providers and in our case it's only a play store because we don't have our other providers let's go back to our packages and add a new package called a wave annual pro and well i know sounds weird probably i'm pronouncing it bad and here let's click on the products and add the enal attach and yeah that's it that's it with configuring products offering entitlements on revenue cut the next step the next step let's make sure that we yeah we published we deployed we created a new revenue cad application we prepared the app on the play market we created the play service credentials you can follow this link to for more details i already showed you where you can find this we created the in-app purchases and now we set up product mapping i don't mind offerings packages everything you can find more information about that following this link uh okay installing purchase yeah we did that we installed the package uh yeah we followed this one now the next step is to configure purchases in our application so let's start and let's do that but first we will need the api key from revenue cad so let's go to settings and here there is like this revenue cat api key let's copy don't try to use the same one because most probably i'm going to change it but you can use it and you can actually make some payments i will won't mind to be honest and let's let's create where let's create a new folder called config and inside it let's create the index.ts and here we'll export export const api key this is for revenue cad and the api key is one that we copied from there and also let's export const uh in type telement did they write it correctly name or id and our entitlement id is entitlements pro it depends what you wrote here okay let's save the config and let's go to our up.tsx uh this is the entry point of our application and that's where we need to configure purchases we need to com to configure it as soon as possible as soon as the application uh opens so yeah this is the logical file where we will put it so let's import purchases from native purchases let's import from use effect from react use effect and yeah and also let's import a use state okay our application will we will add a state for to our application that will specify if uh purchases set up like true or false if we finish setting up purchases and set purchases oh my god set probably that's a bad name but we're gonna go with it use state initially it's gonna be false and we want to do it like this if is loading complete if the loading hasn't complete or if we haven't completed the setup we will return all let me meanwhile run the server and start and start building because we know that it's gonna take time android okay so uh we need to set up purchases where we will do it we'll do it in a use effect because it should um it should run only the first time the application opens i mean on the application mounts so for that we're gonna register this use effect with empty dependencies and here we can see uh purchases first of all let's set debug logs enable to true this will enable the debug logs so if we'll have any issues it's going to debug us and it's going to be easier to to understand why what's happening and then let's say purchases dot config or setup right setup and here we need to provide the api key and we are going to import the api key from our config that we defined just now and whenever we finish setting up we can set purchases up to true we can say that yeah we finished setting up purchases and that's it that's everything that we need to do in order to set it up here we can we can split it like this for readability reasons and we're gonna have to wait a bit until it builds okay let's have a look at the chat is wordpress a good uh option for blogging and making websites um yeah i think still like 40 percent of the internet is powered by wordpress and that's uh crazy when you think about this and for some specific reasons including blogging yeah wordpress is a good option and actually i'm working on i'm working on a tutorial where we will use wordpress to manage content of one blog the blog will be with javascript and gatsby if you heard about that and we're to use wordpress to as a cms for for the content so if you are interested stay stay tuned it's going to be up shortly i recently discovered your channel and i can say it's just awesome love from india thank you very much i'd also free monsieur a red vent as my lifetime just set 100 years yeah you can do that uh you didn't put free trial in monthly but only in yearly how does that work yeah if you buy the monthly subscription you're not gonna have a free trial so you're gonna be charged at that moment however if you take the yearly subscription you're gonna have a seven days trial or the period that you set up there and once the period is uh finished if you haven't canceled your subscription you're gonna be charged but if you cancel the subscription you're not gonna be charged so that's how free trial works and that's why yeah a lot of a lot of applications are doing like this the free trial only for the yearly option because we want you to buy the yearly option so build successfully let's let's have a look if we didn't mess anything up how about purchasing one item what do you mean can you can you elaborate on that one hello everyone hello vadim from turkmenistan hello will this video be saved yes so far all the videos on my channel all the live streams are saved on my channel so you can follow along afterwards if you missed the beginning yeah i see that yeah new people are joining the live stream so if you're new here and you're asking what the hell we are doing here today we're gonna we are implementing uh in-app subscription uh using revenue cut for our netflix clone that we have built during previous episodes so yeah we we had to go for two steps like to build the application to eject it from expo to build it and then to deploy it on the market and that took us a lot of time uh but yeah that steps are done and now we are starting uh integrating the in-app subscriptions in our netflix and yeah now now is the fun part so stay tuned uh you didn't miss a lot the video will be uploaded to my channel if you want to to check it from the beginning but yeah that's um that's shortly what we are doing here so right now we just started setting up configuring purchases and waiting for it to build uh who can write in the comments down below how many times did i say waiting to build in this live stream [Music] hello kana wordpress shopify squarespace the whole market is changing day by day yeah and we need to adopt to stay up with new technologies drama previous previewed all right let's let's see let's see okay maybe we can uh discuss about the next step okay the next step yeah the next step would be to get the subscription status and that's how you protect your application like your pro features here your pro content you protect uh in your application just by uh yeah just by checking if a user that is doing this request uh has a specific entitlement uh has subscribed to a specific entitlement and if he has that entitlement you grant his user the pro access and you allow him to i don't know in this case we will allow him to watch a movie uh otherwise we will say we will redirect him to a paywall where he will be able to to yeah to buy a subscription so the code is very simple we just get the the information about the purchaser using get purchaser info and then we uh check if he has been if his active entitlement is the one that we are interested in and if that's the case we grant them user pro access so the code is it's pretty straightforward it's pretty simple uh we don't have to to work with play store with app store and so on like everything is taken care by the by the purchases library so let's take this one and in our case i want to to allow all the users to to see the list of movies like to see the home page and only when you press on a movie we will check if you are subscribed or not we will let you see the movie or not so to do that i'm going to open components movie item and here we have index tsx and this is the movie that we render on home screen and on movie press we just navigate to movie detail screen but we will check check if user is pro if redirect to details screen otherwise else redirect to paywall so this this will be the logic let's um put in the the code and first of all we will need to import purchases from then we will have to make this function async a weight is only allowed within a sync function or here yeah let's save oh not like this missing a semicolon where should be fine and here instead of my entertainment identifier we can put pro because we know that that's uh the identifier but we have uh however we if you remember we have set it up here in entitlement ids so i would rather import it because this way we can make it yeah if you need to to change the entitlement id in future you're gonna have to change it only one place from source config and yeah instead of active dot pro we're gonna say active entitlement id so if is pro then we will redirect him to detail screen here else we're gonna redirect him to paywall but uh as we don't have a payable yet let's just console warn please buy subscription okay so now let's i think it uh it updated let's try to press on a movie we are pressing here it checks if we have this entitlement we don't have it so it says please buy subscription that means that it works okay that's uh that's how you check if user is entitled to some features and you do that whenever you want to yeah to protect some features some screens from being accessed by non-pro users okay let's save and the next step would be to build the paywall uh let's let's open up our here yeah the next step is to display available products and what's going to happen in our paywall for that i'm gonna create a new screens in our screens folder let's create the folder pay wall let's create a file index.esx and here wrap native functional and the name will be pay well yep like this okay yeah our viewing text is from where from components filmed okay uh now let's register this paywall in our navigation scr in our navigation let's open navigation and let's open our index dsx and here uh we will first import our where is it yeah let's import paywall the screen that we just created from screens dot paywall and we will render it uh between the root and the paywall in the not found url so let's render it here pay wall wall and for title we are good as the name uh we have an red arrow here because we didn't specify that our root navigator can have a paywall type so let's open the types from the root folder let's types here and the first one here we will say that we can have a paywall there now the red arrow is gone um we register the paywall now we can we are able to redirect to the paywall so back in our movie item where we were checking if user is entitled let's copy the navigation here and instead of just console warn let's redirect to pay wall and we don't need to send any uh options just navigate there save let's try to refreshing let's try now to press on this and yeah we are redirected to the paywall but we will you can see them the text there but we don't have any how is it called header and let's open the navigation index and here we have header shown let's try to override this in our options as header shown true just to have a back button because right now we don't have any back buttons save okay loading loading loading come on let's press no come on from home screen and yeah we see that the paywall now has a uh header and has a back button perfect now having this paywall we need to render our in the paywall we need to render our options and we will get these options from purchases using the get offerings so let's uh let's try to to fetch the offerings and see what what we receive back in our i'll close everything in our paywall index we will need uh we will need a use effect to fetch offerings when the component mounts we will need a use state to store all the offerings and so far probably that's it yeah const packages set packages okay just is equal to use state and we're gonna have an empty array in the beginning and let's define the use effect use effect the input will be yeah empty string yeah like this and here in this use effect let's define the fetch of rings function which will be async let's call it right away fetch offerings and here we can yeah fetch the offerings but we need to import the purchases can you do that come on can you import automatically are you that yeah like that yeah let's uh in here let's console log offerings dot current and see what values we receive there let's go down the paywall and also let's open our debug debugger while you're in the new here and let's check the console and yeah let's wait until it restarts and i saw there are some data no not yet i need to yeah let's clear everything and let's open our paywall we don't see anything um maybe we are not going in the if statement so let's try this one here and if there is any errors let's console error error save no no no no hmm why is it null that's gonna be interesting to debug i'm not gonna lie uh get offerings so do we have offerings here we have default two packages [Music] monthly annual one product uh did we set up the test accounts i think we did close testing manage track testers and here yeah testers are selected i'm there let's try two testers can join your test on the web why don't have a url here hmm i tested it before the live stream and it was kind of working let's let's let's try to what first step just to run it again i'll just make sure that in the settings here my google package name is correct build.gradle in our android up and build.gradle let's find the application id this one okay service account okay the api key config a bit of water please thank you way becky yes it's correct fetch offerings get offerings i'm gonna try something uh i think adb log cut to see log cut this will show me all the logs oh come on chill which one is it is it this one hannah is asking what do you prefer front end or back end to be honest i prefer back end because it has to do more with like logic and optimization and so on so i'm i'm a bit better at that than a design and i don't have a lot of patience to to work with with design stuff but yeah i i still do so right now i'm doing uh both of them okay here we see something uh two two two two let's see sdk initial up id identifier of user okay delete i'm dating get subscribers i'm just trying to see if there was any errors offerings 200 occurring subs in up products thank you retrieved pro and all okay we we have it i think it was just we needed to to update it let's check now no it's still new that's very weird because i see netflix pro l this is something related to the network what's happening that's the most interesting part about enough subscription because the coding part is pretty easy and straightforward but if you get into some of these errors like it's pretty tough to understand why why it's not working why don't you receive offerings the offerings are null here i am subscribed to this one yes and i have it as licensed tester yes did we finish everything here okay i think we did sex managed track let's let's countries here available yeah i don't know why and i have here a way to join i'm going to try an internal testing because that's the only difference that i have from a previous from the previous build because where i had an internal testing but i don't think this is the issue but let's just try it and yep let's oh not current let's oh i'm still console logging the current offerings current null all as well revenue cat yeah i already had that error as i see [Music] if you have configured your account to uh get all purchases you need to wait 24 hours before it's active that might be an issue i remember that we had this issue at my startup and we had to wait 24 hours until they were available mm-hmm okay i think that this is the issue i think that you need to to wait until the application is reviewed by google and if we go here to close testing but but they have a solution so um in closed testing release if we see managed track where is it in review here we see that our application is still in review so that's why we do not receive the offerings however i already have i already have a testing application for for vs so i'll just need to change some things in order to to work with that one in your case you just need to to wait 24 hours until your application goes from in review to the reviewed state and then you will see all the offerings but yeah i don't have uh time to wait right now so i'm gonna try to switch to working with an application that is already reviewed and that is the magic weather react native so um yeah right now i will need that package that changes the package name because this one has a different package name but where can i see the package name okay i react native rename this is a package that will help us change where we have a package name of our application so that we can fetch the data from from another application that i already have reviewed on my account you don't need this because did they installed it globally i don't remember yeah let's let's change the bundle identifier and where is it here np extract native rename oh no but i don't i don't have it yet netflix and the bundle identifier will be somewhere here oh here i saw it nope nope not this one magic weather and the bundle identifier is this one just to make sure that yeah it it will talk with this one and directory should be creating using rank native you need no cd cannot read property replace or undefined sudo let's try oh no [Music] magic weather sudo now i think i need to install it here so yarn add react native [Music] rename have you tried view native nope i have not tried that one virgil is saying hello from romania hello glad to see a life of yours i am also from from kinda romania i mean i'm from moldova but okay it is installed let's now try them why not models or lib index come on [Music] really romanesque so what's happening here clean restart let's delete the node modules and yarn lock oh are you working and the yarn install and what here probably i will just grab the ap key of the magic weather react native settings yep this one and i can grab it from here i don't see weber up in store uh yeah because i haven't uh deployed it it's it's only in closed testing this is the the sample app that i have built for revenue cad so if you if you're interested you can go to the github purchases react native everything is slow i don't know what's happening i think i need a better pc for streaming my little macbook is not keeping up with everything that i need during a stream purchases and here there is examples magic weaver and here is the source code of of of application so you can check it out here is yeah a sample up with all the features that we're gonna implement today and let's check what's happening here still waiting still waiting oh mary saying have a dream i want to say thank you for these videos thank you very much for watching them it's really my pleasure to to make them so did i yeah i did grab the i just forgot to to paste it right in our apac key here save [Music] okay let's hope that now i will be able to rename right need to rename netflix come on something went wrong come on what can go wrong rock native ring name current app name up config.name where does it expect the app config load up config that's because that's an extra application i'm gonna do it a bit differently uh android i'm gonna how to replace uh finding folder but i need to replace oh here search and dev dot not just dot netflix clone [Music] right net leaks clone and i will replace it with with this one let's hope that it will work so how do you replace it how do you replace it replace okay okay there is a shortcut command shift one command shift one freehand but replace all can i do replace all here right replace all oh my god 302 oh my replaced okay let's what try to run the application again yarn start did you explain how to set uh set up aws and react native project yeah all of my projects uh uh are using edibles amplify with rock native so you can watch any of them and you will see what did you open here because you have a different okay and the yarn yarn android okay we'll have to wait a couple of minutes until it builds again will it connect with that application now if i just change the package name and way back key let's hope guys are still here what uh whatever questions do you have let's uh let's talk about something we'll have to wait five minutes hello why did you stop your startup series which startup series yeah i had some videos about the startup and so on but that's that was the very very beginning of move of youtube when i started when i just started and yeah i don't know it didn't resonate and i started doing these live builds and i saw that a lot of people are enjoying them so that's why i'm continuing with them are you interesting interested in more information about the startup and my wins and fails there as well i want to build my own startup in future what things should i focus on kindly tell me are you more of a technical guy or more of a business guy yeah it's it comes down to yeah first of all uh finding finding a good uh business partner so if you are technical guy and you you can code applications and iterate fast then team up with someone with a business experience that will handle the marketing and so on and uh and yeah uh brainstorm come up with an idea something that you're patient about passionate about and something that you see that you think that will have success on the market and there is an actual need not only uh the application is not only something that you would like to build but it's something that people need but the market wants and there is an actual problem that you can solve with with your software and yeah go for it uh iterate fast don't uh don't spend like one year building a perfect application and then deploy it and find out that nobody wants it uh but rather yeah spend uh spend some time creating this mvp like minimum viable product that covers the core concept and solves the main issue the main problem of your customer and deliver to customers as soon as possible and then based on the feedback that you you receive from your customers you you grow and you improve application because you if you are not the part of a main niche of a main target then it's hard for you to understand what actual problems the user have so it's going to be easier if they actually tell you of course you need also expertise in that field and if you don't know anything about a field it's going to be hard for you to compete there because you need to know uh your target audience you need to know what problems they have we need to know how their day looks like and how can you fit your product in their day how can you make their life easier have it that's the basic idea let's try again let's login okay and let's i need to open the debugger i need debugger uh which is better reactor flutter both are good if you're using them to solve actual problems if you know react go effective enough flatter go with flatter is freelance good way to start business or how is a good way to start a business um let me wait a second okay come on please please work movies are loading yes it's there and let's try to press on one we should be redirected to the paywall okay okay we have something we have something so i was a bit afraid but it's going to be a fail but yeah guys uh in your case just wait uh 24 hours and we are seeing that nowadays due to kovid the review time is a bit longer so you just have to wait a couple of days until they review your application and after that you'll be able to receive and use the in-app purchases so here in the current we have an annual we have but no we have um what yeah annual monthly and so on or available packages and these are the packages that we are interested in and these are the packages that we want to display on the screen um yeah let's set the mistake because yeah we want to current dot available packages to set them in our state and then we'll render them let's go here and set back packages uh offerings of rings dot current dot available packages right that's and purchases packages let's define them vati purchases package and it's going to be an array of that the second is it should be like this i think right not e package oh come on yes like this and now yeah we need to to loop through these available packages and display them on paywall um let's let's do that with a flat list flat list uh items over flat list items or data how is it data yeah is our packages and their render item will be item and let's just render now a text with item dot product dot wait available okay product and the product has a title let's close the flat list save and let's open again our paywall so we see the pro uh magic weather red native and pro yearly here as well we we have to to separate monthly and yearly subscription and yeah because we are just rendering a text that's why we see only the text but um i will go ahead and just take the the designs from the from the magic weather application what they have built for uh for revenue cat and i'm gonna go into source in the components we have here a package item let me grab it yeah let's let's define them a component that will render a package item here and components new folder package package item and here we'll have index.x and also styles styles dot yes okay this is the index so let me grab it and for the one selection i'm not gonna do anything console log click package package clicked okay never mind uh what's happening here yeah the entitlement is coming from source dot config from here yeah i probably misspelled it but okay uh and here the props are of a type we need to define the type package i props we don't need this value only the uh in interface package item props it's going to have a purchase package which will be for chase's package okay okay what else pressable yeah react native what's happening here why you don't like it refers to value but is being used as a type what are you good oh and i put it in styles okay i'm stupid let's put it in index not in this index in this index now styles styles it's here let's go the styles yeah it just has the styles for the container that styles the title and something else there and uh yeah our pack uh package item i don't know why styles yeah like this and our package item is uh is just a pressable a button which has a view that displays a title and a description and on the right we display the price string okay so for um back to our paywall let's import that component import package item from component package item and instead of text let's render the package item package item item equal and let's save none of this file okay package item screens then in components package item what's happening there cannot find did i do something wrong here in oh index not intex okay and where is very name tool rename index index red yeah let's save now update refresh come on you can do it it works on ios oh uh okay let's move to paywall henry brother product of undefined okay because it's not item but it's a purchase package save okay wall and here we have them yes they will look good uh the only thing is that yeah i can background color for the container border light gray light gray and what happened to the price string everything is title but title is color yeah let's not worry about the styles right now the important thing is that our packages that we have set up in play store and in revenue cat are displayed correctly we see here the title of the package we see here the description of the package and on the right we see the price of a package um yeah that's that's how we display uh the packages in react native uh if you are integrating this for your own application uh apple ios has some requirements you need to add some text on this page usually here on the bottom uh explaining everything uh about the subscription like all the rules so for that you need to if you want to publish on ios check that out and add the terms and conditions here on the bottom all right and let's move on because we still have some things to do yeah displaying available products uh can have some issues and we ran in one of them today and it was because our application has not been reviewed yet so we in that case we just need to wait and uh for our app store the most common reason is paid application agreement you need to sign that on android this usually occurs when the app is not published on a closed track and a valid test user added yeah make sure that application is on close track it's reviewed and also a valid test user is added and you're testing the application with that test user you can find more info about troubleshooting this issue on this article okay moving on is making a purchase so whenever we press on this at the moment it just consoles something uh out but we want to make sure that we can we are actually buying that uh that that package so the code is pretty simple is purchases.purchase package and we send the package that we want to to buy and that's let's eat about that's everything about it it's pretty straightforward let's do it here purchase made we we take the purchase package from here we want that we want to buy and after buying it we want to check if the actual transaction has has been registered and yeah if the user didn't cancel for example here the user canceled and so on let's console error for now and entitlement yeah here i'm gonna active in type meant id this one did it import yeah it imported correctly and in this case if everything went successfully we either redirect the user to um talk like i don't know congratulation page where you'll say oh you're a pro member in our case we're just gonna navigation dot go back and yeah he'll go back to the home screen let's save import export may only appear at the top try okay oh here catch yep like this save and now let's try to press on the first one the monthly and wait for it yeah our the native dialogue for making the purchase will uh will open up and that's how it looks on android on ios it will pop up the same the same kind of but that will be for yeah for app store uh yeah here is the more details about the subscription it says like uh when it starts and here we see that we're gonna pay with a test card and this will always approve so because we set our tester as um uh yeah as approved testers i don't remember exactly the name of that that place but i showed you where to to put them so let's subscribe processing processing successful require no thanks okay and we are subscribed going back i'm not doing anything we should be redirected back to the home screen you saw it was automatic and now whenever i will press on a movie i shouldn't see the paywall because i'm already subscribed so let's press on a movie and we are redirected to the movie page that means that we have an active subscription it's tracked by revenue card and whenever we press we will check if we have this entitlement id and if we have we will see the movie that's that's how simple it is to buy a subscription with revenue cat and if we go here to the overview and if i select view sandbox data we see that we have an act one active subscription a minute ago and it will expire in five minutes uh that's because usually this is a one month subscription but in order for you to test the test accounts will uh the period will be five minutes so after five minutes the user will uh reactivate his subscription he'll pay once again but that's only yeah for in sandbox okay okay okay what else yep that's um that's how you buy that's how you check uh the next step is what okay identifying users in revenue cap so uh revenue cat will give each user a random id so if we see here it's called uh revenue cat anonymous id and then followed by a random id and yeah this is okay if you don't need um yeah any details or you don't need this mapping between your users from your application and users from revenue cad that revenue cat is tracking then that's fine however um most of application have their own authorization system and uh we also yeah we also have this authentication system in our netflix because users can sign up and uh yeah we have an id of a user so if we want to set a custom id in revenue cad we can either call the purchases.identify whenever for example we log in the user or we can also send the id when when we configure revenue cad so here when we set up if we already know the idea of a user but we know we we can get the idea of a user here then we can send it i think is set up ap first is api key second one is up user id so this one a the second one will be up user id but first we need to get this up user id so let's think how to get the app user id i'm gonna create the function because we need um yeah we need a synchronous functions here uh calls so i'm going to declare a new function setup revenue cat i think and let's call it setup revenue and now uh i can also i can never leave it with van or i can uh do a weight here because i can use a weight and just set it at the end like this without then i think that looks uh cleaner and before that we need uh to get user id so we can get the user id with user info is equal uh we will get it from the amplify authentication so let's import the authentication here and await authentication dot get or current yeah current authenticated user and the user authentication will if user info if there is a authenticated authenticated user we will set up no if there is no authenticate come on we will stop execution if there is no authenticated user that means but there was some issue and there is no authenticated user however here yeah the user id will be user info dot is it attributes [Music] let me check the type cognito user no idea what's happening here easiest way is just to console.log it i think it's from attributes console log user info um stop it i don't okay let's check the bugs the blogs refreshing is my debugger enabled yep okay yes it's let's open it attributes and then sub this is the idea of a user user info dot address dot sub and here in the purchases we can send this user id as a second parameter in order to identify the user with the same id that we have in our database uh save come on run so are you running or not yep loading and let's try to refresh view sandbox data yeah nothing happened uh but let's try to open yeah our uh our transaction our subscription um had expired three minutes ago so we can probably go back and buy a new subscription evaporation is already in progress yeah i pressed two times you already are subscribed to this item okay that's that's interesting i'm not sure why it doesn't have auto renewal i'm gonna try to subscribe to the early and let's subscribe to this yearly okay and now let's update our dashboard and we should see the new app id without anonymous should be the id that we have in our cognito cognito user pool yeah here we see that um we don't have this anonymous user already i mean we have both of them but they're both uh point to the same user so here is the id that we can track in our database and that's the idea that we that we saw here yeah i will not be able to see it right now because i'm not logging it but yeah i think you get the idea this is how you identify users with the same id that you have in database and whenever you log out you can call purchases.reset and that will will make sure that it will click clear all the cache and if another user logs in on the same device that is not subscribed then he'll not be able to watch the pro content so let's do that in where i think we we implemented the the logout somewhere in our application i think it was in the top two and here we have on logout and let's do them first of all let's reset the purchases to clear all the cash come on come on come on come on quick fix import and we need to make it as an sync and after resetting the purchases we will do the actual sign out so let's save if i go to another tab where i put this tab to screen i can press on logout and yeah we it deleted the cache for purchases and then it signed out so if i'll create a new account i will not be able to to check the the movies because uh yeah there is nothing in cash that's that's the desired outcome with the desired um way so uh yeah i think that that was it all right so congratulations now you have uh implemented a fully future subscription uh system without like spending months of writing server code without without try managing all the edge cases because here the what revenue cad provides us uh is an infrastructure built for us which handles all the edge cases that uh usually you you probably will miss i don't know a lot of times a subscription is cancelled um a card is rejected um and so on like also managing the free trials and so on like it's it's it's a lot of things that uh that revenue cat simplifies and makes it much easier to implement in direct native yeah we had to to set up some things initially but then like the coding part the coding part i think was done in uh i don't know like 20 or 30 minutes uh and yeah this is this is impressive like with the right tools how fast you can you can achieve and you can implement like fully features production-ready applications uh okay if you have any issues um i would suggest that the next steps would be to first of all check out the sample application on the um github on the react native purchases github you can access it following this link also you can check out the revenue cad documentation we have pretty uh pretty good documentation on how all the steps you need to take to integrate and set up it in your application also if you have any issues check out the support the help center yeah you can find a lot of common issues because most of the issues are are really common so if you follow some steps like with this configuration with these test accounts and so on then yeah you can find you can find solutions there and if you still have any issues uh feel free to join the discord channel and ask me there and i'll try to help or someone else that had that problem will will help so that uh that was it for today guys that is it with subscription with revenue cat with netflix we have finished this build [Music] yeah it's been a hell of a ride today for a lot of builds for a lot of issues but we we managed to to accomplish everything that we that we have planned so if you have any questions let me know now or else we can continue our discussion on discord once again thank you revenuecat for sponsoring this video yeah we made it possible and i really appreciate the brands that i use day to day for example at my startup or to to build uh yeah to to build applications every day uh i really appreciate when they approach me and they say that they love the builds that i'm doing on youtube and they just want to to sponsor it so i think that this is a really win-win situation for everyone because uh yeah i've been using revenue cat even before they approached me i'm using it yeah at my startup to implement subscription and i think that that's a great way to to make sure that these videos are coming can we use revenue cat without ejecting from expo uh the problem is not with revenue cad the problem is with in-up purchases so in-app purchases are not available in expo managed workflow so you would need to to eject all right guys uh it's been a long stream so i haven't taken any breaks and i think i need one and yeah thank you very much for staying with me till the end thank you very much for watching the video afterwards if you're doing that if you haven't subscribed to the channel and my analytics says that almost 90 percent of you watching are not subscribed to my channel then please take a minute subscribe to the channel because more videos of this type will come in future and uh yeah that will help [Music] get this channel from the ground so uh yeah the next the next week i'm waiting you at the same time as usual at 3 p.m gmt on friday we are gonna start a new project and that's gonna be something new something that uh a lot of you have asked uh that's gonna be the uh node.js express mongodb graphql for the backend and on front end we're gonna use of course react native so um stay tuned take care guys stay hydrated and write clean code i'm out bye bye

Channel: notJust․dev

Views: 27,324

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, expo sdk, in app subscription, revenuecat react native, in app purchases react native

Id: vZue2RLLN0M

Length: 209min 25sec (12565 seconds)

Published: Sat Mar 27 2021