@@ -16,23 +16,101 @@ FIRST HALF (12.00 - 13.30)
1616
1717Notes:
1818
19+ - APIs are created by providers and used by consumers (BE provider, FE consumer)
20+ - Give real life example like (Devices like TV, any machine + electricity power socket interface which provides power to any external device)
21+ - Communication between software and user needs UI interface but software and software needs API as an interface.
1922- Part of an application that can be communicated with from an outside source
2023- Connect to it using "endpoints"
2124- Mostly used to request data from some service
25+ - Software well-known APIs (Fb APIs, Twitter APIs, Maps APIs, weather APIs);
26+ - API doesn't care which language or technology is used in the consumer or the provider
27+
28+ ### Types of APIs:-
29+ - Private: for employees only under a company network for internal use.
30+ - Semi-private: for clients who paid for the API.
31+ - Public: for everyone on the web.
32+
33+ ### Architecture styles of API:
34+ - Single purpose: API that gives a direct and specific service.
35+ - Aggregated API: one API as a wrapper for multiple APIs.
36+ - Web services API: punch of APIs working together to forma whole app.
37+
38+ ### Basic structure of REST API
39+
40+ - Endpoint: https://api.example.com
41+ - Endpoint with version: https://api.example.com/v1
42+ - Resources:
43+ * https://api.example.com/v1/users
44+ * https://api.example.com/v1/users/create
45+ * https://api.example.com/v1/users/1
46+ * https://api.example.com/v1/users/1/edit
47+ - Query params:
48+ * https://api.example.com/v1/users?limit=10
49+
2250
2351** Show examples**
52+ Use [ open weather app] ( https://openweathermap.org/api )
53+ - Create an account or use the public key used in the examples.
54+ - Use the endpoint for forecast and make a request via js file [ Get current city weather by city name] ( https://openweathermap.org/current#name )
55+ - Let them do the same using another endpoint [ Get hourly forcasting by city name] ( https://openweathermap.org/api/hourly-forecast#name5 )
56+
2457
25582 . What is ` AJAX ` and how to apply it (` XMLHttpRequest ` )
2659
2760Notes:
2861
62+ - Before AJAX all page reload for all requests, via refreshing the url in the address bar with the new resource.
2963- It's a technique, not a technology
3064- ` AJAX ` stands for Asynchronous JavaScript and XML
3165- Nowadays we use ` JSON ` instead of ` XML `
3266- Fetch data without reloading the page
67+ - The XMLHttpRequest API is defined in the browser (window.XMLHttpRequest)
3368
3469** Do exercise**
3570
71+
72+ Steps of doing the following example:-
73+ ** Install the live server plugin in VS (go to plugins -> live server -> install)
74+ 1 . Create self-invoked function to wrap your code
75+ 2 . Create an object instance of ` XMLHttpRequest `
76+ 3 . Call the ` open ` function to fill it with the Request URL and the request Method
77+ 4 . Call the ` send ` function to make the request
78+ 5 . Add event listener with a callback for the sucess event ` load `
79+
80+
81+ Example using the XMLHttpRequest
82+
83+ ```
84+ const oReq = new XMLHttpRequest();
85+ oReq.open('GET', `https://api.openweathermap.org/data/2.5/weather?q=${cityName}`);
86+ oReq.send();
87+ oReq.addEventListener('load', function (event) {
88+ const data = JSON.parse(this.response);
89+ if (data.cod >= 400) {
90+ // error
91+ console.log(data.message);
92+ } else {
93+ //success
94+ console.log(data.coord.lat);
95+ }
96+ });
97+
98+ // or another way of getting data
99+ oReq.load = function (event) {
100+ // use oReq.response or this.response
101+ const data = JSON.parse(this.response);
102+ if (data.cod >= 400) {
103+ // error
104+ console.log(data.message);
105+ } else {
106+ //success
107+ console.log(data.coord.lat);
108+ }
109+ };
110+
111+ ```
112+
113+
36114SECOND HALF (14.00 - 16.00)
37115
381163 . How to use libraries (` axios ` )
@@ -45,3 +123,22 @@ Notes:
45123- Read the documentation on how to use it
46124
47125** Do Exercise**
126+
127+ Same example but using axios
128+
129+ ```
130+ axios
131+ .get(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}`)
132+ .then(function (response) {
133+ // handle success
134+ console.log(response.data);
135+ }).catch(function (error) {
136+ // handle error
137+ console.log(error);
138+ }).finally(function () {
139+ // always be executed
140+ console.log('I am always here')
141+ });
142+ ```
143+
144+ > Note: Give example at the end with binding/showing these data in a DOM element like a <div > or a list instead of only showing them on the console using console.log.
0 commit comments