🍥
気になる技術を詰め合わせて、アプリを作ってみた（Hasura編）
きっかけ
友人チームでハッカソンに何度か出たことがあるのですが、カード不足・引き出し不足に苛まれることが多々あるので、挽回の一歩として、普段触れない技術を詰め合わせて、何か動くものを作ってみようと思ったのがきっかけです。
そして、なるべくお金はかけずにやっていきたいと思います。
使用技術イメージ
- LINE Front-end Framework(通称、LIFF)
- LINE Front-end Framework（LIFF）は、LINEヤフー株式会社が提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。（引用）
- LINEで簡単にブラウザ機能を実装できるようです。
- 採用理由は、使ってみたかったからです。
- Svelte
- フロントエンドのフレームワークです。ReactやVueに比べて、簡単に書けるので最近人気が上がっているようです。
- 採用理由は、使ってみたかったからです。
- CLOUD FLARE Pages
- 有名なフロントエンドのホスティング先です。
- 採用理由は、使ってみたかったからです。
- HASURA & GraphQL
- RESTAPIの経験はあるのですが、GraphQLの経験はないので、勉強してみようと思いました。
- HASURAを使用することで、簡単にGraphQLサーバーを構築できるようです。
- 採用理由は、使ってみたかったからです。
- NEON
- サーバーレスのDBaaSです。HASURAと相性が良いようです
- 採用理由は、使ってみたかったからです。
構築
実装は以下の手順に分けてやってみます。
- GraphQLサーバー・DBサーバーの構築 ⭐️ この記事でやる範囲
- LIFF機能を搭載した、Svelteアプリの構築
- SvelteアプリとGraphQLの結合
GraphQLサーバー・DBサーバーの構築
HASURAアカウントの作成
こちらにアクセスしてください。
左下の【Start Free】を押します。
認証が求められるので、GitHubのアカウントで進めます。
HASURAプロジェクトの作成
ダッシュボードが開きます
【Create a Project】からプロジェクトを作成します。
設定は以下で行います。
- フリープラン
- AWS
- 東京リージョン
選択したら下の【Create Free Project】してください。
プロジェクトが作成され、以下のような画面になるはずです。
【Launch Console】を押下すると、Hasuraのコンソール画面に遷移します。
データベースの作成
🛢️Data > Connect Database > Connect Neon Database
を選択します
Authorizeしましょう
データベースが作成されたので、自由にテーブルを作成してください。
コンソールのAPIタブからGraphQLクエリを試すことができます。
細かいGraphQLの記載方法については、この記事では触れませんが、左下のExplorerを使用することである程度直感的にクエリを作成できます。
エンドポイントを指定すれば、postmanなどからでも実行できます。
ここまで設定すれば、外のアプリケーションからDBへ繋げられそうですね。
次の記事では、LIFF機能を搭載したフロントアプリを構築します。
Discussion