Mernスタックを使用してeコマースのWebアプリを開発する

あなたはeコマースウェブアプリを開発したいですか?
(バックエンドとフロントエンドを完備したWebアプリケーションの開発/完全なスタックWebアプリケーションの開発/Mern Stack Webサイトの開発)
このブログは、どのようなツールは、eコマースのWebアプリを開発する学習中に選択する理由は、絵を描くのに役立ちます.

In this blog, I will try to answer the reasons behind going with the options that I went with while developing ARUNABHSTORE. If you are a beginner developer, do give Blogaroo — Developing a blogging platform using MERN stack a read as I have discussed in details about the road map to learn a lot about MERN stack. As a bonus, that blog also discusses about Next.JS

そう、私たちがこのブログで参照するつもりである実際のeコマースウェブアプリについて最初に話しましょう:arunabhstore.netlify.app/

どのようなarunabhstoreですか?
これは、電子商取引のWebアプリケーションMernスタック内蔵.趣味として開発しました.これは、1つの訪問、登録、購入、デモ製品との取引を行うことができます完全に機能的なWebアプリです.言うまでもなく、このWebアプリは、すべての機能を使用して、デモンストレーションの目的のためだけで動作している状態で焼く.あなたがこのウェブアプリを経験したいならば、私は前方に行って、カートでチェックアウトセクションで提供されるデモクレジットカードでデモ購入をすることを勧めます.
技術仕様
タイトルが言うように、私はMernスタックを使用してこれを構築しました
バックエンド

ノード.エクスプレス.JS

マングースと一緒の

モンゴDB
フロントエンド
*反応する.js

If you are interested, you can know more from GITHUB.

だから、なぜ反応.js
このプロジェクトを始める前に、私は反応を使用していくつかの仕事をしていた.若干の小さいプロジェクトのためのjs.だから、私は非常にフレームワークに精通していた.私は角度とVueのような他のオプションを考慮しました、しかし、私は反応でより快適に感じました.その時までのjs.そして、何が反応する.JSは、テーブルにもたらします十分になぜ1つの反応をしたい明らかです.ジェイエスルート.それは速く、簡単に州を管理し、より多くのです.だから、なぜ反応です.jsそして率直に言って、私は本当に反応を使いたかったです.js😅.
それで、それは反応で行く私の理由でした.フロントエンドのためのJS.あなたは初心者の開発者であり、それはあなたに意味をなさない場合はほとんど、心配しないでください.ちょっとこのブログでロードマップを読んでください.私は完全に初心者から良いフロントエンドの開発者、実際には、完全なスタックMRN開発者に行くことができる詳細について議論した.
それで、それはフロントエンド部分についてすべてでした.現在、あなたはこれらの2人のうちの1人でありえます

反応を使用してクライアントアプリケーションの構築を開始します.バックエンドの開発者とバックエンドの部分を手にしてください.

または

自分でバックエンドを開発したい.
元の場合は、それはあなたのWebアプリの開発を開始するための時間です.そして、このブログがあなたが探していた答えを見つけるのを手伝ってほしい.そして、私はあなたのプロジェクトに幸運を祈る.😇 あなたが後に続いているならば、私がなぜノードと一緒に行ったかについて説明します.データベースとしてのバックエンドとMongoDBとしてのJS

したがって、なぜノード.JS ?
あなたが以前に言及したTHE OTHER BLOGを読んだならば、答えは私が単に行って、ここで引用するつもりである同じものです.

For starters, it’s a JavaScript runtime environment. And being JS, there was not one-second thought for me. It had to be Node.JS. Moreover, with Express.JS which as stated in their very own WEBSITE, is a Fast, unopinionated, minimalist web framework for Node.JS. And as the frontend is also written using a JS framework, it would be very easy to build the REST APIs while being in the same paradigm of language, i.e. JS. Having said that, now I’ll answer the question to why I choose MongoDB.

なぜMongoDB?
私が'理由'のために言ったように.JS?」あなたが以前に言及したTHE OTHER BLOGを読んだならば、答えは私が単に前進して、再びここに引用するつもりである同じです.

The reason is very similar to “why Node.JS?”. MongoDB is a database that stores the data in the form of JSON (JavaScript Object Notation) like documents. And again, JS shines. As MongoDB stores data in an identical format to what we get as a response from REST APIs, it was like the backend, frontend and database, are not any different from each other at all. And so, the developing process becomes much painless. And this whole reason also answers the question why MERN stack, too. And while we are on this subject, Node + MongoDB + Mongoose is just a breeze. As their own WEBSITE quotes, Mongoose is an elegant MongoDB object modelling for Node.JS. And voila! This is why MERN.

結論
私がここで追加したいのは、なぜMern Stackを使用するのか、それともどんなスタックでも、なぜ完璧な理由や説明がないのかということです.完全に異なるスタックを使用する成功した製品の海にそこにたくさんの例があります.このブログでは、私はMernについて議論してきました.それは、異なるフレームワークとそれらの短所と長所についての私の研究を行った後に進むことを選択するものです.そして、率直に言って、私はプロジェクトを終えた後に得た結果にとても満足しています.そして、私は確かに、私が進むために選んだどんなスタックでも、結果が非常に類似していたと思っています.ここで重要なことは、あなたが使用しているどちらのスタックでも、製品を開発している間、いくつかの本当に重要な点をカバーするべきです.それらのいくつかは、スケーラビリティ、敏捷性、原子性、応答性です.バックエンドは、できるだけ多くのリーン＆堅牢である必要がありますし、オンデマンドの高いトラフィックを処理することができる必要がありますが、フロントエンドは、ユーザーに話をする必要があります話のないポイントで、ユーザーは彼らが興味を失っているように感じる必要があります.そしてこれは、任意のWebアプリケーションのためだけでなく、eCommerceアプリを保持します.
したがって、このブログは、一般的にだけでなく、eコマースアプリではなく、Webアプリケーションを構築することについてです.このブログとしてこのブログを書くためにeコマースアプリを選んだ理由は、このブログを書く時にはすぐに利用できました.そして、私は完全にeコマースのアプリのためにも保持していると言うすべて.それで、あなたは行きます.私は、私はあなたの質問に答えることができたし、電子商取引のアプリを開発しながら、実際には、ほとんどのWebベースのアプリケーションとして使用することができますスタックを決定するのに役立ちました願っています.
あなたはこのブログについてどう思いますか?私のパブリックメールIDで私に連絡してください.

ボーナス
好奇心旺盛な方のために、開発途上の依存症はARUNABHSTOREです
( package . jsonファイルから直接依存関係のリストを次のようにコピーしました)
バックエンド

{
 // other stuff

 "dependencies": {
  "body-parser": "^1.19.0",
  "braintree": "^2.22.0",
  "cookie-parser": "^1.4.5",
  "cors": "^2.8.5",
  "dotenv": "^8.2.0",
  "express": "^4.17.1",
  "express-jwt": "^5.3.1",
  "express-validator": "^5.3.1",
  "formidable": "^1.2.2",
  "jsonwebtoken": "^8.5.1",
  "loadash": "^1.0.0",
  "mongoose": "^5.9.7",
  "morgan": "^1.10.0",
  "uuid": "^7.0.3"
 }
}

フロントエンド

{
 // other stuff

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "bootstrap": "^4.4.1",
  "braintree-web-drop-in-react": "^1.1.1",
  "moment": "^2.24.0",
  "node-sass": "^4.13.1",
  "query-string": "^6.12.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-router-dom": "^5.1.2",
  "react-scripts": "3.4.1"
 }
}

Arunabh Arjunによって
www.arunabharjun.com