Stencilでビットコイン価格表示アプリ（Progressive Web Apps）を写経してみる（３）ルーティングとフォーム

2019年9月28日

Sencil.js入門のために写経しているビットコイン価格表示アプリ。前回は、ルーティングとフォームについて学びました。

Stencilでビットコイン価格表示アプリ（Progressive Web Apps）を写経してみる（２）ルーティングとフォーム

今回は、引き続き、Part 5: Storage and Services を写経して、Capacitorを用いてlocalStorageにデータを読み書きする方法について学んでいきたいと思います。

Contents

Stencilでビットコイン価格表示アプリ目次

Windows 10 Pro (1803)
VisualStudioCode 1.37.1
git version 2.20.1.windows.1
nvm-windows 1.1.7
node 12.2.0
npm 6.9.0
yarn 1.16.0

Stencilアプリ内のpackage.json(一部)

"@ionic/core": "^4.9.0"
"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@stencil/core": "^1.3.3"

localStorageを利用するために、ターミナル画面で以下を入力して@capacitor/core と@capacitor/cli をインストールします。

npm i --save @capacitor/core @capacitor/cli
npx cap init
// 何か聞かれたらすべてそのままEnter

localStorageにデータを保存する、見る、削除するコードを記載します。src/services/storage.ts を新規作成し、以下の3つの関数を定義します。以下のように記載します。

先ほどは、capacitorを用いて、localStorageにデータを保存する、見る、削除する関数を定義しました。

今度は、src/services/holdings.ts を新規作成し、以下の3つの関数を定義します。（storage.ts内の関数set, getを利用します。）

src/services/holdings.ts

　今回は、仮想通貨の現在値を調べるために、 https://api.cryptonator.com/api/ticker/
から、fetch関数を用いてデータを取り込んでいます。

JavaScriptでHTTP通信で、外部からデータを得る方法として、以下のものがあるそうです。

上記で作成したholding.ts を用いて、以下のように編集して、holding追加機能を実装します。

src/components/app-add-holding/app-add-holding.tsx

ここで、app-add-holdings　の画面に行き、BTC, USD, 1　と入力してEnterしておきます。

src/components/app-home/app-home.tsx

写経元サイトに『削除』のコードの記載がなかったため、holdingを削除するコードの実装は行っていませんが、とりあえず、疲れたので、ここまでとします。