Valle GO · Guía completa (GitHub + Vercel + Supabase)

1. Qué hace cada servicio

• GitHub guarda tu código. Cada cambio que hagas ahí se publica solo.
• Vercel publica la página (con HTTPS, necesario para instalarla como app) y ejecuta una pequeña función que envía las notificaciones.
• Supabase guarda las cuentas, comercios, menús, pedidos, publicidad y fotos.

2. Estructura del proyecto

valle-go/
├─ public/                      ← lo que ven los clientes (la app)
│  ├─ index.html                   toda la aplicación
│  ├─ config.js                    TUS llaves públicas (lo único que editas para conectar)
│  ├─ sw.js, manifest.json         instalación y notificaciones
│  └─ icon-*.png, icon.svg         íconos
├─ api/                         ← funciones de Vercel
│  ├─ notificar.js                 envía las notificaciones
│  ├─ crear-pago.js                abre la página de pago de Stripe
│  └─ stripe-webhook.js            Stripe avisa aquí que el pago se hizo
├─ supabase/                    ← la base de datos (se pega en Supabase, no se sube a ningún lado)
│  ├─ schema.sql, schema-panel.sql, schema-notificaciones.sql, schema-pagos.sql
├─ herramientas/generar-llaves-vapid.html   ← se abre en tu computadora (no se publica)
├─ package.json, vercel.json    ← configuración de Vercel
└─ .gitignore

3. Paso a paso

Paso 1 · Supabase (base de datos)

1. En supabase.com crea una cuenta y un proyecto "valle-go". Anota la contraseña de la base de datos.
2. SQL Editor → New query. Pega y ejecuta (Run), uno por uno y en este orden: supabase/schema.sql, supabase/schema-panel.sql (sin ejecutar todavía su última línea, la de admins), supabase/schema-notificaciones.sql y supabase/schema-pagos.sql.
3. Project Settings → API: copia el Project URL y la llave anon (en el panel nuevo puede llamarse publishable key). Copia también la llave service_role (puede llamarse secret key): esa es SECRETA, solo irá en Vercel.
4. Authentication → Providers → Email: desactiva "Confirm email" mientras pruebas.

Paso 2 · Llaves de notificaciones

Abre en tu computadora (doble clic, en Chrome) herramientas/generar-llaves-vapid.html y pulsa Generar llaves. Copia la pública y la privada a un bloc de notas. La privada no se comparte ni se sube a GitHub. También inventa una clave secreta larga (por ejemplo 30 letras y números al azar): será el WEBHOOK_SECRET.

Paso 3 · GitHub

1. Crea cuenta en github.com → New repository → nombre valle-go → créalo Private (privado).
2. Pulsa uploading an existing file y arrastra TODO el contenido de la carpeta (las carpetas public, api, supabase, herramientas y los archivos sueltos). Pulsa Commit changes.
3. Para ver .gitignore: si no se sube por ser archivo oculto, no pasa nada.

Paso 4 · Conectar la app (config.js)

En GitHub abre public/config.js → lápiz (editar) → pega entre comillas el Project URL, la llave anon y la llave pública de notificaciones → Commit changes.

Paso 5 · Vercel

1. En vercel.com crea cuenta con "Continue with GitHub".
2. Add New → Project → elige valle-go → Import. En Framework Preset deja "Other".
3. Abre Environment Variables y agrega estas ocho:

Nombre	Valor
SUPABASE_URL	el Project URL
SUPABASE_SERVICE_ROLE_KEY	la llave service_role / secret
VAPID_PUBLIC_KEY	la llave pública generada
VAPID_PRIVATE_KEY	la llave privada generada
VAPID_SUBJECT	mailto:[email protected]
WEBHOOK_SECRET	la clave secreta que inventaste
STRIPE_SECRET_KEY	la llave secreta de Stripe (empieza con sk_test_ o sk_live_)
APP_URL	la dirección de tu app, por ejemplo https://valle-go.vercel.app (sin diagonal al final)

4. Pulsa Deploy. Al terminar tendrás una dirección tipo valle-go.vercel.app. Si cambias variables después, usa Deployments → Redeploy.

Paso 6 · Avisar a Vercel cuando entra un pedido (Webhook de Supabase)

En Supabase abre Database → Webhooks (en versiones nuevas puede estar en Integrations) → Create a new hook:

• Name: pedido-nuevo · Table: pedidos · Events: Insert y Update (los dos)
• Type: HTTP Request · Method: POST
• URL: https://TU-DIRECCION.vercel.app/api/notificar
• HTTP Headers: agrega Authorization con el valor Bearer TU_WEBHOOK_SECRET (la palabra Bearer, un espacio y tu clave).
• Guarda.

Paso 6b · Stripe (pagos en línea)

1. Confirma que tu cuenta de Stripe sea de México (moneda MXN) y completa la verificación de tu negocio; sin eso no podrás recibir pagos reales. Empieza siempre en modo de prueba (Test mode).
2. Settings → Payment methods: activa tarjetas, OXXO y transferencia bancaria (SPEI) si Stripe te la ofrece. La app no necesita cambios: Stripe muestra al cliente los métodos que tengas activos.
3. Developers → API keys: copia la Secret key (sk_test_...) y pégala en Vercel como STRIPE_SECRET_KEY. Nunca la pongas en GitHub ni en config.js. (Stripe no necesita conectarse a GitHub para funcionar; solo necesita esta llave en Vercel.)
4. Developers → Webhooks → Add endpoint (en el panel nuevo puede llamarse Event destinations):
   • URL: https://TU-DIRECCION.vercel.app/api/stripe-webhook
   • Eventos: checkout.session.completed, checkout.session.async_payment_succeeded, checkout.session.async_payment_failed y checkout.session.expired.
5. Haz Redeploy en Vercel para que lea las variables nuevas.
6. Prueba: pide algo con "Pago en línea" y paga con la tarjeta de prueba 4242 4242 4242 4242, cualquier fecha futura y cualquier CVC. En segundos el pedido debe pasar a Pagado y el comerciante recibe su notificación.
7. Salir a producción: cambia STRIPE_SECRET_KEY por la llave sk_live_..., crea de nuevo el webhook en modo real y haz Redeploy.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗