アプリのダウンロードとビルド#

MeDo のプロジェクトコード書き出し機能では、アプリのコードをダウンロードできます。ダウンロードごとに 80 クレジットを消費します。

シナリオとユースケース：

1. シンプルなフロントエンドアプリの場合、開発者は zip ファイルをダウンロードした後、ダウンロードしたコードパッケージをローカルで直接デプロイして実行できます。
2. バックエンドのデータ保存を伴う複雑なアプリの場合、開発者は Supabase サービスを統合するために追加の開発を行う必要があります。

#アプリコードをダウンロードするには？

アプリが正常に生成されると、編集画面の上部に「ダウンロード」ボタンが表示されます。このボタンをクリックするだけで、アプリのコードパッケージをダウンロードできます。アプリ生成中はコードをダウンロードできない点に注意してください。

ダウンロードされるコードのバージョンは、開発者が現在編集中の特定のアプリバージョンに対応します。

重要な点として、開発中にエディターで GUI 変更（フォントや色の編集など）を行った場合は、コードをダウンロードする前に、まずアプリをプレビューするか公開する必要があります。これにより、ダウンロードしたコードパッケージにすべての GUI 変更が含まれます。そうしないと、直接ダウンロードしたコードにはこれらの GUI 変更が含まれません。

#開発ガイド

コードパッケージをダウンロードした後は、まず以下の説明に従って環境を準備し（Node.js と npm をインストール）、その後 IDE でコードパッケージを開いて、アプリをローカルにデプロイして実行します。

IDE： ローカルでコードを編集するには、VSCode、IntelliJ IDEA を選択するか、好みの IDE を使用できます。

#環境要件

# Node.js ≥ 20
# npm ≥ 10
例：
# node -v   # v20.18.3
# npm -v    # 10.8.2

#Windows で Node.js をインストールする

# 手順 1：Node.js 公式サイト https://nodejs.org/ にアクセスし、ダウンロードをクリックします。サイトはシステムに適したバージョン（32 ビットまたは 64 ビット）を自動的に提案します。
# 手順 2：インストーラーを実行します。ダウンロードしたインストーラーをダブルクリックして実行します。
# 手順 3：インストールを完了します。インストールウィザードに従って手順を完了します。
# 手順 4：インストールを確認します。コマンドプロンプト（cmd）または IDE のターミナルを開き、`node -v` と `npm -v` を入力して、Node.js と npm が正しくインストールされているか確認します。

#macOS で Node.js をインストールする

# 手順 1：Homebrew を使用する（推奨）：ターミナルを開きます。`brew install node` と入力して Enter を押します。Homebrew がインストールされていない場合は、先にターミナルで次のコマンドを実行してインストールしてください。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
または公式インストーラーを使用します。Node.js 公式サイトにアクセスし、macOS 用 .pkg インストーラーをダウンロードします。ダウンロードした .pkg ファイルを開き、画面の指示に従ってインストールを完了します。
# 手順 2：インストールを確認します。コマンドプロンプト（cmd）または IDE のターミナルを開き、`node -v` と `npm -v` を入力して、Node.js と npm が正しくインストールされているか確認します。

手順 1：

手順 1 の代替方法：

ターミナルで次のコマンドを実行します：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

#インストール後、次の手順に従います。

# 手順 1：コードパッケージをダウンロードする
# 手順 2：コードパッケージを展開する
# 手順 3：IDE でコードパッケージを開き、コードディレクトリに移動する
# 手順 4：IDE のターミナルで依存関係をインストールするコマンドを実行する：npm i
# 手順 5：IDE のターミナルで開発サーバーを起動するコマンドを実行する：npm run dev -- --host 127.0.0.1
# 手順 6：手順 5 が失敗した場合は、次のコマンドで開発サーバーの起動を試します：npx vite --host 127.0.0.1

#バックエンドサービスを開発するには？

バックエンドのデータ保存機能を持つアプリでは、ソースコードを取得した後、開発者は自身の Supabase プロジェクトを統合し、以降の二次開発と管理を行う必要があります。

Supabase 公式サイト：https://supabase.com/

#Supabase で SQL をインポートして実行する

#ソースコードパッケージ内の環境変数を置き換える

.env ファイル内の以下を、自分の認証情報に置き換えます。

• URL と API キーを更新する

注意： VITE_SUPABASE_PROXY=true を false に変更してください。