DAY17-MERN

前言：

在大致介绍完React的特性後，我们要延伸聊聊用React写网页时，最好用的前後端架构，MERN。

MERN其实是由四个不同的东西，各取第一个字母拼凑出来的简称，而这四个元件分别是：

M:MongoDB

E:Express

R:React

N:Node.js

後面两个我们前几天都大概提到过了，那M和E又是用来做什麽的呢？

首先MongoDB是一种文件导向的资料库管理系统，用C++等语言撰写而成，以解决应用程序开发社群中的大量现实问题。和我们前面介绍过的SQL架构不太一样，属於NoSQL，但和一般翻译的非关联性资料库其实不太一样，这个No其实是Not only的意思。其储存资料的方式多用json格式，这些特点在我们之後实作都可以直接理解。

至於Express，我们直接看看官方的doc：

Express是最受欢迎的Node web框架，还是其他许多流行的Node web框架的底层库，它提供：

• 替不同HTTP Method、不同URL路径的requests编写不同的处理方法
• 透过整合「画面」的渲染引擎来达到插入资料到样板中产生response
• 设定常见的web应用设定，例如：连线用的port和产生response的样板位置
• 在request的处理流程中增加额外的「中间层」进行处理

虽然Express本身非常简单，但开发者们已经创造相容的中间层套件来解决大部份web开发的问题，这些套件能处理cookies, sessions，登入，URL参数，POST资料，安全标头等等。

那这里阿森大概画了一张MERN常用的架构图，可以看到前端应用的部分是交由架在node.js环境中的React负责；再来由後端的Express透过API和资料库，也就是ＭongoDB做连结，接下来就让我们开始实作吧！

MongoDB atlas：

这里阿森选择用MongoDB atlas，因为他们有提供512MB的免费空间、有大量的Sample Data可以做测试，最重要的是还有Realm功能，可以让我们直接把资料库架设在他们的服务器上！同样也是512MB的免费空间。

而开始使用的步骤就是到他的网站注册，看你要创建一个新的或是直接使用GOOGLE都可以！
https://www.mongodb.com/cloud/atlas/lp/try2?utm_source=google&utm_campaign=gs_apac_taiwan_search_core_brand_atlas_desktop&utm_term=mongodb&utm_medium=cpc_paid_search&utm_ad=e&utm_ad_campaign_id=12212624371&gclid=Cj0KCQjwkbuKBhDRARIsAALysV6xYnTgY-D_-qqW4TtPF0rHmAZWZlRluPHQgdNh4JEsVwgaA5MesnoaAmx2EALw_wcB

登入之後创建一个新的project，都顺利的话会到这里：

之後我们Build a Database，专案选最右边的512mb free，服务器我是选google cloud在taiwan的选项。

这时应该会跳到这个画面：

接着我们进行Connect的动作！让我们按下Connect按钮。

按下Add Your Current IP Address→Add IP Address。

再来新增一个使用者名称和密码。

最後按Create Database User後，这个步骤就完成了！

现在我们按下Choose a connection method。

选择connect your application：

出现这个画面就表示ok了。

接下来我们直接进入Realm页面，我打算将後端直接架在这里。

所以我们进入Realm，点选左边的Third Party Service，按Add a Service，选择HTTP的Service，这样就表示我们会使用http来进行之後的api。

现在我们要按Add incoming Webhook()，也就是建立这个服务器的各种api方法。
那我们先建立一个POST的api，我就取叫testPost，选好点选Save Draft，之後会跳到Function的编辑页面，也就是编辑POST api的地方：

如果今天要写GET或PUT...etc都是在这边！明天我会继续实作api以及示范如何将他和React做连接。

小结：

介绍到这里，我相信大家对MongoDB atlas整体都有一定的了解了，如果本身就有在写api只是不知道有这麽一个好用的工具的话，相信这篇文章可以帮助到你！
接下来我们会继续介绍api的写法以及如何连线到React前端。
那就明天见啦！