ローカルランニングトラッカーの構築

私の地元のランナーのクラブは、100マイル走るために、4ヵ月の挑戦をします.彼らは10 x 10のチェックボックスグリッドのPDFを提供しました.私の反応は、未来への背中のブラットに似たものでした.

私は自分自身に考え、私たちは、このフォームの対話型のバージョンを構築する必要があります.それで私はしました.最終版は入手可能ですhere . それは反応で書かれます、ソースは利用できますGitHub , で自動的に展開Netlify .

アプリのビルド

使用するcreate-react-app このwebappのために足場を構築する.それは私がそうした最初です、しかし、私がGatsby(それ自体は反応プロジェクトである)でカップルサイトを建設した時から、私は十分に快適であると感じました.

フレームワーク

現代のプロジェクトがブートストラップやテールウインドを使うのはかなり典型的です.前者はかなり準備ができていますが、後者はもう少しツールが必要です.私自身は、しばらくの間、CodyFrameライブラリを好みました.そのグリッドシステムはbootstrapのものとして使いやすいです、それで、私はそれをカスタマイズしました.

100チェックボックス

確かに、100グリッドの列とチェックボックスをコピーして貼り付けることができました.しかし、JavaScript内の全体のアプリケーションをレンダリングする利点の一つは、動的に(バックエンドサーバーのいずれかを必要とせずに)繰り返してレンダリングする機能です.だから私がしたことは

{Array.from(Array(100), (e, i) => {return (
  // simplified HTML 😉
  <input type="checkbox" id={`day-${i + 1}`} />
)})}

データの保存

これは、このアプリは、ユーザーがその進捗状況を追跡することができますが、同時に、任意のデータを保存しないことが重要だった.それを達成するために、データはローカルに保存されるだけです--データはローカル記憶の外に保存されません.JavaScriptでは以下のようになります.

localStorage.setItem(key, value);

ローカルストレージを直接変更する呼び出しの数を最小限にするために、名前とチェックボックスの変更イベントが状態を変更します.これは、すべてのプロパティがJSONとしてローカルストレージに格納されていることを確認するためにも行われます.The componentDidMount and componentDidUpdate 関数は、その後、ローカルストレージへの取得と、構文解析と文字列化(それは、あまりにも単語である)JSONフォーマットと同様に、両方の原因になります.たとえば、名前のテキストボックスのすべての機能がここにあります.

componentDidMount() {
  const nameJson = localStorage.getItem('name');
  if (nameJson) {
    const name = JSON.parse(nameJson);
    this.setState(() => ({ name }));
  }
}

componentDidUpdate(prevProps, prevState) {
  if (prevState.name !== this.state.name) {
    const name = this.state.name;
    localStorage.setItem('name', JSON.stringify(name));
  }
}

<input onChange={event => this.setState({ name: event.target.value })} />

DOMノードをイメージにエクスポートする

私が思ったことはかなりクールな能力を生成する(とダウンロード)自分の進行状況のイメージです.私は、サーバー側でJavaでイメージを生成することによってビットをつまずかせました、しかし、決してクライアント側アプリで.私の捜索は私を見つけたdom-to-image , これには、JPEG、PNG、あるいはブロブにエクスポートするためのオプションがありますraw file data , を読むことができますまたはあなたが望むように処理されます.別のライブラリと組み合わせるmake saving files easier , イメージのエクスポートを簡単に行います.

domtoimage.toBlob(document.getElementById('main'), {
  bgcolor: '#ffffff',
}).then(function (blob) {
  saveAs(blob, '100-miles.png');
});

試行錯誤は、イメージの背景色を手動で設定しなければならないと教えてくれました.また、私は、サファリがサポートされていないというイメージのドキュメンテーションにDOMにつき見つけました.(これもiPhoneを意味します)この特定の問題はワンクリック画像のダウンロードを防ぐかもしれませんが、それは使用されてからアプリケーションの主な意図を防ぐことはありません.応答している、それは任意のデバイスで使用可能です-と任意のユーザーは、とにかくスクリーンショットを取ることができます.

アプリの配備

私はそれが唯一静的なクライアントサイドのアプリであることを意図して書いたので、Netlifyに展開することは私にとって最も意味がありました.Gitサイトを展開するための素晴らしい、簡単なプロセスがあります.Githubにソースを入れていたので、プロセス全体が楽になっていなかった.

最終製品！