Deploy your functions and use them everywhere⚡⚡

A beginners tutorial written in a funny way - You'll learn how to get started with cloudflare workers, and IOS shortcuts (and hopefully also get a laugh!)

I had a small API that me and my friends wrote in Python FastAPI - I hosted that API on my server. But the entire API was kinda useless so I shut it down.

I did the unthinkable. I forgot that one of my favorite functions, owofy.py was part of that project. After almost one year, I began on a quest to revive it.

It was a silly function that basically creates a funny "owofied" piece of text.
Oh... Hai thewe (。O⁄ ⁄ω⁄ ⁄ O。)It was a siwly function that basically creates a funny "owofied" piece of text. UwU
uhhhh... yeah, you get it.

I NEEDED to revive it. At all costs. I needed that in my phone, laptop everywhere. I had to harness the power of uwufying. It was my path to enlightenment. Without the owofy API, I would remain plebeian for eternity.

So, let's do this! Let's create a typescript function that uwufies text, set up cloudflare workers and create an IOS shortcut so that we can uwufy text everywhere 😱😱

If you don't know what a cloudflare worker is, or what IOS shortcuts are, this blog isn't...
jk. Don't worry. I'll explain it all.

Owofying text

Let's start with creating the owofy function itself. We need to take text, and use start with a dumb "Haiii OwO"-like phrase. add suffixes to words, replace "why" with "wai" and stuff. OK I won't bore you with the function itself, it's pretty simple.

I totally didn't take the help of ChatGPT and github copilot because I was having an issue with typescript and was trying to be extra cool solving it with generics.
totally not.

Anyways! Here's the TS code

WTF is a cloudflare worker?

To understand cloudflare workers, we need to understand what "serverless" is.

In short, serverless is a way to deploy code without having to manage a server.

OH- I hear that. You need an analogy.
You own a kitchen because you really like pizzas. You purchased the land (server), you hired a chef - or learnt how to make food yourself (system admin), and you are also the one who mops the floors and maintain the kitchen, keep it neat and clean. Your kitchen could burn down btw.

or, you can just order food from a food delivery app. Give it your exact recipe, pay for the food and delivery. And you get your pizza without any hassle. The difference is, ordering is much cheaper because the same network of kitchens provides pizza to a lot of other people. They have the best chefs, the fastest ovens, the best delivery network. Even if one of their kitchens burn down, all the others will stay active.

Got it? Cloudflare is, infact, the biggest "pizza provider" in the world.
Or in other words, Cloudflare has it's servers EVERYWHERE. You can't really move your own pizza kitchen, or make thousands of kitchens all around the world.

That's the power of serverless. Amazing performance, reliability, speed and scale, while also being convenient to use.
Does that mean serverless has no servers? Nope! Obviously, the servers do exist somewhere, they are just abstracted away and we don't need to deal with all that.

OK, NOW GETTING TO THE PROGRAMMING AGAIN.

Hey, this is very important - extremely important for our path to enlightenment. Yes, you have to join me. Together, we can uwufy the entire internet.
CODE ALONG!! Don't just read, you won't get anything.

Let get stuff done first:
First, Create a Cloudflare account

Ok, now, we have to do some installations (you could just do everything on the cloudflare dashboard but that would be cringe)

First, install nodejs if you don't have it yet (We would need NPM to download wrangler)

What is wrangler? It's basically a tool that cloudflare has made to make our lives easier. It helps us make cloudflare workers.

Let's install wrangler (run this in your terminal) -

npm install -g wrangler

(the -g flag is the global flag, it means that wrangler will be available globally, and you can run it with the wrangler command)

Now, log into wrangler with your cloudflare account.

wrangler login

Creating the worker

Congratulations! We have taken the first step to enlightenment. The uwufication of the universe. Now let's start a project.

Use the command wrangler init owofy-the-world
It will ask you some questions. It's your choice if you want to use typescript!!! In this project, I have used typescript because js isn't my cup of tea ☕

BTW - If you want to code in python or some other language, check this out - Languages supported by workers
I'll be completely honest, the python one seems completely broken. But other than that, all languages work!

This will create a folder named owofy-the-world. Open your editor in that folder

You should have a file called src/index.js (or .ts), and a file called wrangler.toml.

Let's understand!

// Path: src/index.ts
export default {
  async fetch(request: Request, env: any, ctx: ExecutionContext) {
    return new Response("Hello World!");
  },
};

Over here, the function is exporting a fetch() function - Which has

• request - so we can access stuff about the request itself things like URL, HTTP headers, HTTP method, and stuff.
• env - Any variables we might need (for things like KV database)
• ctx - The context of the execution (don't worry about this for now)

First of all, to owofy, we need the params.
Let's say, I pass the text like this:
website.com/?text=Here's the text to be owofied
How do we get the stuff after text= 🤔

Wait - it's part of the URL! Let's just parse the URL and get the text out of it!

COOL! You can take any number of params, any param in general. You can even have authorization with headers, run your own functions and return whatever you want to!

But we are on a mission, soldier. We NEED to owofy the text! So, we'll just put our function there...

function owofy(text:string) {...}

export default {
  async fetch(request: Request, env: any, ctx: ExecutionContext) {
    const text = new URL(request.url).searchParams.get('text');
        return new Response(owofy(text || "You betrayed me. no text!"));
  },
};

That is IT! YES! It's that easy to create a cloudflare function. Now, imagine all the things you could do with it. One of my friends, Mohit, wrote a really good blog post on one such use case -

How to serve *any* website from your own domain (for free!)

Mohit Yadav ・ Aug 13 '22

#javascript #webdev #beginners #tutorial

Cloudflare also has a lot of examples that you should check out!!!

Deploying the worker

Just use the command wrangler publish. Yes. that's literally it. That's right - You don't need to anything.
Now you can sit peacefully, and owofy all the text you can in the world.

This will be published on a yourname.workers.dev URL - ughh, that's ugly! To change the world, we need to put it on owo.customdomain.com!
You can add a custom domain, custom routes and a lot more in the cloudflare dashboard workers page.

WTF is an IOS shortcut?

I know not everyone uses IOS so I'll keep this short!
IOS shortcuts are automations that you can run on your mac or iphone. Creating shortcuts is probably the most easiest things to do now - and it's really fun!

"Hey siri, make this cringe"

Use text from clipboard
Get contents of URL yourname.workers.dev/?text={ClipboardText}
Copy content to clipboard.

That's it. Here's the shortcut I made - https://www.icloud.com/shortcuts/48917df04e4c4838864d5a29b698c2cf
Feel free to use it. Copy any text and say "hey siri, make this cringe"

That's it!!!

If you liked this post, you'll like other tutorials of mine - follow me @dhravya

I post stuff on twitter @DhravyaShah too, if you're into that.

AD

Every time I learn about algorithms, I either forget it the other day or don't understand anything at all.
Luckily, Algolab has a very good, video-based, interactive course that will get you from 0 to interview in no time!

Use my referral link (it supports me too) - https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_pkegf5oy