เอาข้อมูลจาก n8n มาขึ้นเป็นเว็บ!

Input Section

• [ ] Setup Workflow n8n
  • [ ] Create On form submission ⚡ trigger
  • [ ] Insert row Data into Data Table
  • [ ] Get row(s) from Data Table
  • [ ] Aggregate data from 4 items to 1 item

Output (Display) Section

• [ ] Create Web Response

  • [ ] Create API key
  • [ ] Make Http Request (Create)

  curl -X POST "<https://api.khain.app/api/v1/web-response>" \
    -H "Authorization: Bearer YOUR_ACTIVE_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{
      "body": "<h1>Hello World!</h1>",
      "name": "Example Web Response"
    }'
  

  • [ ] Update old Page with ID

  curl -X POST "<https://api.khain.app/api/v1/web-response>" \
    -H "Authorization: Bearer YOUR_ACTIVE_TOKEN" \
    -H "Content-Type: application/json" \
    -d '{
      "body": "<h1>Hello World!</h1>",
      "name": "Example Web Response",
      "id" : YOUR_PAGE_ID,
    }'
  

  • [ ] Display All Data from Data Table

  {{
  $json.data.map(item => ${item.id})
  }}
  

  • [ ] Modify Web UI

   {{
        $json.data.map(item => `
          <div class="bg-white shadow-sm hover:shadow-md transition rounded-xl p-5 border border-gray-100">
            <div class="flex flex-col space-y-2">
              <div class="text-sm text-gray-500 font-medium">#${item.id}</div>
              <div class="text-lg font-semibold text-gray-800">
                ${item.caption}
              </div>
            </div>
          </div>
        `).join('')
      }}
  

References

https://api.khain.app/

https://api.khain.app/docs

https://jmespath.org/tutorial.html#projections