Go(Gin)とVue(Nuxt)で爆速でPWAを作ってみた

作ったアプリ

https://okazugacha.netlify.com/

おかずガチャです。

作った背景

世の中のお母さんは、毎日の晩御飯に悩みます。。。

学生の私でさえ、スーパーで購入する弁当に悩みます。

それを強制的に解決してくれるのが「おかずガチャ」です。

アプリ構成

Goを勉強したかったので、Firebaseなどを利用してサーバーレスにはせず、GinをAPIサーバーとして利用しています。APIサーバーはHerokuにデプロイし、Procfileでスクレイピングなども制御しています。

フロントエンドはNuxt.jsを利用しました。vue-cliを使用すれば、ポチポチするだけでPWAっぽいサービスが作成できます。Netlifyを使用しています。

HerokuもNetlifyも無料でかつ、デプロイが楽なのでありがたい。

おかず集め

ガチャの種となる、おかずコレクトの作業が必要です。

アプリ構成を見て分かる通り、Gopherくんがおかずをコレクトしています。私は、Goqueryを利用して、エバラのおかずサイトからスクレイピングしました。

https://github.com/PuerkitoBio/goquery

https://www.ebarafoods.com/recipe/cla_menu/49/?&limit=100

エバラのおかずサイトはどれも暖色系なので美味しそうですね！！

APIサーバー構築

大まかにこのような形でディレクトリ分けをしてみました。

MVCに近いと思います。

controllerでルーティングに対して、出力するmodelの値設定

dbはdbの設定（DBはDocker上にpostgresをDBサーバーとしてホスティングしていたので、その設定を書いています。）

frontendにフロントエンドのNuxt.jsのコード

modelにOkazuについての属性とsqlでDBからデータを持ってくる処理

routerディレクトリでルーティングの設定

をしました。

感想

私は、iPhoneを使用しているので、Safariから、おかずガチャのURLにアクセスしてホーム画面に追加を押すと、ブラウザとは独立してアプリのように動作してくれるようになりました！

すごい！簡単！