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

โลกแมป-แอป

Globemarks เป็นเว็บแอปพลิเคชันที่อนุญาตให้ผู้ใช้เข้าสู่ระบบสำรวจแผนที่โลกและทำเครื่องหมายประเทศที่พวกเขาเคยไป

การใช้แอพนี้ผู้ใช้สามารถสร้างบันทึกส่วนตัวของการเดินทางของพวกเขา ประเทศที่ทำเครื่องหมายไว้ทั้งหมดสามารถบันทึกได้และข้อมูลจะถูกเก็บไว้อย่างปลอดภัยในฐานข้อมูลนำเสนอวิธีการที่มีส่วนร่วมของผู้ใช้เพื่อสะท้อนการผจญภัยระดับโลกของพวกเขา

ไฮไลท์ตัวอย่าง?

map-webapp-demo.mov

คุณสมบัติ ?

  • แผนที่ทั่วโลกแบบอินเทอร์แอคทีฟ : นำทางแผนที่ภาพของโลกซูมเข้าและออกเพื่อสำรวจภูมิภาคต่างๆ
  • การทำเครื่องหมายของประเทศส่วนบุคคล : คลิกและทำเครื่องหมายประเทศที่คุณเคยเยี่ยมชมสร้างรอยเท้าการเดินทางที่ไม่เหมือนใคร
  • การสร้างภาพการเดินทางแบบไดนามิก : ดูประวัติการเดินทางของคุณมีชีวิตขึ้นมาเมื่อประเทศต่างๆเต็มไปด้วยสีสะท้อนถึงการเดินทางส่วนตัวของคุณ
  • การจัดการบัญชีผู้ใช้ : ลงทะเบียนเข้าสู่ระบบและจัดการคะแนนการเดินทางของคุณในอุปกรณ์ต่าง ๆ
  • การคงอยู่ของข้อมูล : บันทึกประเทศที่ทำเครื่องหมายไว้อย่างปลอดภัยในฐานข้อมูลช่วยให้คุณสามารถกลับมาทบทวนประวัติการเดินทางของคุณได้ตลอดเวลา

เทคโนโลยี

การทำแผนที่แบบอินเทอร์แอคทีฟด้วยแผ่นพับและภูมิศาสตร์

Globemarks ใช้ศิลปะการทำแผนที่แบบโต้ตอบไปอีกระดับโดยใช้การผสมผสานที่ทรงพลังของ ใบปลิว และ Geojson

  • ใบปลิว? : แผ่นพับ เป็นไลบรารี JavaScript โอเพนซอร์สชั้นนำสำหรับแผนที่แบบโต้ตอบ ด้วยการรวมเข้ากับ Globemarks เราจะนำประสบการณ์การทำแผนที่ที่รวดเร็วใช้งานง่ายและมีประสิทธิภาพ

  • Geojson? : Geojson เป็นรูปแบบสำหรับการเข้ารหัสโครงสร้างข้อมูลทางภูมิศาสตร์ที่หลากหลาย ที่สำคัญของมัน Globemarks ใช้ GeoJSON เพื่อเป็นตัวแทนของรูปร่างและขอบเขตของประเทศ สิ่งนี้ทำให้มั่นใจได้ถึงความแม่นยำและความแม่นยำเมื่อคุณทำเครื่องหมายประเทศที่คุณเคยไป

  • ร่วมกันเป็นคู่ที่สมบูรณ์แบบ? การรวมกันของความสามารถในการโต้ตอบของ ใบปลิว ด้วยการเป็นตัวแทนข้อมูลของ GeoJson ช่วยให้ผู้ใช้ Globemarks มีประสบการณ์ที่หลากหลายและดื่มด่ำ นำทางโลกซูมเข้าสู่ภูมิภาคและทำเครื่องหมายประเทศด้วยความมั่นใจเมื่อรู้ว่าคุณได้รับการสนับสนุนจากเครื่องมือที่ดีที่สุดในโลกของการทำแผนที่เว็บ

ส่วนหน้า

  • React : ใช้สำหรับการสร้างส่วนต่อประสานผู้ใช้รวมถึงส่วนประกอบเช่นแผนที่แบบโต้ตอบ
  • JavaScript : ภาษาการเขียนโปรแกรมที่ใช้ในการพัฒนาเว็บโดยเฉพาะอย่างยิ่งในการสร้างเอฟเฟกต์แบบโต้ตอบภายในเว็บเบราว์เซอร์

แบ็กเอนด์

  • Django : เฟรมเวิร์กเว็บ Python ระดับสูงที่ส่งเสริมการพัฒนาอย่างรวดเร็วและการออกแบบที่สะอาดและปฏิบัติ
  • Python : ภาษาการเขียนโปรแกรมที่รู้จักกันดีในเรื่องความสามารถในการอ่านและความเก่งกาจ
  • PostgreSQL : ระบบฐานข้อมูลที่ใช้สำหรับการจัดเก็บข้อมูลผู้ใช้และเครื่องหมายการเดินทางอย่างปลอดภัย

การควบคุมเวอร์ชัน

  • GIT : ใช้สำหรับการควบคุมเวอร์ชันช่วยให้สามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพและเปลี่ยนการติดตาม
  • GitHub : แพลตฟอร์มสำหรับโฮสต์ Codebase และการจัดการการทำงานร่วมกัน

จะใช้โครงการนี้บนเครื่องในพื้นที่ของคุณได้อย่างไร?

ขั้นตอนที่ 1: ดาวน์โหลดรหัส

ตัวเลือกที่ 1: โคลนที่เก็บ (สำหรับการใช้และการทดลอง) 

git clone https://github.com/otahina/Travel-Tracker-FullStack-Project.git

ตัวเลือกที่ 2: แยกที่เก็บ (สำหรับการบริจาค)

  1. คลิกที่ปุ่ม "ส้อม" ที่มุมบนขวาของหน้านี้
  2. เมื่อพื้นที่เก็บข้อมูลถูกแยกคุณสามารถโคลนไปยังเครื่องในพื้นที่ของคุณ:

ขั้นตอนที่ 2: สร้างสภาพแวดล้อมเสมือนจริง (เป็นทางเลือก แต่แนะนำ)

สำหรับ Windows 

 python -m venv myenv
.myenvScriptsactivate

สำหรับ macOS และ linux 

 python3 -m venv myenv
source myenv/bin/activate

ขั้นตอนที่ 3: ติดตั้งการพึ่งพา Python 

 cd world_map_app
pip install -r requirements.txt

ขั้นตอนที่ 4: ติดตั้งโมดูลโหนดสำหรับ React 

 cd world_map_app/frontend
npm install

ขั้นตอนที่ 5: การกำหนดค่าฐานข้อมูล PostgreSQL?

โครงการนี้ใช้ สำหรับฐานข้อมูล

ก่อนที่จะเรียกใช้โครงการคุณจะต้องตั้งค่าฐานข้อมูล PostgreSQL และกำหนดค่าไฟล์. .env

บน Windows:

  1. ดาวน์โหลดตัวติดตั้งจากเว็บไซต์ทางการ PostgreSQL
  2. เรียกใช้ตัวติดตั้งและทำตามคำแนะนำ

บน Mac:

คุณสามารถใช้ homebrew: 

 brew install postgresql
brew services start postgresql
  1. เปิดเครื่องมือบรรทัดคำสั่ง 
 psql -U postgres

 CREATE DATABASE your_database_name ; ①
CREATE ROLE newuser WITH LOGIN PASSWORD ' password ' ; ② ③
/ c  your_database_name;
GRANT ALL PRIVILEGES ON DATABASE your_database_name TO newuser;
GRANT ALL PRIVILEGES ON SCHEMA public TO newuser;

กำหนดค่าไฟล์. env

  1. เปิดไฟล์. envexample
  2. เปลี่ยนชื่อเป็นไฟล์ ' .env
  3. แก้ไขไฟล์. .env 
 ENGINE=django.db.backends.postgresql_psycopg2 # you don't need to change here
NAME=your_database_name_here　＃ ①
USER=your_database_user_here　＃ ②
PASSWORD=your_database_password_here　＃　③
HOST=localhost_or_host_address_here　# usually localhost
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด