Flutter WebとFirebaseでエンジニアとプログラミング学習者のマッチングアプリを作った話

こんにちは！エンジニア系YouTuberのKBOYです。

2021年3月1日リリースした**CodeBoy**というサービスについて技術的観点から紹介していきたいと思います。

# CodeBoyとは

<iframe width="560" height="315" src="https://www.youtube.com/embed/sv_n0wHqk4k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CodeBoyは、現役エンジニアとプログラミング学習者のマッチングプラットフォーム。「教えたいエンジニア」と「学びたい人」を繋ぎます。

競合には[MENTA](https://menta.work)さんや[Cycle](https://cycle.support)さんがいますが、**CodeBoyのプラットフォーム手数料は業界最安値の10%**で、これが競合優位性の１つです。

プレスリリースはこちらです↓
[YouTuberのKBOYが審査制プログラミング学習プラットフォーム「CodeBoy」を正式リリース！
](https://prtimes.jp/main/html/rd/p/000000001.000075333.html)

# CodeBoyの技術構成
![スクリーンショット 2021-03-02 17.37.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/4fd8a5ca-734c-48d0-0b34-e45974548dcb.png)


CodeBoyのフロンエンドは**Flutter Web**、バックエンドは**Firebase**、決済は**Stripe**で作られています。この技術構成はいつも僕がモバイルアプリを作るときと同じです。

FlutterはiOSとAndroidが同時に作れるクロスプラットフォームとして有名ですが、channelをbetaにすると、同じコードの書き方でWebも作れます。

また、ゼロから作ったわけではなく、**KBOYのFlutter大学のオンラインサロンの管理画面**がもともとFlutter Webで作られていたので、それをベースにカスタマイズしていき、今の形になりました。Flutter大学の管理画面については[KBOYのFlutter大学オンラインサロン専用アプリの技術構成](https://qiita.com/kboy/items/d9262f9e36f33599ebd6)という記事に書きましたのでチェックしてみて下さい。

# Flutter Webについて
![flutter.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/09bc1b1f-e6a6-5e79-b1bc-dc93e5b8141a.jpeg)


### Flutter Webのデメリット

![スクリーンショット 2021-03-02 18.55.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/c51e1980-f4eb-12c3-7ca9-e406ac4c2ee8.png)
![スクリーンショット 2021-03-02 18.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/cf1c3dc3-ad29-fccb-5f1a-f9d4b30991a1.png)


こんな感じでブラウザに関する関するissueとか、 カーソル位置がずれるとか、**多分普通にWebアプリ開発出てたら問題にならないようなところで問題が起こったりします。**Flutter Webはまだベータですし、こういった細かいところで使いづらさが出ちゃうのが悩みどころです。

### Flutter Web意外とイケるかも？

でも https://codeboy.jp に訪問していじってみて下さい。意外といい感じに動いてません？

これは僕的にも意外でしたが、日々Flutter自体がアップデートしていて、かなりまともに動作するようになってきています。本当に**FlutterだけでモバイルもWebもやるのが普通になる世界**が来るかもしれません。激アツですね。

# Firebaseについて
![firebase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/64500954-c1c5-5c09-1bfe-b4ba467fffc1.png)

- Auth(ログイン)
- Firestore(データベース)
- Storage(画像ストレージ)
- Functions(主にStripeを叩くAPIとして活用)

を使っています。

Functions以外は[KBOYのFlutter大学](https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw)のYouTube見れば出来るレベルなので、全然難しくありません。

# Stripeについて
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111366/5f06ea4d-db49-6c11-ec85-2f86586b30c0.png" width=200>

主にFirebase FunctionsからAPIを叩いて使っています。Stripeの提供するサービスにはいくつかありますが、今回使っているのは[Stripe Connect](https://stripe.com/jp/connect)です。StripeConnectはCtoCサービスを作るときに便利で、購入者であるcustomerと販売者であるConnected Accountという２つのユーザー区分を作ることができます。APIで送金、出金なども全部やってくれるので便利です。

![stripe connect](https://qiita-user-contents.imgix.net/https%3A%2F%2Fstripe.com%2Fimg%2Fdocs%2Fconnect%2Foverview.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=174993d0c120bbc4f5f807b85f4697a3)

この実装も、もともと僕がCtoCアプリをSwift iOSで作ったことがあってそのときにcloud functionsで組んだものを流用できたので、意外とサクッと実装出来ましたが、**初めてだと意味わからないかも**です。[StripeのAPIドキュメント](https://stripe.com/docs/api)はかなり読みまくったし、読んでも分からないときはStripeのサポートに連絡したりしてました。ちなみにStripeのサポートは英語だと５秒後くらいに返信くるので凄いです笑


# まとめ

ということで、今回は2021年3月1日にリリースした、CodeBoyの技術構成について簡単に紹介させていただきました。是非、エンジニアの方は講師申請してプランを作って下さい！また、新しい技術の勉強に役立ててください！

# リンク
### CodeBoy

https://codeboy.jp/

### Flutterの勉強するならFlutter大学！！
https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw