Fresh + Deno KV ハンズオン
※まだ制作中です。存在さえしないコマンドがじゃんじゃん出てくるから参考にしないでね
前半ハンズオン
後半ハッカソン
準備
denoのインストール
VSCodeのインストール
Web掛け軸を作ろう
とにかくクソデカな文字を画面に表示するだけです
Webページとして公開してみましょう
まずはfresh initしてみよう
生成するときにstyling libraryはNを選択
use VSCodeはyを選択
生成したファイルのうち、components/やislands/, routes/apiは今回使いません
index.tsxをこのように書き換えます
code: index.tsx
export default function Home() {
return (
<div>
<style>{`
h1 {
color: red;
}
`}</style>
<h1>
Hello, World
</h1>
</div>
);
}
deno fmtが整形に便利です
毛筆に変えてみましょう。
code:index.tsx
export default function Home() {
return (
<div>
<style>
{`
h1 {
font-family: 'Yuji Syuku', sans-serif;
font-size: 50px;
}
`}
</style>
<h1>春までに3kg痩せる</h1>
</div>
);
}
プレビューしましょう。
deno task start
さて、これを堂々と世界に向けて公開しましょう。
まずはDeno Deployにサインアップします。
deployctlをインストールします(この作業は一度きりです)
次にターミナルを開いて
deployctl deploy
これだけでWebページが公開されました!
また、この結果、プロジェクトIDなどがdeno.json内に保存されました。
テキストを更新してもう一度デプロイします。
TODO: deployctlにはdeploymentをpromoteする機能がない模様
何キロ痩せるかを変更できるようにしましょう。
kiviをインストールします。
amountというkeyを作成します。
https://gyazo.com/a5aeadaef2c72b92f04849695a8bf9c9
deno.jsonにunstable-kvを追加します。
"start": "deno run -A --unstable-kv --watch=static/,routes/ dev.ts",
TODO: あれ?kiviが動かないな・・・ストア先が違ってしまっている?
保険コマンドを作る
ともかく、下記のようなコードで更新できます。
code: index.tsx
export default async function Home() {
const db = await Deno.openKv()
console.log(amount)
return (
<div>
<style>
{`
h1 {
font-family: 'Yuji Syuku', sans-serif;
font-size: 50px;
}
`}
</style>
<h1>春までに{amount.value}kg痩せる</h1>
</div>
);
}
DBへのユーザデータの保存、表示、更新などが行えるのがWebアプリの基本事項となります。
今は一文のみ保存して表示できるようになっていますが、これをリストや日付などを保存できるようにすることで多様な機能を実現することができます。
ひとまず多様な部分は後回しにします…
一旦deployctlで更新してください。
Deno Deploy側の設定を見に行きます。
アクセストークンの生成を行います。
kiviにアクセストークンを設定します。
kiviからDeno KVの更新を行います。
だめそうならCLIから更新
更新が少し面倒ですね。
更新ページを作りましょう。
hut route add
hut auth add
これでユーザIDとパスワードがなければこのページが見えないようになりました(BASIC認証といいます)
ここに投稿フォームを作ってみましょう。
code: update.tsx
import { FreshContext, Handlers } from "$fresh/server.ts";
const kv = await Deno.openKv();
export const handler: Handlers = {
async POST(req: Request, _ctx: FreshContext) {
const form = await req.formData();
const amount = Number(form.get("amount"))
const res = await kv.set("amount", amount); return new Response("Success");
},
};
export default function Update() {
return <div>
<form action="/update" method="post">
<input type="number" name="amount" />
<button type="submit">Submit</button>
</form>
</div>;
}
勝手に誰かに書き換えられたら困るので、BASIC認証をつけましょう。
code: fresh.config.ts
import { defineConfig } from "$fresh/server.ts";
export default defineConfig({
plugins: [
basicAuthPlugin("/update")
]
});
ここまででハンズオンは終了です。
時間が余った人向け
複数文を保存できるようにしましょう
メールお知らせ機能をつけましょう
Web Push機能をつけましょう
できるんだろうか?
あんまり有効化する人がそもそもいなさそう
上級者向け説明
islandsアーキテクチャ入門
心持ち
何人来るかとか気にしない!
次を開催するのが大事
想定した形にこだわりすぎない