Giter VIP home page Giter VIP logo

gourmet-ar-app's Introduction

(3Dモデルで表⽰することによるフィードバックを求めています。下記記載)

MeAR ~3Dで見るグルメアプリ~ (開発中)

外食先での飲食体験をより豊かなものにする、 3Dモデルの閲覧を可能とした新感覚グルメレビューアプリ

スキャンアプリ 既存の3Dスキャンアプリで作成した3Dモデルをアップロードすることで、3Dモデルの投稿を実現しています

🏃🏻Demo

3Dモデルを活用することで、以下のような視覚体験をすることが可能となります

f4e35fea-dd66-40c6-9ae2-3705f72175cf.mp4

❓3Dスキャンアプリとは?

ここでは詳しくは説明しないのですが、ざっくり紹介すると、スマホ一台で3Dスキャンを行うことができ、誰でも手軽にそれなりの精度の3Dモデルを作ることができます

興味を持った方はぜひ試してみてください!:
3Dスキャンアプリ ~Scaniverse~ 公式ページ
(スキャンアプリについて詳しく知りたい方は、以下の記事を参考に)
徹底解説!iPhone 3Dスキャンの撮り方全て教えます

📝使い方 〜アクセスからAR表示まで〜

本アプリはAR機能の習性上、モバイル端末でのみ機能を使うことができます。

[注意] 現在開発段階にあり、画像が表示されなかったり、正しく動作しない場合があります

何か問題が見つかった場合は、フォームに詳細内容を入力して送信していただけると助かります

MeARフィードバックフォーム


1. アプリへのアクセス

スマホからのアクセスお願いします

デスクトップで開いている方は、モバイル端末で下記のURLにアクセスするか、QRコードを読み取ってサイトにアクセスしてください。

サイト

(QRコード)

Untitled


2. ログイン・新規登録画面

アプリにアクセスすると、最初にログイン画面に遷移します

ここではログイン・新規登録・ゲストログインの3つの選択肢があります.
(※ローディングに時間がかかる場合があります)

1.ゲストでログインする場合

「ログインor新規登録」ボタンの下記にあるゲストログインボタンを押すことで、ユーザー認証を行わずにログインすることが可能です

2.ログインする場合

登録したメールアドレスとパスワードを入力後、ログインボタンを押してください

ログインに成功すると、フィード画面に遷移します

3.新規で登録する場合

「アカウントを持っていない場合はこちら」というボタンを押すと、新規登録画面に切り替わります

そこでメールアドレスとパスワードを入力し、新規登録ボタンを押してください

登録に成功すると、フィード画面に遷移します


3. フィード画面

この画面では全てのユーザーの投稿一覧を閲覧することができます

(現在は投稿機能が実装できていないため、開発者の投稿のみを表示)

画像をタップすると、投稿詳細画⾯に遷移します

1.ゲストログインの場合

上部のNavbarがLoginボタンになっています

(ボタンを押すとログイン画面へ遷移します)


4. 投稿詳細画面

(※画像や3Dモデルが表示されない場合があります。その際は、再読み込みしてください) 投稿の詳細を確認することができます

1.3Dモデルが表⽰されます ※モデルの読み込み時間があります。
2.右下のアイコンを押すことで、AR画⾯へ移動します


5. 3Dモデルの閲覧・アップロード体験画面

3Dモデル閲覧の体験、モデルのアップロードを試すことができる画面です

(将来的には、3DスキャンとARを紹介するページになる予定です)

1.デフォルトではステーキのモデルが表⽰されています
2.ファイルアップロードであなたが所持しているglbファイルをアップロードすることで、そのモデルが表⽰されます

🙇🏻‍♂️フィードバックのお願い

3Dモデルで表⽰することにより、既存のグルメアプリと⽐べてどのような違いがあるのか、ぜひ皆様の体験と意⾒を共有してください

(本アプリの使い⽅については、上記に記載しています)

具体的には、以下の点についてのフィードバックを求めています

  • 各端末に応じたページの読み込み速度

    (例:次のページに遷移するまでにどれぐらい時間がかかるか)

  • 3Dモデルの閲覧体験について

    (例:読み込み時間、表⽰品質、操作性など)

  • 画面デザインやUIについてのご意⾒

    (例:投稿⼀覧画⾯で⾒たい情報や、画⾯のレイアウトなど)

  • 機能追加や改善のためのアイデアや提案

    (例:こんな機能がほしい、こんな⾒た⽬の⽅が⾒やすいなど)

  • バグや技術的な問題に遭遇した場合の詳細情報

フィードバックの提出⽅法

下記のフォームから提出お願いします

MeARフィードバックフォーム

⚙️開発環境・実施環境

エディタ

  • VSCode
  • PyCharm

プロジェクト管理

  • Notion
  • Miro

コード管理

  • Git/Github

開発言語・フレームワーク

言語

フロント:TypeScript: 5.1.3
バック:Python

フレームワーク

フロントエンド

  • Next.js: 12.3.2.
  • TailwindCSS: 3.3.2.
  • (plugin)daisyUI:3.0.23 バックエンド
  • DjangoRestFramework==3.10.0
  • Django==3.0.7

クラウドプラットフォーム

フロントエンド:Vercel

バックエンド:Render

メディアファイル:GoogleCloudStorage

🌐実施環境

本アプリはAR機能を用いるため、モバイル端末でのブラウザアクセスを推奨しています (※デスクトップでもアプリケーション自体は動作しますが、ARの機能は使用できません)

3D表示・AR機能対応ブラウザ

3D表示 AR機能
GoogleChrome ⭕️ ⭕️
Safari ⭕️ ⭕️
Firefox ⭕️
Microsoft Edge ⭕️
Brave ⭕️

レイアウトに関しても、現在はモバイルでの実用のみを考えて設計しています。


🙍‍♂️Author:ふくえもん

gourmet-ar-app's People

Contributors

fukuemon avatar

Watchers

 avatar

gourmet-ar-app's Issues

3DとARについての紹介ページの作成

3Dスキャンについて知らない人たちに普及できるように紹介ページを作成する

  • モデルのアップロード機能実装

紹介内容

  • 3Dスキャンについて
  • 3Dスキャンアプリについて

現状の問題点とコードの可読性の向上

アプリの動作

  • 初回アプリ起動時の立ち上がりが遅い
  • 3Dモデルがレンダリングされるまでに時間がかかる
  • メディアファイルが読み込まれない場合がある

UI・UX

  • 初期画面がログインページのため、一番伝えたい3Dの機能を見てもらうまでに一手間かかる
  • プロフィールアイコンをクリックした際に、ボトムダウンが投稿の下側に表示される
  • ダークモードに対応していない
  • ボトムナブバーの違和感

コード

  • ディレクトリ構成を変更する
  • コンポーネントを細分化する
  • ロジックとビューを分割できる部分は分ける

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.