Travel Tracker FullStack Project

GlobeMarksは、ユーザーがログインし、世界の地図を視覚的に探索し、訪問した国をマークできるWebアプリケーションです。

このアプリを使用すると、ユーザーは旅のパーソナライズされたレコードを作成できます。マークされたすべての国を保存することができ、データはデータベースに安全に保存されており、ユーザーにグローバルな冒険を反映する魅力的な方法を提供します。

デモのハイライト？

Map-Webapp-demo.mov

特徴 ？

• インタラクティブなグローバルマップ：世界の視覚的なマップをナビゲートし、ズームインとさまざまな地域を探索します。
• パーソナライズされたカントリーマーキング：訪れた国をクリックしてマークし、ユニークな旅行フットプリントを作成します。
• ダイナミックジャーニーの視覚化：あなたの個人的な旅を反映して、国が色で満たされている間、あなたの旅行の歴史が生き返るのを見てください。
• ユーザーアカウント管理：さまざまなデバイスでの旅行マークを登録、ログイン、および管理します。
• データの持続性：マークされた国をデータベースに安全に保存し、いつでも旅行履歴を再訪できるようにします。

テクノロジー

リーフレットとジオジソンとのインタラクティブマッピング

GlobeMarksは、リーフレットとGeojsonの強力な組み合わせを使用して、インタラクティブマッピングの技術を次のレベルに採用します。

• リーフレット？ ：リーフレットは、インタラクティブマップ用の主要なオープンソースJavaScriptライブラリです。それをグローブマークに統合することにより、高速で直感的で効率的なマッピングエクスペリエンスをお届けします

• ジオジソン？ ： Geojsonは、さまざまな地理的データ構造をエンコードするための形式です。 GlobeMarksは、その中心で、Geojsonを使用して国の形と境界を表しています。これにより、訪問した国をマークすると、精度と精度が保証されます。

• 一緒に、完璧なペア？ Leafletのインタラクティブな機能とGeojsonのデータ表現の融合により、 GlobeMarksのユーザーが豊富で没入型の体験を提供します。グローブをナビゲートし、地域に拡大し、Webマッピングの世界で最高のツールのいくつかに裏付けられていることを知って、自信を持って国をマークしてください。

フロントエンド

• React ：インタラクティブマップなどのコンポーネントを含むユーザーインターフェイスの構築に使用されます。
• JavaScript ：Web開発で使用されるプログラミング言語、特にWebブラウザー内のインタラクティブ効果の作成。

バックエンド

• Django ：急速な開発と清潔で実用的なデザインを促進する高レベルのPython Webフレームワーク。
• Python ：読みやすさと汎用性で知られるプログラミング言語。
• 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：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. インストーラーを実行して、指示に従ってください。

Mac：

あなたは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;

configure .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