- 00:00:01 hi welcome to this video my name is
- 00:00:04 Maximilian and in this video I want to
- 00:00:05 show you how you can connect your a
- 00:00:07 single page application in this case an
- 00:00:09 angular application to your server less
- 00:00:12 API run on AWS using AWS lambda and API
- 00:00:16 gateway if you didn't have a chance yet
- 00:00:18 make sure to view the first video of
- 00:00:20 this while of these two videos here
- 00:00:22 where I do explain what lambda is and
- 00:00:25 how you actually set up your very simple
- 00:00:27 restful api in a server this way with
- 00:00:30 that let's get started
- 00:00:35 q get started we of course need an
- 00:00:38 application we can connect and for that
- 00:00:40 I provided you with this github repo AWS
- 00:00:44 through last time we have a link can be
- 00:00:45 found in the video description of course
- 00:00:47 now you can simply clone this repo to
- 00:00:50 follow along it's an angular application
- 00:00:53 which well does the following let me
- 00:00:56 show you what it does
- 00:00:57 inside this project once you did clone
- 00:01:00 it run ng surf or NPM starts to use the
- 00:01:04 local CLI version and once this did
- 00:01:07 start let's visit the application what
- 00:01:11 you can see is it's loading and it
- 00:01:12 displays as a chart where everything all
- 00:01:15 the data points are exactly equal at 30
- 00:01:19 now the chart was created with with
- 00:01:23 charge J s so if you were interested in
- 00:01:26 diving into this you can start by
- 00:01:28 checking out my code it's a very
- 00:01:30 convenient library for developing charts
- 00:01:32 and certainly possible that I'll cover
- 00:01:34 it on this channel in the future too
- 00:01:35 this charge isn't your complex as you
- 00:01:38 can see this configuration your
- 00:01:40 basically creates the chart there isn't
- 00:01:42 more to it let me shrink it a little bit
- 00:01:44 but the chart is not really what I focus
- 00:01:47 on in this video but I want to populate
- 00:01:49 this chart with useful data right now
- 00:01:52 what I'm doing is I'm subscribing cue
- 00:01:54 fetch data method in my topics service
- 00:01:57 and I'm getting the chart data some data
- 00:01:59 points which are defined in this model
- 00:02:01 I'm getting the chart data from that
- 00:02:04 service and here I simply hard-coded it
- 00:02:06 into year so here I'm simply setting up
- 00:02:09 my own observable which I'm returning
- 00:02:10 which returns means I'm done dummy data
- 00:02:13 and I have a timeout function to
- 00:02:15 simulate that I'm actually fetching this
- 00:02:16 asynchronously now that sniper core is
- 00:02:19 not that impressive or useful so why
- 00:02:23 don't we comment this out and instead
- 00:02:26 try to reach out to a real server using
- 00:02:30 the get method provided by angular's
- 00:02:33 HTTP service we do have a real server or
- 00:02:38 a real API at least we don't really
- 00:02:40 manage the server we created it in the
- 00:02:43 last video of this series or of this
- 00:02:45 miniseries here so make sure to check
- 00:02:47 out this video
- 00:02:48 now I of course already have that here
- 00:02:53 this is broken for now because I'm not
- 00:02:55 returning data here under API gateway
- 00:02:57 this is this endpoint 1/2 simple test
- 00:03:00 and under lambda here whoops we have a
- 00:03:04 function which right now only returns a
- 00:03:07 string wouldn't it be nice if that
- 00:03:09 function would return some real data so
- 00:03:12 why don't we make this function return
- 00:03:15 some data so that we can reach out to
- 00:03:17 our API endpoint here for that let me
- 00:03:21 create or add some code here on a med
- 00:03:24 response state data and that should be
- 00:03:27 an array of data points now this array
- 00:03:33 can be structured in whatever way you
- 00:03:35 want to structure it here on keep it
- 00:03:39 close to what I actually need to use in
- 00:03:40 my application and therefore I can
- 00:03:43 really just copy these objects I just
- 00:03:47 create their these dummy objects and
- 00:03:48 paste them in there make sure to of
- 00:03:51 course
- 00:03:51 remove the comments because you don't
- 00:03:54 want to have that commented out and let
- 00:03:57 me quickly whoops restructure this looks
- 00:04:01 better and now let's replace this with
- 00:04:04 the actual values you gave me when we
- 00:04:06 asked you for your favorite topics so
- 00:04:09 I'll quickly fill this in because there
- 00:04:11 we have 42 for view 28 if you wanted to
- 00:04:15 see a full project and there will be one
- 00:04:16 soon electron 26 angular that is 25 and
- 00:04:23 level was 21 now we get a response array
- 00:04:27 and with that all we have to do is
- 00:04:29 return it here instead of our string now
- 00:04:32 this lambda function all of a sudden
- 00:04:34 returns an array all we have to do is
- 00:04:36 hit save and that's it we don't need to
- 00:04:39 go back to API gateway because what did
- 00:04:42 we do there we created a resource and a
- 00:04:44 method and we forwarded the request to
- 00:04:47 this lambda function where we triggered
- 00:04:49 this lambda function whenever a request
- 00:04:51 came in and then it's still the case
- 00:04:53 that we don't need to adjust anything we
- 00:04:55 change the code which gets executed but
- 00:04:58 we didn't change the logic when it gets
- 00:05:00 executed so no need to change
- 00:05:02 a gateway with that we're returning an
- 00:05:05 array and we go back to the angular
- 00:05:07 application
- 00:05:08 here I'm expecting a result and there
- 00:05:12 I'm executed to chase a method and that
- 00:05:14 is the normal angular code which I can
- 00:05:17 use to get the data returned by response
- 00:05:20 transform it into a JavaScript object
- 00:05:22 and since I know because I wrote the API
- 00:05:25 we did it a second ago that the data
- 00:05:28 will be an array of objects in this
- 00:05:31 format and there is exactly the exactly
- 00:05:34 the data and key format I need I don't
- 00:05:36 need to do anything else you could of
- 00:05:38 course use other observable operators
- 00:05:40 here I do have some observable videos on
- 00:05:42 this channel after all however here it
- 00:05:45 is in the format I well I need it and
- 00:05:47 therefore I will go back to API gateway
- 00:05:51 but only to fetch that URL again here on
- 00:05:54 simple API let's click on stages data
- 00:05:58 set deployed snapshot of our API so to
- 00:06:01 say let's click get here on that
- 00:06:03 resource and copy dead link address
- 00:06:06 let's now enter it here and it's safe
- 00:06:10 and go back to our running angular
- 00:06:13 application as you can see it's still
- 00:06:17 spinning so let's open up the console
- 00:06:19 and what we see here is that we got a
- 00:06:21 course err or no access control allow
- 00:06:25 origin header is present on the resource
- 00:06:28 and what this tells us is that by
- 00:06:30 default and that is a default security
- 00:06:32 mechanism we're not allowed to access
- 00:06:35 resources on a different server than the
- 00:06:38 one we're sending requests from so here
- 00:06:39 we're sending requests from local host
- 00:06:41 localhost 4200 and we're sending them to
- 00:06:44 deep well to that URL here and that is
- 00:06:47 prevented by default of course we want
- 00:06:49 to allow it though so we can do this on
- 00:06:52 API gateway and now we need have to
- 00:06:54 change something we can simply select
- 00:06:56 our resource and what we need to do to
- 00:07:00 allow us access is we need to send back
- 00:07:02 the right headers we could do this
- 00:07:05 manually and that is all the one thing I
- 00:07:07 do show you in a much more complete
- 00:07:09 udemy course I already mention in the
- 00:07:11 last video but what we also can do very
- 00:07:14 convenient is we can
- 00:07:15 actions and ale Accords just make sure
- 00:07:18 that you have the resource selected for
- 00:07:20 which you want to enable course so for
- 00:07:22 all the endpoints connected to that
- 00:07:24 resource so here I click enable course
- 00:07:26 now we see which address will get added
- 00:07:29 and I can click the name of course we
- 00:07:31 get a warning that this will overwrite
- 00:07:33 the default headers we might have set so
- 00:07:36 that it overrides any settings you might
- 00:07:38 have added it also added this options
- 00:07:40 Methodist options endpoint
- 00:07:43 this is required for example post
- 00:07:45 requests because browsers like Chrome
- 00:07:48 send a pre-flight request so an extra
- 00:07:51 request before sending the actual post
- 00:07:54 request to check if they may send a post
- 00:07:56 request and this extra options HTTP
- 00:08:00 request also needs to be allowed by
- 00:08:02 course and that is why automatically
- 00:08:04 added this options endpoint for us with
- 00:08:07 that it should work but what's missing
- 00:08:10 well we need to redeploy the API because
- 00:08:13 we changed something and that's an
- 00:08:15 interesting thing or an important thing
- 00:08:16 you need to know whenever you're working
- 00:08:18 here and resources you're not working on
- 00:08:21 the live API you only deploy snapshots
- 00:08:25 the stages so once you change something
- 00:08:29 here and you want to create a new
- 00:08:30 snapshot you have to go to actions
- 00:08:33 deploy API again choose a stage you
- 00:08:35 could either add a new one or override
- 00:08:37 the existing one of course therefore
- 00:08:39 also overwriting the old snapshot you
- 00:08:42 can roll back though with that hits
- 00:08:45 deploy and now it will take a couple of
- 00:08:47 seconds typically until this really is
- 00:08:49 life so the link didn't change the URL
- 00:08:52 is still the same and well let's give it
- 00:08:55 a try let's see if it now works looks
- 00:08:58 much better now that shard is populated
- 00:09:01 with the day that we returned in our
- 00:09:03 lambda function and how easy was that
- 00:09:06 that is how you can connect your single
- 00:09:09 page application to your API and I hope
- 00:09:11 to show you which options you have with
- 00:09:13 that it's super simple to build amazing
- 00:09:16 applications in a completely serverless
- 00:09:18 manner you don't have to take care about
- 00:09:20 managing servers provisioning them you
- 00:09:23 write your code you create your API in a
- 00:09:26 very visual way as you saw and you
- 00:09:28 to your application and that's it now as
- 00:09:31 mentioned before you want to dive deeper
- 00:09:33 check out the UDP course and there
- 00:09:35 certainly will also be some pictures on
- 00:09:36 YouTube again I'd be happy to welcome
- 00:09:39 you in the course though but of course
- 00:09:41 I'm also extremely happy to welcome you
- 00:09:42 in the next youtube videos of which
- 00:09:45 there will of course be more so see you
- 00:09:47 there bye
