A React-Redux application that lists different status pages and shows particular values from those pages. Automatic refresh once every 10 minutes. Is is deployed at Github.
There are 2 websites to get data. Based on a kind of website: static/ dynamic, I have 2 ways to get the data.
- Static website: https://status.datadoghq.com/
- I using
axios
to create aGET
request to this website to get html. cheerio
package is used to get element value of DOM elements.
- I using
- Dynamic website: https://azure.microsoft.com/en-us/status/
- It is impossible to get data from dynamic website without using server. At this situation, I write a JS script and deploy into Cloud Functions Google Clouds Platform. This script has using
puppeteer
to scrape andcheerio
to get element's value of DOM elements.
- It is impossible to get data from dynamic website without using server. At this situation, I write a JS script and deploy into Cloud Functions Google Clouds Platform. This script has using
- They should discover the website they want to scrape data. After knowing kind of this website, they can choose the way to scrape data that has been written above.
- Create reducer file and add it to
index.js
inreducers
folder. - Add type in
types.js
and create action file( has a function to get data and put to Redux) inactions
folder. - Create new component at
components
folder and display all the data.
I have done this task after 10 hours.