Spring Boot, React.js & AWS S3 Full Stack Development

hey what's going on guys welcome to Amigoscode  in this spring boot tutorial I'm going to take you through   the journey of learning how to implement the  functionality of storing files using spring  boot React,js and AWS S3. I've done this video a couple  days ago and I decided to basically re-revamp and   because it's part of the full stack professional  course which is over 60 hours and growing with   new features that you guys have been requesting  so I decided to just revamp the video that I've   done a couple years ago and also if you want  to gain a certificate on the website you can   basically enroll and basically take this crash  course and gain a certificate and this course   is Hands-On so get ready and clone the repo and  yeah I want you to learn something new from this   video if you're new to this channel literally  just take one second and subscribe and also   for all of you guys smash the like button come  on I'll give you one second that's it without   further Ado let's go ahead and learn about spring  boot react AWS and S3 catch me on the next one in here I've put this diagram together where  you can basically have an idea and see all the   different services that you need within AWS  but basically right here this is our API that   you basically have deployed successfully to an  ec2 instance backed by ECS now the API actually   is running on this ec2 instance and we want to  upload pictures to a bucket so Amazon they have   a service called S3 which basically allows you  to store files now before you can upload files   you need to basically configure the row so the  role that is called AWS elastic Beanstalk EC2   roll in my case to have the ability of accessing  this bucket in here if you don't have that then   whenever this ec2 instance that has a row tries  to access the bucket IE to upload it will fail   so we need to attach a row then we can use the SDK  by Amazon and I'm going to let you go and try and   figure out which one to use but later I'll give  you the solution but basically you can use the S3   client and what I want you to do in this exercise  is the ability of you having two implementations   so one which basically connects to the real S3  bucket and then the other one that basically acts   as an S3 backed by a folder under a path within EC2 your file system so in my case I'm going to put   it under home a folder called dot Amigos code and  then S3 and then images and then user ID and then   the image ID so this will be the idea and in here  this would be number three in fact right here   and also what you need to do is to store  the fact that a customer has an image so   that you can then later retrieve the image  of the bucket with the corresponding ID   and here you see that we do have IntelliJ and  basically in here you should be able to run your   code and what I really want to see is actually  an integration test that basically simulates all   of this so adding to AWS so S3 but also to the  fake one in here and mainly you know when we are   running integration tests we're not going to have  the ability of communicating with AWS services   so that's why we do have this fake implementation  so that the integration tests do work when we use   them within GitHub actions and on the front end in  here I've got basically a bunch of people in here   so people are messing up with this application  at the moment but in here so if I click on update   so here I've got this basically drag and drop  component where I can drag a picture in here   or I can select so let me show you the drag  and drop feature so here I do have a couple   of pictures and literally I can take any picture  so let's say Georgie so Georgian let's just take   my picture in here and here I can drop the  picture and this will upload to the server   and currently I don't have any loading and you  can see that basically took some time but it was   actually uploading the picture uh but basically  if I search now for joji so G orgy is it Georgie   G or G or G or G there we go so this is Georgie  right here and you can see my picture also if I   click on update and here now you can see that  the picture is present in here and obviously I   can basically upload the picture again so let me  just now pull a female for example and just bear   in mind that as I said so there's no loading  component at the moment but you can add that   yourself so if I drag the picture so at this point  it's actually loading and this time it was faster   so if I search for Gog again so command f so G or  G or G and you can see that this is the picture   now click on update and it's working beautifully  awesome let's learn how to implement all of this so for this course I want to be using IntelliJ  as the IDE of choice and the IntelliJ they've   just launched their brand new theme which  currently it's in beta mode and maybe by   the time that you watch this video it might not  be in beta but it really doesn't matter if I use   the new UI theme or the old UI theme because  it's just coding okay so when I run some code   is going to be the exact same place so  all you have to do is just look for the   play button and it's basically the same  place it's quite easy for you to see then   the other thing is I'm doing a giveaway and I'm  giving you the IntelliJ license so the ultimate   for three months I can't even say three months  so for three months right and all you have to do   is follow me on my LinkedIn profile also there's  a brand new group which you will basically find   a link and the description of this video within  LinkedIn so we have a LinkedIn group now and also   join Discord because that's where if you have  any questions about the course you should post   um your questions okay so this code is a very  active community and you should be part of it so   join all those three uh so follow me I'm not join  but follow me join the LinkedIn group and also   Discord and you should get your license cool this  is pretty much it I'm so excited let's get started if you want to follow and code along  with me which I think is the best   way of you to learn all of the stuff that  I'm about to teach you go ahead and clone   the repository which you can find the  link and the description of this video   So within the repository click on code and then  in here you are able to basically clone using SSH   you can see some description about basically this  is part of the curriculum which is over 50 hours   and we are adding more content to it so also you  can look into the commits in here which I'm going   to show you which one you have to commit in order  to follow along so go ahead and pretty much just   clone so click on code grab this link and then  open up your terminal so in here I've got my   terminal open and you can literally clone this to  anywhere within your file system so if I say PWD   you can see that this is uses for slash Amigos  code and right now let me just go to desktop   so CD and then desktop and in here I'm going to  say git and then clone and then paste the link   awesome so now it's actually cloning and there  we go next let's open up this repo with IntelliJ for this course I'm going to use IntelliJ ultimate  and it's by far the best IDE for Java development   and also for full stack it's amazing so luckily  for you I've got a coupon code for three months   in which you can basically use and have access to  all the features so here if you navigate to this   website which I'm going to leave the link and  the description of this video and if you click   on download you'll see that IntelliJ basically  they have two versions they have the community   as well as the ultimate so this one is a paid  version which I'm going to give you access for   three months as I said now the best way for  installing IntelliJ is not directly and you   should do it through so if we click on developer  tools and in here you should see the toolbox app   so basically this is the best way for you  to manage all of your jetbrains Ides so   this basically allows you to upgrade easily  install rollback and downgrade and all that   good stuff so basically go and install the  toolbox app and then you'll have access to   and then you'll be able to install IntelliJ  let me show you so in here I already have   the toolbox app which is available in here so  if I click on toolbox you can see that this   opens up the toolbox and if I click on tools  you can see that I do have IntelliJ Community   I've got idea and there's updates which I need  to basically do and you can see all the other   ones in here but the one I wanted to install  is this one in here and I'm going to leave   the instructions on how to get the three months  license next let's go ahead and open up IntelliJ all right so in here if I open up IntelliJ you  should be presented with a screen that looks   like this so let's open up our project so here  I'm going to click on open or if you want you   can get from VCS so you just paste the GitHub  link and basically just clone the repo also if   you have the exact same version you can enable  the brand new UI which is I think in build beta   mode which I'm not going to use so I just want  to make sure that basically all the recordings   are with the same IDE but if you want to use  their brand new UI feel free to do so it looks   pretty good actually so here I'm going to click  on open and then within my desktop this is where   I've got the folder so open the folder and all  I want you to do is to open the root so this   is a mono repo where we have the front end the  back end and whatnot so just open there we go   and you can see now there's a few things about  what's new about IntelliJ so I've just updated   and if I close this there's also the readme I'm  going to close this and I'm going to basically   load this because you found the maven build  script there we go so just give it a second   and I'm going to cancel this plugin here and  there we go so if you manage to get this right   here where you see the folder in here and it  looks like this and if you expand you should   see CI GitHub git ignore backend front end within  the front end we have angular react so if you see   all of this in here you've successfully managed  to open the project with IntelliJ cool the next   thing that I want you to do is if you open up git  in here you should see that there's basically all   of these commits in here and what I want you  to do is to check out the point before the   file upload so here I think so this is the readme  stuff that I've done and then this is the react   and then in here so basically I think it's this  one right here so basically what I want to do at   this point so I want to check out the code before  I implement the file uploads so you see S3 file   uploads the commit before it no this one because  this one is a branch but before it enroll to   enroll so basically two L's to one L so basically  right click and then what I want to do is to check   out revision so basically we're going to check  out to this point so check out and there we go   so I'm also going to leave the command so in  case you want to check out using the terminal   or command line what you do is so here I'm going  to right click and we should be able to copy the   revision number just like that and if I hide this  and in here so basically it's just downloading a   few things let this finish and you can see  the revision in here actually so the reason   why I'm doing this is so that you can follow  along awesome so here we can open the terminal   and you can see that this is the revision  now if I say git check out and then Main   you can see that I went back from this revision  to main right now I can say git checkout and then   paste the revision so basically this long number  in here press enter so this is the exact same   thing have a look now the head is at enroll to  enroll so I'm going to leave this command as well   so that if you want to do it this way you can do  it but but this will be the starting point for us in order to successfully run the application  you need to install Docker and basically Docker   is just a fancy way of you basically running  anything that you want locally without having to   do any setup whatsoever so if you want to learn  more about Docker I have a course on Docker and   Docker is a must these days if you are serious  about becoming a software engineer or if you're   a software engineer and you don't know much about  Docker then you must know about Docker right now   so go and install Docker and once Docker is  installed you should see something called   Docker desktop so in here if I click on  this button in here so open the dashboard   and you should see something like this so  let's take this command in here so if this   is the first time that you run Docker just take  this right here so this command copy and open up   your terminal and what we're going to do is just  paste that command and this will verify that we   have Docker installed so basically it's just going  to run a hello world or getting started container   you can see that it says enable to find  it's going to do something like this   and it's going to basically run and then finish  so if the command run and executed successfully   what I want to do is open up Docker desktop  and you should see this right here which is   a brand new container cool and this guy  here is running on Port 80. and if you   want to see the exact same details through the  terminal you could just type Docker and then PS   so here basically is the same information  so you have one container right here so   basically port 80. on the host mapping to  Port 80 inside of the container now what   I want to do is I want you to open your  web browser and together let's type local   and then host literally just localhost press enter  and you should get this right here up and running   so if you manage to get this page right here it  means that everything it's working as expected   now let me destroy this container so in here back  to Docker desktop we can basically delete the   container through here or through the terminal by  saying Docker RM and then let's say Dash f 4 so we   don't have to stop the container get the container  ID and then paste and then enter and you should   get the ID back and now within Docker desktop no  containers are running and if I try to access the   same page so this one here before so if I reload  you can see that the site cannot be reached   cool so if you've done all of this congratulations  you are on your way in terms of learning Docker   next let's go ahead and get the database I've  been running for our application using docker cool in order to get the database up and running  for this course we're going to use Docker as it's   the world most advanced open source relational  database and it's quite popular and it's one   that I recommend on my courses so let's go ahead  and get this database up and running with Docker   So within IntelliJ if I just hide this you should  see that there's a file called dockercompose.yaml   and in this file this is the ammo definition for  Kepler containers so here I've got one called DB   and this is for the database then I also have  another one for the API so this is the API that   we build in the course and then we containerize  and the idea is that we can just use this Docker   compose file and then get the entire stack up and  running also we have the front end with react here   as well cool and if you want to learn more about  all of these as I said check out the docker course   where I teach all of this so for now what I'm  going to do and this is very important let's get   rid of the API in here so this service so I'm  going to collapse this as well as react so we   don't need none of this and I don't want this to  cause us any issues so I just want us to be able   to have the database I've been running because  this is what our spring boot application will need   when we run it locally cool so now make sure that  you have this exact same file as is and I'm going   to leave this in the description of this video so  that you could just copy and paste but one thing   to bear in mind is have a look The Amigos code is  the user and the password and here is password so   this is what this springboard application uses to  connect to this database cool next let's open up   the terminal and within the terminal what we're  going to do is we're going to CD into the full   stack folder so here I'm within the desktop  so CD full stack professional and now if I   type LS you should see that we have the docker  composer yaml if I say cat Docker composer yaml   you can see that this is the file that I've just  showed you with one service which is the database   awesome now what I want to do is simply to  say docker compose and then up Dash and then d   so this is Docker and then within Docker  there's another compose tool and basically   allows us to run containers based of the yaml  definition and D is for detached mode press enter   and you can see that for me this was super  quick but for you maybe if you're running   this first time it should take some time to pull  the images or to pull this postgres image in fact   nice now go ahead and type docker and then  PS if you type Docker PS and you have one   container is fine right and the container is up  and running but if you use Docker before and you   have multiple containers look for the one called  in here postgres so names post and then grass   also there's this nice environment variable  so here I think it's format so I think let me   just say export and then format which I'm going to  leave in the description of this video press that   and then I can say Docker PS dash dash format and  now this gives me the output formatted nicely like   this instead of like this and here you can see  the ID the name the image the port So currently   it's localhost 5332 mapping to 5432 inside of the  container the command created and the status which   basically up about a minute ago now what I want  you to do is let's take either the name or the ID   and say Docker logs and take the name or the  ID press enter and in here you should see this   exact same output that says database is ready to  accept connections awesome if you've managed to   get this far congratulations if not let us know  within this code otherwise next let's go inside   of this container and create a database called  customer which our backend needs in order to run within IntelliJ if I close the  docker compose yaml for now   and let us open the backend folder SRC main Java  and here you have the main class so if you try   to run this main class in here or you can run it  through here or right click run this should fail   in here there we go and it fails because  the database customer does not exist   so let's create that within our database so  you've got two options you can connect using   the database client in here with IntelliJ or  through the terminal so let me do it through the   terminal So within the terminal if I type Docker  PS you can see that we have one container which   is running and this is the database so let's take  the database name or ID say docker exec Dash it   just like this paste the name or the ID for our  container and then say sh now we are within this   container and this basically is just a Linux  box if I type LS you can see the Linux file   structure so what we're going to do is type psql  so this is the official CLI client for postgres   here say Dash capital u Amigos code so this is  the user and also let's connect to so say Dash D   and by default we should have a database called  post and then Grace press enter and you can see   that we are inside at this point if I press  Ctrl L it just makes some room for us there   and if I type backslash L you can see that this  lists the databases and currently there's four   so Amigos code postgres template 0 and template  1. so what we're going to do is let's just say   create and then data base and in here we're  going to create a database called customer   and then make sure that you have a semicolon enter  and if you have the exact same output so if this   comes back create database it means that it was  successfully created and also if I type backslash   l once more clear the screen press enter now you  can see that we have the customer database inside   so let's basically connect to customer so say  backslash C and then customer and now if I type   backslash and then D enter there's no relations  let's open up IntelliJ and if we try to run the   application once more so this time it should  just work there we go and we have a user in here   so insert into customer age email blah blah blah  blah blah values and the application is up and   running awesome next let's go back to the database  and if I type backslash and then D once more   now you can see that we have few relations we  have the table called customer the sequence and   Flyway schema history as well as a table so if I  say select and Then star from and then customer   if I press enter so make sure you have  semicolon there you can see that we have this   customer right here now let me say backslash  t and then run the exact same command again   or sorry not t so let me just toggle  it off and I think it's backslash X   yes expand the display on so let me just run the  exact same command so select start from customer   and you can see how the data now comes this  way and this is our customer id1 that's the   name the password obviously in here is  encoded and gender mail and the age 98.   so if you managed to get this far congratulations  next let me go ahead and press Ctrl D to come out   of psql and then Ctrl D once more to come  out of the container and we are good to   go if you've managed to get the back end  up running congratulations otherwise let   me know if you are facing any issues so that  you can follow along catch me on the next one in order to get the front-end up and running  either react or angular what we need to do is to   install node.js so this is very important in order  to run our front end locally so download either   the long term support or the current it doesn't  matter because it should just work once you have   node installed open up the terminal and within the  terminal so if I clear the screen in here Ctrl l   I'm going to say CD and then navigate to  Front End and let's first do react there we go   and in here I'm going to type npm so just type  npm and you should see that this will come back   and say hey you want to do something these are the  usages right so it means that we have successfully   installed node.js and when you install node.js it  comes with npm which is the package manager so now   what we're going to do is say npm and then I and  in fact before I do that if I type LS have a look   so these are the files and folders We have but  when we type npm I or install is the same thing   this will go and download all dependencies  and you can see that added 269 packages   so here let's just type LS once more and now you  can see that we have node modules let me clear the   screen and now to run the react front end just  type npm and then run and then death awesome so   you can see that it says this is actually running  on localhost 5173 so let's just take this URL   and open up Chrome new tab paste URL press enter  and you should see this beautiful UI awesome if   you want to log in to grab the credentials open up  IntelliJ and remember when we started the back end   you should see the logs this email so just take  the email go back and then paste that and for the   password is going to be password and then login  and you can see that it works click on customers   and you should see that we have one customer  in here and we can update we can delete the   customer if we want and also let's try to add  a new customer so here let's just say Jean let's say she's 22 password is going  to be password and then gender female   submit you can see that she's added in here and  let's try to login with Jean sign out this will   be Jean at amigosco.com the password is password  login and now we are signed in with Jean customers   and we can see everyone again awesome if you've  managed to do all of this congratulations you   are on your way in terms of building the  functionality to upload pictures with AWS cool let's begin our journey in terms of building  all of this the very first place that I always   start when I have to basically use an SDK or an  API or basically Implement literally any feature   is by looking at the documentation and then take  it from there so in here I'm within the AWS SDK   for Java documentation so this is the official  documentation from AWS and in here basically we   learn how to integrate AWS services with Java so  you can find the link on the description of this   video for this documentation but here I know that  for a fact that you know version one is actually   deprecated and there's a new version which is two  there's also a migration guide and in here so we   have the API reference and here we have the  developer guide so let's look into developer   guide and this should gives us more or less an  idea of how to get up and running so on the left   you can see that we have you know get started  tutorial some information about the SDK and   setup SDK features security documentation history  and whatnot so let's click on get started tutorial   and here you can basically follow this tutorial  if you want to get up and running with this SDK   but in here so basically if I scroll down this  is a maven project you can see the palm.xml and   in here you can see that they have the dependency  and then basically they use the SDK like so   and um yeah so also under setup in here they also  have you know a more detailed guide I think with   Maven and possibly Gradle as well and how  to migrate from version 1 to version two   so on and so forth so in here so let's basically  click on build steps so I want to set up with   Apache maven and actually let's look into  right so this actually it's using the SDK so   in here what I really want to take from is the  dependency so if I scroll down I can see have   a look declare the SDK as a dependency so here  this is the version in here and if I scroll down   so this is the dependency management which we  are not using but instead we're going to take   the dependency right here so the S3 dependency  like so so let's basically command C on this guy   and then open up IntelliJ and within IntelliJ  open up palm.xml and in healing for this full   screen and under dependencies in here I'm going  to basically add it as the last one now here we   also have to add the version so here version and  the version as it stands I'm going to use 2 20 26.   and if I go back in here have a look 220 I think  there's a newer version actually as I'm speaking   but basically I would say try and use the same  version as I have or probably if this is not   three so basically three which means the major  version upgrade then everything should just work   cool let me go back to IntelliJ and you  could take this right here so this version   as a property but I'm going to leave it as is  and let me just click on load maybe changes   and this is pretty much it next let's  go ahead and learn how to use this SDK cool we have the maven dependency and let me  collapse setup in here use the SDK so if I click   on it you can see that they give us basically  an example on how to use it but one thing that   we need to make sure that we have first is here  if I click on provide temporary credentials so   before making a request to AWS we need temporary  credentials so that we can use these Services   provided by AWS here we have temporary credentials  so if I click on it they basically show us what   we need to do then we have default credential  provided chain so this is when you basically   are initializing this service within Java then  this is where the credentials are retrieved from   so first is from java properties then environment  variables web identity token shared credentials   ECS container and then here easy to instance imbro  which later you'll see how we're going to use this   but what we're going to first use is temporary  credentials so here if I click on it so basically   what we're going to do is we're going to retrieve  the credentials from AWS console and then we're   going to store them in a location called here so  under home dot AWS and then credentials and this   is mainly for local development right then we're  going to add the access key ID the secret access   and I think for us this should be more than enough  and here you can follow you know details on how to   do it but don't worry I'm going to show you how  to do this so let's go ahead together and open   up the AWS console and within the console navigate  to your username so in here Amigos code in my case   then navigate to security credentials and  within this page in here you should see   access management on your left click on users and  in here if you remember correctly before we added   Amigos code gitup actions so now what we're  going to do is we are going to add a new user   and here I'm going to name this user as  Amigos code and here I'm not going to   provide access to the console so this will  be programmatic access only click on next   and for the user group what you could do is you  could say right so this user is only allowed to   use the S3 service for example but in my case  in here I'm going to use the admin so I want to   give full control to all services within AWS to  Amigos code so that user will have full control   and also you can set permission boundaries but  we don't want to do that and if you don't see   admin in here you can create a group  so let's just see if I create a group   and here you can see administrator here provides  full access so basically you then select admin   and then just say admin in here and you should  have the exact same group as I do so this is   the admin in here but let me just show you for  example S3 so in here so you can see that these   are so here S3 full access maybe you just want to  limit the user to have access to S3 and that's it   or S3 read only that's it right so in my case in  here I'm going to give full access as I said let   me just collapse that and select admin in here  and let's click on next and you get a summary   in here so the username is Amigos code and the  group is admin in here no tags create the user   awesome so now that we have the user next what we  have to do is issue the credentials for this user previously when you created the user you would  get issued the credentials but now we have to   do this on a separate step so click on the user  that you just created so in my case Amigos code   and then what you need to do is under security  credentials click on it and in here if I scroll   down we should have access keys so access keys to  send programmatic calls to AWS from the AWS CLI   tools SDK or API calls so a maximum of two  keys active or inactive at a time so let's   create the access key and in here what I want  to be able to is to access through the CLI in   here right so there's no local code there's  no application running on compute service at   this point so we're not going to do this and you  shouldn't really do this actually you should use   I am rolls which I will show you later and in  here so the application is not running outside   AWS so in here what I want is local code and you  plan to use this access key to enable application   code in local development environment to access  your AWS account so this is exactly what we want   and in here so let's just basically say I  understand the above recommendation and click next   in here if you want you can basically add a  tag which I'm not going to and then generate   access key cool at this point you see that we  have the access key as well as secret access   key and we have some best practices on how  to access the key itself so never store the   key in play text disable access when no longer  needed enable list privilege permissions which   we haven't done we just you know said that the  role itself or the user is an administrator   and rotate access Keys often so in here what we  need to do next is take the axis key as well as   secret key and then store them within our local  machine and I'm going to show you where next so in order to store these values the access  key as well as the secret access key if I go   to the documentation in here so under use the  SDK use temporary credentials there should be   a section here so basically set up a local  credentials file for temporary credentials   so here basically what we have to do is  we have to get something like this under   the home directory dot AWS and then a file  called credentials so if I open up my terminal   and within my terminal in here just basically  type CD and then tilde or just CD and this if   I say PWD you can see that this is uses and  then forward slash amidoscope now under it   so if you don't have a folder called AWS just  go ahead and create a folder like so so say make   there dot AWS okay so I already have this folder  so I'm going to say CD to change directory to AWS   and in here if I type LS you can see that  we have credentials so this is a file now   what I'm going to do is I'm going to  open this with VI and then credentials   press enter and in here I do have one profile  which is the default so basically have this   so open square brackets say default close square  brackets and then have AWS access key ID and then   this should be the ID and then do the same for AWS  secret access key and then the access key that was   given to you so what I'm going to do is I'm going  to basically press I in here and I'm going to   press or actually Escape I'm going to press J to  go down W to word and then press basically D and   then W to delete basically the word and press I  now in here I'm going to paste the access key ID   so back to the console the access key so this  guy here copy and then here I'm gonna paste I'm   going to press Escape J and here I'm going to go  back a word and then press d w and basically it   deletes the secret access key I for insert and  let's basically paste the secret access key now   here I'm going to show you the value and that's  because after this video I'm going to regenerate   the access key as well as the secret because  otherwise anyone with these credentials can   have full control or full access on my account and  I don't want that to happen so these values here   they should be kept secret so never show them to  no one so here I'm going to copy and then go back   and then paste and you can find the contents  for this file under the description of this   video so that you can just copy and paste  but let's press Escape and then colon and   then WQ so we want to write and quit cool so if  I press cool if I type cat and then credentials   and you can see that these are the credentials  that we just copy and paste it and this should   be it if you have any questions drop me a  message otherwise catch me on the next one cool back to the documentation in here we have the  credentials out of the way now SDK features so I'm   not going to show you basically the features and  here work with AWS Services if I open this app in   here have a look we've got a bunch of services  and the one that we are interested is Amazon   simple storage or simply S3 so you can also work  with Dynamo ec2 I am Athena Cognito Lambda Amazon   poly sqs Amazon translate and basically all of  these all the services in here so the one that   we are interested is the S3 simple storage service  so basically this section provides a guide on how   to get up and running with S3 but let me just  show you so S3 if you don't know much about S3   but S3 basically object storage built to retrieve  any amount of data from anywhere now here so five   gigs of standard storage for 12 months with the  AWS free tier which is way more than enough for   what we need because we're just going to store  pictures and here you can scale storage resources   you can store across storage classes you can  protect your data and it's easy to manage data   at any scale and more so here they've got a  diagram on how it works which I'm going to let   you basically go through it but literally  analytics data log files application data   videos pictures backup and archival literally you  name it you can store anything within Amazon S3   so basically all you need is just a bucket  so they call it bucket where you can just put   your files in it or your objects so you can  see like the use cases but it's very popular   and it's one of the services that you should  know how to use within AWS because now we   store data more than ever before next  let's go ahead and learn how to have   the configuration for our S3 client that will  enable us to use Amazon S3 programmatically cool within the documentation working with Amazon  S3 in here they give us some code snippet on how   to get up and running with S3 so let's together  take this piece of code and open up IntelliJ   and within IntelliJ let's open a project and  within the backend folder let's open up the   main Java and in here under the root package  let's create a new and then class and here   we're going to say S3 Dot so this is the name of  the package and the name of the file will be S3   and then config just like that so you can  create a package like this so press enter   and you can see that we have the package in  here and the class called S3 and then config   now this class in here so let's just basically  annotate this with ADD and then configuration   and it's going to serve as a means for us to  create the client so here let's say public   and then S three so S3 and then client not  configure S3 client just like this from   software Amazon AWS SDK Services S3 S3 client  so this is the interface in here and I'm going   to say basically S3 client and inside here I  want to paste the code that I've just copied so   just like this now I don't think that we need the  end point override in here so we do need that and   also let's remove the force path style so I think  all we need is the client provide the region and   then say build and then we have the client now the  region this is very important so whatever region   Which is closest to you and where you want your  bucket to reside just choose the right region so   in my case let me just import class and this will  be so basically EU and then I think it's uh EU   and then underscore West one now this right here  if I press command and then navigate into it   so this is just a string like so right so  what I'm going to do in fact is I'm going   to take this string close the region class and  in here I'm going to have private and then I   want to say string and then AWS and then region  and don't say final there say at and then value   and within the value in here so have dollar sign  and then curly brackets and AWS and then Dot and   then region so the reason why I'm doing this  is so that you can basically just change the   region from within the configuration file so  here then we just say region and then value   or actually region of and then the string  is AWS and then region cool so now we need   to Define this guy in here so let's just open  a project and within project open resources   application.yaml and then literally anywhere so  here I'm just going to do it here so AWS colon   and then inside I'm going to say region colon and  then paste the string so EU West one so choose the   right region for your application now back to the  config so in here we are done and dusted with the   region the last thing that we have to do is return  the client just like that and we're good to go   finally let's annotate this with ADD and then Bean  just like that and now we have the client in here   later we're going to do some extra work in  here because we need a second implementation   that will serve for basically running the  application without has having to connect to   S3 directly so maybe we don't want to  use the credentials to AWS and in fact   we shouldn't have those credentials locally  so we're going to have a fake implementation   that will store files to our local file  system and also it will be used for testing   for now this is okay and later we will change this  this is pretty much it catch me on the next one now that we have S3 config let's together  create the S3 and then service so here I'm   going to say S3 and then service and this  class right here so we need to annotate   this with ADD and then service and this class  will have two methods you will have a method to   upload or to basically store objects and want to  download objects so let's together here basically   say that we want to have the clients so the  client now allows us to interact with S3 so   private final S3 and then client that we've just  configured and let's add this to Constructor and   now in here we can basically have a method to  put or to store objects to a specified bucket   within the documentation for S3 in here if  I scroll down they have topics on buckets   operations and an object operation so here you can  create a bucket so through Java code in here and   basically what you do is just this right but  we're not going to do this because you should   never create buckets through code and you should  have a team or maybe the infrastructure team the   devops team manage the infrastructure for you  I.E creating those resources through code ie   infrastructure as code with something like  terraform or palumi or cloud formation so   in our case let's look into object operations and  I'll show you how to create the packet in a second   but in here upload an object so here they give  you the actual code on how to upload an object so   here so we have the bucket then all you do is you  just have a put request and job done so what we're   going to do is let's take this go back and in here  let's have a method so I'm going to say public and then void and then put object and we're going  to fill in these in a second but so here let's   just paste the code let me put this full screen  let's import put object request and here we have   to pass the bucket name as well as the key so  these will come from so if I extract this to   a parameter so that will be the bucket  name and the key will also be coming from   the parameter just like that and what we  need to do in order to store to the bucket   is invoke the S3 client Dot and then put object  and then pass the object and and request in here   and more important the actual data so what we  want to store so what we're going to store is   the request body so here just say request body  and then from bytes and then the actual bytes   right or you could just say the file  for example here right as a byte array   so this guy here let's extract this to  a variable and this is pretty much it   so if you see that this is quite easy so we have  this method that allows us to store files to a   specific bucket with a given key and the file  in here which is a byte array cool next let's   implement the download functionality which  basically is just getting the byte array back so in here I'm within the official documentation  for S3 and basically this is what we've just done   with put now what I want to do is to have the  ability of and also you can upload in Parts using   multi-part upload which we don't need so usually  you do that for large files so here download   object have a look it's so simple and all you need  is basically just this right so let's just take   literally everything and then within IntelliJ  let's have the method here so I'm going to say   public and then here this will be byte so this is  what we get back and right here so we store the   file and we get it back right as a byte array  so here I'm going to say get and then object   or you could even say download the file but let's  just say get object and here we need to pass d   uh actually let's just use IntelliJ to generate  those so paste the code in here import class and   the bucket name here I'm going to press option  command and then P for parameter the same for key   there we go and in here so instead of S3 this  will be S3 client or we could even just say   S3 actually it's a better name right so S3  just like that so S3 S 3 S3 I could use a   a refactoring but that's fine so S3  get object and this is it right now   what I want to do actually so if you look  into the return type for this this is a   response input stream so I'm going to say  response right so response or res in here   from the response we can actually get the  bytes right so here we just say object   so here we just say risk so here we just say  res Dot and then have a look read all bytes so   this in here we need to basically encapsulate  within try catch so here we have the bytes   so here let's just surround this with try and then  catch and basically in case that there's nothing   there then it just throws an exception right so  throw in the new runtime exception and then the   exception in here now obviously if you want you  can add some logging in here to know exactly which   bucket and what key that you basically failed to  look at but for our case I'm just going to leave   this as is and that's it so now we can say return  and then bytes or if you prefer we can inline this   just like that which looks much better and this  is the implementation tool getting an object   if you have any questions drop me a  message otherwise catch me on the next one cool before we write any more code what I want  to do is I want to make sure that this indeed   does work so in order for us to test this what we  need to do first is to write some code that uses   these two methods but also create the bucket  itself so let's create a bucket So within AWS   console go to the main page in here and what I  want you to do is search for s and then three   and here scalable storage in the cloud also  added to favorites and now it's right in here   so click on it and in here you can see that I do  have a couple of buckets in here so don't worry   too much about these buckets in here but what we  want to do is to create a brand new bucket so just   click on create bucket and if I put this bigger so  in here so bucket name in here just make sure that   you type anything so in my case let's just say FS  for full stack Dash and then Amigos and then code Dash and then customer right so basically  this is mainly for customers and here let's   just say test maybe you want to have one for  a different environment so maybe development   staging production so let's just basically keep  this name as is also keep note of this name so   I'm just going to copy and in here so AWS region  so just make sure you select a region which is   the one where you are deploying your services so  in my case EU Island IE EU West one and I want   to leave everything as default no need to change  anything and right at the bottom create a bucket   cool now in here we should see the bucket so  where it is so here FS Amigos code customer   test so FS for full stack if I click on it you can  see that there are no objects and obviously we can   upload the files manually if we want to but I'm  going to show you through code in just a second   cool next let's write some code to test  that we can indeed upload files to S3 okie dokie so we have the S3 bucket in here and  which is this one actually and uh basically what   we want to do is within IntelliJ we want to write  some code that will basically upload a file to   the bucket so basically we just are testing things  and we haven't done this one here nor the row nor   storing to the database and these will come later  so let's open up IntelliJ and within IntelliJ   let's open up the main so here open up the main  method and within Main let's basically I'm gonna   comment all of this So eventually I'll put this  back or let me just say extract this to a method   and here create random and then customer cool so  let me just comment this and within the runner   method here itself what we're going to do is  let's basically have the S3 service so s 3   and then service just like that and what we're  going to do is we're going to say S3 service   Dot and then put object the bucket name has to be  the exact same name of the bucket so if I go back   which is FS Amigos code customer test and  then paste that so that's the bucket name   and also in here so let me just put this on a new  line also we need to pass the key right so here   I'm going to say Foo so that's the key and finally  the byte so what we want to upload so in our case   let's just say hello and then world and then store  this as a byte array and literally we can store   anything into the bucket cool so basically this  here stores and we should be able to get the item   back so here let's basically say S3 service Dot  and then get object the bucket name is the same   so the bucket name is the same like that the  key is also Foo the same and this is it right   so basically this now is bytes so now if I extract  this to a variable this is the object so I'm going   to say object so object like that and what we're  going to do is south and then hooray and then Plus   and here I want to say new and then  string and then pass the object inside   cool so this is how we turn  a byte array into a string   now if we run this we should see that we get back  Foo we should see that we get a low world back   let's run it so here right click run Main  give it a second so it's going to start   and hooray have a look so we have hello and then  world and this means that we've managed to upload   a file into S3 let's check it out so before we  had no objects now if I reload this page in here   you can see that in a second why is it slow  my internet is so rubbish seriously cool   have a look so this is full and basically we  can download this so click on it and you can   download if you want but inside is going to say  hello world which is what you saw in the console   and to be honest this is it and also the path  right so basically this is the bucket and this is   the key itself now if you want you can store these  you know as a folder structure so you can say   forward slash and then images and then full  dot PNG or dot txt whatever right so first I   just stored within the root of the bucket itself  now what I want to show you is within dot AWS if   I say VI in here and then credentials and  then here if I go to the end of this file   and then delete so I'm going to press X so delete  a Escape WQ and if we try to run our code again and in here I actually have the AWS plugin  installed which tells me right so this   has an invalid database  connection and if I show you the plugin so I think plugin and then installed I  think and I think it's this one AWS toolkit so   it will basically tell you whether uh there's  something wrong with your configuration or not   so go ahead and install it and also you can see  so you can manage buckets and upload and download   from packets as well so here I'm just going to say  okay and what I want to show you in fact is if I   reload the application this will fail so give  it a second and boom have a look an exception   has happened and if we look into the error so  in here scroll up or actually down let's just   try and read the error so here have a look right  the request signature we calculated does not match   the signature you provided check your key  and signing a method and have a look 403. so you can see that how it's important  that you have the credentials configured   correctly because otherwise you won't be  able to access the resources within AWS   and also our key is admin which means you  can do anything right but if we restrict   it and then try to access a resource which  the key is not allowed it will also fail   awesome let me hide this and go back  to the terminal and VI credentials   so in here so if I go to the end say I so  this was actually t a and then Escape WQ and um this is it let's run once more there we  go and you can see that reloaded credentials   and in here so the key let's  just say here for example full   and then let's just say full forward slash bar  and then forward slash and then Jamila for example   right so this right here is the key and if you see  the result of this so let's just run it once more there we go so we have Hello World  which was stored if I open up the bucket   and here let me just go back now  check this out so full is a folder   bar is yet another folder and inside we have  Jamila which is the file that contains hello world   this is pretty much it catch me on the next one before we move into the controller  and add business logic what I want   to do is I want to basically have  this bucket name as configuration   so open up application.yaml and in here  you saw that we have AWS and then region   let's have S3 in here and then  within S3 we're going to have buckets just like that and here we're going to have a  bucket and here called customer and then here   and then in here we're going to have the  basically name itself right so the idea is   that you can have different profiles and you'll  see this later and you can change the bucket name   without having to change code so that is the  benefit of doing this now let's go to Project   and in here create a new class under  S3 and we're going to call it S3 and then buckets press enter here name this as  ADD and then configuration and also add and then   configuration properties and this will have  a prefix of AWS dot S3 Dot and then buckets   so don't worry about this in here but this right  here AWS dot S3 dot buckets is AWS dot S3 Dot and   then buckets and then we can have these as fields  or actually the key as field and then whenever we   invoke together we get the bucket itself  so let's go back and here we want to have   a field so private don't say final here just say  private string and then customer and customer here   is the same as this one here right then let's  basically have the Constructor so add Constructor   and oh actually I don't even think we need to Constructor  here so there's no need for Constructor so   just have the getter and Setter right  so here get it and setter and job done   now what we can do is we can  take S3 buckets go to main   and instead of saying this we could just inject  basically S3 buckets like that import that and   now I can just say so instead of this nonsense I  can just say S3 buckets Dot and then get customer   so let's basically try and  reload and see whether this works we should get Hello World back and yes we do  cool so you can see that this is a much better   approach because later we can have a different  file so application Dash Dev for example with   a different bucket name and the same with  the region and basically you can take this   and just change it according to your bucket and it  should just work that's another Advantage as well   cool this is pretty much it I think  I'm going to let's just take this here   and extract to a method and then test bucket  upload and download and we're not going to   do this anymore let's just uncomment the create  random user and let's get rid of the service as   well as the buckets but be aware that if you want  to use them you just have to import them in here   right because this is is expecting them right so  this is pretty much it let me just put this full   screen so you see the entire code if you have  any questions and drop me a message otherwise   next let's go ahead and create the controller and  then the service and start connecting the dots cool so I know that from within IntelliJ we can  run the application and we can store images in   here which is nice this bit here this will  be later what I want to focus now is on the   controller so we want to expose an API endpoint  to clients and also we want to store the image   associated with a customer so let's first  tackle the controller so in here open up   project and then open customer controller and  in here we're going to have two methods so one   two download and the other one to upload so let's  start with the upload so in here let's say public   and we're going to say void upload and  then customer profile and then picture   and this in here will have the ADD  and then path and then variable   so we need the customer actually in here so path  variable and put this on a new line like so this   will be the customer and then ID and you've seen  this which is basically the same thing as this one   and let's just take this and in here we're going  to leave this and in here we're going to change   this as Post in here so post and then mapping  and this will be forward slash and then profile   Dash and then image so let's just say profile  image instead of picture so profile image and   this in here will be the ID which is an integer  so integer customer ID and also what we want   to receive is so the way that we're going to  receive the file is by receiving the multi-part   file and this will come as a request and then  param there we go and this will be called file   and this will be a multi-part and then file so  make sure that it's the first one from Spring   framework web multipart and here just call it  basically multi-part file or just file if you want   add a space in there and this should be it now  because this is a file we have to say that this   method in here so this add and then post mapping  and don't worry we're going to add integration   tests to make sure that everything works so here  we're going to say consumes so this consumes media type Dot and then multi-part  and then form data value   cool now at this point in here let's just  invoke customer service Dot and then upload   customer and then image we're going to pass the  customer ID as well as the file just like that   whoops no like that but like this and we'll create  this in a second so these two methods and we'll   create this method in a second so the other method  that we want is let's just duplicate everything   and this will be get mapping so get and then  mapping so here we can get rid of this all   together and note so in here note the value  okay so here no need for value and the reason   why we have value in there is because in here  we have consumes as well so this will be a get   basically to get the profile image this will gives  us the byte array just like that I'm going to say   get and then customer profile picture no need for  the multi-part in here and let's just say return and then customer service Dot and then get customer and then profile let's just  say profile get customer profile image there we go we pass the customer ID and also  upload customer profile image in there cool so   this should be it for these two methods within  our controller next let's tackle the service cool in order for us to create these two  methods we did IntelliJ let me just right   click show context action create method and it  takes me straight into the method in here on the   service class let me go back and do the same for  get customer profile image and there we go cool   so in here this is going to be straightforward  because we already have the service that allows   us to upload and download so scroll to the  top in here and what we need is to have the   private final and then S3 and then service so  the one that we just use within the main class   add this to Constructor here just say  refractor will go into the test in a second   and this is it if I scroll down so what we  need to do in here is before we upload we   want to get the customer or in fact check  whether the customer exists so let's just   copy some code and we could basically  extract this to a variable and basically say check if customer exists cool now we can reuse  this so here I could say check if customer exists   or let's just rename this to or so refactor rename or and then throw there we go so here pass the  customer ID and if this is the case it's just   gonna throw and execute the remaining lines now in  here what I want to do is I want to say S3 service   Dot and then I want to put so this allows us to  upload the bucket so the bucket will come from   let's scroll up in here and private final  and then this will be S3 and then buckets   or we could just call it buckets to be honest  so that we're not tied to S3 but that's fine   so here scroll down and where is it so it's not  even the lead customer it's this method right   here right so here we want to get the bucket  so I'm going to say S3 buckets dot get customer   and the key will be under a folder called profile  and then images forward slash and then percent s   forward slash percent and then s dot and then  formatted and we need to pass the customer ID   but also right so this will be customer ID so that  we organize things by customer and then here the   ID for the picture so the ID for the picture so  this will be you with Dot and then random uid   Dot tostring and finally so comma so literally  after this so basically this close in parenthesis   so comma there and the actual file so  basically say file Dot and then get bytes   now this here this is a checked exception  so let's just surround we try and catch   so surround we try and catch and I think  this is pretty much it right so also let's   extract this ID here so we're going to  extract this so I'm going to say profile and then image and then ID and let's put this out and let's take this and put it outside like so  cool so if it fails then we want to throw so throw   new and then let's just say run time exception  so at this point I'm not worried too much about   exceptions but if you want to organize these  exceptions and have better messages you know   that within so if I show you so exception  we have the where is it default exception   Handler and in here you can basically handle  all of the exceptions and have proper error   codes but for now let's just get the meat of S3  and file uploads and downloads up and running   cool so let's go back to customer service and  this is it now one thing that we have to do is   so upon completing this so here let's just have  it to do so to do and then store and then image   yeah so we'll do this in a second cool next let's  go ahead and Implement get customer profile image cool now let's Implement get customer profile  image and I've just basically need to make sure   that this store image so this to do here is to  postgres so post address and basically store   profile and basically store profile image ID so  basically profile image ID to postgres or 2db   cool so now get customer in here so what we want  to do first is get the customer so if I scroll up   you can see that this is how we get the customer  so here we just copying code I left copying   code so here we're going to paste that we're  going to get the customer and that's it now   we need to do few things so one is so here I  want to say to do and we'll do this in a second   check if profile image ID is empty or no   right so if so then we say that the customer  doesn't have a picture associated with and   then what we do is we get the we get the  profile image ID so here let's just say string   and by the way you are free to use VAR for example  okay so let's just use VAR here so VAR and then   I'm gonna basically say profile image ID for now  so this will be to do as well in a second so to do   and we can say return so in here return and then  S3 service Dot and then get object so D bucket is   S3 buckets Dot get customer and then  the key so the key is the same one   that we stored so where we put the object  itself so let's just paste that in here   and this is pretty much it and then basically end  this with semicolon and basically this right here   so if I extract this to a variable so you see  so this is the picture itself so pick sure right   or image or profile image profile image and then  profile image so it's easy for you to see this way   and yeah so this is pretty much it obviously  here we're not doing anything with customer   and that's because we are going to in  a second right so this customer will   contain so I think is it this customer so  select by D where do we perform the mapper   so let's have a look yes I think we  need to even map this customer in here   so yes absolutely right so here let's just say  dot and then map and then I think it's close and   then I think it's customer roadmaper cool so  then this will basically gives us a bunch of   fields excluding the password and stuff that  the client doesn't really need to know right   so we'll touch on this next but basically  this is the implementation next before we add   the profile image to the database let's quickly  open up the test class so customer service test   and you can see that this basically it's  complaining now so let's just take this   and basically put it on a new line like this and  what we need to do really so quickly is have a   mark so I'm going to say at and then mock for  the S3 service so S3 service and also a mock for   the so private and then S3 and then buckets cool  so we're not even writing tests at this point   because we're not done but I just want to make  sure that we fix the compilation error cool so   now that we have everything ready next let's worry  about storing the profile image ID to the database cool let's go ahead and shift our attention in  terms of storing the profile image ID to the   database so we want to take basically this value  in here and then store it against the customer   that we upload so that when we perform the get  in here we know exactly the key that needs to be   assembled in order to download the latest profile  image so the first thing that we're going to do   is open a project and open DB migration and  inside we're going to have a second migration   so I've just copied or in fact let's just  right click new and then do we have SQL in here   so SQL no I don't think I can search but basically  let's just say V and then 2 underscore underscore   add underscore customer Pro  file and this score image and then dot SQL cool so this is the SQL in here  and what we want to do in here is simple so alter   table customer so this is the name of our table  and then we're going to say add and then column   and the column in here will be profile  and the score image and the score ID and in here let's just say VAR char and  then 36. so I think that's the value or   the length of uits so here don't even  say not no because that's not the case   right and also this will actually fail because  we have customers with empty profile pictures   right so this should be something optional  and also I don't want the profile image ID   to have duplicates so to mitigate against that we  just say alter and then table and then customer and here we're going to  say add and then constraint and here we need to basically  give a name so this will be   unique underscore and then profile image ID  and then just say unique and then here so let's   basically put it on a new line I think just like  that and basically we have parenthesis and where   this is unique is on the profile ID just like that  cool and this with semicolon and we are good to go   cool now let's open up the customer class so  here customer and then class so basically this   class or this entity and if I put this full screen  so in here what we want to do is so let's start   with the column so here scroll down and after the  password just say private and then string profile and then image and an ID this will be a column just like that and here this  will be unique equals to true   and also we want to do the exact same thing as  we've done with email so here let's just take this   comma paste that and then this will be the  column that we've just created which is this one   so where is it this guy here so the  column and what do you call it so we said   let's just switch this around so profile  image ID and the score and then unique   so let's take this go back and paste it  here and now we can basically match the   schema with our entity which is really nice  also so the column actually is this so that's   the column in here so the same way that we've  done with email nice now let's basically remove   so we're going to remove the two string in  here we're going to generate this once more   there we go and also the equals and hash  code let's just get rid of all of this   and before we create that actually let's just say  get the image profile and also set the profile   right and now at the bottom let's just create the  equals a nice code so next next next and then next   and also two strings so two and  then string select all of those   and possibly we don't need the password in here  but I'll just leave it and this should be it   and also I want another Constructor with basically  all these so name oh actually sorry this one here   so ID name email all the way to  gender so let's just take all of that   so we're going to have another Constructor  that basically takes the string and then   profile image ID and what we're going to do  is instead of setting these manually we could   just say this and then pass basically there's no  Auto completion ID name email and then password   age gender and finally we say this dot  profile image ID equals to profile image ID   awesome this is pretty much it now let's  try and start the application so run Main   let's just run this and hopefully everything  should just work and it failed so let's have   a look why enable to create constraint on  so it says that the column profile image ID   not found oh yes so it's not found because so  basically this is the name so profile image ID   in here so instead of actually not here  but here so I thought it was the SQL   column in here but now it's the  entity so paste that and then run it   fingers crossed should just work and hooray  you see that it works and we have an insert   which comes from the main class awesome this  is pretty much it catch me on the next one cool if I open a project and  remember we have the customer   not customer dto but customer Dao and in  here so in here we have select all customers   and basically when we select customers we're  gonna have to select the profile image ID as well   and also if I open up where is customer service  so customer service in here so we need the ability   when we upload we want to update the customer  profile image ID with this new one which is   basically here right so let's start there and then  fix the select So within customer Dao we're going   to have a new method in here and the reason why  we have this interface is because we are using   both jpa and jdbc so here let's together  say void and then update customer profile   image ID in here we're going to take  the ID right so image profile or profile and then image and then ID and then integer   and this is the customer ID  so customer ID just like that and let's fix in here so customer  ID so that we are consistent   and now we need to Implement basically  customer jdbc data access service   we need to implement methods update so this one is  straightforward and is a symbol AS saying VAR SQL   and the SQL within it is going to be update and  then customer and then here set and then profile and then image and Discord ID equals to and then  a value basically cool so we have basically the   SQL statement in here and all we have to do is  just say return or not even return because this   is void so we just have to say jdbc template Dot  and then update SQL and here we have to pass the   arguments so profile image ID and customer ID  and there we go you can see that this actually   now is highlighted for whatever reason which  I'm not entirely sure so let's just indent this   and hold on so I think what I want is it that  it's weird it's at the same level as this one   no so why why are you playing up IntelliJ so this  is pretty much it now for the other implementation   so customer dial then we have the jpa so this  is quite easy so let's just Implement methods   and in here what we are going to do so let me  just expand all so what we're going to do is   within the repository so customer repository  we're going to have one method in here so   this will be at and then modifying and at  and then query so we want to have a query   and the query for this will be so I think this  returns an integer whether it worked or not or   the number of rows affected actually so here we're  going to let's just say first set and then profile   and then image ID so we need to receive the  string profile image and then ID and then   the customer or actually integer customer ID and  within the query itself so this is where we have   basically jpql so update and I think we can do it  uppercase so update and then customer and then C   set and then C so the customer dot profile  image ID equals to question mark and then one   where C dot ID equals to question mark and  then two so this C right here is this one so   this is how it works and then from here we can  basically access the attributes to perform our   query cool so now we have this query right here  so set or we can even say update let's just say   update profile image ID and let's go back to the  data access service scroll down and in here we're   going to say repository so customer repository  Dot update profile image ID pass in D image ID   and the customer ID and this is it we also need  so we have a third implementation customer list   which at this point I think we might just delete  it all together because we're not using this right   so this is just a static list in here so I'm going  to leave it here just in case you want to play   around but in here I'm gonna say to do implement  this cool and let me just add an emoji here   and then this all right cool so this is pretty  much it one last thing that we have to do   is within the customer jdbc data so this  guy here within this selects we have to   select basically the new column that we just  added and that's what we're going to do next now let's go ahead and open the customer jdbc data  access service which basically uses jdbc and in   here when we select all customers let's include  our brand new column called so if I show you the   migration so this is a new column so let's just  take this command C go back and then paste that   cool now I think we also need to select it here  comma and then there and so when we insert we   don't have to insert the new column so also we can  get rid of this right here so we no longer need   that or in fact it's just because of this right so  we can get rid of all of that so we don't use that   cool so let me just scroll down so exists we don't  need delete also so at this point I'm going to or   you know what let me just leave the results there  cool so maybe for debugging purposes but usually   you wouldn't have these print line statements  so let's scroll down update customer all good   So In Here Also select user buy and then email  we want to select the new column just like that   and we have this brand new method that we  just added update customer profile image ID   now what we want to do is  the following so we want to   change so if I show you where is it so we have  the customer row mapper So within customer   real mapper we have to change it slightly so  now here we need to include the new column   so here say comma and we're going to say RS Dot  and then gay string and then paste the new column   now remember we have this new Constructor so this  one here that we added so that's the reason why   we did this so that we can also provide the  profile image ID cool and I think this should   be it we'll run the tests and if there's any  failures we'll fix them in a second but I think   this should be it if you have any questions drop  me a message otherwise catch me on the next one all right so let's go back to our to-do's in here  so within upload customer profile image and their   customerservice.java and let's fill in the gaps  but as I said we'll focus on testing and make   sure that basically everything is working so in  here what we have to do is we have to basically   store the profile image now the way we're going to  do this is by invoking the Dao so customer Dao Dot   and then update and then customer profile image  ID so you see how this is coming together so here   the profile image ID is the profile so profile  image ID just like that comma and then customer ID   cool so basically what we do is  we check if the customer exists   then we generate the profile image ID we store  that within AWS if this fails then we don't update   if this exceeds we basically reflect that in the  database and when we get the profile image in here   we have the customer we perform a select customer  by ID we have the customer row mapper so customer   dto row mapper if you look into this guy here  this needs the ID so let's just here say comma   and then customer Dot and we have the profile this  guy here now obviously the dto itself right so the   dto itself doesn't have the ID so let's go into it  in here and we can refactor let's just refract it   like so so right click and then refactor change  signature in here I'm going to add so add so   click on the plus sign so this will be string and  the name is customer profile [Music] or profile image ID and for now let's just refactor  this cool so basically indent things   and now so wherever we use the dto and you can  see that there's a bunch of tests in here that   we might have to go into and change this around  but if I go back to customer detail mapper now   you can see that this error went away now let's  go to customer service and within customer service   in our beautiful method in here so we get the um  customer here so at this point we map the customer   to the D dto and now here we have the profile  image ID so what we can do is so in here let's   just get rid of this all together and then put  it here so customer Dot and then profile image ID   and also we want to check right so if  so if for whatever reason the customer   and then Z profile image ID so  here I think we can say is and then blank in here so if it's blank right we  basically throw so we're going to throw   new resource not found exception and then let's  just take this put it here on the new line   and I want to say customer so customer  with ID and then blah and then profile image not found instead cool and this is pretty  much it so obviously here if you want I think we   can change this to a VAR so I wanted to use vars  throughout this so yes we can and also if you want   you can just return but let me just keep this as a  byte array so that you know the data type for this   cool as I said if you want you can inline this if  you prefer just like that I think it's better but   for readability I'm going to leave it as so and  this is pretty much it catch me on the next one cool before we move any further let's just  try and run all tests in here so let's open   up tests and not the integration tests for now  let's just run all the tests and the customer   so I want to make sure that everything works  and yes so we have a compilation error which   we have to fix and that's expected because  of the dto so in here remember so I said that   so have a look so we have the customer dto  so this guy in here I think is going to be no   so there's no profile image there if I press  f2 this takes me to the next error so have a   look F2 next highlighted error and this  also is the dto so I'm going to say no   just like that and let's  try and run the tests again cool so I think that was it  now it's running all tests   and everything passed apart from the row mapper  now this roadmaper let's have a look why it's   failing so click on difference and it looks  like the password is null and the profile   so okay so this is no so why is it a password no  so I thought that we had this fixed but maybe not   so let's just in here let's go to the customer  row mapper so command e customer row mapper   and in here so we made a change to include the  profile image ID that's fine if I open up the   test class for this so we didn't change the  test class so here we don't have the password   right so I think that we forgot to add the  password before and if we look into the customer   so probably it's because  now the two string contains   basically everything right so what we are going  to do now actually so let's just basically say oh   in fact we should have actually so if you look  into customer row mapper RS dot string right   so this is actually returning no okay so that's  why it's now so let's fix this so let's here say   basically duplicate this and  then when and then password so we want to return password just like that  and also so yes so also we're not even comparing   the new column right so if you want you can  basically add it as well so this was customer   or actually it was a customer so what was it  so here profile image ID so profile image ID   and then here I'm going to say basically I'm going  to say profile image ID or actually let's say one   two or two two two five twos cool so this now so  we can change this to B five twos and let me just   put this all in a new line just like that so this  is much better oops like this like this and let's   now try and run tests so in here click on run  and I want to run only the failed tests for now   and yes so this works cool so let's  run all tests once more so in here   I think yeah so if I close  that let's run all tests   just to make sure not that but all tests so  open project and then this will be customer there you go I think yeah so 38 tests should  pass Bingo and now let's basically run everything   including integration tests so at this point  make sure that your database is up and running   with docker so the integration tests I think  they they run already yes one of them did and the   authentication ID or the authentication ID also  run and you can see that we do have every existing   Test passing cool so one thing here so customer  service so this guy in here so customer service   so not the test but the actual class so we have  get customer profile and also upload customer   profile in here and within S3 so S3 where's  S3 so Java not on the test so in here so S3   buckets so this doesn't need any tests S3  config probably this doesn't need any tests   and S3 service so this we can test this  here as well right so next let's go ahead   and focus on testing so we're going  to write unit as well as integration   tests if you have any questions drop me a  message otherwise catch me on the next one testing is something which is kind of out of  the scope of this crash course but yet very   important so you saw that we wrote lots of  code but how do we guarantee that the code   that we wrote does work well we have to write  tests okay now I always ask this question would   you ever board on a plane that hasn't been tested  and the answer is absolutely no right so there's   no chance that you'd risk your life so it's  the same thing with software so in this crash   course I'm going to skip testing all together  um the actual videos but I'll show you that I   actually you know tested the entire thing  including unit testing mocking as well as   integration tests right so this is the beauty so  once you test everything then you have you know   um you know you're a bit confident um in the  sense that you know that your code will work   if you deploy to an environment such as  development or testing or production so   make sure to test your code and as part of the  full start course I covered testing from the   ground up and basically everything you need  to know about testing but testing is out of   the scope of this crash course so um yeah this  is pretty much it and catch you in the next one if you've managed to get this far in here what I'm  going to do is the following so let's look at the   stop this and open up the terminal and in here  what we're going to do is we're going to say git   checkout and then Main so basically this now will  contain all the tests so I'm not showing you how   to write all the unit tests as well as integration  tests but I just want to show you that we do have   a bunch of tests in here so I'm gonna leave things  as this in here and so the changes that I've made   so if I open up the test folder and then S3 you  can see that we have a bunch of tests in here   and also for customer we change things and we  tested everything fully as well as an integration   test under so under Journey and then customer ID  and if I scroll down in here you should see that   we have so if I scroll down in here so can upload  and download profile pictures and basically we   test all of this now I would say from this point  onwards right so everything should just work the   same so when we deploy things but if you want to  see how I wrote the tests and whatnot just check   out domain and then Carry On from there okay so  in here so let me just basically run all tests   and you'll see that whoops so in here  why isn't this working right okay cool   so let's together click on file and then  invalidate caches and invalidate and restart   there we go and hopefully this should  fix itself just give it some time now   cool still that didn't fix so let's  try to in here reload the project and there we go cool so that fixed the problem  so this sometimes you'll encounter these issues   so here we've just fixed during the course which  is awesome and cool so let this finish and now   we are able to run the tests so let's just run all  tests and tests it's vital in any application okay   so if you don't know testing so I'll urge you  to learn about testing so you can see 56 tests   and everything just ensures that we have the  correct implementation awesome so this is pretty   much it if you have any questions on testing  as always you can ask and I'll try my best to   advise you otherwise you can check the courses  that we have on testing and as part of the full   stack where we learn where you learn all of this  I'll show you how to basically test so in S3 what   we've done is we created a fake implementation  which is used for unit testing purposes so this   actually stores images in our local file system in  here you can see that this is the implementation   for basically running the application locally  without us having to connect to AWS directly   cool I'm going to leave it here let me just close  this and this as well and this is pretty much it what I want to quickly mention is if you  want to upload larger files you need to   configure the application.yam also and the spring   and then have the servlet and then here include  multi-part Max file size Max request size and   also Max in memory size so with all of this  you will be able to work with larger files   so in my case 10 MB is absolutely fine but if  you are uploading videos and other files then   you might to increase these numbers so go ahead  and add these so that you can work with larger   files and actually before I go let me just show  you that the default so max file request size   so the default is 1 MB in here the same for  this one oh this one is actually 10 MB and   then the max in memory is 256 kilobytes awesome  this is pretty much it catch me on the next one for this section what I want to implement is the  ability for us to update the profile in here so   if I click on update and what we want to have is  the ability of dragging and dropping any picture   in here so if I basically get these pictures  that I have in here and this is Maisha and it's   a male and let's say that here I want to take  this picture and then upload just like that so   I can drag it actually in here or I can click  in there but eventually this should upload so   I think it was my issue so let me just search for  Maisha there we go and you can see the animation   now in here has the picture updated so again if I  click on update you can see that the picture now   it's present in here and I can basically click  in here and this will bring the pop-up where   I can where I can select pictures if I cancel  and basically this is what we want to achieve in order for us to upload files or in  our case a profile image from our react   application to our backend we're going to  use this Library called react Drop Zone   so this is a library that basically makes it  super easy to create drag and drop zone for files   and in here you can see the usage and you can  find the link in the description of this video   but basically it's very simple and you  could just use the hook in here or the   component and then you have the ability  of uploading files to any destination   so let's go ahead together and install the react  drop zone so let me just take this command in here   go back to IntelliJ and within IntelliJ if I  open up the terminal and in here we can open   a new session and let me CD into front end and  then angular and then react and inside let me   just paste the command so npm install and then  dash dash save react and then drop zone press   enter and to be honest this is pretty much it next  let's go ahead and learn how to use this Library cool you saw when we run the back end we  basically get a customer which is added   to our database so in here let me just take  this customer and this is from the logs from   our spring blue application and let me first  log in so here localhost and then colon 5173 and I want to add the email that I've just  copied and the password is just password and then login and here if I go to customers you  can see that we have Christopher and basically   this is what we want to implement right so  Christopher um basically this is a random name   which is generated but basically this picture  right here is randomly generated and we want to   have the ability of when we click update and here  we want to have the Drop Zone component in here   so that we can upload a picture to our backend so  let's open up this component in here and add Drop   Zone and in here if I Collapse this and then open  up the front-end folder we have react and within   react we have SRC components and then customer  and in here we have the update customer drawer   as well as the form so what I'm interested is the  form itself so here let me just collapse this and   if I scroll down you should see that we have the  form itself in here update customer form now here   at this point is where we want to add the Drop  Zone component so actually just before here so   basically if I say H1 for example in here and then  say hello go back you can see that we have hello   in here right so hello but we want this to be the  Drop Zone where we basically can upload a picture   So within the documentation for Drop Zone you can  see that the usage is quite straightforward so   they basically give you the option of using the  hook or the wrapper like so so what we're going   to do is let's it doesn't really matter which  one you use but let's use the hook in here so   just take this in here so take this command C and  you can find this in the description of this video   and then go back and just before this form let's  have the drop zone and by the way so this right   here I'm not going to have it as a component so  that you can reuse it I'll leave that up to you   so I'm just going to leave it in this file for  now so this is where we need it so I'm just going   to leave it here so here I'm going to leave the  name as my drop zone you can rename this if you   want then we have to import the use callback so  let's just import that and use drop zone as well   so let's just import that from react Drop Zone  just like that and this is pretty much it so now   at this point let's also so rename this so drop  the and then picture here and then drag and drop   and then picture here or click to  select picture select and then picture   there we go so this is much better  and what we're going to do for now is   take this so actually let's just change this  from const and then my drop zone equals to so basically equals to a function this is an arrow  function actually and this is much better cool so   now let's basically in here instead of hello  we're going to say my drop zone just like that   and this can be a self-closing tag so let me just  remove all of that there we go and if I open up   my web browser now you can see that it says drag  and drop picture here or click to select picture   so basically I can drag a picture or I can click  to select so here if I select or click my bad you   can see that it opens the window Explorer where  I'm able to pretty much just select any picture   cool let me cancel out of this next  let's style this component in here all right let's change this component so it looks  a little bit more appealing so let's open up   IntelliJ and within IntelliJ if I open up my drop  zone in here and what I want to do is you see here   we have this div in here so I'm going to change  this from a div into a box in here so just say box   and this comes from Chakra UI and at this point I  can basically customize it so here so here within   here basically within the Box itself right so I  want to add the width so w and this will be equal   to 100 and then percent I also want to align  so text and then align and this will be Center   and let me just format things and also let's add a  border oops Border in here and the Border will be   dashed let's also Define the border and then color  so border and then color and this will be Gray   and then let's say great.200 let's also add  some padding and here I'm just going to say six   and you can basically fine tune these numbers  according to your liking let me also say that this   box will be rounded so rounded and here I'm going  to say let's just say MD for medium So within   quotes just like this and also the Border radius  so border and then radius so this should be in   here so color and then the radius so this should  be something like three Excel so three Excel   all right so let me just put that in there  like so now scroll down where we actually   use the Drop Zone let's cut this and I'm going  to encapsulate this within a V and then stack   just like that and within this v-stack let's  add some spacing so you can say spacing   and here I'm going to say five let's also  add margin and then bottom so MB and this   will also be five now if I paste the Drop  Zone like so and let's basically save this   go back and you can see how this is  looking so it's looking really beautiful   so let's also add an image in here in case there  is one so let's go back and in here I'm going to   say image so make sure this comes from Chakra as  well and in here we can basically pass few things   so one is the Border and then radius so this will  actually be full so I want this to be completely   a circle and then box and then size let's say 150  pixels so 150 pixels like so and object fit so if   the image is too big I want it to fit basically  so I'm just going to say cover so cover and we   also need the SRC which we'll add in a second but  this is pretty much it so I think for SRC we need   to add an empty string in here cool if I go back  to Chrome you can see that basically we have this   circle in here which is an empty image and when we  drag and drop the picture this right here should   be reflected next let's take the picture that  we upload in here and save it to our backend cool The Next Step that we need is when we drag  the picture in here or when we select the picture   to upload it to our backend and then from our  backend it goes to S3 or to our local file   system depending on the implementation so let's  open up IntelliJ and within IntelliJ let's open a   project and within project open services and here  client and in here we're going to have two methods   so let's basically say export and then  const upload and then customer profile and then picture and equals to A sync and in  here we need to take the ID and then the form   and then data so basically I'll show you this  in a second so when we pass the information but   now let's say try and within this try and catch  block we're going to return the acios so acios   Dot and then this will be a post and let's  take this right here so this will be the same   across basically everything say back ticks  and within backticks have the dollar sign   and then curly bracket and then paste oh  actually I just had it there just like this and   then say forward slash API forward slash and then  customers forward slash V1 forward slash customers and then dollar sign oh actually  forward slash and then dollar sign ID   and what we need so let me just  put this on a new line like this there we go so then we say forward slash and then  the end point which is profile Dash and then image   so this right here is the  controller so here remember   the customer controller in here  customer ID profile image let's go back   and in here so let's just say comma and we  need to pass the form data as the payload and   also the headers so here this will be an object or  actually the config which is going to be an object   and basically I want to get the token  so say dot dot and then get auth config   but also what I want to add is so here I want to  add content and then type so content Dash type   and this will be multi-part  forward slash form and then data   so have a look so if I open up customer  controller this is exactly what we've   done before multi-part form data so here  I'm just specifying on the client as well   and this should be it now let's basically end this  with semicolon and we're going to basically catch   e and at this point I'm going  to throw oops not tribe throw and then e and it's as simple as this   cool next let's use this method  within our Drop Zone component okie dokie so let's open up the update  customer form and inside of our Drop   Zone in here so instead of the job Zone  you can see that there's a method on drop   so on drop has the accepted files and what  we are interested is in just one file right   so basically we just upload one file and process  that so what we're going to do is we're going to   use our method called upload and then the profile  picture in here and we need to pass the ID so   let's just say ID which we don't have and I'll  show you in a second how we're going to pass that   and then the form so form and then data which  we also don't have and I'll show you in a second   all right so what we're going to do is the  following so in here we need to create first   the form data object so const and then  form data equals to new and then form   and then data like so and within form data  so I'm going to say form data dot append   the file so file and then comma and then accepted  files and I want to grab the very first file   just like that and this is basically the  form data now this name in here so name   file is basically what we accept in here  multi-part file the request param which is   file so it has to match with a client sense  so if I go back in here and now we need to   pass the ID now the ID will be passed as a prop  so basically have curly brackets and then say ID   and the way we get the ID now is so in here  where we use the drop zone so in here have a look   update customer form fetch customer initial  values customer ID so here let's just say customer   or actually ID and this is customer ID  and in fact let's just call it customer ID so where is it so customer ID so now you can see  that this Drop Zone actually is mainly focused   on customers right so I'm not refactoring to be  generic because I don't have to at this point   I just needed to upload profile pictures but  if you want to refactor go for it so here we   need to also pass the customer ID instead  of ID and job then now this is complaining   because we need to say dot and then then so if  basically we have the response so R in here or   res which I'm not going to do anything with it  so I'm just going to say success notification   and then I want to say success and  let's just put this on a new line just like this success notification that's  the title and then I'm going to say profile and then picture uploaded so if this fails  so then and then here I'm going to say dot   and then catch and here basically the error and  if there's something wrong with it this actually   has to be like this so air and if there's  something wrong with it I'm just going to say   I think it's Error notification yes air  notification and here I'm just going to say failed   or error it doesn't really matter you can  choose whatever message you want for the title   and description so profile picture upload  and then oh actually let's just say failed   failed upload and it's basically like this  right and also if you want you can say log   and you can log the error to have more  visibility but for us I'm going to remove   all of this in fact and also the response so  we're not doing anything with it so we just   leave it as is and to be honest I think this is  pretty much it next let's go ahead and test it and see whether we have uploaded a  picture for this customer in here   So currently it's not storing to S3 because the  implementation is to store in my local machine so   in here I'm within the database and if I say  select and then start from and then customer   and let me just say backslash X and then run the  exact same command and you can see that we have   the profile image ID in here and the customer ID  is 43. so let me just open a new shell like so   and I'm going to CD into so basically dot Amigos  code and then S3 and inside we have the folder   or basically this is the bucket name and inside  we have profile images and inside we should have   so here if I say LS you can see that these are  all the IDS and we should see 43 in here so 43   so here I'm going to say CD and then 43 and inside  LS this right here is the ID of the picture itself   so if you look at this ID is the exact same  thing as this one in here and this actually   is our profile picture so if I basically say  open Dot and this brings the window Explorer   and if I select this image and then press spacebar  you can see that hooray it did work cool so let me   basically cancel out of this and out of this and  the next thing that we need to do is basically   we also have to close this and then fetch the  customers but we'll do that later but let's   basically get the profile picture back in here so  here you can see that we need the profile picture   in here and also if I close this in here also if  I click on update and what I want to show you is   so if I bring the file explorer in here let's try  and basically drag and drop so you can see that   also works so we can click but also  we can drag and drop so if I drop   you can see that profile picture updated or  uploaded my bad and if I open up the terminal   and if I press LS now we have two pictures in  here and they are both the same cool so I'm   not going to open this one because they are the  exact same pictures and you can see that this   is working if you have any questions drop me  a message otherwise catch me on the next one cool in order to see our profile picture that we  just uploaded in here and also in this card we   need to do the following so let's open up the  client.js first so here client.js and what we   need is so let's just take this right here and  we're going to say export and then cost customer   profile and then picture and then URL equals to  and here we need to pass the ID of the customer   and so on a new line I'm going to basically return  the URL like so so basically this will be the ID   and I need to remove that  and this is pretty much it   now I think I need basically oh actually not  that but I need to remove the return from here   cool so on a new line so this will gives us the  customer profile picture URL and you can even say   get in here if you want but now let's open up the  update customer dual form and in here so where we   have my drop zone so if I scroll down my drop  zone remember we have the SRC so here I'm going   to say get or actually we call it customer profile  picture URL and then pass the customer ID inside   and let's import this so insert import at the very  top and we go to go let's open up the web browser   and if I click on update check this out you  see that the picture is in here which is cool   now let's close this and also add it in  here so let's go back to IntelliJ and   that will be part of the customer card and  within customer card we have the Avatar in   here and the Avatar now will be so the  SRC for the Avatar will be so in here   customer profile picture URL and then we have  the in here I think it's just the ID so this ID   and we just pass it yes that's the ID so we just  pass it where is it Avatar I lost you so in here   ID there we go save let's go back and check this  out so this is beautiful stuff so if I click on   update you can see that now we do have the profile  pictures in place next let's go ahead and fix the   fact that when we upload a new profile picture we  should have the UI reflected on the new changes cool the last thing that I want to do is in here  when we update the customer so in here with the   new profile what we want to do is basically  invoke so we should have done this before but   that's fine so fetch customers have a look so  in here we use fetch customers like so and also   think we do close I think  we do close the model Maybe   but let's go ahead and do this so here  all we have to do really is basically   pause the fetch customer so here  we're going to say fetch customers just like that and then inside so where we  have fetch customers so we also pass it so   fetch customers equals to fetch customers  and let me put this on a new line like this   all right so in here I think this is much better   and and then things like this cool so this is  looking good now let's go to our my drop zone   and upon success upload we want to invoke Fetch  and then customers like this and there we go   so I'm really bad with JavaScript so here  I'm missing a bunch of semicolons and you   know with JavaScript this is actually optional  so you'll see that some places I do have like   here and other places I don't cool so this is  when a backing engineer works with JavaScript so   let's now test these changes so in here I do have  basically a new picture so if I click on update   and let me bring this picture so here female and  then two I'm going to drop the picture in here   and you can see that now it updated the picture  and we are pretty much done so here update   and you can see that the picture now has  been reflected and this is pretty much it   next let me show you something which I  forgot to change on the back end early on the last thing that I want to do is if I right  click on this picture inspect and in here so let   me put this bigger so you see so if I scroll down  you can see that we have the image source in here   and I can click on it so if I click on this you  can see that I do get gibberish basically right   so this is the byte array that we get back so  what I want actually is when someone visits   this link right here then we want to display the  actual picture well to fix that on the back end   all we have to do is within customer controller  in here so have a look so we have in here get   customer profile image and here get mapping say  comma and then inside say produces and when the   ad produces it adds a value to the endpoint URL  and here we can say a media type Dot and you can   choose PNG or jpeg it doesn't really matter there  we go indent things and let's reload the back end there we go so now we have a new customer let's  go back and if I reload this same picture in here   you can see that now we get the profile image in  here and also in here so if I basically close the   console close this we have a new customer you  can see that this other customer doesn't have a   picture so this is actually a male so let's just  say update and here I'm going to click this time   and then mail open and check this out so this is  nice if you have any questions for what we've done   in this section feel free to let me know otherwise  next I'm going to deploy all of these changes all right now let's deploy these changes  and watch our CI CD pipeline take action   for both the back end as well as the front  end so in here let's open up IntelliJ   and I'm going to commit these changes  so here I'm going to basically   commit through IntelliJ and what I'm going to do  is I'm going to say react Dash and then profile picture and then uploads there we go so commit  and we also change the back end but that's fine   which is basically these changes in here  for image JPEG value and I'm going to push and this will push straight to  Main and in here I need to rebase give it a second awesome now let's watch the  changes being deployed so in here of course   slack and this is the repo if I go to code you can  see that we have now react profile picture upload   so this will trigger the backend CI CD now you  can see that deployment Started Black profile   picture building with Maven so while this is doing  this what I'm going to show you is so this is   the back end so if I open up AWS console so in  here within the console if I go to AWS amplify and we have the full stack course and then react   and now you can see that so  basically oh I think already deployed no it hasn't right jobs failure oh wow all demos  never go according to plan so it must be like an   integration test so let's open up IntelliJ  quickly and in here so I do have so project   and let's close this go to the back end and  that's because of this so we've changed this   and we didn't update the tests so SRC test Java  and then basically the customer I.T in here   so let's just right click and I know that is  this test basically so let's just run this test so just give a second and you can see  the benefit of CI CD right so this fails   and it says so in here if I  scroll down right 500 no content right no acceptable representation that's fine  so I know exactly what it is and even IntelliJ   will tell me so intelligence telling me that  it's failing right here now remember we change   this from I think before it was application.json  the default but this now is jpeg so J and then Peg   and if I run the test again I think  this time should work fingers crossed   hooray cool let me just  basically commit this as well   and bear in mind that I'm not using pull  requests in here so fix and then test there we go commit and push and then push and let's watch it again awesome so in here so  if I refresh this you can see that we have the   new commit hopefully this time we should just  pass there we go it kicked in building with   maven and at this point basically I can even show  you so if I go to actions you can see that this   is running and deploy and you can see that still  building oh okay so you just push the docker image   right here and now it's deploying to elastic  Beanstalk so hopefully this should also pass   and you can see that all the tests actually passed  so if he reaches this stage it means that all the   tests did pass so just wait a minute or so and  hooray you can see that this was success awesome   now let's open up AWS amplify and in here you can  see that the full stack course react is running   so you can see the last deployment  which is literally just now   and to be honest this is pretty much it next  let's go ahead and test our deployed application cool let's go ahead and test this so in here um  not in localhost anymore so this is localhost and   this is the live application full stack react  and then Dot amigoscope.dev and you can try   this for yourself as well so let me just log in  with this user in here and feel free to sign up   and create an account if you have to I'm going to  log in and bad credentials okay so I think I need   to create a user so let's just say in here uh  Foo and then bar and here I'm going to say full   bar 2000 so hopefully nobody picked  this name at and then amigosco.com   let me just take this just in case  22 the password will be password   so feel free to hack my account and the mail  submit and cool so now let's go to customers   and hooray you can see that this is working  beautifully so let's in here update so we're   gonna try hold on let's if I refresh do  we get the same user so two nine eight six   refresh 2986 cool so let's just update  and in here let's just grab a picture   and Aussie two it's a male so let's just put  Amigos code in here and oops it worked but   so the customer went I don't know where because  there's so many people in here trying to use the   application so what I'm going to do is I'm going  to oh actually I was going to delete everyone but   here it works hooray we've done it so this is cool  so let's try let's see any females in here so V   male no I think yeah I think yeah no  females so basically we could just   add a picture anyways so Lorraine in here  update and we're going to add this picture   there we go and it worked you can  see that Lorraine is right here   and you can basically take this picture also  so we can basically inspect and we can grab the   URL so here I can click on it and you can see that  this is my picture and it's coming live from the   API which is under https and everything is working  beautifully awesome I might delete everyone and   add maybe some logic to say delete everyone after  I don't know maybe 24 hours or something like that   so that there's not many people so there's over a  thousand people here which is crazy cool this is   pretty much it and if you have any questions  on what we've done throughout these last few   sections as well as the exercise feel free to  let me know otherwise catch me on the next one okey dokey if you enjoyed this video literally  just smash the like button comment down below   let me know what other things that you want to  see next and I'm going to leave a coupon code   in the description of this video so that  you can take benefit and you know learn   the full-time professional course that I have  for you which is a course that is changing   lives many people are managing to secure jobs and  people that work for companies meet developers   senior developers all are benefiting from this  course so this is a course that you won't find   anywhere else apart from a vehicle's code this is  pretty much it and I'll see you on the next one

Channel: Amigoscode

Views: 136,775

Keywords: spring boot tutorial, spring boot 3, reactjs, java, java tutorial, aws tutorial, amazon s3, fullstack development, fileupload, backend development, frontend development, javascript, web development, cloud computing, programming, development, coding, apis, restfulapis, restapis, amigoscode

Id: 9i1gQ7w2V24

Length: 173min 35sec (10415 seconds)

Published: Sun Apr 30 2023