如何使用Notion API來構(gòu)建CMS
譯文【51CTO.com快譯】作為一個開源的框架，Appsmith能夠讓開發(fā)人員只需使用必要的代碼，即可構(gòu)建出儀表板、工作流、以及CRUD等應(yīng)用。同時，您也可以通過連接到任何API、或諸如：MongoDB、PostgreSQL或MySQL等數(shù)據(jù)庫上，以訪問包括圖表、表格、表單在內(nèi)的多個組件，并迅速構(gòu)建出各種UI。其中，最常見的一種應(yīng)用便是在Appsmith上，使用Notion來管理我們的內(nèi)容日歷(content calendar)，以實現(xiàn)與外部團隊的協(xié)作。當(dāng)然，要在Notion上創(chuàng)建細粒度的訪問控制，并開發(fā)出能夠平穩(wěn)運行的工作流，往往需要Notion通過發(fā)布其API，來構(gòu)建相應(yīng)的應(yīng)用程序，以實現(xiàn)在同一處管理整體內(nèi)容，并能向協(xié)作者提供必要的訪問權(quán)限。
下面，我將向您展示如何構(gòu)建一個內(nèi)容管理系統(tǒng)(CMS)。其應(yīng)用會使用Notion(模擬)表作為數(shù)據(jù)源，用戶可以在應(yīng)用上輸入、提交和編輯文字內(nèi)容。同時，它通過使用SendGrid，提供與選定電子郵件服務(wù)的集成配置，向項目組成員發(fā)送郵件提醒或更新。在功能層面上，我們將重點關(guān)注如下方面：
- 提交來自各個作者的新的內(nèi)容創(chuàng)意
- 設(shè)置提交的截止日期
- 直接通過郵件與作者聯(lián)系
- 在Notion頁面上組織所有數(shù)據(jù)
首先，讓我們來看看該應(yīng)用的外觀截圖。你也可以通過鏈接--https://app.appsmith.com/applications/609e60fd5864501cc39c4836/pages/609e60fd5864501cc39c4838，查看其真實界面。
Appsmith Notion API應(yīng)用截圖
配置Notion API
由于Notion API可以讓我們連接到Notion的頁面和數(shù)據(jù)庫上，因此我們首先討論如何通過設(shè)置API，收集所有必需的key，以連接到Appsmith上。
- 請選擇您需要在Notion上使用的工作區(qū)。如果您只是想測試的話，可以隨意創(chuàng)建一個新的工作區(qū)。
- 通過單擊左側(cè)導(dǎo)航欄上的Settings and Members選項，打開工作區(qū)的設(shè)置。我們將會看到一個包含了所有設(shè)置項的新模式(modal)。
- 在設(shè)置模式中的Integrations選項下，我們可以查找并選擇Workspace選項。它會將您重定向到Integrations選項卡處。
- 接下來，請選擇Develop your integration選項。
所有集成選項
- 在集成頁面上，請選擇New integration選項，并添加名稱、以及待使用的關(guān)聯(lián)工作區(qū)，然后點擊提交。這將為我們創(chuàng)建一個新的密鑰(key)。
創(chuàng)建新的集成
- 現(xiàn)在讓我們回到工作區(qū)，選擇一個特定的頁面，然后點擊share選項(您可以在右上角找到它)。
- 接著，請點擊邀請按鈕，在新打開的模式中，找到已創(chuàng)建的集成，選擇它并確認邀請。
- 據(jù)此，我們完成了向Notion頁面添加集成。此外，請保存好自己的集成密鑰，后續(xù)我們會在Notion API中使用它。
在Notion中，我們需要在工作區(qū)中為添加一個集成密鑰，以執(zhí)行諸如：創(chuàng)建、讀取、更新等各種操作，以及連接第三方應(yīng)用。
設(shè)置Notion頁面
在使用Notion API之前，我們需要為內(nèi)容日歷創(chuàng)建一個數(shù)據(jù)庫。
- 在頁面上，請?zhí)砑右粋€新的表格，其中包含了內(nèi)容管理器所需的如下字段：
- Java
- Title: Text Field
- Description: Text Field
- Author: Text Field
- Category: Text Field
- Status: Dropdown Field
- Notes: Text Field
- Deadline: Date Field
- Author Email: EMail Field
為了直接使用上述Notion頁面作為模擬數(shù)據(jù)庫，您可以單擊此鏈接，并復(fù)制到自己的一個工作區(qū)中。當(dāng)然，請確保已將集成添加到了該頁面上，以使用Notion API在Appsmith上構(gòu)建應(yīng)用。
從Notion API處查詢數(shù)據(jù)
請按照如下步驟，通過Notion API查詢數(shù)據(jù)：
- 首先，我們要有一個Appsmith帳戶。接著，請通過單擊Create New按鈕，在組織下創(chuàng)建一個新的應(yīng)用。
- 在左側(cè)的導(dǎo)航中，我們可以找到各種用來構(gòu)建應(yīng)用的小部件、API和數(shù)據(jù)庫查詢。讓我們從創(chuàng)建一個Notion API開始。
- 單擊API旁邊的+圖標，然后單擊Create new，請將API命名為query_data_from_database。
- 請為API添加如下URL內(nèi)容：
- HTTP
- https://api.notion.com/v1/databases/<db-id>/query
- 在此，db-id是一個Notion頁面的數(shù)據(jù)庫ID。若要找到它，我們必須將Notion Table作為一個頁面打開，然后從URL中選擇數(shù)據(jù)庫ID，輸入如下代碼：
- https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
- |--------- Database ID --------|
- 接著，在Headers選項卡下添加以下密鑰。
- Authorization: <secret key from integration>
- Notion-Version: 2021-05-13
- Content-type: application/json
下面是配置界面的截圖：
Appsmith的Notion API配置截圖
- 最后，點擊RUN按鈕，以便在Response Body中找到頁面上的所有數(shù)據(jù)。
將Notion API綁定到Appsmith
下面，我們需要將源自Notion Table的數(shù)據(jù)的API響應(yīng)綁定到列表小部件(List Widget)上，以顯示所有詳細的信息。具體步驟如下：
- 選擇Page1左側(cè)的導(dǎo)航，并單擊小部件部分旁邊的+圖標。我們將看到可以用來構(gòu)建UI的不同UI小部件。
- 您可以按需選擇表格小部件、或列表小部件，以綁定來自Notion API的數(shù)據(jù)。在本例中，我們將使用列表小部件。
- 接著，請將列表小部件拖放到界面上。我們可以通過單擊列表小部件頂部的齒輪圖標，來查看Items屬性中的數(shù)據(jù)。您也可以通過鏈接--https://docs.appsmith.com/widget-reference/list，了解更多相關(guān)信息。
- 下面，我們將使用mustache語法在Appsmith中編寫JS，Items會將列表小部件上的屬性，替換為以下代碼片段(注意，在Appsmith中，您可以使用API名稱，在mustache語法中的任何位置去訪問 API)：
- {{
- query_data_from_database.data.results.map(
- (item) => {
- return (item.properties)
- })
- }}
在此，我們使用query_data_from_database，并將它映射到條目(item)的返回屬性上，其響應(yīng)如下圖所示：
從數(shù)據(jù)庫查詢數(shù)據(jù)響應(yīng)的截圖
然后，我們在列表小部件上添加各種小部件，以顯示來自Notion API的詳細信息。在此，我們拖放了六個文本小部件，并將其Text屬性設(shè)置為如下內(nèi)容：
- - Title
- - Description
- - Status
- - Author
- - Deadline
我們在它們的旁邊再添加六個文本小部件，并從Notion API處綁定它們對應(yīng)的值。而它們的Text屬性將被設(shè)置為如下內(nèi)容：
- {{ currentItem.Title.title[0].text.content }}
此處的currentItem對應(yīng)于列表小部件中的唯一項。接著，我們將從Items列表中訪問Title屬性，并去解析JSON。下圖展示了其響應(yīng)的畫面：
相應(yīng)的截圖
至此，我們可以通過列表小部件的Notion API條目，查看到Titles了。同樣地，我們也可以設(shè)置其他文本小部件的Text屬性，以顯示來自API的內(nèi)容。例如：
- 描述性文本小部件，將Text屬性設(shè)置為：
- {{currentItem.Description.rich_text[0].text.content}}
- 狀態(tài)文本小部件，將Text屬性設(shè)置為：
- {{currentItem.Status.select.name}}
- 作者文本小部件，將Text屬性設(shè)置為：
- {{currentItem.Author.rich_text[0].text.content}}
- 電子郵件文本小部件，將Text屬性設(shè)置為：
- {{currentItem["Author Email"].email || "Not Added"}}
- 截止日期文本小部件，將Text屬性設(shè)置為：
- {{currentItem.Deadline.date.start}}
- 類別文本小部件，將Text屬性設(shè)置為：
- {{currentItem.Category.rich_text.map(row => {return row.plain_text})[0]}}
注意，解析項目的代碼會根據(jù)Notion API的API響應(yīng)而發(fā)生變化。
我們在最后添加了一個按鈕小部件，以便管理員直接從Appsmith處，向作者發(fā)送電子郵件。下面是我們將Notion Table中的所有數(shù)據(jù)，解析到Appsmith列表小部件后。
將Notion Table中的所有數(shù)據(jù)解析到Appsmith List小部件后的App截圖
為了向query_data_from_database查詢添加刷新按鈕，我們將Button小部件拖放到界面上，將Label屬性設(shè)置為Refresh。接下來，我們打開onClick屬性，單擊調(diào)用API選項，然后選擇query_data_from_database API。至此，每當(dāng)我們單擊刷新按鈕時，就能看到Notion頁面上更新的所有新的數(shù)據(jù)了。
將條目添加到Notion數(shù)據(jù)庫
為了能夠讓內(nèi)容日歷羅列出概念表里的所有詳細信息，我們可以通過如下操作步驟，在Appsmith上向數(shù)據(jù)表添加新的條目：
- 首先，讓我們創(chuàng)建一個名為“作者提交(Author Submission)”的新頁面，并將一個表單(Form)小部件拖放到界面上。
- 在表單小部件中，讓我們添加一些文本小部件和輸入小部件，以便作者從中提交他們新的內(nèi)容創(chuàng)意。
表單界面如下圖所示：
提交內(nèi)容創(chuàng)意表單的截圖
以下是我們創(chuàng)建的、可供參考的字段。我們將這些小部件命名做如下命名，以便后續(xù)在POST API方法中將其用作參考：
- Title - titleInput
- Description - descriptionInput
- Author Name - authorInput
- Email - emailInput
- Category - categoryInput
- Submission Date - dateInput
讓我們創(chuàng)建一個新的API，以便在從Appsmith處提交表單時，能夠向Notion頁面添加新的值。具體操作步驟如下：
- 首先在Author Submission頁面下新建一個API，并命名為add_an_item_to_database。
- 接下來，在Headers選項卡下添加如下鍵值。
- Authorization: <secret key from integration>
- Notion-Version: 2021-05-13
- Content-type: application/json
- 在body選項卡中，粘貼如下代碼：
- "parent": { "database_id": "<db-id>" },
- "properties": {
- "Author": {
- "type": "rich_text",
- "rich_text": [
- {
- "type": "text",
- "text": {
- "content": "{{authorInput.text}}",
- "link": null
- }
- }
- ]
- },
- "Author Email": {
- "type": "email",
- "email": "{{emailInput.text}}"
- },
- "Category": {
- "type": "rich_text",
- "rich_text": [
- {
- "type": "text",
- "text": {
- "content": "{{categoryInput.text}}",
- "link": null
- }
- }
- ]
- },
- "Status": {
- "type": "select",
- "select": {
- "name": "Not Started",
- "color": "blue"
- }
- },
- "Description": {
- "type": "rich_text",
- "rich_text": [
- {
- "type": "text",
- "text": {
- "content": "{{descriptionInput.text}}",
- "link": null
- }
- }
- ]
- },
- "Deadline": {
- "type": "date",
- "date": {
- "start": "{{dateInput.selectedDate}}",
- "end": null
- }
- },
- "Title": {
- "type": "title",
- "title": [
- {
- "type": "text",
- "text": {
- "content": "{{titleInput.text}}",
- "link": null
- }
- }
- ]
- }
- }
- }
我們還必須在
接著，我們打開提交按鈕的屬性窗體，將onClick屬性更新為Call an API，然后選擇add_an_item_to_database API。至此，我們便可以使用Appsmith表單，向Notion表添加新的數(shù)據(jù)了。
發(fā)送電子郵件集成
為了方便Appsmith與作者交流，我們使用Sendgrid來添加一個電子郵件集成。
創(chuàng)建用于發(fā)送電子郵件的模式
- 首先，在列表項上單擊Send Mail按鈕，以創(chuàng)建一個新的模式。我們可以通過將onClick屬性設(shè)置為Open Modal，并選擇Create New。
- 通過切換屬性窗格中的選項，將模式類型設(shè)置為Form。
- 在模式小部件中，讓我們添加一些文本小部件和輸入小部件，以實現(xiàn)郵件發(fā)送。
- 請參考我們創(chuàng)建的如下字段：
- Sending To: Input Widget
- Email subject: Input Widget
- Email content: Rich Text Editor Widget
- 現(xiàn)在，讓我們將這些小部件命名為如下名稱，以便后續(xù)在POST API方法中將其用作參考：
- Sending To: emailInput
- Email subject: subjectInput
- Email content: contentInput
模式界面截圖
配置 SendGrid API
- 首先，我們應(yīng)該擁有一個SendGrid帳戶。
- 接下來，通過單擊左側(cè)導(dǎo)航窗格中的電子郵件API，以導(dǎo)航到Integration Guide。
- 選擇Web API并選擇cURL語言，我們會被重定向到驗證選項卡。
- 在驗證選項卡上，我們通過單擊創(chuàng)建API來為其命名。據(jù)此，我們將擁有SendGridAPI密鑰。
- 接下來，請打開Appsmith，并在Page1下創(chuàng)建一個新名為send_email的API，同時將請求類型設(shè)置為POST，并在URL表單下添加如下內(nèi)容：
- https://api.sendgrid.com/v3/mail/send
- Authorization : Bearer <SendGridAPIKey>
- Content-Type : application/json
- 最后，將body設(shè)置為如下內(nèi)容：
- {"personalizations": [{"to": [{"email": "{{emailInput.text}}"}]}],"from": {"email": "test@example.com"},"subject": "{{subjectInput.text}}","content": [{"type": "text/plain", "value": "{{contentInput.text}}"}]}
在此，我們將動態(tài)地傳遞來自模式小部件的to-email、from-email、主題和內(nèi)容字段。而在我們將表單的onClick屬性設(shè)置為Call an API，并選擇send_email查詢后，便可以成功地從Appsmith處發(fā)送電子郵件了。
小結(jié)
通過上述步驟，我們向您展示了如何輕松地在Appsmith上構(gòu)建諸如以Notion后端的CMS應(yīng)用，并將其連接到Notion API上，以及如何創(chuàng)建和讀取數(shù)據(jù)。同時，您也可以了解到如何構(gòu)建交互式頁面，自定義小部件。您可以通過鏈接--https://app.appsmith.com/applications/609e60fd5864501cc39c4836/pages/609e60fd5864501cc39c4838?utm_source=blog&utm_medium=direct&utm_content=notion-api-crm&utm_campaign=weeklyblog&utm_term=notion-api-crm，獲悉整個應(yīng)用的程序代碼，以及相關(guān)的演示數(shù)據(jù)。
原文標題：Using the Notion API to Build a Content Management System，作者: Vihar Kurama
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
