前言：

昨天我們介紹了如何使用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等等，但我想操作起來應該都大同小異，而且網路上相關的教學也很多，只要會最基本的剩下的應該都不難。

而比較需要注意的是今天示範的都是最最最最基本的功能而已，使用起來方便，但相對的也極度不安全，如果真的要實作可能還是要注意一下，不然一遭受攻擊所有資料可能就都毀了。

那今天就先這樣，我們明天見！