Full Stack Web Developer in 2022: Java, Spring Boot, Angular, Typescript | Alexandru Rosu | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Full Stack Web Developer in 2022: Java, Spring Boot, Angular, Typescript

teacher avatar Alexandru Rosu, Technology matters

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (1h 49m)
    • 1. Introduction

      2:32
    • 2. Setup Angular Project

      3:50
    • 3. Configure MDBootstrap

      6:22
    • 4. Generate Contact Component

      3:04
    • 5. Typescript business logic

      9:34
    • 6. Build the HTML form

      24:28
    • 7. Setup Spring Boot server

      8:03
    • 8. Create Email Infrastructure

      16:38
    • 9. GMAIL security

      9:44
    • 10. Create the Email Service

      11:36
    • 11. Add CORS Filtering

      8:41
    • 12. Small updates and final test

      4:56
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

74

Students

--

Projects

About This Class

Hi,

I want to welcome you to this class where we will build together a complete contact form (both front-end and back-end) that can be easily integrated to your website.

Even if you are new to this topic, or have some experience in the vast Web Development world, I will guide you on this step by step process of building this system.

  • So...what will we build?
    • We will create a complete and responsive contact form that will be capable of sending emails by using the GMAIL service integration support
  • What technologies/frameworks will we use for Front-end integration?
    • We will use Angular 10, Typescript and MDBootstrap Framework
  • What technologies/frameworks will we use for the Back-end integration?
    • Will work with Spring Boot, Spring Boot Mail Integration, and configure a testing GMAIL account that we can use for testing
  • What is the outcome of following this class you might ask?
    • You will understand the basic principles of working on a Full Stack Web ApplicationĀ (understand how the communication is made between a front-end app to a back-end server) - by following a real working example -> Building a contact form for a website

Enjoy

Meet Your Teacher

Teacher Profile Image

Alexandru Rosu

Technology matters

Teacher

Hi,

My name is Alex and I am happy to join skillshare as an teacher.

I have a bachelor degree in Computer Science and a Master Degree in Multi modal distributed virtual environments.

With a strong passion for programming, I enjoy finding solutions to various IT related problems.

My favorite programming language? I can tell you that it's Java, but I have also worked with other languages such as NodeJS, Angular, Typescript, Python, etc in my previous 10 years of experience.

Will be happy to share my knowledge and create great content for everybody who wants to join my classes.

Let's build awesome things together :)

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi guys, and welcome to this programming class where we will build a complete contact form that can be integrated on your website and is capable of sending emails. As part of this class will focus both on the front end, building our contact form using Angular type script and a framework called MD Bootstrap. But also on the backend side, where we'll greater Spring Boot based server that is capable of sending emails using a predefined Gmail account. Of course, I will guide you on the step-by-step flow on welding this entire process. Let's take a look on a quick example of what exactly will build as part of this class. So we have a contact form in place where four different fields. As you can see, validation is automatically in place since we have those red lines. And if we set specific data for each of the four fields, so named John Carter, valid email, maybe something more official for the subject. We can go with, reschedule the meeting. And as for the message, let's do something like high loss, right? To reschedule the meeting for next week and tanks. And now when we click on the Send button, we see this informative message at the top. Unless move through the Spring Boot back-end server. You see that in male-centered success. And now let's navigate to our email and you can see that we are able to receive the email. So the front-end to backend communication is done. And we are able to interact and receive an email is in our Gmail account. So let's move forward and see how we can build this entire functionality. 2. Setup Angular Project: Okay guys. So under this first video, we need to set out the basic structure of our Angular application. So under your favorite location, you need to open a command prompt and type in n g mu from. Then. You will be prompted with this. Would you like to add angular routing question and you need to select yes. For which style sheet format would you like to use? We'll go with CSS. And basically this will create a folder called front-end that will keep our angular application. And all are specific components under the specific folder. So packages installed successfully. You see the folder in place here. And now, since we have Visual Studio already set up on our environment, we can open it using code space and a dot. And you see here from them folder at his basically on Angular specific application with all its related components, Angular JSON package JSON. For this, we are using Angular ten. Let's increase the font a bit for it to properly see the content. And now I would like to update the script stack on the NG serve minus minus o, so that when we start the application using npm start. Now Angular application will be shown automatically in our default browser. So the scripts are compiling now. We should wait for this to finish. And you'd see that Angular application runs on port 4,200. And by default, we have this welcome page. And in fact, we need to clean this welcome page. So we should go under source, app, app component, HTML. And it move all these default content right to the bottom. And we need to live the router outlet. Let's save this. Okay. Let's also add a specific message so that we should know that the app is actually running with success. So app works. And you see that the Apple works now. And really move that the default content from the main page. 3. Configure MDBootstrap: Under this video, will work together on setting up the Bootstrap framework under our Angular project. So you can see that this framework is capable of interacting with jQuery, React, Angular, and is based on no Bootstrap. So you have different capabilities to work with if you are trying to integrate UI abortion for your system. So this is the main page and it has a bunch of components that i o, I can show you here. You are free to interact with them and basically study them. And our focus is to install this and the bootstrap framework under our Angular app. So these quick installation guide will help us settings up together. So as a prerequisite, you need to have no GS and Angular CLI installed. We should skip this manual installation process and go beat down and go under the section. So for the first step, create new Angular project. Where do you handle this in the previous video? Where we created the front-end Angular project. And since we are using MDB angular version nine and later, we need to install the angular CBK package. So let's do this on their project New Terminal. And this tau, this package. Of course MD bootstrap has free and the paid version, and we'll use the free version for our contact form. Okay, this package has been installed. Now let us move back and installed the MDB angular three version of this framework. Let's copy this command pasted here. And of course run it. Wave for the corresponding packages could be installed. Now we need to update the app module.js to take into account and the Bootstrap modal force we need to, of course, import is module from Angular bootstrap MD. So I copy this command. And under app mode two Ts just pasted. And of course under the import section, we need to copy this command and paste it here. Now as a next step, we need to update the styles and scripts in Angular JSON, so forth. We copy the style section. So on the Angular Jason can see those styles. Here. I remove this and paste specific section for taking into account the Bootstrap framework. And we need to do the same for the scripts section. Scripts are, is empty. And we need this to GIS files. Now, we need to install several low components on just chart Font, Awesome, hammered GS, animate CSS using the npm install command. Okay, that's great. It has been installed. Now we need to review that under packaged JSON Angular bootstrap MD in place and all the other libraries that we setup using these commands. And you see now that we have an issue over here, in order to fix this, we need to restart the application and run the MPM start. For the Bootstrap and the Bootstrap model to be taken into account. Now, all data will be compiled and the project works as expected. We have the app works page in place. So we're good to go. 4. Generate Contact Component: Under this video, we will need to generate the contact component for our angular application. So let's do this. We need to go to the CMD for terminal and type in NG generate component components. Let's call it contact. So this content component will be added under the components folder. You see it here being generated. We have HTML file and also ts file for our type script. Now let's go to the browser and check it out. Type in contact. And you see that it does not work. So in order to make it work, we need to go under our routing module. So let's search for it. Let's go up. And under the upper multimodal TMS, we need to set this contact pad in place. So Let's go into a pet contact. And for our component, of course, we need to use the contact component that we just created. So this will map to the contact component. And let's go back. And let's also handle the case that the user will navigate to a nano page. So in this case, we will redirect the user to the unique component that we have so far. So re-direct to contact to the contact component. And of course, under the app mode two Ts, you see that the contact component is already in place since we created it with using the NG January component. Now you see that we are able to navigate to the contact component, but we have also that app works messaging place. So let's remove it. So under app component HTML, just remove this, save and the contact component properly works. Now. 5. Typescript business logic: Now it's time to make use of the MD bootstrap framework under our Angular application. So for this, we will need to build contacts dialogue. So under MD bootstrap.com, if we click on the left side of the screen, we can open this menu and select the modal forms. Since we will use this as a reference to build our contact form. See here under this page, we have different types of forms, register form, subscription for. And we'll focus on this simple model contact form or build something similar. And our, our application. And we need to focus first on the type script file. So let's increase the font size. And lambda are our contact component, ds. For sled. Let us set in place a child element that will map to our modal dialog. So this will make a connection from our type script file to our specific contact component HTML file. So the modal dialog will be called frame and will be of type of modal directive. Now we need to set in place validating form of type of form group that will keep all our elements from the modal dialog. Now under the NGO onInit method, we need to define the structure of our form. So this.tab value taking form equals new form group. And over here we will define a few elements such as contact form. Model name is will map to the user name. So you form control, EMT. And we'll also need validators, required statement so that we'll be able to validate the form. The second one will be contact form. Modal, email, New Form Control, empty string here. And for this, we'll need to use two validators, 1-4 email and one pore required. Okay. Now for the toward the element, contact form, modal subject, new form control. And of course the validators required. And the last one will be contact form, modal message, new home control. And the same thing with validate those required. So we will have four elements in our form. And all of them will be validated automatically using this process. So that the user will not be able to submit them unless we have valid data for the user. Now for all these four elements in our form group, we need to set in place getter methods. So let's do this. So this getter methods will be used under our next video, where we will set in place the contact component HTML file. So we set in place the get contact form model name and thus were returned. This validating form. Let's fix this. So this validating form that get and we are interested in the contact form model name. Now the second getter method, contact form, email. It turn this validating form that get of contact form email. Another method for the contact form model subject. It turn this validating form that get contact for modal subject. And the final one on top for modal message. Return turn this validating form of contact for modal message. So we have this four getter methods in place. And each one of them will map the map actually an element form the form group. So what we have so far or view child elements to have a reference to our dialogue that will create in the next video. Also validating form of time form group. These validating form has four elements with specific validators in place and also will have this for getter methods to be properly used on Door, our HTML Component. Now let's start the application to see if we have any issues so far. Behind the scenes, the NG serve minus minus o is executed. And the application will start. Now it's compiling and should be opened on there, our default browser and can be accessible on port 4,200. And you see that we still receive the contact works message. So we don't have any issues so far. And we're good to go in order to build the actual HTML page for this contact form dialogue. So in the next video, we'll do this. 6. Build the HTML form: Now, since we have to type script file in place, we need to focus on building the HTML part of our contact form. So we will build something similar to this. So let's go back to our project and navigate to contact component HTML file. And first, let's remove this contact works P tag. And we should also increase the visibility. And now let's start building the modal dialog. So div, MDB model, hashtag frame in dB monel. Please note that we intentionally set the frame over there. End should match the view child element as frame type script file. Using this approach were referenced. Modal dialogue from the Type script fall inside this HTML. Div tag plus modal fade the left id frame. We need the tab index minus one. And for the roll dialog, label by or frame area hidden true. And we close this tape. So inside this div, we need to construct the actual form. So let's start using the div class modal dialog, overall document. And inside this div class model content. And inside the modal content div will need to set the div class modal header to construct the header. Text centered. H4 class modal title. Since many dot title for all dialogue. V minus 100. Font, weight bold. And for the title, let's go with a contact form. Now div class modal body m x minus x3. We're building the body of our contact form div class n deform, MV minus five. Let's set in place an icon using MDB icon, icon user. And of class prefix, gray text. We close the MDB icon, input type text ID. Let's set the form 34 class form control. Mdb input, MDB, validate, form control. And the validation should be made on the contact form model name. So this matches the contact form model name that we set in type script file. We need to set the label for this input text. So labeled for form 34. And we'll go with a name. And in case of any errors with a contact form model name, we need to just generate this using MDB error. Ng-if. Contact form model name invalid. And the contact form, modern name, dirty or contact form modern name touched. Let's close this properly. And let's also handle the case where we didn't receive any issues. And validating the contact form model name. So MDB success will need to use the ng-if statement similar to the MDB error. So if contact form model name, valid and contact form model name, dirty or contact form model name touched. So it's set in place the input for the user. And we are handling also the cases where this input or receive any issues. So it was not validated properly or it was validated with success. Okay, so it looks good now we have the name here, MDB error and NDP success. So once again, we handle this particle far form. We need to move to the second item in our form. So div class ND form m a minus five will set an icon. And dv, I confess, icon, envelope, prefix. Great texts will close the NDP icon tag. The input type will be email this time. Id form 29 plus form control. And the B input. And we also need the MDB validate for the form control. And this time we need to validate the email corresponding input. Or this is called, if you recall, in our type script file, that form model email. And let's copy this statement. Mvb add or an. And the best success. Unless only change this contact form model name to contact form email. So we will handle using this approach though error and also the success features. While validating this email statement. Now let's build the third element in our form. So div class n deform MB minus five MDB icon, icon. And we'll use tag as prefix, great texts. And DB icon. Input type will go this time with text. Ideal form. 32. Form Control of course, will set validation also for this field. So MDB input and DB validate form control. And the name is contact form model subject. Let's set a label for it. So labeled for form 32. Name will be subject. And once again, let's copy paste MDB error and MDB success corresponding tags. And we will also need to change the contact form model, email to contact form model law subject. So let's do this. And also for the n dB success. Okay, good. So the third field is created now. Now for the fourth one, div class and deform and DB icon. Icon. Oh, pencil out class prefix, gray text. And let's close the. Db icon or tag. Now we'll use the tectorial type of text ID as grow it. Form eight. And for the class MD textarea, form control rows, one, MDB input. And of course the validation should be set in place. Form control of contact form, modal message, in this case, textarea tag. Now let's set the label for it. So label for Form eight. And we'll go with the message statement. Of course, we need to handle the validation here. So I copy pasted and we'll just change the contact form model subject with conduct for modal message. So pasted here here. And also for the NDP success. Now let's save the file, compile successfully. And you see that we encounter an issue, of course in template. So we have an issue related to the form control. And of course we need to fix this. So in order to fix this, we need to navigate to the app module type script file, where all our modules are. Register for our angular application. Over here and under the imports statement. Let's import actually though a reactive forms module. Since we will need this for our form validation. And you see now that we compiled successfully the code. Now since we have all these four fields in place, it's time to also create specific button that we need to click on in our form. So let's do this. So div class modal footer, d minus flex, justify, contents center. And let's close this div. And we need to set in place a button, of course. So similar to this button to actually respond to art or for more submission process. So this button will only be visible if the validating form is valid. You seen in type script file that we have for more of our Angular app set in place for the validating for more specific variable. So we set a bunch of properties. And the bottom color primary waves, light, MDB waves effect. And we'll also need an icon for this. So Python paper plane plus ML minus1 and close the MDB icon. Let's compile the source code. And of course saved this contact form. Now let us see how this will look. And in fact, we don't see anything. Since the frame is not visible in the UI. Since we don't have any specific logic to expose the frame where we navigate to the contact form. So let's use an Angular model lifecycle method and G After view init. So this frame modal show, since the frame model is the child element, that gesture nice though, contact form. And we have an issue here on the subject. So let's fix this to see what's the problem in the HTML side of our contact form. So I am checking for the subject. So this is email. And for the subject on the class we missed the x, so it should be prefix. Kay, so the subject is fixed. What will also need to fix the email since we forgot to basically add a label for the email. So let's add this. So labeled for form 29. Let's go with email impulse successfully. And the form is in place name, email, subject and message. And we see that we don't have a button at the bottom. But if we complete all the details, the bottom will appear. So you see that we have the validation already in place. If we don't set our name, email, subject, or message. I'm talking here about the red lines. So let's add specific name. We see that the red line turn to green. If you don't want to add a valid e-mail. This is also in the UI. Now, using a valid e-mail, the red line turned to green, the subject and the message, and you see the button appeared. What we need to fix the label for the bottom. The actual text that should appear on top of the bottom. So let's do this. So we're here to add a cent. Let's do another text on our contact form. So Alex, Alex, Alex gmail.com, subject message. And you see that we have another type over here. In this way, you will see how many errors you might get while working on a real project. So we can fix this by changing the NDP icon from far too fast. So over here, the typo. And now everything should be in place. A final test. So Alex, an email subject, and the message and the send button is in place. Using also the corresponding icon. 7. Setup Spring Boot server: So under the previous video, we set in place the HTML part of our contact form. But I think you already noticed that that even if we complete the contact form and click on the submit button, actually on the send button. Nothing basically happens since we don't have any specific business logic to handle the case where we submit a contact form and actually send and receive an email. So let me show you, click on the Send mapping happens. So under this video, our main focus is to create a Spring Boot back-end server, at least the initial configuration to set up the infrastructure to handle this. So let's navigate to start, does bring that I0, the main Springer initializer page to define a project. So for the project, we need to choose my own project or the language. We will go with Java. On the springboard version. We'll go with to that. Free, free for the project metadata on the group as the top cone project artifact backend name, backend, specific description, a package name, calm that back-end packaging will be set to jar. And for the Java version that we can work with this, Java 11 were not interested now in the dependency, since the dependencies will be set no manual way regenerate the project. Now, wait a few seconds for this to furnish. And you see that I have a back-end zip file and I need to extract it. So at extracted it next to the front-end folder. So this is straightforward spring Botox Java application based on Maven. And you see that I have imported it under spring Tools Suite ID using this import functionality and selected the existing Maven project and the backend folder. So once again, this is just a plain or Spring Boot Java app. We can start it here. And let's see what is happening. Basically, not much since the application has started and and already finished its execution. So let's go under the bomb dot XML file and add some manual dependencies. First, I would like to add a dependency to keep the application up and running using embedded Tomcat server. So for the dependency, I will select the group ideas or Spring framework boot. And for the artifact will go with Spring Boot, Starter web. And as a second abundancy org sprint for a more. I want to set up the infrastructure to be able to send e-mails from sprinkled app. So Spring Boot, starter, male. So very simple. Now let's clean the logs. Are the soft application. Springboard app is started. And you can see now that an embedded Tomcat server is running on port 8080 and basically keeps our application up and running. So let's minimize this. And local host 8080 and bone, we have the white label error page. This is something that we expect since we don't have any way to just urinate, are all requests so far. So in order to do this, let's create a simple package. And we can call it calm, not backend, and controller. And inside this, we can create a simple class. Let's call it the contact controller. Let's increase the font size order to properly C. And this contact controller class needs to be annotated with rest controller to handle along specific requests. And also that's annotated with requests mapping so that we can access this controller navigating to API, contact to URL. Let's set in place a method that will be annotated with get mapping. So this will respond to HTTP GET requests. So you can test it using your browser. So public string. And let's call it contact. Actually contact test. It's important get mapping. And as a simple test, let's return a string contact tests. Now let's restart the application. So I stopped it, cleared the logs and start springboard app. Once again. Good application has started, and let's go to our browser and test this simple request. So local host 8080, API, contact. And you see the contact test in place. 8. Create Email Infrastructure: Okay guys. So in the previous video, we set in place the basic structure of our back-end server. Now we need to move forward and basically need to sit the infrastructure of sending emails using our Gmail account, of course, from the spring boat up. So in order to do this, we need to navigate to the contact controller next to the existing go contact test method. And set in place a new method that will be annotated with both mapping. And let's use the slash send, email or text. This method will return a response entity and let's call it send email. And for the moment, let's just return a new response entity of type void. And let's use the HTTP status that created. So 2n1 response. Now we need to implement actual business logic for this method. But an important aspect to notice that the sent email will need to basically map this contact form data. So when the user will click on this contact form, all these fields should be transferred to the backend server. And we need a way or another to basically transform this data into something that spring we'll be able to recognize. So let's create a new package called back-end model. And under this package, we need to set a simple class. And let's call this class quantum form dq from Contact Form Data Transfer object. And over here, let's define some variables. Private soon name, Dr. assume, email, the subject, and also the message. So if you recall, all these four fields are present in the contact form and will transfer all of them to this backend springboard Java application. I said the simple constructor for this. Let's also generate getters and setter methods. And let's also create a constructor will fields. So I selected all four fields. And basically we have everything in place now yet or setters and the constructor and constructor with fields. So when will we invoke the send email method? We also receive the contact form dto. Let's call the variable contact form DQ. And this is annotated, of course, with the request body so that the data manipulation will be made automatically. Now we need to implement the business logic. Send emails. And for this, I created a backend service package. And under the surface package will create a simple class. Let's call it email service. So this ML service, we need to be annotated with service stereotype. So let's do this. And let's also set in place or login mechanism. So log or log or we'll use the log Manager get lager of email service class. Let's import the corresponding package from the or Gopesh. Now in order to actually send emails, we need to auto wire the Java mayor law senders specific component. And let's call it email sender. So this is available due to the fact that we imported the male dependency in our home XML file. And this Java mail sender requires some properties that we need to set under the application properties. So basically over here we need to set the specific Gmail properties so that we'll be able to send emails using this bring good. Conserver. So the fourth property will be spring male host, MSB gmail.com. We to use the spring male port, 587. Spring male username. I created those simple email address for testing this functionality. So don't think that this is my actual email address, is once again, just for testing spring male password. And of course our blog, this, it's not safe to expose passwords. So I set up the email corresponding password. And now the spring male properties, mile MST p set to true. And spring male properties, male MSP, startup, TLS enabled through. So this should be all the properties that you need in order to set in order to send e-mails. And of course, if you want to use your own email, a password, you can configure the username and password properties with whatever Gmail account that you have goes all the properties are in place now for the application properties. And let's move back to a more service. And we'll need to define a variable here that will be set automatically with the value that we configured under the application properties. So this will take the value that we set for our spin male username. So this will send e-mails to that particular username. And now let's define a method. Avoid method. Name sent. We receive a contact form dto. And under this method, we need to set in place the entire infrastructure to properly compute the email and send it to the variable that we set under the email to online 21. So in order to prepare an email, we need mime message preparatory. We instantiated. And basically we need to override the prepare method that receive as parameter of my message. And over here we just need to set data under this my messenger reference. So the first thing is to set the recipient. So Message recipient type t2. So this will basically set in place who will actually see the email? Email too, if you recall, we set it on line 2526. This case. Now for the my message, we need to set the subject and for the subject will, will extract the data from the contact form dq yields subject. Now, my message helper. We will see in a few moments why we set this. So this my message helper Where the CDO, my message and true as parameters. And now let's use this helper. So help or dot set text. Let's remove this and basically compute the body of our email in an HTML format. So we'll go with HTML tag, a body tag, a strike to format this, submit a plus sign. I think we need to format it in this way to be more, more visible. Okay, good, looks much better now of indentation to see how this HTML body format will be created. So under the body tag, set in place something like email sent by and we need the email that will be extracted. Actually, let's go with the name first. So conduct formative yo getName. Well, so set the BR tag for end of line. And let's use now that email address. So email address, contact one, dto dot, get email as go into plus here. Let's use to be our tags to make some space in our email. And let's see, we also extract the message sent by the user from the contact, from the DDO get message. And of course, we need to close the body and also the HTML tags as the soma additional indentation here. Let's not forget about the HTML tag or k as this. And basically now looks much better. And now after the subtext willing to also add the true, since this will inform the helper that this message will be of type of HTML so that the email will be properly handled in this way. So although specific HTML tags will be transformed or responsibly. And now we need to use the email sender, send and just send the data. And of course, if any issues that might appear, we need to catch any exceptions. Blogger, dot info, email sent with success. And in case of any errors, let's login error here and throw the exception. So in the next video, we'll test this functionality to see if it works or not. 9. GMAIL security: We'll need to test the email sending functionality. But in order to do this, we will need to actually invoke this ML service send functionality. So let's go to our controller and auto while the email service and the sent email method. We need to use the ML service sent method and pass the contact form dto growth. Now we should be able to test this. So let's start the application. So we don't have any issues. And please note that there is no direct connection from the Angular app back-end service or this contact form. So the first testing process will involve using a different tool that will focus only on the backend side. So we'll use Postman to send email API. So you use the post HTTP verb. Http local host 8080 API contact, send email. So you see here request mapping, API contact in the post-marketing should send email. And of course we need to pass a contact form dto. So let's select the body raw and JSON format. Over here we can set the name, simple name. Let's go with John Carter, an email. So this will be John Carter's email. We need to also set the subject. Let's go with something. Model fish show something like related to the meeting and message. Maybe I don't know. Let's try to reschedule a specific meeting. So I want to reschedule the meeting. Let's plan it for next week. Something like this. So now. Let's clear the logs are back-end server and check our email. We don't have any email so far. And click on the Send button. Sending requests. This is synchronous process. Please take into account this. And this will take a few seconds. And boom, we have only shoe internal server error status 500. Plus check specific logs to see what's happening. Over here. If you scroll up, you see that username and password are not accepted by Google using our Gmail account. So in order to fix this, please note that this is a security concern on Gmail and they are blocking specific access to different applications. And in order to basically fix this, you need to allow Gmail to user credentials to actually send emails. So you need to navigate to your account. So my account, google.com, and type in less secure apps. And you see here the less secure app access. Some apps and devices use less secure sign-in technology, which makes your account for nullable. Basically, you need to allow access to Gmail to properly use your credentials to send emails. Since this functionality is blocked by default. So if you select the on feature, so you're allowing access to Gmail two, use your credentials, emails. You'll be able to unblock now. So let's clear our logs and do the sand once again. And it's a bit annoying that this process is so synchronous. We'll need to fix this ofcourse to make his arsine Cronos. So sending requests, since I want this to be handled in no dime, still take some time. Grows so Tor, one created. And now if you take a look into the logs, you see that ML centroid success. And you have this security alert since you allow access to your account to send emails with. And next to this email, you will see that you have received the email. So related to the meeting, their spring email, corresponding G-mail account, email sent by. Email address and also the corresponding message. You see that the form N2 are identical since since Gmail does not allow you to basically override the from address. So this is the only way you are capable of sending emails now using your Gmail account. Now if you recall that sin kernels process, I want to fix this. Since it's not normal. Imagine that we are using a contact form is not normal to block the application, to wait for the email to be sent. So let's change this approach to use parsing process in our backend server. On the backend application. That's used the enable us think annotation and sent method in our email servers. We need to annotate it with the US incur stereotype. And that's basically as do another test for sludge removed. This is the emails. Let's change the message. Something like this with our sink. And for the subject, I think testing. Now you see that when you look at the logs to have a better visibility and click on send. And you see the message right away to one created. And now this is an asynchronous process. There is or will not be blocked. Everything will be made behind the scenes in our backend server. And of course we need to wait a bit for the logs. What is important, such as the user will not be blocked in the UI, even if his boss man or the Angular application that will move on. The next video. You'll see the email has been received. The same email sent by John Carter. And the message that I think also we have the e-mail sent with success log statement. And now we are able to send emails from our backend server using an asynchronous functionality. So let's move forward to the next video. 10. Create the Email Service: Under this video, we will need to connect a front-end side of our contact form with the backend side that we just created under the previous video. So we need to navigate to our Visual Studio code and open a new terminal. And over here, we need to generate the new service. So n g generate surveys, services, splash contact. So this contact surface will be set under the services folder solver here. And under this contact service yes file. We need to set in place the business logic to interact with the backend Spring boot server. So let's set in place a new method called send email that will receive a contact form dq of type any. And we return on observable of any. And in order to properly send requests from the front-end app to the backend server. We need to use the HTTP client. So let's go to our app module Ts and import the HTTP Client module. Under the imports array. Since using this HTTP Client module, we will be able to send and receive JSON request and response between a client and a server. The client being our front-end app and the server being our Spring boot server. Let's import this HTTP Client module from the Angular common HTTP. Now back to the contact service Ts. We have an issue over there on the constructor. And since this is not fixed, let's just go and import the HTTP client at angular common HTTP package. And constructor issue has been fixed. Now inside the send email method, let's invoke this HTTP post. And let's use the HTTP local host 8084, our back-end server API contact and email address. And we will also send the contact form DQ in this post request. So you'll see it contact from dto is required. Now we need to actually invoke this method from the contact component. So we navigated to the contact component ds. And let's define a new method. Let's call it send email of type void. And inside this method will need to compute basically the contact form dq. So this will be our object. And the name will be this contact form model name that value. So we will extract a value corresponding to the contact form model name field. Similar for the email, same thing for the message, but of course using the contact form modal message value. And for the subject, this contact form model subject value. So we have the contact form detour in place. We need to pass it to the contact service DS file. But of course the first thing to do is to import the contact service. So under this constructor defined our private contact service of type contacts service. So we are injecting code doc service here. They use the send email law method. And let's also import the contact service. So import con, decked surveys from source app services, contact dot service. So the service has been injected under the contact type script file. And now let's execute the request. So this, that contact surveys that send email. And we'll pass the previously created contact from the D0 and invoke the subscribe method. Missing data. So the success, the event will be handled later. And let's handle the case where we encounter on error. Let's do our console lock here with error and JSON stringify for the entire error. And in order to properly expose an informative message to the user, let's define an info message variable of type string. And over here let's set the informed message with something descriptive. Every something like email sent with success. And on the air side, this informed message equals error or sending email. And of course we need to expose this message somehow in the HTML4. So let's scroll a bit up. Define a block for the informed message statement. So over here, just after the modal body as defined statement. So div class row alert, alert, primary, that all will be alert. And the statement will only be shown if we have something under the info message string. So we use the ng-if statement. Inside this development, we will define another div and expose the info message. So far so good. So we are using the Send Email method to basically send an email from the front-end app to the backend app. But we will also need a place to actually invoke this send email. And what a better place, but this pattern click event. So send email. And now I think we're ready for a quick demo to see how this works. So of course, you need to save the HTML and also the type script file. And let's add a simple demo here, John, John test gmail.com, a subject in the message. And let's click on the Send to see what's happening. And you see that we encountered on air or sending email. So why this might happen? This happens due to the fact that we need to implement the mechanisms so that we can communicate from the front-end, back-end application and enable this course policy. So we'll do this under the next video. 11. Add CORS Filtering: Hey guys, if you recall, in the previous video, we had this specific course policy issue when we tried to communicate from the front-end application to our backend server. So we need to somehow fix this. And in order to properly fix this into goto, our Spring Boot Java application. And let's stop. We're now let's create a new package. And we'll call this com back-end component. And under this package will set in place a new class that will be called corals component. And this will need to be annotated with the components stereotype. Over here, we need to set in place a new method that will return or filtering. One being of course filter. And the method, let's call it the courts filter. Reimported course filter from the Spring framework. And this will be annotated with the bin stereotype. Under this method will need to set in place on URL based course configurations source. So I instantiated this object. The next thing we need to do is to set the course configuration. So I define CORS configuration variable called configuration and instantiate that this object. And using these courts configuration will be able to set in place specific properties such as allow credentials will also allow regions, so-called shuns, single donor list. And for using this symbol will allow origins from four, basically anything. Now for the configuration, we need to define the polo headers. And for this we need to set in place some Arrays, Lists, and specific header such as Origen, content time and accept. And now for the aloud methods. Once again the arrays as list. And we'll set in place multiple methods, even if we invoke only post an Spring Boot app. So I set, get, post, put, delete and options. Now for the source, we need to register the CORS configuration. And as a final step, have to set the filter registration been of course configuration. And let's call this variable beam, will define a new filter registration when and where receive as parameter. Of course, filter of source, source being the URL based course or regulation source. And you see that we have an issue over here and we need to fix it. Let's see what's the exact problem. But first, let's set the bin set order, order highest precedence, and return the bin. So if you took a look on the corresponding problem that we face earlier, we need to import the package or using this filter registration been. So over here, we need to remove the reactive package and import the URL based cones configuration source from the what courts package. So let's start this spring both though, Java app once again, since the course component is in place. And we should be able to communicate from the front-end app to the backend server. So the server has started. Plus clear the logs. And let's click on the Send button once again. And you see that. And we'll have a narrower, let's check the network. Increase this a bit. We haven't received any email. This is previous email. And on the console you see the error 404. Oh, yeah. So the API contact email does not exist. It is in fact the API contact send email. So please Baker, take into account this. So the path, the correct path is API contact, send email. And we need to update our from ten, the Angular app to properly use this URL. So API, contact, send, email, save this. Now, let's add some data on there, our contact form. So jump test or the subject test sub or the message test mess. And you see the e-mail sent with success. Things are going a sink way. So we don't need to wait for the message to be actually send. And over here you see that we are able to receive the message. So the front-end Angular app, our contact form, is able to communicate the backend server, a Spring Boot back in the app. And using Gmail, we are able to actually send e-mails from our contact form. But I would like to make a few adjustments to this UI, such as the fields will need to be removed in case the form has been submitted. And also let's try to make some small tweaks, but you will see them in the next video. 12. Small updates and final test: Under this video, I would like to make some small improvements to our HTML contact form, such as when the user will click on the Send button and the form is validated, the name e-mail subject, and message fields will become empty. And also, I would like to focus a bit on the message that is displayed on the top to be removed after three seconds. So let's see how can we achieve this. So we're back to our Contact, the component ds. Let's see what we can do here. So our main focus will be under the contact service send email, corresponding method, since this will be the entry point for our Send process. So over here, if we are able to send the email with success, we will invoke the validating form reset method to basically empty all the fields in the contact form. And in order to achieve the Frick seconds for message visibility, we will use the setTimeout method. And inside this method, let's do something like this. The informed message will become empty. And let's set 3 thousand milliseconds the interval. And of course we can copy paste dysfunctionality under the north side of our forum interaction process. The data is saved and we can now do a quick test for this. So let's go with John Carter, the name for the email, John Carter at gmail.com. For the subject. That's also make something more official. So let's reschedule the meeting. And for the message as go into hi, I would like to rescheduled meeting for next week. Please. Let me know if it's possible. And thanks. Let's click on the sand. We see that the form has been reset and after three seconds that message has been removed from the UI. And on the Gmail, we were able to receive the email sent from the contact from in the UI. Now another thing that we need to focus on a small improvement that I like to do is that you see that if I click outside the contact form, the contact form is hidden now and we are not able to get back to it. So in order to fix this, we can use the closed event of our MDP model. And when the closed event is in place, we will use this frame model dot show. So the contact dialogue will always be shown to the user even if he closes it by mistake or not. So this contact form, both front-end and back-end functionality is set in place using validation and Gmail email integration. Thank you for attendance guys, and hope to see you on next class.