Flutter用の問い合わせフォームのウィジェットを簡単に設置できるパッケージ及び連携サービス Contact Nite を作りました。
上記画像のように簡単なコードを設置するだけで、サービス上で設定した項目通りの問い合わせフォームウィジェットを表示することができます。また、
送信された問い合わせはサービス上で確認することができるようになっています。
サービス
https://contact-nite.com/ja
パッケージ
https://pub.dev/packages/contact_form
無料プランもありますので気になる方は是非試してみてください。僕も自分のアプリに入れて試してみています。
問い合わせが来るとメール及びSlack通知を行うことができます。そのうちサービス内で直接問い合わせ下ユーザーとやり取りができるようにしてみようと思っています。
パッケージ自体は純粋なFlutterパッケージです。サービス側は今回 Next.js, PlanetScale, Cloud Run を利用しました。
丁度開発している途中で知った、MySQLサービスです。最近記事も書いたので良ければ見てみてください。
サーバーレスMySQLのPlanetScaleをNext.js+Prismaで使ってみた
PrismaでPlanetScaleを使う時のエラーあれこれ
ここ最近はずっとFirestoreを使ってサービスを作っていました。安くて容量が大きいとなるとこれくらいしかなかったためです。ところがPlanetScaleを知りそちらに乗り換えてみることにしました。とにかく容量が大きいというのが決め手です。本当はMySQLの方が好きなので僕にとっては嬉しいサービスです。
まだリリースしたサービスで利用した経験が無いのでどうなるかわかりませんが、これから見ていこうと思っています。問題なければこれからの僕の定番になりそうです。
Next.jsで作っています。サーバー側もNext.jsのAPI Routesです。もうとにかく楽ちんですね、サーバーサイドとフロント側の連携とか、何も考えなくて良いというのは。仕事だと色々問題が出てくるのかもしれませんがとにかく個人で開発するものだと今はこれが楽すぎて他を考えられません。
特に日本専用サービスとする必要もないためInternationalized Routingを使って日本語と英語の対応を行っています。
Cloud Runを利用しています。最近こればかり使っているので元々持っている資産的に楽になってきたため他を考えられません。といいつつPlanetScaleを使っているのでDBまわりで悩まなくてもいいしHerokuとかで良かったかもしれません。
push時に連動もできるのですが、自動テストはGitHub Actionsでやったほうが超簡単なため、push→GitHub Actionsでテスト→Cloud Buildでビルド&Runにデプロイという流れをとっています。DBのマイグレーションもCloud Buildでビルドしたイメージを利用して自動化しています。
テストはJestによるシンプルなAPIのテストと、Cypressを使ったE2Eテストを行っています。Cypressはあまり使ってないですがCypress Dashboardと連携して動画も見れたりするの面白いですね。
SendGridです。Dynamic Templatesむっちゃ楽ちんですね。SendGrid上でメールの本文を調整して簡単に送信できます。ごちゃごちゃプログラムやDB上にテンプレートを定義しなくていいので良いです。
あとはメール受信のhookを利用して、メールも見ずにサービス上だけでやり取りできるようにもしたいなと思っています。なんかできるっぽいので。
ハマりどころとして、多言語化が結構複雑でした。パッケージを作成する場合一緒に作成されたサンプルプロジェクトと連携して動作させるのですが、そのプロジェクト内だとうまくいくのに、別途他のアプリに組み込んでみたらちゃんと言語が反映されないという問題が発生したりして手こずりました。
ちなみにFlutterはVS Code拡張Flutter Intlを使うことで簡単にローカライズできるのですが、それも使えたようです。
Freezed普通に使えたので使っています。
パッケージは公開ということもありGitHub Actionsでのテストが無料で放題なので、せっかくなので自動テストをいれてあります。
小ネタですがサービスサイトの問い合わせフォームもWebではありますがContact Niteに送信して実現しています。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント