/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", h2: "h2", pre: "pre", code: "code", h3: "h3" }, _provideComponents(), props.components), {Image} = _components; if (!Image) _missingMdxReference("Image", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["The source code of this project can be found ", _jsx("a", { href: "https://github.com/blankart/ilan-ang-may-covid-ngayon", target: "_blank", children: "here" }), "."] }), "\n", _jsxs(_components.p, { children: ["This article will teach us how to make a COVID tracker site using ", _jsx("a", { href: "https://nextjs.org/", target: "_blank", children: "NextJS" }), ". I made this website to learn how to scrape data from the ", _jsx("a", { href: "https://doh.gov.ph/covid19tracker", target: "_blank", children: "COVID-19 Tracker | Department of Health website - DOH" }), "."] }), "\n", _jsx(_components.h2, { children: "Why did I make a COVID tracker site?" }), "\n", _jsxs(_components.p, { children: ["I often look at the ", _jsx("a", { href: "https://doh.gov.ph/covid19tracker", target: "_blank", children: "COVID-19 Tracker | Department of Health website - DOH" }), " and find it very hard to find the data I need. Most of the time, I would only need to look at the daily cases and deaths on a given day."] }), "\n", _jsx(Image, { src: "how-i-made-my-covid-tracker-site-img-1.png", alt: "COVID-19 Tracker | DOH", layout: "intrinsic", width: 500, height: 600 }), "\n", _jsx(_components.h2, { children: "Creating a NextJS Project" }), "\n", _jsxs(_components.p, { children: ["This article assumes that you already know the basics of NextJS and ReactJS. If you haven't already, I would suggest learning more about the fundamentals of ", _jsx("a", { href: "https://reactjs.org/docs/getting-started.html", target: "_blank", children: "React" }), ". To start, let's install the following dependencies:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "yarn add tailwindcss dayjs cheerio\n" }) }), "\n", _jsx(_components.h2, { children: "Writing the scraper code" }), "\n", _jsxs(_components.p, { children: ["This project will use ", _jsx("a", { href: "https://cheerio.js.org/", target: "_blank", children: "Cheerio" }), " to scrape the data from the COVID-19 Tracker website. The scraped values will then be passed to the ", _jsx("a", { href: "https://nextjs.org/docs/basic-features/data-fetching", target: "_blank", children: "Next.js data fetching API" }), ". In our case, we will use the ", _jsx("a", { href: "https://nextjs.org/docs/basic-features/data-fetching/get-static-props", target: "_blank", children: _jsx(_components.code, { children: "getStaticProps" }) }), " API to fetch the data."] }), "\n", _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: ".env" }), " file, then add the following variable:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "COVID_TRACKER_URL=https://public.tableau.com/views/COVID-19CasesandDeathsinthePhilippines_15866705872710/Home?:embed=y&:showVizHome=no&:host_url=https%3A%2F%2Fpublic.tableau.com%2F&:embed_code_version=3&:tabs=no&:toolbar=yes&:animate_transition=yes&:display_static_image=no&:display_spinner=no&:display_overlay=yes&:display_count=yes&publish=yes&:loadOrderID=0\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "COVID_TRACKER_URL" }), " is the URL which we will scrape the data from."] }), "\n", _jsx(_components.p, { children: "Create a scraper function that returns the data we need." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const URL = process.env.COVID_TRACKER_URL;\n\nexport function getCases() {\n try {\n // TODO: implement the scraper function.\n // 1: Fetch the data from the URL.\n // 2: Parse the data using Cheerio.\n // 3: Get the data we need.\n // 4: Return the data.\n } catch {\n // TODO: implement the error handler function.\n }\n}\n" }) }), "\n", _jsx(_components.h3, { children: "Fetching the data from the URL and parsing it" }), "\n", _jsxs(_components.p, { children: ["We will fetch the data from the URL using the ", _jsx(_components.code, { children: "fetch" }), " API and then parse the data using Cheerio."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const site = await fetch(URL);\nlet text = await site.text();\nconst $ = load(text);\n" }) }), "\n", _jsx(_components.h3, { children: "Getting the data we need" }), "\n", _jsx(_components.p, { children: "This is the part where it gets a little bit complicated. The way I approached this is somewhat different from the way other people approached it." }), "\n", _jsx(_components.p, { children: "Instead of scraping the data from the website, I decided to scrape the data from the table URL that is embedded in the website. I noticed that the data is coming from the tableau dashboard." }), "\n", _jsx(_components.p, { children: "To get the sheet ID and the session ID, we will use the following code:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const tsConfigJson = JSON.parse($(\"#tsConfigContainer\").text());\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "tsConfigJson" }), " will be an object with the following properties:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "{\n \"sheetId\": \"COVID-19CasesandDeathsinthePhilippines_15866705872710\",\n \"sessionId\": \"\"\n}\n" }) }), "\n", _jsx(_components.p, { children: "We can then use the sheet ID and the session ID to form a URL that we can use to fetch the data." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const tableauData = await fetch(\n `https://public.tableau.com${tsConfigJson.vizql_root}/bootstrapSession/sessions/${tsConfigJson.sessionid}`,\n {\n method: \"POST\",\n body,\n }\n);\ntext = await tableauData.text();\nconst jsonRegex = /\\d+;({.*})\\d+;({.*})/g;\nconst match = jsonRegex.exec(text);\n" }) }), "\n", _jsx(_components.p, { children: "The right values can sometimes vary depending on the layout of the table. The following code will get the right values:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "if (match) {\n const _data = JSON.parse(match[2]);\n const inputs: number[] =\n _data.secondaryInfo.presModelMap.dataDictionary.presModelHolder\n .genDataDictionaryPresModel.dataSegments[\"0\"].dataColumns[0].dataValues;\n const FOUND_DATE = dayjs(\n _data.secondaryInfo.presModelMap.dataDictionary.presModelHolder\n .genDataDictionaryPresModel.dataSegments[\"0\"].dataColumns[4].dataValues[\n _data.secondaryInfo.presModelMap.dataDictionary.presModelHolder\n .genDataDictionaryPresModel.dataSegments[\"0\"].dataColumns[4].dataValues\n .length - 1\n ]\n ).toDate();\n\n const [_, ACTIVE_CASE_IDX, RECOVERED_IDX, DIED_IDX] =\n _data.secondaryInfo.presModelMap.vizData.presModelHolder\n .genPresModelMapPresModel.presModelMap.Epi_BreakdownBar.presModelHolder\n .genVizDataPresModel.paneColumnsData.paneColumnsList[0].vizPaneColumns[2]\n .aliasIndices;\n\n const [NEW_CASE_IDX] =\n _data.secondaryInfo.presModelMap.vizData.presModelHolder\n .genPresModelMapPresModel.presModelMap[\"Epi_TotalCases#\"].presModelHolder\n .genVizDataPresModel.paneColumnsData.paneColumnsList[0].vizPaneColumns[2]\n .aliasIndices;\n\n const newCases = inputs[NEW_CASE_IDX];\n const activeCases = inputs[ACTIVE_CASE_IDX];\n const recovered = inputs[RECOVERED_IDX];\n const died = inputs[DIED_IDX];\n const totalCases = activeCases + recovered + died;\n return {\n activeCases,\n recovered,\n died,\n totalCases,\n newCases,\n date: FOUND_DATE.getTime(),\n };\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["This isn't the best way to do it, but it works. And it also does not guarantee that the values will be the same every time. We might need to change the code if we find a better way to get the right values. If you have any suggestions, please let ", _jsx("a", { href: "https://m.me/de.ebblankart", target: "_blank", children: "me" }), " know."] }), "\n", _jsx(_components.h2, { children: "Creating the landing page" }), "\n", _jsxs(_components.p, { children: ["in ", _jsx(_components.code, { children: "pages/index.tsx" }), ", we will write the following code:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "import { getCases } from \"../services/cases\";\nimport type {\n GetStaticPropsContext,\n InferGetStaticPropsType,\n NextPage,\n} from \"next\";\n\nconst Home = (props: InferGetStaticPropsType) => {\n // TODO: implement the landing page.\n return <>Next JS COVID-19 Tracker;\n};\n\nexport async function getStaticProps(ctx: GetStaticPropsContext) {\n return {\n props: {\n ...(await getCases()),\n lastUpdated: new Date().getTime(),\n },\n revalidate: 60,\n };\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["The code above will use the ", _jsx(_components.code, { children: "getCases" }), " function that we created earlier to populate the data in our landing page. We will also add a ", _jsx(_components.code, { children: "lastUpdated" }), " property to the ", _jsx(_components.code, { children: "props" }), " object that will be used to show the last time the data was updated. I decided to use ", _jsx(_components.code, { children: "getStaticProps" }), " instead of ", _jsx(_components.code, { children: "getServerSide" }), " because we don't need to always scrape the data every time we visit the page. Feel free to change the look of your landing page if you want."] }), "\n", _jsxs(_components.p, { children: ["Here's how I implemented it. I'm using ", _jsx("a", { href: "https://tailwindcss.com/", target: "_blank", children: "tailwindcss" }), " to style the landing page:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "import type {\n GetStaticPropsContext,\n InferGetStaticPropsType,\n NextPage,\n} from \"next\";\nimport dayjs from \"dayjs\";\nimport { getCases } from \"../services/cases\";\nimport dynamic from \"next/dynamic\";\nconst DarkModeToggle = dynamic(() => import(\"../components/DarkModeToggle\"), {\n ssr: false,\n});\n\nfunction numberWithCommas(x: number) {\n return x?.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\nconst Home: NextPage> = ({\n activeCases,\n recovered,\n died,\n date,\n newCases,\n lastUpdated,\n}) => {\n const _todaysDate = new Date();\n const todaysDate = dayjs(_todaysDate).format(\"MMMM DD, YYYY\");\n const _foundDataDate = date ? new Date(date) : null;\n const foundDataDate = _foundDataDate\n ? dayjs(_foundDataDate).format(\"MMMM DD, YYYY\")\n : null;\n const dayDifference = _foundDataDate\n ? _todaysDate.getDate() - _foundDataDate.getDate()\n : null;\n let appendedText: string | null = \"\";\n if (dayDifference === 1) {\n appendedText = \"kahapon\";\n } else if (dayDifference === 0) {\n appendedText = null;\n } else {\n appendedText = `noong ${foundDataDate}`;\n }\n const fromNotToday = todaysDate !== foundDataDate;\n const lastUpdatedDate = dayjs(new Date(lastUpdated)).format(\n \"MMMM D, YYYY h:mm A\"\n );\n\n return (\n <>\n

\n \n

\n Ilan ang may COVID ngayon?\n

\n {fromNotToday ? (\n

\n Wala pang datos 😔. Alamin ang bilang ng kaso ng COVID-19 sa\n Pilipinas 🇵🇭 {appendedText}
\n {appendedText === \"kahapon\" && `(${foundDataDate})`}\n

\n ) : (\n

\n Alamin ang bilang ng kaso ng COVID-19 sa Pilipinas 🇵🇭 ngayong{\" \"}\n
\n {foundDataDate}\n

\n )}\n

\n Last Updated: {lastUpdatedDate}\n

\n {newCases ? numberWithCommas(newCases) : null}\n

bagong kaso {appendedText}

\n {activeCases ? numberWithCommas(activeCases) : null}\n

aktibong kaso

\n {recovered ? numberWithCommas(recovered) : null}\n

gumaling

\n {died ? numberWithCommas(died) : null}\n

namatay

\n Data Source: Department of Health\n

\n \n );\n};\n\nexport async function getStaticProps(ctx: GetStaticPropsContext) {\n return {\n props: {\n ...(await getCases()),\n lastUpdated: new Date().getTime(),\n },\n revalidate: 60,\n };\n}\n\nexport default Home;\n" }) }), "\n", _jsxs(_components.p, { children: ["This is my first time writing an article about my project. I hope you enjoy it as much as I do 🚀. If you have any suggestions or feedback, please feel free to reach out to ", _jsx("a", { href: "https://m.me/de.ebblankart", target: "_blank", children: "me" }), "."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

\n Ilan ang may COVID ngayon?\n

\n Wala pang datos 😔. Alamin ang bilang ng kaso ng COVID-19 sa\n Pilipinas 🇵🇭 {appendedText} \n {appendedText === \"kahapon\" && `(${foundDataDate})`}\n

\n Alamin ang bilang ng kaso ng COVID-19 sa Pilipinas 🇵🇭 ngayong{\" \"}\n \n {foundDataDate}\n

\n Wala pang datos 😔. Alamin ang bilang ng kaso ng COVID-19 sa\n Pilipinas 🇵🇭 {appendedText}
\n {appendedText === \"kahapon\" && `(${foundDataDate})`}\n

\n Alamin ang bilang ng kaso ng COVID-19 sa Pilipinas 🇵🇭 ngayong{\" \"}\n
\n {foundDataDate}\n

I love sharing my development journey. Discover my latest stories.

Featured Stories