James Devonport | Cloudflare Workers for Bubble Apps | Bubble.io

Summary

В этом видео Джеймс рассматривает Cloudflare Workers и их преимущества для разработчиков без кода, особенно при использовании Bubble. Он демонстрирует, как легко настроить и использовать Workers для выполнения задач AI с помощью OpenAI, а также возвращает структурированные данные в Bubble. Джеймс также обсуждает стоимость и безопасность использования Cloudflare Workers, предлагая идеи для дальнейшего изучения и использования.

Takeaways

• 🌐 Cloudflare Workers - это небольшая программа, работающая на сети Cloudflare и выполняющаяся очень быстро.
• 🔐 Workers может хранить переменные, включая зашифрованные API-ключи для безопасности.
• 🛠️ Workers предоставляет пространство для хранения ключевых значений, что может быть полезно для хранения записей и быстрого доступа к ним.
• 📈 Cloudflare Workers подходит для выполнения быстрых задач, особенно для работы с AI и возврата структурированных данных в Bubble.
• 💼 В данном примере Workers используется для вызова конечных точек OpenAI Chat и возврата структурированных данных в JSON.
• 💻 Редактор Cloudflare Workers имеет разделы для кода, тестирования запросов, просмотра ошибок сети и консоли для отладки.
• 💰 Cloudflare Workers предоставляет 100 000 бесплатных запросов в день с очень низкой стоимостью CPU времени, что делает его экономичным решением.
• 🔗 Можно создать Cloudflare Worker, который будет отправлять POST-запросы с текстом резюме в OpenAI и возвращать структурированные данные в Bubble.
• 🔑 В Cloudflare Workers можно добавить переменную для API-ключа OpenAI и зашифровать ее для безопасности.
• 📝 Пример использования Workers включает в себя создание кода с помощью Claude, развертывание и тестирование в Cloudflare, а затем подключение к Bubble через API-коннектор.

Q & A

Что такое Cloudflare Workers?

Cloudflare Workers - это небольшая программа, которая запускается в сети Cloudflare. Это эффективно кусочек JavaScript, который выполняется в облаке и может обрабатывать запросы с использованием HTTP GET или POST.

Какие преимущества Cloudflare Workers предоставляет для разработчиков?

Cloudflare Workers предоставляет возможность выполнять код на краю сети Cloudflare, что обеспечивает высокую скорость. Он также имеет доступ к API для выполнения сетевых запросов и может использоваться для интеграции с различными сервисами и API.

Как Cloudflare Workers может быть полезен для разработчиков без знания кодирования?

Cloudflare Workers упрощает интеграцию с AI и обработку данных, что может быть полезно для разработчиков без опыта программирования. Он позволяет создавать сложные функции и интеграции с минимальным кодированием.

Какие возможности предоставляет Cloudflare Workers для работы с Bubble?

Cloudflare Workers может быть использован для выполнения задач AI и возврата структурированных данных в Bubble. Это может быть полезно для обработки данных, таких как резюме, и преобразования их в удобочитаемый формат.

Что такое переменные в Cloudflare Workers и как их использовать?

Переменные в Cloudflare Workers используются для хранения информации, такой как ключи API. Они могут быть зашифрованы для обеспечения безопасности и легко настроены через панель управления Cloudflare Workers.

Какие функции хранения данных предоставляет Cloudflare Workers?

Cloudflare Workers имеет встроенный кэш для хранения данных. Хотя в видео не рассказано об этом подробно, он предоставляет возможность быстрого доступа к данным на крупном масштабе.

Какие цены на Cloudflare Workers и какие лимиты существуют?

Cloudflare Workers предлагает 100 000 бесплатных запросов в день с 10 миллисекундами CPU на вызов. Для более высоких потребностей существует платный план, начинающийся с 5 долларов в месяц.

Как установить Cloudflare Worker и как он взаимодействует с Bubble?

Для установки Cloudflare Worker нужно войти в аккаунт Cloudflare, создать новый Worker и развернуть его. Затем Worker можно подключить к Bubble через API-коннектор и отправлять в него POST-запросы с данными для обработки.

Что такое пример использования Cloudflare Workers с OpenAI?

В видео приведен пример, где Cloudflare Worker использует OpenAI для извлечения информации из резюме и возврата ее в структурированном JSON. Это показывает, как Worker может интегрироваться с AI для выполнения сложных задач.

Какие дополнительные возможности Cloudflare Workers можно исследовать в будущем?

В будущем можно исследовать использование Cloudflare Workers для подключения к базам данных, группировки AI-запросов и выполнения анализа на их основе. Это может быть полезно для создания более сложных и мощных приложений.

Outlines

00:00

🌐 Введение в Cloudflare Workers

В этом разделе Джеймс представляет Cloudflare Workers как полезный инструмент для разработчиков без кода, особенно при работе с Bubble. Он рассматривает Workers как быстрые, маленькие программы, запускаемые на сети Cloudflare, и способные обрабатывать запросы через HTTP. Джеймс также отмечает, что Workers могут быть использованы для выполнения задач с AI, возвращая структурированные данные в Bubble. Он подчеркивает, что Workers просты в использовании и могут снизить нагрузку на рабочие процессы, делая их более доступными и экономичными.

05:01

🔑 Создание Cloudflare Worker для извлечения данных с резюме

Джеймс демонстрирует процесс создания Cloudflare Worker, который будет извлекать ключевую информацию из резюме и возвращать ее в виде структурированного JSON-объекта. Он использует сервис Claude для генерации кода Worker и обьявления переменной для ключа API OpenAI. В этом разделе также рассматривается использование JSON-моделей OpenAI для возврата данных и отправка POST-запроса с текстом резюме в Worker для дальнейшего обработки.

10:02

🛠 Тестирование и развертывание Worker в Cloudflare

В этом разделе Джеймс копирует сгенерированный код Worker из Claude в Cloudflare и начинает процесс тестирования. Он добавляет переменную с ключом API OpenAI, чтобы Worker мог обращаться к сервису OpenAI. После развертывания Worker тестируется с помощью примера POST-запроса с текстом резюме. Тестирование показывает, что Worker успешно извлекает данные и возвращает их в структурированном формате JSON.

15:05

🌀 Интеграция Worker с Bubble и дополнительные возможности

Джеймс продемонстрирует, как настроить Worker в Bubble, используя API-коннектор. Он копирует URL Worker и настраивает новый вызов в Bubble, который отправляет POST-запрос с текстом резюме. Результаты, возвращаемые Worker, структурированы и готовы к использованию в Bubble. В заключении Джеймс рекомендует добавить защиту Worker, например, с использованием ключей API, и отмечает, что в будущих выпусках будет рассмотрено использование Workers для более сложных задач, таких как соединение с базами данных и группировка запросов к OpenAI.

Keywords

💡Cloudflare Workers

Cloudflare Workers - это сервис, предоставляемый компанией Cloudflare, который позволяет разработчикам запускать JavaScript-код на глобальной сети Cloudflare. В контексте видео, Workers используются для создания программ, которые обрабатывают данные на стороне сервера, например, для взаимодействия с API OpenAI. В видео рассматривается, как Workers могут быть полезны для разработчиков без опыта программирования (no code developer), особенно при работе с платформой Bubble.

💡No code developer

No code developer - это термин, обозначающий разработчиков, которые строят и разрабатывают приложения без написания кода в классическом смысле. В видео упоминается, что Cloudflare Workers полезны для таких разработчиков, поскольку они могут использовать визуальные инструменты и интеграции для создания сложных функций, таких как обработка данных AI.

💡Bubble

Bubble - это визуальный платформа для создания веб-приложений без написания кода. В видео Bubble используется в качестве примера платформы, с которой интегрируются Cloudflare Workers для выполнения задач, связанных с AI, и возврата структурированных данных в Bubble для дальнейшего использования.

💡AI

AI, или искусственный интеллект, - это область информатики, связанная с разработкой программ, способных выполнять умственные задачи, обычно выполняемые людьми. В видео AI используется в контексте вызова API OpenAI с помощью Cloudflare Workers для получения структурированных данных из резюме.

💡OpenAI

OpenAI - это исследовательская лаборатория, специализирующаяся на разработке искусственного интеллекта. В видео OpenAI упоминается в качестве сервиса, который предоставляет API для выполнения задач AI, таких как анализ резюме и возврат структурированных данных.

💡API

API, или интерфейс программирования приложений, - это набор правил и протоколов, который позволяет различным приложениям взаимодействовать друг с другом. В видео API используется для обращения к сервису OpenAI с помощью Cloudflare Workers и получения данных.

💡JSON

JSON (JavaScript Object Notation) - это формат обмена данными, широко используемый для передачи структурированных данных между веб-приложениями. В видео JSON упоминается в контексте возвращения данных из Cloudflare Workers в Bubble в структурированном виде.

💡Post request

Post request - это тип HTTP-запроса, используемый для отправки данных на сервер. В видео post request используется для отправки текста резюме в Cloudflare Worker через API Bubble.

💡API connector

API connector - это инструмент или сервис, который позволяет приложению взаимодействовать с внешними API. В видео API connector в Bubble используется для подключения к Cloudflare Worker и отправки запросов с текстом резюме.

💡Encrypt

Encrypt - это процесс преобразования данных (шифрование) для защиты от несанкционированного доступа. В видео упоминается шифрование переменных в Cloudflare Workers, таких как ключи API, чтобы обеспечить безопасность.

Highlights

Introduction to Cloudflare Workers and their usefulness in a toolkit for no code developers.

Cloudflare Workers are small programs that run on Cloudflare's network, effectively JavaScript in the cloud.

Workers run extremely fast and can handle GET or POST requests, accessing the internet like a workflow in Bubble.

Workers can interact with other services and APIs, exemplified by using OpenAI chat endpoints.

Workers can store variables securely, including API keys.

Workers have a KeyValue Store for data storage at a massive scale.

Workers are ideal for quick jobs, especially AI tasks, and returning structured data to Bubble.

Workers reduce workflow utilization and are more affordable than other solutions.

Cloudflare offers 100,000 free requests per day with each invocation having 10 milliseconds of CPU time.

Paid accounts start at $5 a month with competitive pricing.

Building a Cloudflare Worker to connect to Bubble through the API connector.

The process of creating a Cloudflare Worker involves writing code and deploying it.

Using Claude to generate Cloudflare Worker code for extracting key info from a resume.

Setting up variables in Cloudflare to secure API keys.

Testing the Cloudflare Worker with a sample resume to ensure it extracts and returns structured JSON.

Integrating the Cloudflare Worker with Bubble using the API connector.

Using the Cloudflare Worker to process a resume text and return a structured JSON in Bubble.

Adding security to the Worker by requiring an API key for execution.

Option to run Workers from a custom domain for a more professional setup.

Future episodes will cover more advanced uses of Cloudflare Workers, including database connections and batch AI requests.

Transcripts

hey there it's James here uh today we're

going to be taking a look at Cloud flare

workers and why I think they're such a

useful thing to have in your toolkit uh

as a no code developer particularly when

working with bubble uh they're really

handy for doing really cool stuff with

AI um so this is the session uh that I

did for Devo we had some technical

issues on that day I think cloud flare

were deploying a load of changes to

workers because it looks uh totally

different now so uh it's all working

great again so I thought I'd re-record

everything and we could just go through

exactly how it works it's really easy to

get started so yeah let's take a

look so let's dive into it I've put

together just a couple of simple slides

just to introduce cloudflare workers and

kind of explain a little bit more what

they actually are so um at the most

simple level what they are is it's a

small program that runs on cloud Flair's

network uh so it's effectively uh a bit

of JavaScript uh in our example anyway

that's going to run uh in the cloud uh

they run extremely fast uh and when you

so you can access it by kind of get

request or post request uh and then it

itself it has access to to do Network

requests itself so you can kind of think

of it a bit like a workflow in bubble uh

on the public internet so it can do

pretty much anything workflow in bubble

can do but obviously you've got access

to doing all sorts of more advanced

stuff uh with with custom code in there

can talk to other services uh and apis

so like in this example today we're

going to use uh open AI chats uh chat

endpoints to to do uh our request so the

worker is going to handle all of that

for us uh it can have variables uh so

you can put things like API Keys uh into

variables and encrypt them to keep them

secure uh we'll cover that again today

it's really easy to use uh it does have

a key Value Store as well um we're not

going to cover that today but we

probably will in the future but it's

basically a free data store uh so if you

need to store records and and have quick

access to them at a massive scale uh

this could be worth looking at uh so

it's it's it's got that built in but

really it's just a great way to do very

quick uh jobs I I think it's

particularly useful for doing AI tasks

uh and returning structured data to

Bubble so if you've watched any of my

previous editions where we've tried to

deal with

uh running requests to open Ai and then

paing the Json that we get back it can

be a bit of a faf in bubble uh so I

think this is a really good alternative

uh it's really easy to set up and use

and I use it in multiple of my own apps

and it's it's been absolutely amazing of

course it also is going to help reduce

on your workflow uh utilization because

all this uh AI jobs are going to be

happening in Cloud flare so uh yeah it's

it's a lot more

affordable um just to give you quick

preview of what the actual editor is

going to look like when we go into it

just at very high level the bit on the

left there is where the actual code goes

uh so this is where we're going to put

the code uh that our work is going to

run uh and on the right section there

you've basically got a little test panel

so this is where you can run test

requests against the worker see how they

perform see what the output is and also

you've got your kind of network tab

there so you can see any errors and

you've got the console errors and all

that kind of stuff in there um which

again is quite useful because if you do

get an error you we're going to just

take that straight out and put it back

into the AI uh to update our our code

and fix any errors so really works well

the other great thing about workers is

they're just insanely cheap uh for uh

getting up and started so you get uh

100,000 requests free every day uh with

10 millisecond milliseconds of CPU time

per invocation I personally don't really

go over that even with some of my more

complex things that uh little workers

that I've built and then if you do want

to get get a paid account it starts at

$5 a month and as you can see the

pricing is extremely extremely

competitive like I don't think there'd

be a cheaper way of doing these kind of

things uh that I've come

across so just at a very high level what

we're going to do today uh we're going

to build a cloud flare worker uh that uh

that're we're going to connect to from

Bubble so we're going to connect to it

through the API connector in bubble and

we're going to send it uh a post request

which is going to contain the text of uh

a resume so we're just going to have all

the text of the resume send it into the

cloudflare worker and then in the

cloudflare worker we're going to call

openai uh give it that text and ask

openai to return us a structured Json of

all the of all the data that's in that

resum so this is just to give you a bit

of an example of the kind of stuff you

can do obvious we can get way more

complex but um I think this is a good

example uh and then so we're then going

to return that structured Json that we

get back from open AI back to Bubble so

effectively in bubble we're going to

make our request with our our resum and

we're going to get back a really nicely

formatted block of Json uh with all the

data from that resumé formatted in a

nice way that we can then go on and use

in bubble uh and the API connector is

going to pick up all those fields and

and let us use them

so uh with that said let's dive into

Cloud flare and get

started so uh I've logged into my

cloudflare account and to go to workers

uh we're got to go down here on the left

and you'll see there's a whole section

for workers there's absolutely loads of

stuff uh but we're going to go to the

overview and we're just going to hit the

create uh a worker uh button uh and then

we're just going to create a blank

worker to get us

started I'm going to call our worker uh

resume

AI

extractor and I'm just going to hit

deploy and that's basically just going

to set us up uh a blank worker with some

kind of boilerplate code in it uh that

will let us just get started uh with

with kind of getting everything set up

so once we've got our worker here you

can see you've got the URL for it

already so this is the URL that we're

going to use in the bubble API connector

later but let's just get started with

actually putting the worker together so

I'm going to press the edit code button

uh and then we've open up here with our

worker in that uh in that mode that I

showed you

earlier and we've just got our kind of

boiler plate code here uh that is set us

off so we can just delete that to get

started so we're going to generate our

uh our code for this worker with uh

Claude so we're going to use anthropics

Claude uh you can also use chat G

I found Claude works really well with

this so let's just head over into

Claude and I've re uh already written my

prompt so I'm going to take my prompt

and put it in

here and uh I'm just going to talk you

through the prompt uh in a bit of detail

just to kind of explain uh what what I'm

actually asking for here because I think

it's quite useful to know uh what the

The Prompt is actually doing so you can

see here we're saying uh I want to

create a cloud flare worker which

extracts key info from a resume and

returns it as a structured Json object

the the cloudflare worker variable for

the open AI key is open AI key under

with big caps underscore I'll show you

where we're going to set that up later

basically that's what that what we're

saying there is we want to make our API

key a variable uh that we're going to

set in the cloud flare dashboard but it

means that we're not just putting our

API key into the code which we probably

wouldn't want to do we want to keep it a

bit more secure uh and encrypt it so

we're going to do it in Cloud flare and

that's just telling it what we want to

call the variable so we want to call it

open AI API key super

simple um I'm going to declare that I

want to use the open a open AI model uh

GPT 40 mini um sometimes this will try

and just use a random model because they

they're not always aware of the latest

things so I just always declare what

model I want to use um which just keeps

it kind of

simple uh we want to use uh open AI Json

mode to return structured data so we're

we're telling it okay I want you to make

sure you set up the API call to open AI

to use Json mode just to make sure we're

forcing it to return uh

Json and uh I want to make a post

request to the worker with an object

containing the text from a resume and

then I've just made a simple example

kind of Json object so this is what I

want to send into the worker a little uh

post request with this string here which

is going to be the actual resume super

simple uh and then the last thing here

is is I say uh I want the worker to

return a standard structure of data from

a resume you should Define the structure

so I'm just doing that to keep this easy

um but probably in your own use case you

may have adjacent structure you've

already got that You' put in here and

you say I want this exact structure back

uh but I'm just going to let claw

generate it so I'm just going to hit go

there and we're going to uh see what

Claude does so it's going to write all

the code for our worker here it's

probably not going to be that long uh

and we can see we've got our worker code

there and it's also given us uh an

example post request uh that we can do

as well later

um and it's it explains in detail what

the work is actually doing here uh so

yeah so now pretty much what we can do

is we can take this code copy it from

here go over to

cloudflare paste in our

code and uh that is all in there ready

to go now so first of all we're going to

just see that this is just basically

it's not going to work because first of

all we're we're not doing the proper

request here yet but also we haven't put

our API key in yet so what I'm going to

do is I'm just going to hit hit de

deploy up here basically that's just

going to save where we are with this and

then I'm going to go back into Cloud

flare into the settings for this worker

so this is all the code that is just

recently changed which I think was

changed the other day when I was doing

my demo um but all of this is different

now so uh we want to add in a variable

so this is the variable that we

described in that prompt earlier so this

is going to be our open AI API key and

I've got a quick test key that I'm going

to use

here put that in here I'm going to

delete that afterwards obviously and

then if you want it to be encrypted you

can hit the encrypt button here and that

will keep it secret uh so it can't be

seen uh and then you just hit deploy

down here and that will save that that

variable so now when that worker runs

and it looks for the open AI API key uh

it's going to know it's going to have it

there be able to to use it so I'm now

going to head back into edit the code so

we're going to go back into our worker

and now we're actually going to test it

so fingers crossed this should actually

just work uh the first time but

obviously uh we just need a test resume

to send into it so I'm just going to ask

Claude for this this is is the easiest

way uh can you give me

a example resume post request to test

with uh and then uh claude's just going

to generate a uh an example resume for

me here that I can use to test it but

you might already have your own one um

so yeah I'm just going to grab that head

back into Cloud flare and in our right

pain here we're going to say okay let's

test this we know we want to do a post

request so we're going send a post into

this and we're going to paste in the

body uh that resume that we just did so

second I paste that in the worker is

going to start

running uh and we should see in a second

uh yeah there we go there's our uh Jason

so uh the work has run uh open AI has

extracted all this data here and you can

see we've got a lovely structured Jason

uh with all of that uh data so uh we've

got it all in a nice format that we can

can then go and use so next step is we

want to go and set this up uh in bubble

which again going to be super super

simple uh and let's uh get started with

that so uh to get this set up in bubble

what I'm going to do first is I'm going

to copy this uh URL here so this is the

URL of our Cloud flare worker and I'm

going to head over into bubble into the

API connector

and in here I've just set up a uh a new

API call for cloud flare and I'm just

going to say add another

call and in here I'm going to say uh

let's just call this our resumé

extractor and it's going to be a post

request and I'm going to put in our

Cloud flare URL there and then I'm

actually just going to go and copy that

exact same call that we just did to

Cloud flare here so I'm going to copy

this

uh just make sure you've deployed this

by the way because obviously to call it

externally you need to make sure you've

uh you've deployed it uh and then I'm

going to head back into bubble Post in

our resume string here and then uh all I

should need to do now is hit initialize

call and what that's going to do is run

that cloud flare worker which in turn is

going to run its open aai job extract

the data from our uh resume and there we

go we can see it's returned to us our

lovely structured Jason so we've got our

name summary all the education skills

all in a really really perfect format

for us to use in bubble uh so I'm going

to hit save and that's it uh a very very

high level uh that's how you can use

cloudflare workers to do stuff now

obviously you could then go in and start

doing uh a lot more with this uh you

could you could update the prompt to

start doing more analysis and things

like that and the other thing thing I

would recommend is you add some security

uh onto your worker uh so maybe by

adding uh like an API key that you need

to run it uh but we'll probably cover

that in in a future uh Edition just to

make sure that you've got uh some

security on your worker and not just

anyone can run it but again very easy

don't need to write any code you can do

it all through uh just with with Claude

going back and forth uh and putting

another variable in Cloud flare the

other thing to note is in Cloud flare if

you want uh you can also run this from

your own domain so uh by default it runs

on this this workers. Dev domain but if

you want to you can go in and hook up

your own domain so you could have this

as

resume. yourown domain.com and run it

from that which is the recommended way

of doing it uh and there is a ton more

stuff in here uh that we could dive into

and we probably will in future episodes

so if you found this useful let me know

um because I'd love to cover this more

in more detail because obviously I've

used this for for much more advanced

things like connecting to databases

looping AI requests so batching up

multiple calls to open Ai and doing

analysis on all of them and that kind of

thing so this is just kind of an intro

just to show you kind of the workers

dashboard how to put your code in there

how to run it uh and how to then set it

up in bubble I think you know it's

probably a lot easier than you may have

thought at the beginning hopefully um

but this is a really really really

useful thing uh to have in your tool

belt uh and it's again super cost

effective so I hope you found this

episode uh useful drop me uh a reply

with any questions or feedback or

anything or anything else you'd like us

to cover we're going to cover lots more

stuff like this uh over the next few

weeks uh particularly with doing AI

stuff related to Bubble so that's it for

this week thank you very much bye-bye