We will create and learn how to connect 3rd party app with bubble. And In this article, you will learn contentful API too.
1. Sign up for Contentful
Click here to Sign Up Here
Contentful is very clean, and easy to navigate, and it looks and feels a lot like WordPress. As much as hate to admit it, I love it, and that's an amazing thing because I loth WordPress. To be fair, I don’t hate WordPress for its UX, I hate it because it's slow and built on what looks like hacked-together PHP, and let's face it, no one actually likes PHP. Not even the creator of PHP.
The Concept
Contentful is content management as a service (CaaS), this replaces the need to have to connect your site to that terrible MySQL database hosted on some crappy Apache Server, where you have to install phpMyAdmin and spend hours trying to figure out cPanel.
Create Contentful Model
We will use contentful as a database and CMS. Let’s get started.
1. Click on Design your content model
2. Type “Blog”
3. Click on Create
4. Click on Add field
5. Click on Text
6. Type “Blog Title”
7. Click on Create
8. Click on Add field
9. Click on Text
10. Type “Blog Content”
11. Select highlighted option
12. Click on Create
13. Click on Save
14. Click on Content
15. Click on Add Blog
16. Type “Hello world”
17. Type “content hello world 1”
18. Click on Publish
19. Click on Back
20. Click on Settings
21. Click on API keys
22. Click on Add API key
23. Click on Name(required) and Write API Name
24. Click on Save
25- Create a new bubble.io app
26. Click on Add plugins
27. Click on Install for API Connector
28. Click on DONE
29. Click on Add another API
30. Type “API Contentful”
31. Type “API Get Blogs”
On the GET Request input, you should add your endpoint (Details)
https://cdn.contentful.com/spaces/[YOUR-SPACE-ID]/environments/[YOUR-ENVIRONMENT-ID]/entries?content_type=[YOUR-Content-type]&access_token=[Content-Delivery-API-Access-Token]32. Click on Add header
33. Paste “Authorization” into input
34. Paste Content Delivery API — access token
Bearer [Content Delivery API - access token]35. Click on Initialize call
36. Click on SAVE
37. Click on Design
38. Type “repe”
39. Click on Repeating Group
40. Drag highlighted element
41. Click on Get data from an external API
42. Click on highlight
43. Click on API Contentful — API Get Blogs
44. Click on Close
45. Click on ‘s items
46. Click on Page: index…
47. Click on Text
48. Drag highlighted element
49. Click on Insert dynamic data
50. Click on Current cell’s API Get Blogs item
51. Click on ‘s fields blogTitle
52. Click on Current cell’s API Get Blogs item’s fields blogTitle
53. Click on Current cell’s API Get Blogs item’s fields blogTitle
54. Type in highlight
55. Click on ‘s fields blogContent
56. Drag highlighted element
57. Click on Current cell’s API Get Blogs item’s fields blogTitle…
58. Click on Layout
59. Click on highlight
60. Click on Column
61. Click on Current cell’s API Get Blogs item’s fields blogTitle
62. Click on highlight
63. Type in highlight
64. Click on Make this element fixed-height
65. Click on Appearance
66. Click on highlight
67. Click on highlight
68. Type “h2”
69. Click on H2 Heading — Dark
70. Click on Current cell’s API Get Blogs item’s fields blogContent
71. Click on Layout
72. Click on highlight
73. Click on Fit width to content
74. Click on Make this element fixed-height
75. Click on Preview
76. Go to APIs — WebComponent — Contentful
77. Click on Content
78. Click on Add Blog
79. Type “Test2”
80. Click on
81. Type “lorem ipsum test 2”
82. Click on Publish
83. Go to Bubble | No-code apps
Success You can connect with bubble and contentful API 🔥🚀
Please contact me if you have any questions
