Travel Tracker FullStack Project

Globemarks는 사용자가 로그인하고 시각적으로 세계지도를 탐색하며 방문한 국가를 표시 할 수있는 웹 응용 프로그램입니다.

이 앱을 사용하여 사용자는 자신의 여정에 대한 개인화 된 레코드를 만들 수 있습니다. 모든 표시된 국가를 저장할 수 있으며 데이터는 데이터베이스에 안전하게 저장되어 사용자에게 글로벌 모험을 반영 할 수있는 매력적인 방법을 제공합니다.

데모 하이라이트?

map-webapp-demo.mov

특징 ?

• 대화식 글로벌 맵 : 세계의 시각적지도를 탐색하여 다양한 지역을 탐색하기 위해 확대 및 축소합니다.
• 개인화 된 국가 표시 : 방문한 국가를 클릭하여 표시하여 독특한 여행 발자국을 만듭니다.
• 역동적 인 여행 시각화 : 국가가 개인적인 여정을 반영하여 국가가 색상으로 채워지면서 여행사가 생겨나는 것을보십시오.
• 사용자 계정 관리 : 다른 장치에서 여행 마크를 등록, 로그인 및 관리합니다.
• 데이터 지속성 : 표시된 국가를 데이터베이스에 단단히 저장하여 언제든지 여행 기록을 다시 방문 할 수 있습니다.

기술

리플렛 및 Geojson을 사용한 대화식 매핑

Globemarks는 리플렛 과 Geojson 의 강력한 조합을 사용하여 대화식 매핑 기술을 다음 단계로 가져갑니다.

• 전단지? : Leaflet은 대화식지도를위한 주요 오픈 소스 JavaScript 라이브러리입니다. 그것을 Globemarks 에 통합하여 빠르고 직관적이며 효율적인 매핑 경험을 제공합니다.

• 지오 슨? : Geojson 은 다양한 지리적 데이터 구조를 인코딩하는 형식입니다. 핵심적으로 Globemarks는 Geojson을 사용하여 국가의 모양과 경계를 나타냅니다. 이를 통해 방문한 국가를 표시하면 정밀도와 정확성을 보장합니다.

• 함께 완벽한 쌍? Geojson 의 데이터 표현과 함께 Leaflet 의 대화식 기능의 융합은 Globemarks 사용자에게 풍부하고 몰입감있는 경험을 제공합니다. 글로브를 탐색하고 지역을 확대하며 웹 매핑 세계에서 최고의 도구를 뒷받침하고 있다는 사실을 알고 국가를 표시하십시오.

프론트 엔드

• React : 대화식 맵과 같은 구성 요소를 포함하여 사용자 인터페이스 구축에 사용됩니다.
• JavaScript : 웹 개발에 사용되는 프로그래밍 언어, 특히 웹 브라우저 내에서 대화식 효과 생성에 사용됩니다.

백엔드

• Django : 빠른 개발과 깨끗하고 실용적인 디자인을 장려하는 고급 파이썬 웹 프레임 워크.
• 파이썬 : 가독성과 다양성으로 유명한 프로그래밍 언어.
• PostgreSQL : 사용자 데이터 및 이동 마크를 안전하게 저장하는 데 사용되는 데이터베이스 시스템.

버전 제어

• GIT : 버전 제어에 사용되어 효율적인 협업 및 변경 추적이 가능합니다.
• GitHub : 코드베이스 호스팅 및 협업 관리를위한 플랫폼.

이 프로젝트를 로컬 컴퓨터에서 사용하는 방법은 무엇입니까?

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 단계 : 파이썬 종속성을 설치합니다

 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 :

홈브류를 사용할 수 있습니다 :

 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