Let's say you need to use media files in your mobile application or that you just want to store another type of file in a scalable and robust way if you have this use case join me in this episode of decoded quickly it's where we'll go through the amazon s3 connector and use it in a mobile application in OutSystems okay so two things we need before we get started to create an edibles account and to download and install the fourth component for the os3 product so.
let's go through the account part I already have a free account it's easy you just sign up for a free account you'll find it and then we want to go to the identity and access management go to users and as you can see I already have some of them we will be using this one but you you probably will need to create a new one add users choose a name and choose the programmatic access as we will need the access key and the secret access key next you have to go through the permissions and for this test is just full access to s3 to the service be careful with the real-world application as you might want to be more strict on these type of policies and later to finish creating a new user you will have the secret and access key is given to you this is an only one-time thing so make sure to store those credentials in a safe place.
Because if you forget them you'll have to create new ones and to show you the user that will be using it's this one as you can see it has full access and for the security credentials you can go here and check them out then we will need to go to the yes3 service and we are going to create a bucket specific for this application which in this case it's events recordings so once again you just go here create a bucket and I'll show you what this is it's just an empty bucket it has no objects and it should be as simple as this events recordings bucket so aws account signs up for free create a user with full access to s3 if you're just experimenting and create a bucket then we go to the OutSystems forge we search for amazon s3 and you'll find here the amazon simple storage service that is a supported component click to download and install it in your environment so that's then.
let's jump right into service studio okay so for the application that we will be using you can install it via the new application start from an app and we are going to use the events app and to give you a quick overview of what that looks like let me log in with the demo user and as you can see we have a list of sessions for this specific event and we can rate the session join for the remote session and all the details what we will be doing is we will be changing this so we can have a way for the users to watch the recording later so in order for our users to watch the recording we need to put the recording somewhere in a storage place so.
let's go to service studio and i've built a very simple back office that lists all the sessions for the event and then you can update the details of the session and add a section where you can upload the video so this is the upload recording it's the upload widget that comes with the platform and it's binded to this local variable where it will receive the name of the file that we are uploading and the binary of the video and then if we see what this ad recording does it just updates the video and the event session what we want to do is stop using the database in our application and put that load into ds3 service so to do that we go here and we have already referenced the component that we installed that is the amazon s3 and this module is the integration service one and we'll use the object put method so in order to do this i'll just create a few more utilities here which will give me the aws credentials that i created for that user that you need to create and this will return me the region the access key and the secret access key then we will want the bucket name and for that.
I already have that name in a function as well and then for the key of the object it will be the recording name that comes from the file that is being uploaded and of course the file that is the binary data we can use metadata for example to attach the video file to the session so for example as a quick test here i can say that the session id is the session title or even more metadata that can be important for you to use so what we are doing here recapping uploading a file that is only accepting video and as soon as we add recording it validates if everything is okay stores that file in the bucket that we created before with the credentials that we created before it assigns name updates the session so we have that file name to be used later and that's it that's how we upload a video later what we want to do is in our mobile application where we have the the listing of sessions per event we will go to the agenda detail and as you can see we already changed this so we have a button that says watch recording and that redirects to this recording screen that i've created which checks.
if there's a file in s3 or not and if it has we show it using the video widget from autistic UI that needs a URL if not we will just show a blank state message and an option to go back to the agenda so let's take care of this video widget that needs a URL three different things that you can do to retrieve an object from a bucket you can get the binary of the data or you can just get a pre-signed URL where you can directly access that object and that's what we are going to use this in this video widget so if you go here the get recording fetching data from other resources what we'll need is something from an amazon s3 that is the object get pre-signed URL so as you can see here we are getting the details of the session in particular so we can use this as the key for the object that we want to retrieve as you remember to let's and.
let's go back here as we were putting the object to the bucket we were using the recording name the name of the file so that's the key that s3 will have when we want to retrieve that object and so here what we will use is what we updated in the database when we were uploading the video so we need a few things here and once again we have some functions we want to use https because you believe in it and get the bucket name as well with this we just need this output parameter assigned and it's what we are doing here and this will be the url in order to finish we just need to assign get recording url here and we are ready to go and so let's take it for a spin let's go to google chrome and I already have the application open here let's go to the ceo keynote and we already have that button watch recording but we don't have anything here so let's go to the back office search for ceo and I want to upload a video let's upload it to s3 okay let me just check.
Because we never know and this is the bucket where it's supposed to happen the magic and here it is the SEO keynote and let's see what happens here so I think the CEO cannot heat here let's watch the recording yep here it is awesome and that's how you can leverage s3 and OutSystems together take into account that as you are handling media files large files the network availability is an important factor when you are implementing this use case it's not just dragging and drop some stuff and yes if you were wondering I was using the mac service studio so if you like using mac os you can now develop natively with service studio for mac