หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

การสอบถามแผนที่

Queering the Map เป็นแพลตฟอร์มในชุมชนที่บุคคลต่างๆ ปักหมุดประสบการณ์และเรื่องราวแปลกๆ ของตนไปยังสถานที่เฉพาะบนแผนที่โลกโดยไม่ระบุชื่อ

ตั้งค่า

คุณมีสองตัวเลือกในการตั้งค่าโปรเจ็กต์: การตั้งค่าด่วนสำหรับงานฟรอนต์เอนด์เท่านั้น หรือการตั้งค่าแบบเต็มด้วย Supabase

ตัวเลือกที่ 1: การตั้งค่าด่วนสำหรับงานส่วนหน้าเท่านั้น

แนวทางนี้เร็วกว่าและช่วยให้คุณทำงานบนฟรอนต์เอนด์ได้โดยไม่ต้องตั้งค่า Supabase โปรดทราบว่าป๊อปอัปจะไม่แสดงข้อความหากคุณเลือกตัวเลือกนี้

  1. ติดตั้งการพึ่งพาด้วย npm ci
  2. รันสคริปต์ seed เพื่อสร้างข้อมูลจำลอง: npm run seed-data
  3. คัดลอก .env.example ลงใน .env : cp .env.example .env

ตัวเลือกที่ 2: การตั้งค่าแบบเต็มด้วย Supabase

แนวทางนี้จำเป็นหากคุณต้องการทำงานบนแบ็กเอนด์ด้วย ใช้เวลาในการตั้งค่านานกว่าแต่ก็มีสภาพแวดล้อมการพัฒนาที่สมบูรณ์ ซึ่งสอดคล้องกับสิ่งที่เราใช้ในการผลิต

  1. ติดตั้งการพึ่งพาด้วย npm install
  2. ตั้งค่าโปรเจ็กต์ Supabase (ท้องถิ่น) ด้วย CLI อย่างเป็นทางการ
  3. ตั้งค่าตัวแปรสภาพแวดล้อม
    1. คัดลอกไฟล์ .env.example ไปยัง .env (ด้วยตนเองหรือด้วย cp .env.example .env )
    2. รับ SUPABASE_URL และ SUPABASE_ANON_KEY ของคุณจากเอาต์พุตของ supabase start
  4. เรียกใช้การย้ายฐานข้อมูลภายในเครื่องด้วย supabase db reset
  5. ดึงข้อมูลจาก Supabase: npm run fetch-data

กำลังพัฒนา

ในการเริ่มต้นเซิร์ฟเวอร์การพัฒนา: 

npm run dev

การทดสอบ

สำหรับการทดสอบฐานข้อมูลตรวจสอบให้แน่ใจว่าได้เปิดใช้งานส่วนขยาย pgTap ใน postgres (ข้อมูลเพิ่มเติม) หลังจากนั้นคุณสามารถเรียกใช้: supabase test db

การปรับใช้และสร้างเพื่อการผลิต

หากต้องการใช้ Supabase เป็นแบ็กเอนด์ระยะไกล อย่าลืมเชื่อมโยงการพัฒนาในเครื่องของคุณกับโปรเจ็กต์ Supabase ระยะไกล:

  1. ตรวจสอบให้แน่ใจว่าคุณมีบัญชี Supabase และเชื่อมต่อกับ supabase cli: supabase login
  2. เชื่อมโยง supabase link --project-ref <project-ref> (ข้อมูลเพิ่มเติม)
  3. เรียกใช้การย้ายข้อมูลบน DB supabase db push ระยะไกล (ข้อมูลเพิ่มเติม)
  4. ตรวจสอบให้แน่ใจว่า env vars SUPABASE_URL และ SUPABASE_ANON_KEY ชี้ไปยังโครงการที่ใช้งานจริงที่ถูกต้อง ไม่ใช่คอนเทนเนอร์ในเครื่อง คุณสามารถคว้าได้จากภายในแดชบอร์ดของโครงการ Supabase

หากต้องการสร้างแอปเวอร์ชันที่ใช้งานจริง: 

npm run build

ตั้งค่าการป้องกันแคปต์ชา

สำหรับการป้องกันการส่งคะแนน Captcha เราใช้ Cloudflare Turnstile เมื่อคุณสร้างวิดเจ็ตที่นั่น ให้เติมค่าที่ถูกต้องสำหรับตัวแปร env: 

PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY
CLOUDFLARE_TURNSTILE_SECRET

สำหรับข้อมูลเพิ่มเติม โปรดดูคู่มือนี้: https://developers.cloudflare.com/turnstile/get-started/

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด