現在、インターネット上には何百もの新しい王冠流行トラッカーがあります。最初に、彼らがデータをどこに置くか知りたいです。調査後、2つの主要な情報源がすぐに特定されました。最初はそのうちの1つを使用しました。それがジョンズホプキンス大学です。彼らはいくつかの有用なcsvファイルをGitHubに投稿しました。ただし、そこにあるデータは1日に1回しか更新されないため、リアルタイムサービスを探し始めました。TheVirusTrackerを見つけました。私は彼らのAPIを使用してしまいました。彼らは各国の概要を持っていますが、スケジュールも持っています。これは私にとってより興味深いものです。リクエスト制限に関する情報は見つかりませんでした。制限情報はないようです。
構造
TheVirusTrackerはCORSリクエストをサポートしているため、アプリケーションはブラウザで完全に機能する静的ページとして構築できます。しかし、私は逆に行きました。上記のように、私は当初、GitHubにあるホプキンス大学のデータを使用していました。そこから引っ張る必要があります。最も信頼できる方法は、GitHubのコンテンツエンドポイントを使用することです。すべてのエンドポイントのレートは1時間あたり60リクエストに制限されています。リクエストの数を増やすには、個人用アクセストークンを使用する必要があります。このようなトークンは公開しないでください。だから私はいくつかのバックエンドコードを書かなければなりませんでした。
私のクライアントコードは、Node.jsプロセスにリクエストを送信しています。プロセスはデータを取得し、それを正規化して戻ります。その後、データソースを変更しましたが、次の3つの理由により、このプロセスを維持することにしました。
データの標準化とキャッシュのためのかなり良い層があります。ほとんどの場合、データを変換する必要があります。いずれにせよ、私はこのコードを用意するので、それをバックエンドに置いて、クライアントに使用させてください。リモートAPIはパブリックで無料なので、リクエストを再リクエストしないでください。高トラフィックを提供するために、キャッシュレイヤーが必要です。この要件を解決する最も基本的な方法は、単純なメモリキャッシュを実装することです。サーバーがなければ、これは不可能です。
私はサーバーの作成に時間を費やしており、この仕事をあきらめたくありません。
これまでのところ、私のコードは3つのエンドポイントを公開しています。このコンテンツを他の開発者と共有し、他の開発者に正規化とキャッシュの使用を許可します。
数時間後、私のプロジェクト構造は
フロントエンド
このプロジェクトを行う理由の1つは、私のReactとTypeScriptのスキルを向上させることです。私はこれら2つの優れたテクニックを使っていくつかのプロジェクトを作成し、インストールモードが登場しました。ある時点で、必要な構成をstartingと呼ばれるパッケージにグループ化しました（詳細については、「Webpack / TypeScript / Reactスターターキット（2020年時点）」を参照してください）。したがって、空のフォルダーを作成して実行しました：
npx開始&&糸
コードをコピーすると、TypeScriptをサポートする単純なReactアプリケーションが作成されます。
Reactエコシステム
自体のReact アプリケーションは特別なものではありません。これは小さなプロジェクトなので、状態管理は必要ありません。すべてがいくつかのフックを持つコンポーネントにすぎません。
私はリチャートが作成したチャートを使用しています。そのコンポーネントを使用：
ほとんどの発生追跡では、国でデータをフィルタリングできません。通常、このようなアプリケーションは大量のデータをレンダリングしますが、これは情報のフィルタリングが明らかに困難です。トラッカーにこのフィルタリング機能を持たせたい。私は別の人気のソフトウェアパッケージであるreact-tag-autocompleteを使用しました。タグを管理するための入力フィールドを提供します。ここのラベルは国名です。
デフォルト関数のエクスポートBuilder（{countries、data}：BuilderProps）{
const [tags、setTags] = useState <Tag []>（getTags（countries、data））;
const [suggestions、setSuggestions] = useState（getSuggestions（countries）） ;
function handleDelete（i：number）{
const t = tags.slice（0）;
t.splice（i、1）;
setTags（t）;
}
function handleAddition（tag：Tag）{
setTags（[…tags、tag]）;
}
return（
<>
{tags.length> 0 &&（
<Link href = { https://c19stats.now.sh?countries=${tags.map(t => t.name).join(',')}}>
ここをクリックして{tags.map（t => t.name）}の統計を表示します
）}
</>
）;
}
簡単にするためにコードをコピーしますわかりやすくするために、APIに新しいリクエストをすぐに作成するのではなく、リンクを生成することにしました。このようにして、ユーザーは共有可能なURLを持ちます。
アプリケーションの残りの部分は、いくつかのスタイル対応コンポーネント、いくつかの入力コンテンツ、およびバックエンドを要求するための小さなデータレイヤーです。すべてのコードはgithub.com/krasimir/coに投稿されています...
バックエンド
まず、Zeitはプラットフォームとしてとても楽しいです。すべてがとてもスムーズに進みました。数分後、Web上の私のWebページの作業はNode.jsバックエンドによって駆動されます。
私は次のnow.jsonファイルから始めます：
{
“バージョン”：2、
“ビルド”：[
{“ src”：“ public / 。 ”、“ Use”：“ @ now / static”}、
{“ src”：“ api / .js "、“ use”：“ @ now / node”}
]、
“ルート”：[
{“ src”：“ / api / country”、“ dest”：“ /api/countries.js”}、
{ "SRC"： "/ API"、 "DEST"： "/api/index.js"}、
{ "SRC"： "（/）"、 "DEST"： "/パブリック/用$ 1"}
]
}
コピーコードのパブリックフォルダーには、私のindex.htmlや生成されたJavaScriptバンドルなどのいくつかの静的ファイルが含まれています。apiディレクトリ内のすべてがラムダ関数です。たとえば、c19stats.now.sh / api / countri ...の後、
const country = require（ './ countries.json'）;
関数JSONResponse（res、data、status = 200）{
res.setHeader（ 'Content-Type'、 'application / json'）;
res.setHeader（ 'Access-Control-Allow-Origin'、 '*'）;
res.statusCode = status;
res.end（JSON.stringify（data））;
}
module.exports = async function（req、res）{
JSONResponse（res、country）;
};
コードをコピーTheVirusTrackerのリモートサーバーにアクセスするために、スーパーエージェントを使用しました。これは珍しいことではありませんが、「すばらしい」キャッシュロジックを簡単に貼り付けることができます
。const memCache = {
lastUpdate：null、
data：null、
};
const CACHE_TTL = 20;
function getData（noCache）{
if（memCache.data && memCache.lastUpdate && typeof noCache === 'undefined'）{
const now = new Date（）;
const diff =（now.getTime（）-memCache.lastUpdate）/ 1000 / 60;
if（diff <CACHE_TTL）{
return Promise.resolve（memCache.data）;
}
}
//データの正規化
}
コードのコピーまず、キャッシュがあるかどうかを確認します。memCacheオブジェクトのデータフィールドはデータの正規化されたバージョンを保持しているため、直接返すことができます（Promise.resolve呼び出しに注意してください）。次に、キャッシュされたデータがある場合は、最後の更新からの分数をチェックします。ここでは、ファイルのグローバルスコープに保持されているすべてのコンテンツが保持されることを明確にする必要があります。もちろん、ラムダの新しいバージョンをデプロイしたり、何らかの理由でプロセスを再起動したりすると、キャッシュはクリアされます。しかし、私はこれに完全に満足しています。これの目的は、遠端への要求の継続的な送信を回避することです。正直なところ、それはうまくいきます。c19stats.now.sh/は、データのロードに時間がかかることがありますが、結果ページはすばやく更新されます。
独自の新しいクラウンアウトブレイクトラッカーを作成する
c19stats.now.sh/で特定のエンドポイントをいつでも使用できます。
特定の国/地域-/ apiのデータを取得しますか？国=米国、イタリア、ノルウェーすべての国/地域-/ apiの
データ
を取得しますか？国= すべてすべての国/地域/ / api /国のリストを取得します
または、virustracker.com / apiのAPIを直接使用することもできます。ただし、データをキャッシュする必要がある場合は、自分で実装する必要があります。残りはあなた次第です。c19stats.now.sh/のすべてのコードはオープンソースであり、github.com / krasimir / co ... 。
