Travel Tracker FullStack Project

Globemarks هو تطبيق ويب يسمح للمستخدمين بتسجيل الدخول ، واستكشاف خريطة العالم بصريًا ، وتمييز البلدان التي زاروها.

باستخدام هذا التطبيق ، يمكن للمستخدم إنشاء سجل مخصص لرحلاته. يمكن حفظ جميع البلدان الملحوظة ، ويتم تخزين البيانات بشكل آمن في قاعدة البيانات ، مما يوفر للمستخدمين طريقة جذابة للتفكير في مغامراتهم العالمية.

أبرز الأحداث التجريبية؟

MAP-WEBAPP-DEMO.MOV

سمات ؟

• الخريطة العالمية التفاعلية : انتقل خريطة بصرية للعالم ، والتكبير والخروج لاستكشاف مختلف المناطق.
• وضع علامة على البلد المخصص : انقر وتمييز البلدان التي قمت بزيارتها ، وخلق بصمة سفر فريدة من نوعها.
• تصور الرحلة الديناميكي : انظر تاريخ السفر الخاص بك يأتي إلى الحياة حيث تملأ البلدان اللون ، مما يعكس رحلتك الشخصية.
• إدارة حساب المستخدم : تسجيل وتسجيل الدخول وإدارة علامات السفر الخاصة بك عبر أجهزة مختلفة.
• ثبات البيانات : احفظ البلدان المحددة بشكل آمن في قاعدة البيانات ، مما يتيح لك إعادة النظر في تاريخ السفر في أي وقت.

التقنيات

رسم الخرائط التفاعلية مع نشرة و geojson

يأخذ Globemarks فن التعيين التفاعلي إلى المستوى التالي باستخدام مزيج قوي من المنشور و geojson .

• نشرة؟ : Listlet هي مكتبة JavaScript الرائدة مفتوحة المصدر للخرائط التفاعلية. من خلال دمجها في Globemarks ، نقدم لك تجربة رسم خرائط سريعة وبديهية وفعالة

• جيوجسون؟ : Geojson هو تنسيق لترميز مجموعة متنوعة من هياكل البيانات الجغرافية. في جوهرها ، تستخدم Globemarks Geojson لتمثيل أشكال وحدود البلدان. هذا يضمن الدقة والدقة عند وضع علامة على البلدان التي قمت بزيارتها.

• معا ، زوج مثالي؟ يمنح دمج إمكانات Liklet التفاعلية مع تمثيل بيانات Geojson مستخدمي Globemarks تجربة غنية وغامرة. انتقل إلى الكرة الأرضية ، والتكبير إلى المناطق ، ووضع علامة على البلدان بثقة مع العلم أنك مدعوم ببعض من أفضل الأدوات في عالم رسم خرائط الويب.

الواجهة

• رد فعل : يستخدم لبناء واجهة المستخدم ، بما في ذلك مكونات مثل الخريطة التفاعلية.
• JavaScript : لغة برمجة تستخدم في تطوير الويب ، وخاصة في إنشاء تأثيرات تفاعلية داخل متصفحات الويب.

الخلفية

• Django : إطار عمل بايثون رفيع المستوى يشجع على التطور السريع والتصميم النظيف والعملي.
• بيثون : لغة برمجة معروفة بسهولة القراءة والتعدد الاستخدامات.
• PostgreSQL : نظام قاعدة البيانات المستخدم لتخزين بيانات المستخدم وعلامات السفر بشكل آمن.

السيطرة على الإصدار

• GIT : يستخدم للتحكم في الإصدار ، مما يسمح بالتعاون الفعال وتغيير التتبع.
• GitHub : منصة لاستضافة قاعدة كود وإدارة التعاون.

كيفية استخدام هذا المشروع على جهازك المحلي؟

الخطوة 1: قم بتنزيل الرمز

الخيار 1: استنساخ المستودع (لاستخدام وتجريب)

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

الخيار 2: شوكة المستودع (للمساهمة)

1. انقر على زر "Fork" في الزاوية العلوية اليمنى من هذه الصفحة.
2. بمجرد أن يتم تشويه المستودع ، يمكنك استنساخه إلى جهازك المحلي:

الخطوة 2: إنشاء بيئة افتراضية (اختيارية ولكن موصى بها)

لنظام التشغيل Windows

 python -m venv myenv
.myenvScriptsactivate

لماكوس ولينكس

 python3 -m venv myenv
source myenv/bin/activate

الخطوة 3: تثبيت تبعيات Python

 cd world_map_app
pip install -r requirements.txt

الخطوة 4: تثبيت وحدات العقدة للرد

 cd world_map_app/frontend
npm install

الخطوة 5: تكوين قاعدة بيانات PostgreSQL؟

يستخدم هذا المشروع لقاعدة البيانات

قبل تشغيل المشروع ، تحتاج إلى إعداد قاعدة بيانات postgreSQL وتكوين ملف .env .

على Windows:

1. قم بتنزيل المثبت من موقع PostgreSQL الرسمي.
2. قم بتشغيل المثبت واتبع التعليمات.

على ماك:

يمكنك استخدام homebrew:

 brew install postgresql
brew services start postgresql

3. افتح أداة سطر الأوامر

 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