DAY18-Mongo db atlas realm

前言：

昨天我们介绍了如何使用Mongodb atlas的一些最基本的功能，今天我们要更进一步介绍怎麽使用realm、怎麽写出简单的api，以及将架在Realm的後端和我们的前端做连线。

後端操作：

今天我们要设计一个可以让浏览者留下email资料的textarea，并且在按下按钮後能把这笔资料送到我们的後端资料误，也就是Realm中。

首先我们要先在Mongodb atlas建立一个Database和Collection：

这里我建立一个database叫test，然後新增一个collection叫mailtests，接下来我们到昨天的testPost页面：

先把Function Editor中的code改成这样：

exports = async function( payload, response ) {
  if(payload.body) {
    const body = EJSON.parse(payload.body.text());
    const mails = context.services.get("mongodb-atlas").db("test").collection("mailtests");
    
    const mail = {
      email: body.email,
      date: new Date()
    };
    
    return await mails.insertOne(mail);
  }
  
  return {};
};

可以看到这个function有两个传入参数，也就是payload跟response，我们会专注在payload的部分，因为要insert进资料库的资料就是放在payload里。

所以我们先透过EJSON.parse把payload里的资料抓出来，放到body里，至於这个payload本身的JSON结构我们等等会提到。

再来我们建立和资料库的连线透过这串code：

const mails = context.services.get("mongodb-atlas").db("test").collection("mailtests");

应该很好理解，就是先抓资料库再抓collection。

然後这串负责建立我们真正要写入collection中的JSON格式：

const mail = {
      email: body.email,
      date: new Date()
    };

会有我们从网页传入的email和当下的日期，当然这里只是做一个简单的示范，要insert更多资料的话只需要依此类推。

最後透过

return await mails.insertOne(mail);

来把资料传入。

到这里一个简单的Post api就完成了。

前端操作：

再来是怎麽让React连接上Mongodb atlas。

我们先建立一个textarea type的component：

<ContactArea 
                type="text"
                id = "text"
                value={email}
                onChange={handleInputChange}
                name="text"
            />

再来我们建立一个确认按钮：

<ContactButton onClick={saveEmail} >Subscribe</ContactButton>

而这两个onChange和onClick中的函数是照下面这样写的：

import EmailData from '../../apiController'

let initialEmailState = "";

    const [email, setEmail] = useState(initialEmailState);

    const handleInputChange = event => {
        setEmail(event.target.value);
    }

const saveEmail = () => {

        if(email.indexOf('@') < 0){
            alert("Please enter a real email adress.")
            setEmail("")
        }else{

        var data = {
            "email": email
        }

        EmailData.createEmail(data).then(response => {
            console.log(response.data)
            alert("We've received your email!")
            setEmail("")
        })}
    }

handleInputChange是随时读取对方输入的内容，作纪录以便之後传送；saveEmail则是负责做一个简单的检查，看里面是否有邮件的@符号存在，确认之後将email包入data里的"email"中，呼叫api并进行上传。上传成功後会alert说我们收到了，然後把email清空。

而这个EmailData的结构是这样的：

import http from "./http-common"

class EmailData {
    createEmail(data) {
        return http.post("testPost", data);
    }
}

export default new EmailData();

写在另一个apiController.js里。

而他import的http-common.js则是这样的：

import axios from "axios"

export default axios.create({
    baseURL: "https://...",
    headers: {
        "Content-type" : "application/json"
    }
})

axios是需要用npm install下载的一个插件，使用api时通常都会用到。

而baseURL的部分我们需要打开刚刚testPost的setting选项：

把这个webHook URL复制并贴上，然後把最後面的testPost删掉，因为这部分我们已经在apiController.js里加上去了。

到这里大概就可以输入并且上传到资料库了！

我们的画面是长这样，而database收到後的格式会这样：

小结：

今天阿森补完了最简单的MERN实作方法，虽然只介绍了POST，其他还有像是GET, PUT, DELETE等等，但我想操作起来应该都大同小异，而且网路上相关的教学也很多，只要会最基本的剩下的应该都不难。

而比较需要注意的是今天示范的都是最最最最基本的功能而已，使用起来方便，但相对的也极度不安全，如果真的要实作可能还是要注意一下，不然一遭受攻击所有资料可能就都毁了。

那今天就先这样，我们明天见！