Skip to content

Commit d9fb049

Browse files
author
Nouran Mahmoud
committed
Lesson planning for the js week1, week2
1 parent ae8ddda commit d9fb049

2 files changed

Lines changed: 418 additions & 5 deletions

File tree

‎Week1/LESSONPLAN.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,101 @@ FIRST HALF (12.00 - 13.30)
1616

1717
Notes:
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

2558
2. What is `AJAX` and how to apply it (`XMLHttpRequest`)
2659

2760
Notes:
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+
36114
SECOND HALF (14.00 - 16.00)
37115

38116
3. 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

Comments
 (0)