You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: public/README.md
+20-13Lines changed: 20 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
# Core Logic
4
4
5
-
To obtain the pinpoint weather data, earth location is a required parameter. For this, the longitude and latitude would suffice programmatically. For the interactive option, a physical postal address (partial address of City, State, or Country) is required. Optionally, you could also register with the google map service (*additional charge will incur*). Then, integrate google-map API where the user can point to a location on the map to trigger a localized weather report.
5
+
To obtain the pinpoint weather data non-interactively, earth location(GPS) is a required parameter. For this, the longitude and latitude would suffice programmatically. For the interactive option, input of a physical postal address (partial address of City, State, or Country) is required. Optionally, you could also register with the google map service (*additional charge will incur*). Then, a touch or click event on the google map will yield the latitide and longitude among other values.
6
6
7
7
* The geolocation of a known address can be obtained by using the client-side javascript [Windows Navigator](https://www.w3schools.com/jsref/obj_navigator.asp). Your browser uses different types and sources of information to identify your location. These include your IP address, geolocation via HTML5 in your browser, and your PC's language and time settings. For more detail on how Navigator.geolocation is determined, [read more here](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition).
8
8
@@ -27,25 +27,30 @@ Sample code for client-side geolocation:
27
27
</script>
28
28
```
29
29
30
-
* The API query for weather data can be describe as follow.
and **API_ACCESS_KEY** can be obtained from registering with an API provider.
33
+
## Getting Real Data from A Paid API Provider
37
34
38
-
* With the return JSON object representing the weather data, you wrap the individual data objects in a grid to make it user-friendly.
35
+
In this project (file: public/scripts.js), you can use the API service from the [weatherbit.io](https://api.weatherbit.io/v2.0/). The good news is no credit card is required (at the time I develop this app). You registered to use the free tier, and there is no charge as long as you stay within the allowed call limit of 1500 calls/day. You will get errorCode 429 when you'd reached the daily limit, in which case, wait until the next daily cycle begins. Read [here](https://www.weatherbit.io/faq) to learn ways to make weather API calls.
39
36
40
-
<br />
37
+
* A typical API query for weather data can be described as follow.
**START_DATE, END_DATE** in 'YYYY-MM-DD' format and evaluate to datetime range.
43
46
44
-
Replace freecodecamp proxy URI (file: public/scripts.js) for weather data provider via a paid subscription. In this project, you can use the API service from the [weatherbit.io](https://api.weatherbit.io/v2.0/). The good news is no credit card is required (at the time I develop this app). You registered to use the free tier, and there is no charge as long as you stay within the allowed call limit of 1500 calls/day. You will get errorCode 429 when you'd reached the limit. Read [here](https://www.weatherbit.io/faq) to learn ways to make weather API calls.
47
+
**API_ACCESS_KEY** can be obtained from registering with an API provider.
48
+
49
+
* Parse the return JSON object from the API call into a GUI grid for presentation.
45
50
46
51
<br />
47
52
48
-
# Steps to Integrate A New API Provider
53
+
## Steps to Integrate A New API Provider
49
54
50
55
1. Register with a weather reporting service. Consult with their API documentation on how to call their APIs.
51
56
2. Obtain the API access key from the same provider above.
@@ -70,20 +75,22 @@ You would want to live free and die harder, let's make the client calls the serv
70
75
**Options**:
71
76
72
77
You will need to implement a middleware to retrieve weather data and serve it to the client using either
73
-
- `EJS` embedded templates
78
+
- `EJS` embedded javascript templates
74
79
- or `ReactJS`.
75
80
76
81
Obviously, many developers have accountered this issue. Lucky for us, `EJS`, `ReactJS` typically solves this problem. EJS is an easier choice having less of a learning curve.
77
82
78
83
**Decision:**
79
-
Let's introduce the Embedded Javascript ([EJS](https://www.npmjs.com/package/ejs)) middleware template rendering weather data upon client requestt.
84
+
Let's introduce the Embedded Javascript ([EJS](https://www.npmjs.com/package/ejs)) middleware template rendering weather data upon client requests.
80
85
81
86
## Steps to Implement EJS In the Project
82
87
83
88
<strong>Partial files to be injected to other ejs files.</strong>
84
89
85
90
1. Create sub-directory `partials` under `views`.
86
91
92
+
Partial files are pieces of reusable code segment that typically appear again and again throughout your project.
0 commit comments