The ULTIMATE Microsoft Azure AI Crash Course for Beginners (Top 4 AI Azure Services with Next.js)

yo what is going on guys welcome back to another video now Azure Microsoft's Azure you've probably heard of it but do you know how to use it and where it can come in handy so today I'm going to go ahead and break down a couple of the popular Azure services in particular the ones that leverage AI to make our life a little bit easier and I'm going to give you a little demo of each one in action so we're going to be covering four very popular Microsoft Azure Services the first one of course is the open AI service this is one of the most popular services that Azure has to offer and it allows us to deploy some very popular AI models such as GPT 4 GPT 3.5 turbo and if you want to see even one of those builds you'll see it pop up on the screen right now and it even allows us to go ahead and deploy The Whisper model now the whisper model actually allows us to go ahead and transcribe my voice into text using AI so some pretty cool stuff that you can do with this second up we have Microsoft dour's AI translator now this one is really awesome if you're looking to build a kind of translation app I actually went ahead and built one right now it was going to pop up on your screen and I'm even going to show you how to get up and running in today's video as well now third on the list every single great app needs a awesome database this is where Microsoft as your's Cosmos database comes in clutch it is a unified AI database and allows us to go ahead and use our favorite databases no SQL SQL anything in between with this setup so this gives us the scalability of a the security of aure as well as the flexibility of using our Tech that we want to use in the way that we want to use it and fourth and finally we're going to be covering Microsoft AZ your's Cloud functions this is going to allow you to go ahead and deploy your own cloud functions into the cloud sphere whatever we want to call it and run a serverless setup so this is going to be awesome if you want to go ahead and plug into other AI services or you want to build something completely custom of your own this is going to have you covered so smash that Thumbs Up Button subscribe and let's jump straight into it so a little prerequisite before we jump into our first Azure service what I want you do is click that first link in the description and you're going to get 12 months worth of free services from azour as well as 200 US worth of credit so head over to that link right now and you should land over on a page fill out the details and after that click the sign up button and you'll land on a page similar to this now so you can see for yourself popular services are free for 12 months which is awesome we can go ahead and use that and as you can see guys we've got the SQL database blob storage is actually an awesome storage mechanism I'm not going to cover that in today's video but if you're interested in Azure blob storage I have a video popping up on your screen right now that I go ahead and run through the entire thing in detail so you can check out that entire build right now and of course today as I mentioned we're going to cover the Azure Cosmos DB Azure functions and a few others so remember as I mentioned all of the things that we spoke about in the intro are going to be covered in this free trial so it's worth going ahead and signing up and you get $200 worth of vual credit which is always nice as a bonus so we're going to jump jump into our first Microsoft Azure service The Whisper model so let's head over to the Azure open AI service page and here you can go ahead give it a read and get started yourself but you are going to need to apply for Access for this first service all the rest of them will actually be granted immediately however for this one because it involves a little bit more intricate details on Microsoft's behalf you just need to go ahead and click on apply for Access fill out the form and they tend to get back to you fairly quick and I always get the question of if it asks for a company what do you put in simply just pop your name in and you should get approval fairly fast so don't worry but once you've done that we're going to go ahead and jump into how to use it so the first thing I want to show you guys is actually the whisper model so here's a little breakdown on the docs on the website so here we have the whisper model itself now this is a speech to text model so you can go ahead and transcribe audio files but what I would actually say is you can actually do a couple of cool things in my Siri 2.0 build I actually went ahead and actually built out a full you know AI assistance so that actually takes the voice captures it in the audio file passes it over to the open AI instance and in fact it will be the whisper model that we've deployed on the Z open AI instance and then it will actually go ahead and transcribe it and return it back in a rest response super easy to get set up and I'm going to show you how to do that so the first thing that I need you to do is sign up to your Microsoft account so you can do that over on the first page that we spoke about click on start for free this is a very quick sign up process you know you fill in a couple of details so once you've signed up what you need to do is head over to portal. aure and you'll reach this page now I've already got a couple of things that I've actually already you know been working on but what I would recommend is the first thing that you'll have to do is set up something called a subscription so you can go ahead and type it in here subscriptions and go ahead and pop it up now you would have either been prompted this when you set up or you would have to do it now and the first thing that you would have to do is click on ADD and create a new subscription now think of subscriptions like a container that allow the sort of access to different resources inside of azure and the good thing about this is we can create several subscriptions and then we can control our level of spend based on which service we want to allocate to each subscription so you could have three you know services using one subscription and then say if we want to limit the spend to say a more expensive service then we can simply create a new subscription and just put that service underneath it so in this case if I was to go ahead and pop in you know the following then you can go ahead and click on review and create and move forward and so forth but I've already done the step and again I've already created a billing account as well so would be prompted during your setup to go ahead and do that to get this up and running but it's very straightforward to go ahead and do that but the next step that you would want to do is go ahead and I've got it here but you can simply type it in is go ahead and type in open AI okay and you'll get as your open AI as your first option so what you want to do now is you can actually see I've got lots of examples where I've actually built it out myself and if you want to go ahead and build it out yourself where I've actually shown the full use case the code everything involved inside inside of this you can check out my Siri 2.0 clone and my Google translate clone they're going to be popping up on the screen right about now but the Siri 2.0 clone allows me to go ahead and transcribe the audio from the input and then get an AI assistant response so we've actually combined two different models there the Google translate clone actually takes the input uses the whisper model to transcribe it into text and then passes over to a separate Azure service known as AI translator which we're going to cover in a bit so over to our deployment now the first thing that I want to do is click on Create and you want to go ahead and select the subscription as I mentioned before and a resource Group now I've got lots of different resource groups think of this like your project so in this case if I was to create a project right now we could just say demo project and then we can go ahead and click okay and then region now it's worth mentioning that yes whilst you can select any of these regions only two I believe have access to the whisper model one of which being North Central us so if you click on any other of these deployments you won't actually get the whisper model which will allow you to transcribe the speech into text right so in this case we're going to click on North Central and I'm just going to type in demo project and then we're going to click on a pricing T now standard s0 is completely fine but if it's your first project you can actually go ahead and get a free pricing tier as well so go ahead and click on review and submit and then you want to go ahead and simply click on Create and this will go ahead and create your first Azure open AI instance and this is essentially what you going to do to get everything up and running so I'm going to go ahead and click on create right now and then it will initialize the deployment so then you'll reach this page where we have our deployments in progress now I've already done this step so I'm not going to spend too long here to go ahead and do that again I'm going to Simply jump over to another project so I actually had this sir assistant demo here so I'm going to Simply click that pop that open and this is essentially what you're going to see right now there's a couple of important things I want you to take notice of here keys and endpoint so this is really the magic to go ahead and connect in to that you can see our old deployment just succeeded so you can go ahead and do it for yourself but here so you can see the end point is very important you can actually need to store this in your environment files in your code and the region as well and then you've got your keys now in this case I'm not going to show my keys but you can simply copy your key and use it inside of your code and so forth that is how you go ahead and access the API however the more important part is all we've done so far is create a open AI instance so we need actually create a deployment of the whisper model so we go to model deployments we click on manage deployments and inside of here this is where we can deploy things like GPT 4 GPT 3.5 The Whisper model and so forth and that's how we go ahead and interact with the open AI Services through azures architecture so what we want to do is I've already got the deployment actually up and running but you want to go ahead and click on create new deployment click on select a model click the little drop down and here you can see a list of of different models now it's worth mentioning again that if you don't see whisper here it's probably because you didn't select North Central and it's either North Central and there's one more location however in that case you would not be seeing these if you deployed for example to East us right you can only see like the popular gp3 3.5 turbo and four and so forth so if you want any of these other models you actually have to go ahead and deploy to the central one so in this case we click on whisper and I've already deployed this so I've got you know I maxed my quot for now that's fine but in this case you could click your model version to auto update and then give it a name now once I click create what will happen is it will simply just create this so I've called mine Siri assistant and then you've got the model name here and you even got the 3.5 turbo Edition where I popped in as well and we use this in a separate build so if you were to go ahead and click in that you should see the deployment is succeeded everything is good to go right and then what I would recommend as well is that if you ever wonder why it could be slow after you start using it it's because they actually rate limit it up to three requests per minute and you have to go ahead and request a increase in that quot if you want to get a higher capacity your throughput that's only for the whisper model that's not for you know the GPT 3.5 or gp4 but that's how you go ahead and do it so let's get this up and running inside of our code and then once this is open we simply need to go ahead and get our environment variable setup so if I go ahead and create an environment variable file so let's go ahead and pop in a file called EMV dolal and we're simply going to pop in our keys here so heading back over remember those keys that we spoke about earlier let's head head back over to our portal and remember the keys and endpoint well I'm going to need you to actually save the endpoint the location and the key one of these would be absolutely fine so the first thing we're going to do is pop in three things the Azure endpoint the Azure deployment name and the Azure deployment completions name in this case for the deployment name I'm actually referring to the whisper model so we can actually rename this to be maybe be like the whisper model right and then then this one we can go ahead and I'm calling it completions because I'm using 3.5 turbo now in this instance we've got the Azure endpoint so this was actually found here you can go ahead and use this in this case we don't need it it's okay for now but for the key I simply copy it and then I will pop the key above it so we can actually go ahead and say something like Azure API key and I can simply pop in the key here so at this point I would copy this paste it in here and then save and close this file so I'm going to do that right now so I just saved that file closed it and now we're going to head into our code to go ahead and make the request now in the essence of time what I'm going to do is I'm going to show you guys each of the projects that we actually demonstrated this on so you can go ahead and get a fast forward to understand how it all works in one piece so here I have the YouTube AI build that I went ahead and built on YouTube not too long ago this was for the Siri 2.0 build which will be popping up on your screen right now the code is available in that description so in the first link of that video description you can go ahead and get all of the code there you just have to Simply fill out the Microsoft form and you'll get access to this now now in this point what we can see is over here we have our page and inside of our page what we've done is we've done the exact same setup for the environment files but here we have a form and all we have in this form is a file to go ahead and select some audio now I'm not going to go too far into the detail but the main magic happens when we submit our form so inside of nextg we have something called a server action and this is where the magic happen so first things first I'm going to check if any of my credentials are incomplete and if they are simply going to throw an error otherwise I simply get the file and this is going to be the audio file that I submitted I check if the file is zero or not and then I'm simply going to go ahead and create something called an array buffer right so I'm going to do file. array buffer and I'm going to convert it to a uint 8 array okay so I simply take the file so if you was to Simply say on the front end make the user select a file upload that via the server action you know in next 1 we have server actions you can go ahead and check out my video popping up right now all about that where I teach you how to do that and then come back to this video and over here we simply have the audio itself and this is where the magic of azure whisper AI service comes in so we simply go ahead and create a instance of our client so we have to go ahead and ensure that we install the Azure open AI Library so you want to Simply go ahead and pop open your terminal and simply run mpmi Azure slopen aai simply do that which I've already done and then you want to create a client and with this client it takes the endpoint and a a key credential this is essentially how we connect to our open AI instance now the open AI instance when I talk about it is actually this entire instance right so all of the model deployments underneath it we can access it once we have access to this client now the next step is we simply go ahead and tap into some of the functions so if you see here I've got lots of different functions that I can do chat completions for example GPT 4 GPT 3.5 and so forth in this case we you want to use the whisper model which is get audio transcription we pass the deployment name in which is this name so remember the deployment name is not any of these it's the actual name that we deployed it under so I'm going to go ahead and show you that one more time it's it's really important that you do not mess this up it took me way too long to understand this I kept writing whisper but it's actually the deployment name so in this case it would be serious assistant right for the whisper model so you don't want to mess that up it took me way too long to get that right so in this case as your deployment name so heading back over to our keys make sure you go ahead and set these up correctly and obviously you would put your super secret key here the main thing is the deployment name matches the one that we saw previously here right so make sure that works and then go over here and then you simply pop it in here and then we've got the actual result and you all you to get to get the transcription all you do is result. text and simply is that easy to go ahead and get the text transcription so from doing that guys it's super fast to go ahead and process the individual audio files now I've shown you this in Siri and Google translate builds actually have all of this built out so you again it'll pop up on your screen right now if you want to go ahead and build those out and actually get it functioning but in a nutshell that is as simple as it gets now why might you want to use this in the first place at all right well firstly it's really fast right when I actually show this in the demo and you'll see right now on the screen I'll give a little snippet of the demo when I actually talked and see how fast the response was it works blazingly fast and this this is thanks to Microsoft aures architecture and the combination that they have with the guys over open AI with a whisper model deployments because of the two Hand inand you've got the scalability of Microsoft services such as Azure and you've got the power of the whisper model from open AI it's a really great Harmony of the two coming together everything I just showed you is great for files that go up to 25 mbes but if you need to go a bit bigger than that then you might want to go ahead and check out the whisper model via Azure AI speech now the difference between the two is we have Azure open AI service and we have Azure AI speech and what you can do with this first one which is not what we have demonstrated we actually showed off the Azure open AI service but the first one here the Azure AI speech can do a a few cool things well firstly it can transcribe files larger than 25 so it actually chunks them up and then processes them it can transcribe large batch of audio files so it actually you know helps us out a ton especially let's say you had a podcast audio which can sometimes be hundreds of megabytes especially if you're recording like very high quality audio that can be a bit of an issue so if you have any of these concerns or you know any of the sort of limitations then you can actually go ahead and uh feel free to use the whisper model via the Azure AI speech service instead of the open AI instance that we spoke about before but if you head over to documentation you can select the two from this option here and make you the decision that you need to it's also worth mentioning that Regional support for these differs so the model that I showed you guys as I mentioned before is available in North Central and West Europe only so West Europe was the second one and whereas The Whisper model via the Azure AI speech service is actually East US southeast Asia and West Europe so if those are factors that you really want to tie into then it's worth checking out the two models but either way it's a damn awesome service and you can see for yourself in that awesome build that we delivered now what if I want to use GPT make a GPT messenger or something like that how can I do that well it gets even better guys because as I showed you before we simply do a new deployment with the model being GPT 3.5 or GPT 4 and it's simply the same setup that we did the only difference would be that the deployment name would change so in that case you would have a different deployment name so if we head over to the example that I showed you previously you can see we've got the for example here I've stored in a different environment variable is your deployment completions name so this is representing you know GPT 3.5 turbo and once you've got that client we spoke about previously all you need to do is essentially go ahead and call the get check completions so earlier we called get audio transcription to use the whisper model but get chat completions will go ahead and essentially do what we expected to do when we're talking to chat GPT right so in this case I've got ahead a few messages here so I've got a sister message pretending to be a helpful assistant and then I'm passing actually in the text from the transcription but you can go ahead and pass in any text that we provide here get the chat completion and inside of the completions choices message content you'll get the response itself so it's as straightforward as that to go ahead and actually use it so all in all you get the power of open AI with the security and scalability of azure it's super flexible and it even has filter controls and a customization panel to customize your AI to your specific needs what's really cool is that if you even check out the playground over here you have lots of different options to one test out your chat itself you can check out the completions you can even create custom assistance where you can go ahead and set them up in the specific way again you would be restricted to certain regions for that overall a really really nice way I'd recommend you simply go to the Azure open AI over here and you get a nice little introduction to what you might be wanting for example I just demonstrated The Whisper speech to text but we also have lots of different other options including completions and you know bringing your own data to go ahead and have a bit of a more bespoke user use case next up we have the Azure AI translator now this is a awesome service provided by Azure and essentially allows us to translate text near instantly to more than a 100 different languages and it really removes the complexity of building an instant translation setup into your app and all you need to get it working is a single rest API call yep I said it a single rest API call and it works just as we expect it to it can even accurately detect the language of your Source text and I even showcase this inside of my Google translate build which will be popping up on the screen right about now in addition it's production ready with built-in security so you don't have to worry about your text inputs that you go ahead and use during the translation any kind of injection attacks or anything like that it's all production ready so you can actually go ahead and use it right now and if you scale to a million users you know that it's going to work with azure's backing so let me go ahead and show you how to implement this API into your personal project let's take a look so over here you can see we've got the aure AI translator page and the best part about this guys is again we get two million characters free tier every month for 12 months so you can go ahead and play with this right now by hitting the first link in the description so to get started head over to portal. your.com once you've signed up then click on the search resources and I've got it actually in my homepage but you simply type in translators head over to translators and you can simply go ahead and create a new translator so I'm going to click on Create and what we will see is we will get a subscription so we can as I mentioned before we can select an appropriate subscription create a Resource Group that we want to attach it to so this is essentially the project so in this case I'm just going to demo project for aure and then we're going to click okay and the region so let's just type in you know let's just say Central um North Europe okay and then we can click on a name and a pricing tier now in this case you see we've already got free zero I've already think I've used this one but if we go ahead and type in demo project Azure and so forth and then click on review and create now once you've done this it will go ahead and create a translator I'm actually already done all of this so I'm simply going to take you to my translator that I've created so in this case I've got one here so I've got YouTube Google translate clone where I went over ahead and rebuilt and in this case what you'll see on the right hand side is you can only have one on the free tier after that it will be a paid tier so I recommend you just play around with your free one until you need the paid one so we go over to the Google translate clone which is on the free tier again very similar setup guys to previously you first you've got this nice little playground here so if I to type in for examp example hello world you can actually see that it immediately will go ahead and translate it into you know the appropriate language in this case we've got Auto detection from English and you can see it detects the language in the response and it gives the translations back and you can actually translate into several languages in one quest which is really cool you even have some sample code here so you can actually see the backend nodejs code you've got your key which you can get from the keys and end points so as I'll quickly show you right here we've got the key we got the location we've got the text translation this is the one that we actually need but let's go back to overview let's look at that sample code one more time and then we head over here and you can see basically this is like a nice little starting point and I would really pay attention to in particular the headers here because you would actually need to make sure that you input these headers correctly when you're making your rest request uh in order to get it across correctly I made a couple of mistakes with the header naming and it caused me a few issues so make sure you don't follow through with the same issue but this is an example using axios and it's just simply a rest request guys you have the endpoint which will be the api. cognitive Microsoft trans.com then you have the for/ translate endpoint passing the keys location this would be like where you've deployed to and so forth the parameters would be as appropriate and then the from would be if you don't include from here it's actually Auto detection so they don't mention that in the sample code but if you was to remove the from it would be autod detection and two would be simply an array of different languages that you would want to go ahead and translate to okay and then you would have the data which is the text that you would want to you know translate so diving into some code for real here you can click on view on GitHub but I've actually done this already with a Google translate clone so on your screen you'll see it popping up over right now so in this demonstration once we go into translation form we've got a form that we submit and it simply has some input and some output that we'll go ahead and demonstrate on the screen right now you'll see a snippet of this build in live action so live demo of this but what essentially happens is we submit this form action this is a server action again if you want to learn about server actions see the video that's poing on your screen right now but if I go to the translate server action so here we have the input so the input language and output language simply refer to en for English es for Spanish for example so that would be the values there then we have the request itself so this is a simple rest request as we saw in the demonstration previously and in this case all I'm doing is I'm just checking if I pass in a input language for example a auto detection one it would simply nullify this value so this would not be included which means it would Auto detect the from language otherwise if I passed in an input language we would use that for example if I said I'm typing in in Spanish or German it would go ahead and put that there and then it would translate it to the two okay so in this case this would be the output language we pass in the actual input inside the data array here so you just simply got an object you pass in your data uh this would be the text like Hello World 123 to go ahead and you know translate and then you simply make the request so this will be the actual request itself so after this so we're just awaiting this request and we get the response we simply pass it with response.data right and as I'm using axio I don't have to a wait response to Jason but in this case we got the data and then once we have that data guys it's as simple as actually tacking into the data translation text and this will actually give me back the text that we were literally you know we expect to to get back this would include the value that we actually get back over here so for example if I was to type in hello world so everything that you saw on the screen right there this right here the translations. text would be inside of this data Zer translations. text and it's as simple as that guys and in this instance I simply return it to my client and carry on as needed so if you want to go ahead and build that out you can feel free to check out the Google translate clone but it's simple as that guys you can go ahead and get AI text translations inside of your app at a production ready scalable approach that's incredibly powerful so give it a try and let me know how you get on in the comments down below next up we have the Azure Cosmos database this is a unified AI database and this one is probably one of the more really important parts of your app so this is going to support a really core fundamental part of your app it's essentially where all the data is stored now what's really cool about this guys is that you can go ahead and set up several types of databases within Azure Cosmos DB so you can go ahead and set up fully managed nosql databases or relational SQL databases and you can simplify your application development by just having one single AI database for all of your needs this includes caching to Vector searches and so much more but you might be wondering okay uh but how is this an AI service right well this actually allows you to go ahead and use AI database functionalities like native vect Vector search or seamless integration with other Azure AI services to support things like retrieval augmented generation so if you want to go ahead and find out more about that definitely check out their documentation but it's really cool because once it's inside of that ecosystem for example once your database is up and running in Cosmos DB you can go ahead and plug in other Azure AI Services really simply right and if you're concerned about scalability don't worry guys it offers coste efficient serverless options it has automatic scaling that simply just adjusts your application requirements which is what we want when we have a database and it ensures that if your app was to get a million users tomorrow it's not going to Simply crash and burn it will simply work so let's go ahead and get this set up right now and then I will run through some of the advantages of using the Azure Cosmos database all right so heading over back over to your poll so you're going to find this place to be familiar and you can see pretty much it's fairly straightforward once you've got it up and running you don't have to worry too much you can keep coming back here adding new services which I think is really really clean and nice so if I go to the search over at the top and I type in Cosmos DB you see a bunch of different options here so different types of databases but let's just click on the generic Azure Cosmos DB and you can see I've already created a couple here now if you want to click on create to go ahead and create a new database then you'll get a nice little popup which basically suggests the different apis that you can go ahead and work with it and this is one of the first benefits it supports several different open Source apis right so in this case you've got postgress you've got mongodb you've got table Apachi Cassandra nosql lots of different things that we can go ahead and use and it has sdks for popular languages such as JavaScript so we can go ahead and use this straight away in our app and the best part is that when we deploy this guys is actually multi- Regional so in this case the data is distributed across their massive network of servers so you can ensure that your app is actually blazing fast so that way when users request data it's immediately available to them cached on the edge which is really awesome so in this case I'm simply going to go ahead and proceed with mongodb because it's a very popular choice and I've actually going ahead and done all of this inside of the Google translate clone so again just going to pop up on your screen if you haven't already seen it right now so let's click on create right here and you guys can see we get two different options so I'm going to go with the V call cluster it's the recommended approach and it's very simple to get up and running simply click on Create and again we follow the simple setup procedures you you'll get used to this setup procedure simply pop in a resource Group a subscription that you want to attach the billing to and in this case you will get a free tier now I've already done this for a project so I've actually I think I've exhausted my free tier now but you can go ahead and use your free tier pop in a cluster name so this would simply be the name of your you know your database cluster the location your version so in this case you can change between five and six and more importantly this is the area that I want you to pay attention to so for your ad admin username put a username here that you're not going to forget okay so put this down write it somewhere so in this case if I was to put username 1 2 3 that is going to be the username to access the database and same with the password put down a password that you're not going to forget us to pop in you know it's got to half a capital letter and so forth pop in that password and simply go ahead and set it up like so do not forget these values because they're quite important and it allows us to go ahead and connect to our DB in The Next Step so I'm going to click on review and create but I've actually already done this now right so I'm not going to do this all all over again I'm going to go ahead and I've actually it's going to fail because I've already used my fre tier and I I forgot to put a name in but once you've done that what will happen is you'll go back to Azure Cosmos DB so you will have one option here and in this case I've already set up a mongod DB instance of Cosmos DB here so I'm going to click on that you will now see this as your Cosmos DB for mongod DB Vore right now once you've got this up the main thing that I need you to do is if you click on quick start you'll see a launch quick start guide which you can go ahead and check out you can go ahead and connect to your mongodb with Studio 3T or you can simply use a shell right so you can even go ahead and use sample data and so forth but the main thing really that we're going to want to care about is the connection string because that allows us to connect to the mongodb from our application right so you can see this connection string right here you simply would just replace the user with the username that I told you to save earlier make sure you save it and the password that I told you to save earlier as well right so you simply keep the colon but replace the user with the username and the password with the password now once you've done that let's head over to our app and get building so here we have the Google translate YouTube clone that I've been talking about quite a lot throughout this video but in this instance if I was to go over to our database file and this is where all the magic starts off you can now see here we have the connection string and in this build I'm using something called mongus to interact with the mongodb and honestly it's as simple as having your connection string and connecting via mongus so I'm actually using mongus here to make life a lot easier right so I'm just doing mongus doc connect connection string and I've stored my username and password in environment variables which I would recommend that you do to keep your app secure and you access it on the server side in a secure fashion right so in this case xjs by default this is server side so it's safe and you can see this will allow me to connect to that Microsoft Azure instance and guys it just works it works it now scales everything interacts but you probably are wondering at this point how can I actually see the data in my database maybe you don't want to go ahead and download something like T3 I think it's called yeah so sorry Studio 3T or something like that I don't actually personally use this instead what I would recommend here is a more of a bonus tip is go ahead and download the mongodb uh extension inside of vs code so if you type in mongodb you actually get a nice extension and this works perfectly with our aure deployment so in this case download this go ahead and all you're essentially doing here is then you can go ahead and create new and pop in connection string and you simply paste it in while you replace your username and password and you'll get access to your entire database guys so it's as simple as that you can see here I've got some data inside of this database and I can actually go ahead and this is from the YouTube live that we went ahead and built with the Google translate clone you can see the translations that are happening and these translations by the way guys are using the Azure AI translate service so you can see very much living proof that it does work and it's awesome right so this is a really nice way of actually working with your database and I would highly recommend that you learn how to go ahead and do it because it's really really awesome and it scales perfectly as and when you need it so a really important point when you set up your database with Azure Cosmos DB it will ask you about public access now if you are using nextjs it's worth knowing then nextjs tends to go ahead and actually try and access the back end from a different Dynamic IPS unless you're on the Enterprise plan so it's actually a necessary requirement to go ahead and whitelist all of the starting IP addresses and ending IP addresses that way it's publicly accessible this is just something you have to do if you're using nextjs with something like Cosmos DB and that's completely fine because you can secure it in other ways on your database at the database level but I would highly recommend that you just know this to prevent yourself from going in circles and getting rejected whenever you're trying to access it from your let's say Vel deployment so something just to be aware of in case you get stung with that so just like that guys as your Cosmos DB can be your go-to database for web apps mobile apps gaming and internet of Thing apps right I've actually implemented the Azure Cosmos DB with mongod DB several times in lots of different production apps and in fact the Google translate clone that I showed you now and it worked flawlessly every single time so definitely an ideal solution and something I would recommend is this is a great way to use mongod DB if I have to suggest to any of my students because it allows you to set it up really easily and you don't want to have to worry about it afterwards all you really should be caring about in a lot of the time when we're starting out when we're learning at the early stages is just how to get it up and working so that it can scale and it can work in you know like for example a free setting which is ideal and then we can go want to actually focus on the development of building the app and working with mongodb and we don't really want to have to think about the database aspect but this gives you the benefit of all of those things the scalability the security all of that included and once your database is flourishing and you know lots of users are using it you can go ahead and tap into it with the additional Azure AI services so win-win on both sides so they always say save the best to lost and this is why I'm going to cover as your Cloud functions now essentially this is a serverless solution that allows you to write less code maintain less of an infrastructure and save on overall cost and what what do we really mean by this well you can essentially write anything to a serverless cloud function and basically call it via a rest API via a database Trigger or anything else and we just want to be able to use them for lots and lots of different bespoke situations but you shouldn't have to worry about deploying and maintaining servers you know we just want to go ahead and deploy it and not worry about it right and this is where Azure comes in clutch you write your own code in your preferred language using your favorite development tools and then you simply deploy it to the Azure cloud and it just works is it's that simp simple so that way you can focus on the code and what matters most to you and as your functions will handle the rest so here's a couple of cool things that you can do with the power of azure Cloud functions well firstly you can process file uploads by running code when a file is uploaded or changed in Azure blob storage and I've actually done this in the Del 2 clone so we're actually going to dive into that a bit today right and you can also build a scalable you know web API by implementing a set of rest API endpoints for your web apps using HTTP triggers so you can see here we can actually go ahead and respond to for example files being uploaded to you know different Azure Services again a benefit of keeping everything in the Azure you know ecosystem means that you can go ahead and tap into these different Triggers on the different services that they provide now another way of actually going ahead and triggering your Cloud function is by responding to database changes and you can set different custom Logics here or you can keep it pretty simple for example if a document was added in Azure Cosmos TB for example the previous demo that I just showed you let's say a Google translate Edition was added to our Aur Cosmos DB so we made a new translation they got added to the user's database then let's say we wanted to trigger a cloud function to email them every single time to say hey your translation is now ready we can basically use a cloud function to do just that right so you can really customize it for a bunch of different reasons and the best part about this is that Azure Cloud functions provide a variety of hosting options depending on your needs and your app workload so there's lots of flexibility here but enough talking guys let's dive into a deep dive onto how to implement Cloud functions into your app and honestly I've got a couple of Tricks here that I want to show you so here we are inside of our code for the GPT d 2 clone and you can go ahead and check out that video right now it's going to pop up on the screen all of the source code is in the description that video inside the papa GitHub repo but the main thing that I want to draw your attention to is that we have this Azure folder and this essentially represents where our Cloud functions live and you see we've got the different functions if I click into get images you can see that this is a function if I click generate image the main thing I want to take you to is actually the function header so in this case you can see this this is essentially a HTTP triggered Cloud function and it's called generate image it accepts post requests to it and we've got an or level of anonymous so this means that basically we're saying anyone can make a post request to that endpoint and basically access it and then you can do a bunch of things that we need to do and basically return a response so this is a a function essentially living in the cloud which accepts a post HTTP rest request right so very very handy and we can even have like you know lib files so you know different things which can help us out but the main thing is the source functions folder these are going to be the four Cloud functions I created inside that build I want to mention as well if you have environment variables inside of your app it works slightly different with Cloud functions they will live inside of the local settings Json so if I click into this far right now you can see we've got lots of different Keys here including an open AI key here so at this point here you got the local settings. Json right and this is really important so I want you to actually add the keys in here so that way when you go ahead and do process. environment account key or account name it will be actually pulling it from here account key and account name right and that's actually how you're going to go ahead and use environment variables inside of your Cloud functions but rewinding a step how did we even create that folder right so I don't want to have to manually do all of that how can we do that in an easier way well it's very very simple what we do is we simply go to the extensions type in Azure and first thing we want to do is install the Azure tools okay so Azure tools installs eight different extensions and they include a variety of different Azure services that we can go ahead and tap into so Azure functions being one of them so if we head over to our Azure sidebar so in this case right here you can see I've already connected to our Azure account but if you want connected command shift p type in aure sign in and you can see right here we've you've got like as sign into Azure cloud and so forth you want to Simply sign in or it very simply will prompt you here then you can see your subscriptions you can click on it but you can see in function apps I actually did another build where I used a cloud function as well called the Disney clone and that would actually be popping up on your screen right now so this clone right here if we go into our uh dashboard I'll show you from the beginning if we go to functions so function app this is basically represents Cloud function Disney 2 clone so I have the Disney 2 clone that we actually deployed over there and and you can see here that I've actually got the deployment so get AI suggestion YouTube and you can see that is enabled it is live so this is actually a cloud function everything that you need essentially is here so once we've done that guys you'll see the Disney 2 clone is here so I'm actually going to show you that code right now and you can check out that video if you want I'm going to pop it up on the screen right now so Disney 2 clone let's head over to that build right now so over here we have the Clone now it's worth mentioning here you can see function folder now inside this function folder I've got source and functions and then you've got the function that we actually deployed so this is actually the deployed function that you guys can see over here so if I go to the actual deployment so overview you can see the function that we actually see down here in just a second correlates to the get AI suggestion YouTube so that's actually the same function which is awesome right now if you want to actually go ahead and get this set up for first time round you can actually go ahead and say you didn't have the function set up you just had an xjs app you could do command shift p asure functions and then here you you can see look we've got a lot of different things you've got create function app in is your this will actually create a brand new function app which means essentially if we had in say we were creating a brand new project in that case you could start it like this and in this case I've already created the Disney 2 clone but here you would create your project with that line but let's say I've already created the project and I want to Simply create a function within that project so let's go ahead and click on create function and you can see I get different triggers right so in this case I want to do a HTTP trigger so very simple and I just need to give it a name so in this case let's go ahead and say like the name for this function would be add uh 10 numbers together okay and then we click on enter and now you can see guys it went ahead and generated the code for me which is really awesome so I didn't have to do any of this and it gave me the dummy code already and you can see here it actually gave me the app the signature so HTTP which is the trigger accept get and post requests the name of the function off level in this case Anonymous anyone can go ahead and do it and it went ahead and popped it in here right so what I would recommend is the first step before you were to do this is to go ahead and you know firstly go ahead and create a function app so this would actually be you know when you you select your subscription you go ahead and create a new functional app so in this case let's say it was a brand new project I would call this one like demo project sunny right and then go ahead and hit enter this will actually create a brand new project in this case imagine you didn't have function here then you could do like you let's just say no js18 fine and then you would have a resource you see like and this will actually set it all up guys on the actual Azure dashboard so rather than doing the setup process on Azure so in this case rather than doing it over here so rather than clicking create and so forth I've actually done it from here now so create function app right and it's worth mentioning that previously I just showed you how to create a function but if I didn't have a function folder it would actually created all of this for me as a template so it would ask you which folder you would like to put it in and at that point you can simply type in functions just remember this is actually a separate project so you've got its own independent node modules outside of your node modules so make sure you don't commit that to your git repository but this will actually go ahead and create and you can see look it's running through the steps right now creating the appropriate resources and then you can actually go ahead and use that which is pretty damn cool and if I wanted to go ahead and deploy This Cloud function now how do I do it well actually just as easy command shift p I type in Azure and I can type in deploy and you can see here deploy to function app so let's say I'm in this file I click deploy to function app I do Azure subscription one and then I will actually get the different clones so now this one hasn't actually finished deploying yet but let's say I wanted to deploy add 10 numbers together to Disney 2 clone I simply hit enter and look at that while I've done that it's actually created that which is awesome and it will ask me are you sure you want to deploy to Disney 2 clone this will over any previous deployments and cannot be done if I click on deploy now this will actually go ahead and try to deploy the local functions now so in this case you know it will go ahead and you get an output here but while it's doing that we can go and check on ourselves did it go ahead and add it guys look at that perfectly added the demo project all from our vs code which is awesome right and in this case it's deploying the two the app Disney 2 clones so let's actually see if it's deployed this is really really cool and you know like I said guys I just went ahead and simply did command shift p and I was able to write it from this now again I mentioned previously about this local settings right now this is really important if you are using any environment variable inside of your code I want to make sure that you do it correctly so in next CH you typically do n. local file but in the cloud functions we do local. settings. Json we add in the key and then you simply go ahead and do command shift p uh upload so if I type in aure you upload local settings that is how you go ahead and upload your environment variables so your local settings to the cloud so that way it's updated with the local uh correct settings as well but let's go ahead and check on that guys our Disney 2 clone Cloud function and we should see now a second Cloud there we go guys look at that awesome stuff add 10 numbers together is now live so we can go ahead and see that for your so get function URL and look at this and it's remember it's Anonymous so we should be able to make a get request to this and just like that hello world boom we've just deployed a cloud function in a matter of minutes right absolutely easy stuff and that is a scalable Cloud function which is perfectly working and it will go ahead and show me the access records right so really really powerful stuff the Azure extension was the key factor there in making it super easy to go ahead and add in new functions without that you would have to follow some more steps go through some Doc ation I'm always a fan of making your life as simple as possible and using the tech that makes sense so in this case you guys can go ahead and feel free to check out the Disney clone to go ahead and get a nice insight into it or the GPT Del 2 clone for a more in-depth granular build that one actually we did quite a few different Cloud functions in different approaches so you can go ahead and feel free to check that out yourself so yeah with that said guys that is the Azure Cloud functions now it's absolutely fantastically powerful I would really recommend you try it out yourself give it a try with a couple of the demo projects that I've gone ahead and built on this channel and get this little starter template set up for yourself so that you know how to deploy a cloud function for your next developer project and a notable mention which I really do want you to check out is the Azure blob storage this essentially is a way to store objects really easy I've even done a build which will be popping up on the screen right now as well so you can go ahead and feel free to check that one out and again the benefit of using Azure comes down to many things the scalability the security the customization the up time you know honestly this is Microsoft Services 99.9999% always going to be promised to be up and you've got that reassurance with such a large reputable company and again you can control your spend everything in a visible transparent way with subscription so it makes everything really concise and the best part is guys once you go ahead and get into the ecosystem you can actually overlap with a different couple of things so if you've got a cosmos DB you know with mongod DB under the hood running and storing data and working the way it should work you can then go ahead and Trigger off from that to make Cloud functions fire off every time a new document adds into your Cosmos database and then you can add in AI services to go ahead and basically add Vector search inside of your Cosmos DB so lots of things can basically play with each other in the Azure ecosystem and it's something which I don't feel has been shown a lot on YouTube so this is why this video was absolutely essential that I felt like I would make it right so it's been an awesome collaboration with Microsoft I've done so many builds with them on the channel it's been a pleasure each and every time because the tech just makes sense and remember guys you can click the first link in the description to go ahead and get started with 12 months of free services and even $200 worth of azure credit and remember 55 other free services are included in that so you can go ahead and click on see all free services guys you've got app configuration app service lots of different things including automation if you want to see a video on automation give me a shout and I'll be happy to do something around that but honestly you can go ahead and see for yourself the list is massively extensive and all of this is absolutely free for 12 months to new customers right so you can go ahead and check that out and you get $200 worth of credit I would really recommend for the first you know if you're early in your developer Journey if you never used a your before this is the ultimate time to get started build a couple of awesome projects put them on your developer portfolio and absolutely smash those interviews with that being said guys today we covered the Microsoft Azure popular AI services in depth with a couple of different demos with a couple of different use cases and setup examples I hope you've enjoyed it make sure you smash that like button comment down below what's your favorite part all your favorite as your service and if you haven't already guys make sure you hit that subscribe button because without your amazing support none of this would be absolutely possible so it's a give and take relationship with the awesome Papa fam and you guys have been absolutely incredible if you want to learn how to go go ahead and check out our course over at papa.com where I teach you everything from the ground up and I make it as easy as possible and on that note guys signing out I'll see you in the next one [Music] peace

Channel: Sonny Sangha

Views: 7,693

Keywords: react, developer, reactjs, html, css, js, javascript, papa, papareact, papa-react, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript

Id: rfms1VW5HJY

Length: 50min 42sec (3042 seconds)

Published: Fri Mar 29 2024