Mongodb、Express、React Native、nodejsで作られたフルスタックオープンソースモバイルeコマースアプリケーション
- 構成とセットアップ
- 重要な機能
- 使用されたテクノロジー
- フロントエンド（モバイル）
- バックエンド
- データベース
- ？モックアップ
- ？プロジェクトビデオ
- 著者
- ライセンス
構成とセットアップ
このプロジェクトをローカルに実行するには、リポジトリをフォークしてクローンするか、マシンでzipとzipとしてダウンロードします。
- 希望するコードエディターでプロジェクトを開きます。
- ターミナルに移動 - >新しい端末（VSコードを使用している場合）
- まず、ngrokサーバーを実行する必要があります。このサーバーはプロジェクト作業のためにシャットダウンしないでください
- 次に、別の端子を開きます。端末を半分に分割します（1つの端末でサーバーを実行し、もう1つの端末にクライアントを実行します）
Ngrokは、xxx.ngrok.ioサブドメインの下で、クラウドの上にある独自のコンピューターでローカルホストで実行するアプリケーションを開くことができるソフトウェアです。 ngrokセットアップ。
1- ngrokを使用してサーバーを公開するには。
- 次に、実行中のサーバーにngrok URLをコピーします
- CDクライアントと貼り付けngrok_url in .env under ./client
- これで、クライアントとの接続が確保されます
NGROK_URL = "http://_______.ngrok.io"
2-別の端子;
端末の前半
$ cd Client
$ npm install (to install client-side dependencies)
$ expo r -c
ターミナルの後半
- config.env under./config/envのCDサーバーと設定環境変数
- mongo_uriとして使用するmongodb接続URLを作成します
- 次の資格情報を提供します
# --- Config.env ---
NODE_ENV = development
PORT =5000
MONGO_URI =
JWT_SECRET_KEY =
# --- Terminal ---
$ npm install (to install server-side dependencies)
$ npm start (to start the server)
重要な機能
- hurse remationユーザー登録とログイン
- JWTトークンを使用した認証
- ✔愛、お気に入り、コメントし、製品をカートに追加します
- Colorとサイズの情報に応じて製品を選択し、カートに追加します
- ✔️あなたが見た最新の製品と同様の製品の推奨事項を表示する
- product製品カテゴリページとサブカテゴリの表示
- hame名、ブランド、カテゴリで製品を検索します
- CART内の各アイテムの数量を増やし、減少、または削除する
- derix配送先住所と銀行カードを選択して注文を受信する
- olly各注文のすべての注文と各注文の最新のステータス（配送時間、配達日）を示す詳細ページ
- passeページを変更します。ページを変更します
- Error Handlingに注意が払われました
- パスワードページとパスワードのリセットを忘れました
- コメントに写真を追加します
- Googleアカウントでログインします
- 各ブランドのカスタムページを作成します
- 支払いシステムの追加（ストライプ）
- リクエストは時々ゆっくりと処理され、同時に解雇されたときに問題を引き起こすことがあります（マイクロサービスアーキテクチャは解決策になる可能性がありますか？）
使用されたテクノロジー
このプロジェクトは、次のテクノロジーを使用して作成されました。
フロントエンド（モバイル）
- React JS -Single -Pageアプリケーション専用にユーザーインターフェイスを構築するために使用されるJavaScriptライブラリ
- Reactフック - アプリケーションの状態を管理および集中化するため
- React Native-クロスプラットフォームモバイルアプリケーション開発フレームワーク
- React Navigation V6-エキスポのルーティングとナビゲーションとネイティブアプリを反応する
- Axios- API呼び出しを行うため
- React-Native-Bouncy-Checkbox
7.2.1 - React-Native-Element-Textinput
2.2.0 - React-Native-Gesture-Bottom-Sheet
1.1.0 - React-Native-Indicators
0.17.0 - React-Native-Modal
13.0.1 - React-Native-Popup-Menu
0.16.1 - React-Native-Progress
5.0.0 - React-Native Ratings
8.1.0 - React-Native-Safe-Area-Context
4.4.1 - React-Native-Simple-Dialogs
1.5.0 - React-Native-Step-Indicator
1.0.3 - React-Native-Toast-Message
2.1.6 - React-Textarea-autosize
2.1.6
バックエンド
- ノードJS -JSを使用して高速サーバーアプリケーションの構築に役立つランタイム環境
- JSをExpress- HTTPリクエストを処理およびルーティングするためのサーバー
- Mongoose-MongoDBデータをJavaScriptにモデリングとマッピング
- Express-Asynchandler- Async Expressルート内の例外を処理するためのシンプルなミドルウェアとそれらをExpressエラーハンドラーに渡す
- JsonWebtoken-認証用
- bcryptjs-データ暗号化用
- Dotenv -環境変数をロードするゼロ依存性モジュール
- Multer -node.jsファイルをアップロードするためのミドルウェア
- CORS -Connect/Express Middlewareを提供します
- UUID-ランダムIDジェネレーター用
データベース
- Mongodb -Mongodbコレクションを保存するための無料のクラウドサービスを提供します。
モックアップ
著者
ライセンス
Copyright 2023 Muhammet Yıldız
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
プロジェクトビデオ
hizlisepet.mp4
