Intro to APIs & the API Connector | Bubble Crash-Course

Подписаться 40 тыс.

Просмотров 81 тыс.

50% 1

APIs are a superpower that you can harness for your own Bubble apps using the API Connector plugin! In the beginning of this crash-course, you'll learn what APIs are and why you may want to use them. And after, you'll follow along step by step as we build a Bubble app from scratch with content from multiple APIs.
0:00 - Chapter 0: "Course Overview"
2:51 - Chapter 1: "The 5 Core HTTP Requests"
5:59 - Chapter 2: "Intro to Authentication"
7:45 - Chapter 3: "The API Connector"
10:32 - Chapter 4: "Build an App with APIs"
12:39 - Chapter 4.1: "GET All Movies"
19:20 - Chapter 4.2: "GET Movie by ID"
28:29 - Chapter 4.3: "Authentication"
31:46 - Chapter 4.4: "POST Create a New Movie"
38:38 - Chapter 4.5: "PUT & PATCH Modify an Existing Movie"
48:33 - Chapter 4.6: "DELETE a Movie"
53:14 - Chapter 5: "The GIPHY API"
1:04:09 - Chapter 6: "Additional Exercises & Conclusion"
DEMO MOVIE API DOCUMENTATION
To access the documentation for the Demo Movie app, go to: academy-demo-api.bubbleapps.io/
GIPHY API DOCUMENTATION
To access the developers page for GIPHY (and all corresponding documentation), go to: developers.giphy.com/
DESIGN TEMPLATE
To follow along with our pre-built design, check out our "Intro to APIs Design Template" on the Bubble Marketplace: bubble.io/template/intro-to-a...
Bubble is a visual programming language that lets you build web applications without code. Using Bubble's visual editor, you can build a fully-functional web application quickly and affordably.
Have a question? Please reach out to us support@bubble.io
Learn more about Bubble, the leading no-code web app development platform:
bubble.io
/ bubble
bubble.io/blog

Наука

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@tobigbemisola Год назад

Great idea from the bubble team to put out an hour long video on APIs 💯

@aliroshdy1390 Год назад

The best educating bubble video i ever watched. please create more crash courses like this.

@user-il8mu8bt3u 11 месяцев назад

Speaking of sending data to child group in Repeating Group in Template, I also struggled for a couple of hours. Then I found how to set it up. You have to set up ALL nested Groups of Movie Card. Movie Card's properties: "Type of content" is "GET all movies response result" "Data source" is "Current cell's GET all movies response result" Nested Groups'(GroupCoreContent, and Group Title/Tag) properties: "Type of content" is "GET all movies response result" "Data source" is "Parent's group's GET all movies response result" It's complicated, so I recommend to use the Elements Tree of UI Builder tab. I didn't make the template myself, so it feels complicated, but if I use the Elements Tree, I can easily understand the nested structure of the groups.

@afrossafeek8054 10 месяцев назад

Hi.. I am applied this method. but i didn't get the output. Do you have any idea.

@mohammedansari818 Год назад

Wow! Bubble API is like Alibaba’s “Open Sesame” call to open the secret door to the infinite treasures. And I was just floored by the tutorial! Beautifully designed and executed. Bravo and thank you so much Bubble Team. Way to go..

@user-ft2md2gd4s Год назад

Great work covering the main use-cases of APIs and doing so in good detail. Excellent job. I’ll keep using this video as documentation.

@denzeleiseb6364 Год назад

Clear, straight to the point and very informative. Thank you Bubble.

@nocodenexus Год назад

I so much needed a long API video! I'll check it out soon!

@CaptnCav8 Год назад

Riiight!

@CranfordTech Год назад

great tutorial, well done to all involved! can tell a lot of work went into it

@ono3839 Год назад

this no code crash course equivalent in code requires at least 10 hours to build this movie api app, so no code literally saves entrepreneurs so much time to build apps. some people like to code as a job or as a hobby, but for business owners this is a life saver, we like to build stuff fast and ship so we cant test.

@annelee6821 Год назад

Your app is going to change so many lives! Infinite possibilities! Incredible

@mandagore4931 5 дней назад

No, this is going to change the world! The multiverse

@YayZ 3 месяца назад

Thanks a lot. Great effort for both content and editing. 🧡

@Iaintsayinnothin.. Год назад

Would be cool to see more examples of what people have done leveraging multiple APIs, seems like endless possibilities.

@daffertube 11 месяцев назад

visit any popular website lol

@pratimadudhewar3680 Год назад

Great job team. Amazing course, Covering every small thing. will definitely help the new bubblers like me. I have two questions for the team, I want to perform the post request with nested json. Can you share any document link or video for the same? Also I have tried 2-3 ways to perform google auth. I want the idtoken which google returns in response. Can i get it using API connector ? Please share the steps for both. Thank you

@rickyroffey Год назад

This is amazing!! Thanks a lot!!

@enockkiplangat5852 10 месяцев назад

This was incredible.

@nilsfaltin677 Год назад

I used the "Intro to APIs template" template mentioned in the video. But it has a lot of nested groups and I could not manage to connect the APIs to the groups and have the correct data be passed from group to child-group. Please provide detailed explanation how this is done. But still I learned a lot from this video. I was able to use this video tutorial to create new pages for all-movies and movie-detail and could conntect all API calls: Get all movies, Get movie by ID, Create Movie, PUT Movie by ID, Patch Movie by ID, Delete Movie by ID.

@petevejanurug7909 7 месяцев назад

I figured it out. Here's how: 1. Set the Repeating Group's Type of content = GET Movies response results AND Data source = Demo Movie API - GET All Movies's response 2. Set every child group inside Type of content = GET Movies response results AND Data source = Demo Movie API - GET All Movies's response result 3. Set the title dynamic data as "Parent group's GET All Movies response result's title" (similarly for tagline) PS. Bubble updated their app but not the video tutorial it seems

@nikhiljain8679 Год назад

Very easy to understand

@narayanmallapur9734 Год назад

Excellent!!!!

@levkantor6435 11 месяцев назад

Appreciate this tutorial!

@krenkel7982 Месяц назад

Oi, mesmo que eu tenha assistido a este vídeo por 1 ano (Introdução às APIs & o conector de API | Bubble Crash-Course) Estou aprendendo muito. E Bubble está sendo incrível neste vídeo de ensino, pois há partes (pelo menos dois itens) que não estão no vídeo, mas que te obriga a pensar e como resolvê-lo. Uma delas é a parte dropdown, ao usar PUT, outra é a comunicação de uma página para outra, pois precisamos usar o chamado tipo de conteúdo (GET Movie ID) - (fonte de dados), GET e dentro você tem que usar o head e saber que para essa página de filme ela precisa receber dados da página Index no meu caso, e para isso temos que informar o path(id) aquele que configuramos na página de índice como movie_id(ou qualquer nome de sua escolha) recebendo a célula atual, e com isso na página do filme, os dados de entrada e dropdown aparecerão para que possamos usar a chamada da API PUT para alterar todos os campos, Outro item que descobri de acordo com o vídeo que fiz no início do processo de aprendizado foi que o menu suspenso quando selecionado para Ele não fica em branco e se você não acessá-lo, a chamada da API não funciona. Mas se você remover essa opção obrigatória para não ficar vazia, então tudo funciona. Mas vamos aprender lendo e praticando. Porque aprendemos e aprendemos, e morremos burros.

@nymeanoman Год назад

Super Course. But one question, how do I pass data from the delete icon to the pop up ? The icon data type is GET ALL MOVIE RESPONSE and the pop up data type is GET MOVIE BY ID. Did I miss something ?

@fernandocieri Год назад

The way I solved this was adding another step in the "icon fa fa-trash is clicked" workflow, in this step I trigger the display data action with element "Popup DELETE MOVIE" and data to display "Parent group's GET ALL Movies response result", then I made the popup's data type "GET All Movies response result" and from that I could access the data in the "confirm delete" button's workflow and make the api call

@PetrChlada Год назад

Great tutorial!

@amendavid7270 Год назад

Great video ! Could you just enable "Everyone can view" on the doc editor please? To learn more about how to open your Bubble API to external applications. Thanks in advance

@indahpertiwi8327 9 месяцев назад

Users can create application logic and functionality by defining workflows using Bubble's visual workflow builder. Workflows are sequences of actions that are triggered in response to user interactions or other events.

@Iaintsayinnothin.. Год назад

Also say an API didn't have an API Explorer could you use a platform like Postman to test the API first?

@johnpatrickoldfield534 Год назад

Are there any api's for fetching bank receipts and bank payments generator and bank payments and receipts initialization?

@dillendev 4 месяца назад

exactly helpful video

@lebohangephraimmahlabe4349 Год назад

Please do a video on how to setup a graphQL api in the API connector

@GoIdenhigh 10 месяцев назад

FYI...Finding Nemo's id has been changed since the video was published. ITs now 1631298206869x170479266931107260 or just used another ID from the raw json in the initial call...

@peterknganga 5 дней назад

Thank you

@oojeni 3 месяца назад

Hi bubble. Is it possible for you guys to make a video about instagram basic api ? It is really confusing..

@vitopeckaj Год назад

Hi all, does anyone else also have the problem that when they copy the ID from the website they get the error message that it is no longer valid?

@DesertGardenPrepper Год назад

This does not work with the template at all. I fought with this for hours and could never get the nested groups to pick up the data. totally frustrating. this is typical of the types of issues I continue to have with developing with bubble. if I can't reverse engineer the nested rg in this template, how am I supposed to make anything work with bubble? even if you try to follow by just making a new blank page, at 24:00 suddenly they magically have a movie card, like the template, but never show how to set it up. update: after many many hours of hammering on the nested groups, I finally got that working, but the popups for the delete and edit, I have tried everything. I can't get the workflow to display data - data to display. I have about 80 hours spent watching bubble tutorials from other RU-vid creators, and this is the WORST tutorial I ever wasted my time on.

@afrossafeek8054 10 месяцев назад

Hi sir. What is the "type of content" and "data source" you entered for movie card? And group title/tag "type of content" and "data source"

@GoldDCharles Год назад

Great Tutorial!! Very clean, not too fast, examples are straightforward, and the voice is clear. Just one thing : I tried using the Json provided instead of adding parameters but it never worked. This is weird. I double checked th Json with "JSON formatter & Validator", and other tools and it is valid. But in the end, in the API connecter, it never work. Why? Using Json instead of unique parameters is key. When we'll need to send a list of things, there'll be no way to do it by settingunique parameters, no? So this is a skill which is absolutely needed to release the full power of the API connector. that's the only thing that make this tutorial incomplete in my opinion.

@fernandocieri Год назад

I know I'm late, but anyways. I'm having the same problem and I guess the issue is with their movies api, that seems to be waiting for parameters and not json, therefore the 400 response. Maybe try with another free api that allows post calls.

@ikelloydyana4275 Год назад

Error when getting movie by ID Raw response for the API Status code 404 {"statusCode":404,"body":{"status":"MISSING_DATA","message":"Missing object of type movie: object with id 1628610639178x263817269997389760 does not exist"}}

@yunuskutlu2231 Год назад

me to

@yunuskutlu2231 Год назад

did you solve it?

@daviportosh 10 месяцев назад

Just solve it... this error is happening because the api isn´t finding the specific given ID (1628610639178x263817269997389760, in this case). Just put "FINDING NEMO"´s ID. It will solve. 1631298206869x170479266931107260

@krenkel7982 Месяц назад

Erro 404, você está tentando alterar um filme que você não criou? Como a regra da API é: não tente editar, excluir, etc., itens de outros em tabelas externas, você só pode alterar o que criou. Ou você terá que copiar os dados externos para si mesmo e, em seguida, tratá-los como seus. E também você tem que colocar dados reais, alterar o ID.