Giter Club home page Giter Club logo

matsumoto-castle-town-stamp's Introduction

松本城下町 スタンプラリー LINE ミニアプリ

スライドは、Slide からご覧ください

技術スタック

コアサーバー

  • Express.js(TypeScript)

QR コードリーダー

  • LIFF, React(TypeScript)
  • Express.js(TypeScript)

みんなの思い出(memories gallery)

  • Next.js(TypeScript)
  • Express.js(TypeScript)

使い方

MinIO, PostgreSQL を起動

docker compose up --build

core-server を起動

cd core-server && pnpm start

qrcode-reader を起動

cd qrcode-reader/server && pnpm start
cd qrcode-reader/ui && yarn dev

memories-gallery を起動

cd memories-gallery/server && pnpm start
cd memories-gallery/ui && pnpm dev

また、各ディレクトリに配置されている.env.sample.envにコピーして必要な情報を書く必要がある。

作者

@yu1hpa

ライセンス

The source code is under MIT LICENSE
BUT, Idea is Creative Commons License

matsumoto-castle-town-stamp's People

Contributors

yu1hpa avatar

Stargazers

Soma Ando avatar

Watchers

 avatar

matsumoto-castle-town-stamp's Issues

アプリが`follow`されたときに、このアプリの概要を説明するメッセージを送信

概要を説明するメッセージ

  • 本アプリでは松本城下町を舞台にしたスタンプラリーを提供
  • 指定されたスポットへ行き、そこにあるQRコードを読み込むことでスタンプを押したことになる
  • その他の機能として、QRコードを読み込んだスポットの情報の提供
  • そのスポットで思い出の写真を一枚保存できる(誰でも見ることができることに注意)
  • みんなが投稿した思い出の写真を見ることができるWebページがある

スポットの写真を保存

以下の機能を実装

  • ストレージとしてminIOを使う
  • コンテンツを取得 を使ってminIOに保存
  • 不要==このとき、写真の名前を一意なものに変更~~
  • 一意の写真の名前をUserSpotテーブルのimgFileName に保存

巡った数によってクーポンを発行

  • 3つ以下 : 10%割引クーポン
  • それ以上 : 20%割引クーポン

実装

  • managerから二種類のクーポンを作成
  • "一回限り使用"のクーポンのURLをUserSpot.userIdを見て、巡った数に応じて配信する形

QRコードでスポットを巡ったことを記録

以下の機能を実装する

  • QRコードには各spotIdを用意する(固定)
  • uiからuserIdとspotIdをserverに送り、UserSpotテーブルの情報をアップデート
  • liff.getIDToken()で取得したid_tokenspot_idをサーバーに送り、
    • id_tokenを検証することでsub(userId)を得る
    • UserSpotテーブルの情報をアップデート

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.