Coding

Angular 2 Full App Tutorial – Weather App – #9 Requesting Data via HTTP

  • 00:00:00 welcome back everyone here's the state
  • 00:00:03 where we left our regular to ever up at
  • 00:00:05 the last time we while we have a
  • 00:00:07 nice-looking app already but currently
  • 00:00:10 we're not fetching any data from the
  • 00:00:12 Internet we're not really fetching any
  • 00:00:13 weather data I want to start with this
  • 00:00:16 now though
  • 00:00:17 because I think now it's actually time
  • 00:00:19 to well at this very important feature
  • 00:00:23 to this application now to get data I
  • 00:00:26 will use Open Weber map org because they
  • 00:00:29 have an API which you can freely access
  • 00:00:31 to get weather data now the access is
  • 00:00:36 free but you will need an API key to
  • 00:00:39 well should you access it doesn't cost
  • 00:00:42 anything but you will have to sign up
  • 00:00:43 and you may just click this link here
  • 00:00:47 and then sign up to get the rape API key
  • 00:00:51 specifically we will use these current
  • 00:00:53 weber api and here you got a
  • 00:00:55 documentation how to get the weather for
  • 00:00:58 certain city names and so on and this
  • 00:01:01 will be exactly the API endpoints we
  • 00:01:03 will use of course now in a first step
  • 00:01:06 of this app I won't implement the order
  • 00:01:10 with search functionality that it would
  • 00:01:13 suggest a city matching your your typing
  • 00:01:17 here but I will just make it that you
  • 00:01:20 have to type a correct city then click
  • 00:01:22 add city and if this city exists and
  • 00:01:24 it's been found by the API you will get
  • 00:01:27 the weather for it and the next step I
  • 00:01:29 will of course also add the other
  • 00:01:31 functionality so provided that you
  • 00:01:36 signed up and got your API key let's go
  • 00:01:39 back into the editor and make the
  • 00:01:41 required changes in the weather service
  • 00:01:45 here I want to add a new function and I
  • 00:01:47 will name this function search weather
  • 00:01:51 data for example and then this function
  • 00:01:58 will take a city name which should be a
  • 00:02:00 string as an input and a bull of course
  • 00:02:03 return and observable
  • 00:02:06 which will hold some response data
  • 00:02:09 object now to do this I will need the
  • 00:02:13 angular 2 HTTP service so I will inject
  • 00:02:17 this in a constructor
  • 00:02:18 I will also bind it to my private HTTP
  • 00:02:21 field here so HTTP to use the angular 2
  • 00:02:25 service and of course you need for one
  • 00:02:28 this angular 2 slash HTTP import here
  • 00:02:30 and you also need to make sure that you
  • 00:02:33 provide these HTTP providers in your
  • 00:02:36 boot RTS file and in your index.html
  • 00:02:39 that you are importing this HTTP module
  • 00:02:43 or package of angular 2 also what I will
  • 00:02:47 add right away since we will add it or
  • 00:02:49 need it anyway is the import of all the
  • 00:02:52 rxjs operators like the map operator
  • 00:02:55 which we will use on your server now if
  • 00:02:57 you're totally new to angular 2 HTTP I
  • 00:03:01 recommend you watch one of my other
  • 00:03:03 videos where I explain more about it I
  • 00:03:05 will take for granted here that you know
  • 00:03:08 how to general use it and that it
  • 00:03:11 returns an observable and so on so what
  • 00:03:15 I will do here is I will return of
  • 00:03:18 course something and something is such
  • 00:03:20 an observable which I will get from
  • 00:03:21 angular 2 is HTTP service and since I
  • 00:03:24 want to get data I will use get and now
  • 00:03:28 I need to provide the URL which I want
  • 00:03:30 to access now back on in my API
  • 00:03:34 documentation here for the current
  • 00:03:36 weather you see that we want to find it
  • 00:03:39 by city name here of course so what we
  • 00:03:41 need is this URL so we'll just copy that
  • 00:03:45 and then enter it here as a string and
  • 00:03:49 at the very end I will need to replace
  • 00:03:53 this city with the city name we're
  • 00:03:56 getting here as an argument so a city
  • 00:03:58 name also I will append my API key and I
  • 00:04:04 do this by using and and then app ID is
  • 00:04:09 the query parameter open weather map
  • 00:04:12 will look for app ID equals and this
  • 00:04:16 should equal your
  • 00:04:17 see here so here's the place where you
  • 00:04:21 should enter your API key for this to
  • 00:04:23 work I will enter mine in a second I
  • 00:04:26 will also add an upper query parameter
  • 00:04:29 with a + sign here and those optionally
  • 00:04:32 you don't have to do this but I will set
  • 00:04:34 my units to metric
  • 00:04:36 since I'm in Europe and we have the
  • 00:04:38 metric system but if you're in the u.s.
  • 00:04:40 you may of course leave that out or set
  • 00:04:44 it to let's see what is this what's the
  • 00:04:46 hour option you can see it down here
  • 00:04:49 units format you can set it to your
  • 00:04:57 period to get far in height instead of
  • 00:04:59 Celsius so these are your choices so I
  • 00:05:04 now get this set up here but the next
  • 00:05:06 step of course is to add the map
  • 00:05:08 operator to transform the response we
  • 00:05:11 get back so I want you take the data
  • 00:05:15 part of this response and get it back as
  • 00:05:18 a JSON object which I do by using the
  • 00:05:20 Chasen method on this response we're
  • 00:05:23 getting back also if we should get any
  • 00:05:26 error what I wanted you is I will get
  • 00:05:30 take this error and then for one out put
  • 00:05:33 it in the console and as an hour step
  • 00:05:37 very important this still needs to
  • 00:05:39 return an observable so I will return
  • 00:05:42 observable fro and then here I may pass
  • 00:05:45 the error or deep-well extracted error
  • 00:05:49 so this basically does the same as the
  • 00:05:52 map function here but it does it for
  • 00:05:55 well the error case and by calling Jason
  • 00:05:58 on the error what we'll get as the
  • 00:06:00 actual error data attached to this error
  • 00:06:03 with some information probably as a
  • 00:06:05 chase an object which we could use in a
  • 00:06:07 more elaborate error handler so we get
  • 00:06:13 this and this is fine for now now if
  • 00:06:19 this being set up the next step leads to
  • 00:06:22 this Webber search component where I can
  • 00:06:26 submit my form in this onsubmit method
  • 00:06:28 and when I click this
  • 00:06:31 submit I want to actually go out to the
  • 00:06:34 service and get the lever data for the
  • 00:06:37 city I entered here so in order to do
  • 00:06:40 this I will well access this method in
  • 00:06:44 my service and therefore I will first
  • 00:06:45 and check my service here so private
  • 00:06:48 Webber service and of course I also need
  • 00:06:58 to add my providers here and here again
  • 00:07:00 if this is totally new to you I
  • 00:07:01 recommend checking out the video on
  • 00:07:04 dependency injection I have but
  • 00:07:07 basically what i'm doing here is again
  • 00:07:08 telling in order to how to create such a
  • 00:07:10 weather service which i require here so
  • 00:07:15 with this i can now access it here which
  • 00:07:19 will of course do and i can call search
  • 00:07:24 weather data here and I will pass of
  • 00:07:28 course well the city name entered which
  • 00:07:31 is weld of my four year and I don't want
  • 00:07:36 to you form as a whole I want t value
  • 00:07:38 which is adjacent object representation
  • 00:07:41 of this form and I know that I will have
  • 00:07:43 a control of location so I can access
  • 00:07:45 this like this in this chase JSON object
  • 00:07:48 and this will well pass it into this
  • 00:07:52 function now in order to fire this
  • 00:07:54 request of course I have to subscribe to
  • 00:07:56 this observable otherwise nothing will
  • 00:07:58 happen we just configured it we're not
  • 00:08:00 sending it yet so now in the SUBSCRIBE
  • 00:08:03 method I want to handle the case that I
  • 00:08:06 get back some weather data and what do I
  • 00:08:10 want to do with this data then I want to
  • 00:08:13 create a new Webber item and I want to
  • 00:08:15 add this 2d array of dummy Webber items
  • 00:08:18 I have until now so in order to do this
  • 00:08:21 I will look here at my favorite item
  • 00:08:26 which currently they have a city then
  • 00:08:29 the description forever entity
  • 00:08:30 temperature so I will create a new
  • 00:08:34 method ms service which of the call
  • 00:08:38 at Weber item and this will expect Weber
  • 00:08:44 item of 20 Weber item of course what
  • 00:08:49 this will do is simply use my Weber
  • 00:08:52 items array and push onto it
  • 00:08:54 this new Weber item back in the Weber
  • 00:08:58 search here I will create this Weber
  • 00:09:01 item which I want to pay it pass later
  • 00:09:03 so we'll create a new Weber item and as
  • 00:09:07 always make sure you are importing all
  • 00:09:09 these classes these modules were using
  • 00:09:13 here and of course my Weber item expects
  • 00:09:17 some input here it wants a city name the
  • 00:09:20 description of the Weber and it wants
  • 00:09:22 the temperature now how can we get this
  • 00:09:25 data from our response let's see what we
  • 00:09:28 get as a response first so I'm so well
  • 00:09:33 already there if we have a look at an
  • 00:09:36 example response this is what you will
  • 00:09:38 get back this JSON object we see we have
  • 00:09:42 to name here so we can access a field
  • 00:09:46 name in this JSON object
  • 00:09:49 we got a Weber item which is an array of
  • 00:09:53 JSON objects where the first M object in
  • 00:09:58 this array seems to have a good
  • 00:10:01 description of the of the weather you
  • 00:10:03 may also use this description whichever
  • 00:10:05 you like clouds are just broken cloud so
  • 00:10:07 I will use broken clouds here and then
  • 00:10:11 the temperature can be found here under
  • 00:10:15 main now this of course Fahrenheit gets
  • 00:10:19 pretty warm otherwise but if you
  • 00:10:21 requested it with the metric system you
  • 00:10:24 will get back Celsius so this is a new
  • 00:10:27 main object and then the temp or maybe
  • 00:10:31 we want to temp min whatever you prefer
  • 00:10:34 so in order to get this I will first get
  • 00:10:39 the city name by accessing data and the
  • 00:10:43 name because remember this is top-level
  • 00:10:47 field in our data object here
  • 00:10:50 next I want to get the description of
  • 00:10:53 the Weber which we can get by accessing
  • 00:10:56 dot Weber then the first item off the
  • 00:10:59 area and then dot description so let's
  • 00:11:04 do this data then Weber
  • 00:11:10 the first area item and then description
  • 00:11:14 and as a last step I want to access the
  • 00:11:19 temperature which you can find under
  • 00:11:21 main and then temp
  • 00:11:26 so let's try this data main temp this
  • 00:11:31 should construct a Weber item which
  • 00:11:34 contains all the information we want our
  • 00:11:36 better items to have so let's try to add
  • 00:11:41 this to our array I do this by calling
  • 00:11:43 this Weber Cerebus add Weber item and
  • 00:11:46 doesn't of course the newly created
  • 00:11:48 Weber item here now the problem would
  • 00:11:51 have here is this would not update our
  • 00:11:54 list because we're providing Weber's
  • 00:11:56 service in this class which would create
  • 00:11:58 a new instance we want to use the same
  • 00:12:01 instance we use here in our list so in
  • 00:12:05 order to do this I will get rid of this
  • 00:12:08 provider year 2 and I will step provided
  • 00:12:11 here in the bootstrap method so that all
  • 00:12:13 our classes and components use the same
  • 00:12:18 instance off this Weber service so now
  • 00:12:20 before I try this out I will set my API
  • 00:12:23 key and then we will test us so in the
  • 00:12:26 app here I'll just written reload for
  • 00:12:29 safety reasons I'll try to search for
  • 00:12:32 bullying and well we have a problem with
  • 00:12:37 key URL here this should of course be
  • 00:12:41 HTTP at the beginning otherwise as you
  • 00:12:46 see here it looks on the localhost
  • 00:12:48 so in German insert my key here and then
  • 00:12:50 try this again
  • 00:12:51 so just reload this and let's try
  • 00:12:56 looking
  • 00:12:56 or Berlin again and as you can see it
  • 00:13:00 added it here that looks good
  • 00:13:02 I'm sitting in Berlin I can confirm this
  • 00:13:05 information here is correct so let's try
  • 00:13:08 in New York okay clear sky all the New
  • 00:13:14 Yorkers can you confirm that today is
  • 00:13:17 20th of April this is the weather I sure
  • 00:13:20 hope so and this is how we reach out to
  • 00:13:23 the Internet to fetch our data