diff --git a/get-started/README.md b/get-started/README.md index 9e8c46185..a7692d219 100644 --- a/get-started/README.md +++ b/get-started/README.md @@ -2,7 +2,7 @@ description: >- Comprehensive tutorials, references, example code, and more CodeCapsules products. -cover: ../platform/.gitbook/assets/CC Docs Banner.png +cover: /broken/files/uRf9AYTumLmkgj6mLxac coverY: 0 --- diff --git a/get-started/SUMMARY.md b/get-started/SUMMARY.md index 7a9d38cec..728f4ca10 100644 --- a/get-started/SUMMARY.md +++ b/get-started/SUMMARY.md @@ -17,19 +17,17 @@ * [Django](backend/python/django.md) * [Flask](backend/python/flask.md) * [Python Discord Bot](backend/python/python-discord-bot.md) - * [Deploy a Python Telegram Bot in 5 Minutes](backend/python/python-telegram-bot.md) - * [Polling Python Telegram Bot](backend/python/polling-python-telegram-bot.md) - * [Whatsapp Bot](backend/python/whatsapp-bot.md) + * [Python Telegram Bot](backend/python/python-telegram-bot.md) + * [WhatsApp Bot](backend/python/whatsapp-bot.md) * [Node.js](backend/node.js/README.md) * [Express.js](backend/node.js/express.js.md) * [Node.js Discord Bot](backend/node.js/node.js-discord-bot.md) - * [Deploy a Node.js Telegram Bot in 5 Minutes](backend/node.js/node.js-telegram-bot.md) - * [Polling Node Telegram Bot](backend/node.js/polling-node-telegram-bot.md) - * [Slack Bot](backend/node.js/slack-bot.md) + * [Node.js Telegram Bot](backend/node.js/node.js-telegram-bot.md) + * [Node.js Slack Bot](backend/node.js/slack-bot.md) * [Java](backend/java.md) * [Go](backend/go/README.md) * [Go](backend/go/go.md) - * [Deploy a Go Telegram Bot in 5 Minutes](backend/go/go-telegram-bot.md) + * [Go Telegram Bot](backend/go/go-telegram-bot.md) * [Docker](backend/docker/README.md) * [Caddy Docker Site](backend/docker/caddy-docker-site.md) * [Docker Laravel App](backend/docker/docker-laravel-app.md) diff --git a/get-started/backend/docker/caddy-docker-site.md b/get-started/backend/docker/caddy-docker-site.md index d7c837cce..f52dc4ad6 100644 --- a/get-started/backend/docker/caddy-docker-site.md +++ b/get-started/backend/docker/caddy-docker-site.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/backend/docker/docker-laravel-app.md b/get-started/backend/docker/docker-laravel-app.md index f0e8ebc36..2fad4dae7 100644 --- a/get-started/backend/docker/docker-laravel-app.md +++ b/get-started/backend/docker/docker-laravel-app.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/backend/docker/docker-php-app.md b/get-started/backend/docker/docker-php-app.md index 622275e44..a30e75550 100644 --- a/get-started/backend/docker/docker-php-app.md +++ b/get-started/backend/docker/docker-php-app.md @@ -32,7 +32,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/backend/docker/flask-docker-app.md b/get-started/backend/docker/flask-docker-app.md index 1245d2fe6..85ae9fe25 100644 --- a/get-started/backend/docker/flask-docker-app.md +++ b/get-started/backend/docker/flask-docker-app.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/backend/go/go-telegram-bot.md b/get-started/backend/go/go-telegram-bot.md index 357bd2ed5..674d59aad 100644 --- a/get-started/backend/go/go-telegram-bot.md +++ b/get-started/backend/go/go-telegram-bot.md @@ -21,8 +21,8 @@ Follow the steps below to register a new bot with the BotFather: The BotFather will respond with a message containing an access token for your newly created bot. This access token allows our application to: -- Access the Telegram API. -- Tell our bot what to do when receiving different messages from users. +* Access the Telegram API. +* Tell our bot what to do when receiving different messages from users. To confirm that your bot has been created successfully, search for the bot's username. You should be able to see it and start a conversation with it. However, it won't respond because we haven't written the bot's logic yet. @@ -40,7 +40,7 @@ Log in to your Code Capsules account and navigate to the **Spaces** tab. Then, c Follow the prompts to choose your region and give your Space a name, then click **Create Space**. -![Create a Space](<../../.gitbook/assets/space-name (3).png>) +![Create a Space](../../.gitbook/assets/space-name.png) Example instructions to go with numbered annotations: @@ -66,7 +66,7 @@ Code Capsules automatically builds your application when you've finished creatin Once your application is live, you can view the build logs by selecting the **Deploy** tab and clicking the **View build log** link in the **Builds** section. -![Build Logs](<../../.gitbook/assets/backend-capsule-build-logs (1).png>) +![Build Logs](../../.gitbook/assets/backend-capsule-build-logs.png) ## Add Environment Variables @@ -78,9 +78,9 @@ First, name the `BOT_TOKEN` variable and enter your Telegram access token (which Name the `URL` variable and set your bot's domain as its **Value**. -- Get the domain by clicking the Capsule's **Details** tab and copying the URL in the **Public URL** section. -- Paste the URL in the **Value** field. -- Make sure the URL ends with a `/` or the webhook will not be valid. +* Get the domain by clicking the Capsule's **Details** tab and copying the URL in the **Public URL** section. +* Paste the URL in the **Value** field. +* Make sure the URL ends with a `/` or the webhook will not be valid. ![Add a URL Environment Variable](../../.gitbook/assets/url-env-variable.png) @@ -90,9 +90,9 @@ Confirm your changes by clicking on **Save**, then restart your Capsule by toggl The next step is to set up a webhook for your bot: -- Click the **Public URL** link in your Capsule's **Details** tab. -- In the new tab that opens, add `/setwebhook` to the URL and press `enter`/`return` to visit the URL. -- If you see `webhook setup ok`, then your bot is ready to chat! +* Click the **Public URL** link in your Capsule's **Details** tab. +* In the new tab that opens, add `/setwebhook` to the URL and press `enter`/`return` to visit the URL. +* If you see `webhook setup ok`, then your bot is ready to chat! ## Chat with the Bot diff --git a/get-started/backend/node.js/express.js.md b/get-started/backend/node.js/express.js.md index 445e5f91e..475c4dcab 100644 --- a/get-started/backend/node.js/express.js.md +++ b/get-started/backend/node.js/express.js.md @@ -32,7 +32,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -58,7 +58,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) Once the build is complete, a "Live Website" link will appear at the top of the tab. Click the link, and you should see your deployed application. diff --git a/get-started/backend/node.js/node.js-discord-bot.md b/get-started/backend/node.js/node.js-discord-bot.md index cf928ecce..1b37f7734 100644 --- a/get-started/backend/node.js/node.js-discord-bot.md +++ b/get-started/backend/node.js/node.js-discord-bot.md @@ -51,7 +51,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -77,7 +77,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Add a `TOKEN` Environment Variable diff --git a/get-started/backend/node.js/node.js-telegram-bot.md b/get-started/backend/node.js/node.js-telegram-bot.md index a5739dad8..8f6bb04f4 100644 --- a/get-started/backend/node.js/node.js-telegram-bot.md +++ b/get-started/backend/node.js/node.js-telegram-bot.md @@ -35,7 +35,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](../../.gitbook/assets/space-name.png) Example instructions to go with numbered annotations @@ -61,7 +61,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](../../.gitbook/assets/backend-capsule-build-logs.png) ## Add Environment Variables diff --git a/get-started/backend/node.js/polling-node-telegram-bot.md b/get-started/backend/node.js/polling-node-telegram-bot.md deleted file mode 100644 index 445cc708d..000000000 --- a/get-started/backend/node.js/polling-node-telegram-bot.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -description: A guide to deploying a Node.js Telegram Bot from GitHub. ---- - -# Polling Node Telegram Bot - -_This guide uses polling, which is easier to deploy but not recommended. See_ [_this guide_](node.js-telegram-bot.md) _for how to implement the same bot using webhooks._ - -Deploy a Node.js Telegram Bot and learn how to host backend code on Code Capsules. - -## Register the Bot - -You'll need a Telegram user account before you can create a Telegram bot. Head over to Telegram and create an account if you don't already have one. - -When you've signed in to Telegram, search for "BotFather" (a bot for managing all other Telegram bots) and start a new chat with it. Follow the steps below to register a new bot with the BotFather: - -1. Type `/start` and press send. -2. Type `/newbot` and press send. -3. Choose a name for your bot. -4. Choose a username for your bot that ends in "bot". - -The BotFather will respond with a message containing an access token for your newly created bot. This access token will allow our application to access the Telegram API and tell our bot what to do when receiving different messages from users. - -To confirm that your bot was created successfully, search for the bot's username. You should be able to see it and start a conversation with it, although it won't respond as we haven't written the bot's logic yet. - -## Setup - -Code Capsules connects to GitHub repositories to deploy applications. To follow this guide, you'll need a [Code Capsules](https://codecapsules.io/) account and a [GitHub](https://github.com/) account. - -To demonstrate how to deploy a Node.js Telegram Bot with Code Capsules, we've provided an example bot, which you can find on the [Code Capsules GitHub repository](https://github.com/codecapsules-io/polling-nodejs-telegram-echobot). - -Sign in to GitHub, and fork the example bot repository by clicking "Fork" at the top-right of your screen and selecting your GitHub account as the destination. - -## Create a Space for Your Bot - -Log in to your Code Capsules account and navigate to the "Spaces" tab. Once there, click the yellow `+` icon on the top right of the screen to add a new Space. - -Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". - -![Create a Space](<../../.gitbook/assets/space-name (1).png>) - -Example instructions to go with numbered annotations - -1. Choose a Team — you can use a default "personal" Team if you're the only person working on this project, or a named Team if you're collaborating with others -2. This should remind you of the project, for example, "customer-api" or "notetaking-app" -3. Choose a country close to where most of your users will be - -## Create the Capsule - -A [Capsule](https://app.gitbook.com/s/gIlxo9gU7Lotj1cdGRh6/capsules/what-is-a-capsule) provides the server for hosting an application on Code Capsules. - -To create a new Capsule for your Space, follow the instructions below: - -1. Choose "Backend Capsule", your Team, and Space. -2. Choose your payment plan. -3. Click the GitHub button and give access to the repository you forked at the start of the tutorial. -4. Choose the GitHub repository you forked. -5. Press "Next". -6. Leave "Run Command" blank. -7. Click "Create Capsule". - -Code Capsules will automatically build your application when you've finished creating the Capsule. - -Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. - -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) - -## Add Environment Variables - -Once the build is complete, you have to add the `BOT_TOKEN` environment variable by navigating to the "Config" tab and adding it under the "Environment Variables" section. - -Assign the `BOT_TOKEN` variable the value of the access token you were given by the BotFather when you registered the bot. - -![Add a BOT\_TOKEN Environment Variable](../../.gitbook/assets/bot-token-env-variable.png) - -Confirm your changes by clicking on "Save", then restart your Capsule by toggling the radio button in the top right off and on again. - -## Chat with the Bot - -The bot will be able to respond to messages after restarting the Capsule. When this is done, search for your bot on Telegram using the username you assigned it and start a chat with it. The bot has been programmed to respond to `/start` and echo any messages you send it. - -If you’d like to deploy another application in a different language or framework, take a look at our other [deployment guides](../../). diff --git a/get-started/backend/node.js/slack-bot.md b/get-started/backend/node.js/slack-bot.md index 829f22c09..af0bb5fb3 100644 --- a/get-started/backend/node.js/slack-bot.md +++ b/get-started/backend/node.js/slack-bot.md @@ -2,7 +2,7 @@ description: A guide to deploying a Slack Bot from GitHub. --- -# Slack Bot +# Node.js Slack Bot Deploy a Node.js Slack Bot and learn how to host backend code on Code Capsules. @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -46,7 +46,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Register the Bot diff --git a/get-started/backend/python/django.md b/get-started/backend/python/django.md index 7b81b290e..e6785e756 100644 --- a/get-started/backend/python/django.md +++ b/get-started/backend/python/django.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -64,7 +64,7 @@ Code Capsules will automatically build your application when you’ve finished c Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Binding the Capsules diff --git a/get-started/backend/python/flask.md b/get-started/backend/python/flask.md index 763254aa6..8831ef284 100644 --- a/get-started/backend/python/flask.md +++ b/get-started/backend/python/flask.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -46,10 +46,10 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) Once the build is complete, a URL link will appear in the URL section in the "Details" tab. Click the link, and you should see your deployed application. -![Deployed App](<../../.gitbook/assets/cc-flask-app (1).png>) +![Deployed App](/broken/files/1wNePajKQJdeWS9jxpKN) If you’d like to deploy another application in a different language or framework, take a look at our other [deployment guides](../../). diff --git a/get-started/backend/python/polling-python-telegram-bot.md b/get-started/backend/python/polling-python-telegram-bot.md deleted file mode 100644 index bf720bb79..000000000 --- a/get-started/backend/python/polling-python-telegram-bot.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -description: A guide to deploying a Python Telegram Bot from GitHub. ---- - -# Polling Python Telegram Bot - -_This guide uses polling, which is easier to deploy but not recommended. See_ [_this guide_](python-telegram-bot.md) _for how to implement the same bot using webhooks._ - -Deploy a Python Telegram Bot and learn how to host backend code on Code Capsules. - -## Register the Bot - -You'll need a Telegram user account before you can create a Telegram bot. Head over to Telegram and create an account if you don't already have one. - -When you've signed in to Telegram, search for "BotFather" (a bot for managing all other Telegram bots) and start a new chat with it. Follow the steps below to register a new bot with the BotFather: - -1. Type `/start` and press send. -2. Type `/newbot` and press send. -3. Choose a name for your bot. -4. Choose a username for your bot that ends in "bot". - -The BotFather will respond with a message containing an access token for your newly created bot. This access token will allow our application to access the Telegram API and tell our bot what to do when receiving different messages from users. - -To confirm that your bot was created successfully, search for the bot's username. You should be able to see it and start a conversation with it, although it won't respond as we haven't written the bot's logic yet. - -## Setup - -Code Capsules connects to GitHub repositories to deploy applications. To follow this guide, you'll need a [Code Capsules](https://codecapsules.io/) account and a [GitHub](https://github.com/) account. - -To demonstrate how to deploy a Python Telegram Bot with Code Capsules, we've provided an example bot, which you can find on the [Code Capsules GitHub repository](https://github.com/codecapsules-io/polling-py-telegram-echobot). - -Sign in to GitHub, and fork the example bot repository by clicking "Fork" at the top-right of your screen and selecting your GitHub account as the destination. - -## Create a Space for Your Bot - -Log in to your Code Capsules account and navigate to the "Spaces" tab. Once there, click the yellow `+` icon on the bottom left of the screen to add a new Space. - -Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". - -![Create a Space](<../../.gitbook/assets/space-name (1).png>) - -Example instructions to go with numbered annotations - -1. Choose a Team — you can use a default "personal" Team if you're the only person working on this project, or a named Team if you're collaborating with others -2. This should remind you of the project, for example, "customer-api" or "notetaking-app" -3. Choose a country close to where most of your users will be - -## Create the Capsule - -A [Capsule](https://app.gitbook.com/s/gIlxo9gU7Lotj1cdGRh6/capsules/what-is-a-capsule) provides the server for hosting an application on Code Capsules. - -To create a new Capsule for your Space, follow the instructions below: - -1. Choose "Backend Capsule", your Team, and Space. -2. Choose your payment plan. -3. Click the GitHub button and give access to the repository you forked at the start of the tutorial. -4. Choose the GitHub repository you forked. -5. Press "Next". -6. Leave "Run Command" blank. -7. Click "Create Capsule". - -Code Capsules will automatically build your application when you've finished creating the Capsule. - -Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. - -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) - -## Add Environment Variables - -Once the build is complete, you have to add the `BOT_TOKEN` environment variable by navigating to the "Config" tab and adding it under the "Environment Variables" section. - -Assign the `BOT_TOKEN` variable the value of the access token you were given by the BotFather when you registered the bot. - -![Add a BOT\_TOKEN Environment Variable](../../.gitbook/assets/bot-token-env-variable.png) - -Confirm your changes by clicking on "Save", then restart your Capsule by toggling the radio button in the top right off and on again. - -## Chat with the Bot - -The bot will be able to respond to messages after restarting the Capsule. When this is done, search for your bot on Telegram using the username you assigned it and start a chat with it. The bot has been programmed to respond to `/start` and echo any messages you send it. - -If you’d like to deploy another application in a different language or framework, take a look at our other [deployment guides](../../). diff --git a/get-started/backend/python/python-discord-bot.md b/get-started/backend/python/python-discord-bot.md index 362207c07..c2906063a 100644 --- a/get-started/backend/python/python-discord-bot.md +++ b/get-started/backend/python/python-discord-bot.md @@ -51,7 +51,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -77,7 +77,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Add a `TOKEN` Environment Variable diff --git a/get-started/backend/python/python-telegram-bot.md b/get-started/backend/python/python-telegram-bot.md index 579e1f9ca..614b11a10 100644 --- a/get-started/backend/python/python-telegram-bot.md +++ b/get-started/backend/python/python-telegram-bot.md @@ -37,7 +37,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](../../.gitbook/assets/space-name.png) Example instructions to go with numbered annotations @@ -63,7 +63,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](../../.gitbook/assets/backend-capsule-build-logs.png) ## Add Environment Variables diff --git a/get-started/backend/python/python.md b/get-started/backend/python/python.md index 27d3f7024..d77c09f0e 100644 --- a/get-started/backend/python/python.md +++ b/get-started/backend/python/python.md @@ -79,7 +79,7 @@ Code Capsules will automatically build your application when you’ve finished c Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) Once the build is complete, a URL link will appear in the URL section in the "Details" tab. Click the link, and you should see your deployed application. diff --git a/get-started/backend/python/whatsapp-bot.md b/get-started/backend/python/whatsapp-bot.md index 8585f7129..0bfaa3378 100644 --- a/get-started/backend/python/whatsapp-bot.md +++ b/get-started/backend/python/whatsapp-bot.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -46,7 +46,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Create a Twilio Sandbox diff --git a/get-started/database/mongodb/django-+-mongodb.md b/get-started/database/mongodb/django-+-mongodb.md index 9a31fbf50..ebc39530e 100644 --- a/get-started/database/mongodb/django-+-mongodb.md +++ b/get-started/database/mongodb/django-+-mongodb.md @@ -40,7 +40,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/database/mongodb/express-+-mongodb.md b/get-started/database/mongodb/express-+-mongodb.md index 388e4ee3b..6473a6ca7 100644 --- a/get-started/database/mongodb/express-+-mongodb.md +++ b/get-started/database/mongodb/express-+-mongodb.md @@ -39,7 +39,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/database/mongodb/flask-+-mongodb.md b/get-started/database/mongodb/flask-+-mongodb.md index 045cd117c..ddcc58b29 100644 --- a/get-started/database/mongodb/flask-+-mongodb.md +++ b/get-started/database/mongodb/flask-+-mongodb.md @@ -39,7 +39,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/database/mysql/django-+-mysql.md b/get-started/database/mysql/django-+-mysql.md index 6758e724a..f9fdfaabc 100644 --- a/get-started/database/mysql/django-+-mysql.md +++ b/get-started/database/mysql/django-+-mysql.md @@ -39,7 +39,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules @@ -51,6 +51,6 @@ After the two capsules have been successfully built, the next step is to connect You can now view the application after the two capsules have been connected. To see how it looks, click on the URL in the "Details" tab. -![Deployed App](<../../.gitbook/assets/cc-django-app (1).png>) +![Deployed App](/broken/files/VuztSzLULIy7zLzVbAmu) If you’d like to deploy another application in a different language or framework, take a look at our other [deployment guides](../../). diff --git a/get-started/database/mysql/flask-+-mysql.md b/get-started/database/mysql/flask-+-mysql.md index 165dd6011..4d657d2c5 100644 --- a/get-started/database/mysql/flask-+-mysql.md +++ b/get-started/database/mysql/flask-+-mysql.md @@ -40,7 +40,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/database/mysql/java-+-mysql.md b/get-started/database/mysql/java-+-mysql.md index c315dea61..7da25e809 100644 --- a/get-started/database/mysql/java-+-mysql.md +++ b/get-started/database/mysql/java-+-mysql.md @@ -39,7 +39,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/frontend/angular.md b/get-started/frontend/angular.md index ff548d895..5312028fe 100644 --- a/get-started/frontend/angular.md +++ b/get-started/frontend/angular.md @@ -35,7 +35,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -

Create a New Space

+

Create a New Space

Example instructions to go with numbered annotations diff --git a/get-started/frontend/next.js.md b/get-started/frontend/next.js.md index 4de022aaf..1b05fa646 100644 --- a/get-started/frontend/next.js.md +++ b/get-started/frontend/next.js.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a New Space](<../.gitbook/assets/space-name (1).png>) +![Create a New Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -46,7 +46,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) Once the build is complete, a URL link will appear in the URL section in the "Details" tab. Click the link, and you should see your deployed application. diff --git a/get-started/frontend/react.md b/get-started/frontend/react.md index a95b2ebc1..3aa726ab5 100644 --- a/get-started/frontend/react.md +++ b/get-started/frontend/react.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a New Space](<../.gitbook/assets/space-name (1).png>) +![Create a New Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/frontend/static-sites/bootstrap.md b/get-started/frontend/static-sites/bootstrap.md index 5193ceb17..02d3390ba 100644 --- a/get-started/frontend/static-sites/bootstrap.md +++ b/get-started/frontend/static-sites/bootstrap.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/frontend/static-sites/html5up-template.md b/get-started/frontend/static-sites/html5up-template.md index 9f0f3e5af..5f4fddb3b 100644 --- a/get-started/frontend/static-sites/html5up-template.md +++ b/get-started/frontend/static-sites/html5up-template.md @@ -36,7 +36,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/frontend/static-sites/static-html.md b/get-started/frontend/static-sites/static-html.md index 920a271b1..6a8aa7b9b 100644 --- a/get-started/frontend/static-sites/static-html.md +++ b/get-started/frontend/static-sites/static-html.md @@ -16,7 +16,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/frontend/svelte.md b/get-started/frontend/svelte.md index 0d0630e2b..31d6d105f 100644 --- a/get-started/frontend/svelte.md +++ b/get-started/frontend/svelte.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/frontend/vue.md b/get-started/frontend/vue.md index 03d840afe..8120ba80e 100644 --- a/get-started/frontend/vue.md +++ b/get-started/frontend/vue.md @@ -22,7 +22,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a New Space](<../.gitbook/assets/space-name (1).png>) +![Create a New Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations diff --git a/get-started/full-stack/flask-+-htmx.md b/get-started/full-stack/flask-+-htmx.md index 2bf558628..1d1552c0c 100644 --- a/get-started/full-stack/flask-+-htmx.md +++ b/get-started/full-stack/flask-+-htmx.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -64,7 +64,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/full-stack/mean-stack.md b/get-started/full-stack/mean-stack.md index 5e69f0c7b..0dd2b4c7a 100644 --- a/get-started/full-stack/mean-stack.md +++ b/get-started/full-stack/mean-stack.md @@ -30,7 +30,7 @@ Log in to your Code Capsules account and navigate to the Spaces tab. Once there, Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -64,7 +64,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/full-stack/mern-stack.md b/get-started/full-stack/mern-stack.md index 45b1896b9..be37d7af7 100644 --- a/get-started/full-stack/mern-stack.md +++ b/get-started/full-stack/mern-stack.md @@ -32,7 +32,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -66,7 +66,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/full-stack/next.js/next.js-+-express.js.md b/get-started/full-stack/next.js/next.js-+-express.js.md index c025dedb8..6e877621b 100644 --- a/get-started/full-stack/next.js/next.js-+-express.js.md +++ b/get-started/full-stack/next.js/next.js-+-express.js.md @@ -32,7 +32,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -58,7 +58,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Logs](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Logs](/broken/files/m10b9QRjcH8SGo8JjPp9) ## View Application diff --git a/get-started/full-stack/next.js/next.js-+-mongodb.md b/get-started/full-stack/next.js/next.js-+-mongodb.md index 387a0265f..bd5a65543 100644 --- a/get-started/full-stack/next.js/next.js-+-mongodb.md +++ b/get-started/full-stack/next.js/next.js-+-mongodb.md @@ -20,7 +20,7 @@ Log in to your Code Capsules account and navigate to the Spaces tab. Once there, Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -54,7 +54,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Log](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Log](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Connect the Capsules diff --git a/get-started/full-stack/next.js/static-file-share-with-flask-and-caddy.md b/get-started/full-stack/next.js/static-file-share-with-flask-and-caddy.md index c8d97fac5..9b54cb220 100644 --- a/get-started/full-stack/next.js/static-file-share-with-flask-and-caddy.md +++ b/get-started/full-stack/next.js/static-file-share-with-flask-and-caddy.md @@ -25,7 +25,7 @@ Log in to your Code Capsules account and navigate to the "Spaces" tab. Once ther Follow the prompts, choosing your region and giving your Space a name, then click "Create Space". -![Create a Space](<../../.gitbook/assets/space-name (1).png>) +![Create a Space](/broken/files/c1RKSsytKv66iCGB7Ln3) Example instructions to go with numbered annotations @@ -73,7 +73,7 @@ Code Capsules will automatically build your application when you've finished cre Once your application is live, you can view the build log by selecting the "Deploy" tab and clicking the "View build log" link in the "Builds" section. -![Build Log](../../../products/.gitbook/assets/backend-capsule/backend-capsule-build-logs.png) +![Build Log](/broken/files/m10b9QRjcH8SGo8JjPp9) ## Binding the Capsules diff --git a/get-started/peristent-storage.md b/get-started/peristent-storage.md index ef019280b..1f57d4e6e 100644 --- a/get-started/peristent-storage.md +++ b/get-started/peristent-storage.md @@ -1,4 +1,4 @@ -# Persistent Storage +# Peristent Storage You need persistent storage to develop your application that solves a real-world problem, but you don't want a full-blown database. In this tutorial, we'll show you how to create a persistent storage Data Capsule that you can use with your backend applications running on Code Capsules. @@ -20,7 +20,7 @@ You need to bind the Data Capsule to a Backend Capsule hosted on Code Capsules b Navigate to the Backend Capsule and click "Config" to open the Capsule's config tab. Scroll down to the "Bind Data Capsule" section, where your recently created Data Capsule will show. -![Bind Data Capsule](../.gitbook/assets/bind-persistent.png) +![Bind Data Capsule](/broken/files/CKg4JfuYeIXa6tW7o1NG) Click "Bind" to bind your Data and Backend Capsules. During the bind process, Code Capsules creates a `PERSISTENT_STORAGE_DIR` environment variable to let your Backend Capsule know where your Data Capsule resides in order to access its features. Once the two Capsules have been bound, you can scroll to the top of the Configure tab to find the value of this variable. diff --git a/products/.gitbook/assets/AgentAccessLogs_Edited.png b/products/.gitbook/assets/AgentAccessLogs_Edited.png new file mode 100644 index 000000000..422f6fbdf Binary files /dev/null and b/products/.gitbook/assets/AgentAccessLogs_Edited.png differ diff --git a/products/.gitbook/assets/AgentBuildLogs_Edited.png b/products/.gitbook/assets/AgentBuildLogs_Edited.png new file mode 100644 index 000000000..65a1903d9 Binary files /dev/null and b/products/.gitbook/assets/AgentBuildLogs_Edited.png differ diff --git a/products/.gitbook/assets/AgentChatPage_Edited.png b/products/.gitbook/assets/AgentChatPage_Edited.png new file mode 100644 index 000000000..657dc679e Binary files /dev/null and b/products/.gitbook/assets/AgentChatPage_Edited.png differ diff --git a/products/.gitbook/assets/AgentConfigPage_Edited.png b/products/.gitbook/assets/AgentConfigPage_Edited.png new file mode 100644 index 000000000..220d52a18 Binary files /dev/null and b/products/.gitbook/assets/AgentConfigPage_Edited.png differ diff --git a/products/.gitbook/assets/AgentEditScalePage_Edited.png b/products/.gitbook/assets/AgentEditScalePage_Edited.png new file mode 100644 index 000000000..72b280a9e Binary files /dev/null and b/products/.gitbook/assets/AgentEditScalePage_Edited.png differ diff --git a/products/.gitbook/assets/AgentLogsPage_Edited.png b/products/.gitbook/assets/AgentLogsPage_Edited.png new file mode 100644 index 000000000..6714357be Binary files /dev/null and b/products/.gitbook/assets/AgentLogsPage_Edited.png differ diff --git a/products/.gitbook/assets/AgentMetricsPage_Edited.png b/products/.gitbook/assets/AgentMetricsPage_Edited.png new file mode 100644 index 000000000..51ccd1f30 Binary files /dev/null and b/products/.gitbook/assets/AgentMetricsPage_Edited.png differ diff --git a/products/.gitbook/assets/AgentScalePage_Edited.png b/products/.gitbook/assets/AgentScalePage_Edited.png new file mode 100644 index 000000000..4541f2fd2 Binary files /dev/null and b/products/.gitbook/assets/AgentScalePage_Edited.png differ diff --git a/products/.gitbook/assets/CreateAgentCapsule_Edited.png b/products/.gitbook/assets/CreateAgentCapsule_Edited.png new file mode 100644 index 000000000..db44c8248 Binary files /dev/null and b/products/.gitbook/assets/CreateAgentCapsule_Edited.png differ diff --git a/products/.gitbook/assets/CreateAgentConfig_Edited.png b/products/.gitbook/assets/CreateAgentConfig_Edited.png new file mode 100644 index 000000000..26ceedb3e Binary files /dev/null and b/products/.gitbook/assets/CreateAgentConfig_Edited.png differ diff --git a/products/.gitbook/assets/CreateAgentScale_Edited.png b/products/.gitbook/assets/CreateAgentScale_Edited.png new file mode 100644 index 000000000..90f750e4a Binary files /dev/null and b/products/.gitbook/assets/CreateAgentScale_Edited.png differ diff --git a/products/.gitbook/includes/untitled.md b/products/.gitbook/includes/untitled.md new file mode 100644 index 000000000..2e66bf17b --- /dev/null +++ b/products/.gitbook/includes/untitled.md @@ -0,0 +1,4 @@ +--- +title: Untitled +--- + diff --git a/products/README.md b/products/README.md index aa8cd855a..6a2578ffb 100644 --- a/products/README.md +++ b/products/README.md @@ -2,7 +2,7 @@ description: >- Everything you need to know about configuring and deploying apps with Code Capsules. -cover: ../platform/.gitbook/assets/CC Docs Banner.png +cover: /broken/files/fydPYehZMhtaGvWKKYMs coverY: 0 --- diff --git a/products/SUMMARY.md b/products/SUMMARY.md index 7fec3cf42..119f90743 100644 --- a/products/SUMMARY.md +++ b/products/SUMMARY.md @@ -58,6 +58,18 @@ * [Logs](wordpress-capsule/logs.md) * [Alerting](wordpress-capsule/alerting.md) +## Agent Capsule + +* [Deploy](agent-capsule/deploy.md) +* [Configure](agent-capsule/configure.md) +* [Scale](agent-capsule/scale.md) +* [Monitor](agent-capsule/monitor.md) +* [Logs](agent-capsule/logs.md) +* [Templates](agent-capsule/templates.md) +* [Chat](agent-capsule/chat/README.md) + * [Agent API (Sample)](agent-capsule/chat/agent-api-sample.md) +* [Alerting](agent-capsule/alerting.md) + ## Enterprise Clusters * [Overview](enterprise-clusters/overview.md) diff --git a/products/agent-capsule/alerting.md b/products/agent-capsule/alerting.md new file mode 100644 index 000000000..0eeb74897 --- /dev/null +++ b/products/agent-capsule/alerting.md @@ -0,0 +1,30 @@ +--- +description: >- + Manage your notification preferences to stay informed about your Capsule's + health and performance. +--- + +# Alerting + +

Notification Settings

+ +### In-App Notifications + +Configure which alerts you want to receive within the Code Capsules platform. Toggle individual notification types on or off based on your monitoring needs. + +### Email Notifications + +Set up email alerts to receive notifications outside the platform. You can enable or disable email notifications for the same events as in-app notifications. + +### Notification Types + +Available notification types include: + +* **Capsule Not Running** - Alert when your capsule crashes or stops +* **Killed by OOM** - Notify when your capsule runs out of memory +* **High CPU Usage** - Alert when CPU usage exceeds 80% +* **High Memory Usage** - Notify when memory usage exceeds 80% +* **High Data Usage** - Alert when data usage exceeds 80% +* **CPU Throttle** - Notify when CPU is being throttled + +Use "Enable All" or "Disable All" buttons to quickly configure all notifications, then click "Save Preferences" to apply your changes. diff --git a/products/agent-capsule/chat/README.md b/products/agent-capsule/chat/README.md new file mode 100644 index 000000000..f31683f67 --- /dev/null +++ b/products/agent-capsule/chat/README.md @@ -0,0 +1,43 @@ +--- +layout: + width: default + title: + visible: true + description: + visible: true + tableOfContents: + visible: true + outline: + visible: true + pagination: + visible: true + metadata: + visible: true +--- + +# Chat + +Code Capsules provides an integrated chat window for Agent Capsules. In order for this to be fully functional, there are a few endpoints which the API needs to expose. + +## API Requirements + +The deployed codebase needs to expose a few endpoints, each with their own pre-described payload. Data is always returned in the `ApiResponse` format. Errors are returned in the `Error` format. + +{% openapi-schemas spec="code-capsules-api" schemas="ApiResponse,Error" grouped="true" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-schemas %} + +### Endpoints + +Below describes the endpoints required to use the integrated chat window: + +
EndpointPurposeMandatorySample Docs

POST

/api/chat/message

Send a message to the agent with an instant response.Yes*#post-api-chat-message

POST

/api/chat/message/stream

Send a message to the agent, streaming back the response.Yes*#post-api-chat-message-stream

GET

/api/chat/history

Get the chat history for the user.Yes#get-api-chat-history

POST

/api/context/text

Submit context to the agent using text.No#post-api-context-text

POST

/api/context/url

Submit context to the agent using a URL.No#post-api-context-url
+ +\*Only one of these are required + +### Request Headers from Code Capsules + +All of the above endpoints will also be passed the following headers. This allows for some simple security when testing the agent using the integrated chat window: + +
HeaderDescriptionMandatory
X-CC-API-KEYThis value will be the value as generated in the INTERNAL_API_KEY environment variable on creation of the Agent capsule.No
X-CC-EMAILThis value will be the email of the user who has logged into Code Capsules, allowing for testing with unique chat sessions and chat history.No
+ diff --git a/products/agent-capsule/chat/agent-api-sample.md b/products/agent-capsule/chat/agent-api-sample.md new file mode 100644 index 000000000..9bac927bb --- /dev/null +++ b/products/agent-capsule/chat/agent-api-sample.md @@ -0,0 +1,29 @@ +# Agent API (Sample) + +The following specifications describe a standard API used by the Code Capsules chat window to communicate with the agent. + +{% openapi-operation spec="code-capsules-api" path="/api/chat/message" method="post" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-operation %} + +{% openapi-operation spec="code-capsules-api" path="/api/chat/message/stream" method="post" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-operation %} + +{% openapi-operation spec="code-capsules-api" path="/api/chat/history" method="get" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-operation %} + +{% openapi-operation spec="code-capsules-api" path="/api/context/text" method="post" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-operation %} + +{% openapi-operation spec="code-capsules-api" path="/api/context/url" method="post" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-operation %} + +## Schemas + +{% openapi-schemas spec="code-capsules-api" schemas="ApiResponse,Error,ChatPrompt,ChatPromptContentText,ChatPromptContentImage,ChatPromptContentFile,SendMessageResponse,AgentMessage,AgentMessageContentText,AgentMessageContentImage,AgentMessageContentFile,GetChatHistoryResponse,ContextText,AddContextTextResponse,ContextUrl,AddContextFromUrlResponse" grouped="true" %} +[OpenAPI code-capsules-api](https://cc-agent-fork-setx.ovh-test.ccdns.co/swagger.json) +{% endopenapi-schemas %} diff --git a/products/agent-capsule/configure.md b/products/agent-capsule/configure.md new file mode 100644 index 000000000..55d0030c6 --- /dev/null +++ b/products/agent-capsule/configure.md @@ -0,0 +1,70 @@ +# Configure + +Configure an Agent Capsule in the **Config** tab. + +

Agent Config Tab

+ +## Set Capsule Parameters + +Click **Edit** in the **Capsule Parameters** section to set the Capsule's project path, network port, and run command. + +### Project Path + +The **Project Path** specifies the path to your code. The default is `/`, which works for most projects. + +### Network Port + +The **Network Port** is the port your app runs on. Your app must be configured to listen on this port. The default is `3000`. + +### Run Command + +Use the **Run Command** field to specify how to start your app. Leave this field empty to use the default command for the Capsule type, or enter a custom command: + +* Python: `python app.py` +* Node.js: `npm start` + +{% hint style="info" %} +If using a [Code Capsules Agent Template](templates.md), the production ready command is `npm run start:prod` by default. +{% endhint %} + +## Set Agent Config + +Click E**dit** in the **Agent Config** section to set the Capsule's provider, model, and API key. + +### Provider + +The **Provider** specifies the public AI provider to use for the capsule. This will expose a `PROVIDER_NAME` environment variable in the runtime of the capsule. Among a few pre-defined options, there is also the ability to set a **Custom** provider name, which your altered codebase will need to cater for. + +### Model + +The **Model** specifies the AI model to be used during the agent runtime. This will expose a `PROVIDER_MODEL` environment variable in the runtime of the capsule. Among a few pre-defined options per provider, there is also the ability to set a **Custom** model name, which your altered codebase will need to cater for. + +### API Key + +The **API Key** specified the key as provided by the AI **Provider**. This is issued outside of Code Capsules but are necessary for the agent to work, and will expose a `PROVIDER_API_KEY` environment variable in the runtime of the capsule. + +## Set Environment Variables + +Each Agent Capsule is automatically assigned an `APP_URL` environment variable that stores its public URL. + +To view environment variable values, click **show** in the top-right corner of the table. + +To add or edit custom variables: + +1. Click **Key/Val Editor** or **Text Editor** in the top-right corner. +2. Enter or update the variable’s **Name** and **Value**. +3. Click **Save** to apply your changes. + +## Connect Data Capsules + +### Connect a Database Capsule + +In the **Data capsules** section, click the **View** button next to a Database Capsule to see its connection details. + +Click **+** next to the `Connection string` variable to create a `DATABASE_URL` environment variable in your Agent Capsule. Your application will use this variable to connect to and use the services provided by the Database Capsule. + +### Connect a Persistent Storage Capsule + +Click **Bind** next to the **Persistent Storage Capsule** to attach it to your Agent Capsule. + +During the bind process, Code Capsules creates a `PERSISTENT_STORAGE_DIR` environment variable that tells your Agent Capsule where to access the Persistent Storage Capsule. diff --git a/products/agent-capsule/deploy.md b/products/agent-capsule/deploy.md new file mode 100644 index 000000000..130dd1ef4 --- /dev/null +++ b/products/agent-capsule/deploy.md @@ -0,0 +1,41 @@ +# Deploy + +Deploy a configurable Agent Capsule on Code Capsules. + +## Set up + +To follow this guide, you'll need a [Code Capsules](https://codecapsules.io/) account. + +## Create an Account with Code Capsules + +Before creating your Agent Capsule, you'll need a Team and a Space. You can follow these guides to learn how to create [Teams](../../platform/teams/what-is-a-team.md) and [Spaces](../../platform/spaces/what-is-a-space.md). + +If you already have a Team and Space set up, log in to your Code Capsules account. On the dashboard, click the yellow `+` on the bottom left of the screen then click "New Capsule". + +![Create a Capsule](/broken/files/4bJZiaOBexUoKSnAhzd2) + +## Create the Capsule + +A [Capsule](../../platform/capsules/what-is-a-capsule.md) provides the server for hosting an application on Code Capsules. + +To create an Agent Capsule first choose "AI Agent" as the Capsule type, as well as your Team, and Space. + +
Create Agent Capsule

Create Agent Capsule

+ +Next choose your payment plan, or create a custom plan. + +

Choose Plan

+ +Code Capsules provides templates (see [templates.md](templates.md "mention")) as a baseline for creating your AI Agent. When creating the Agent Capsule, you can select if your codebase comes from a template repo. In this case, you will be asked to enter a provider, model, and API key for a public AI provider, such as Google Gemini or Anthropic. When registering with one of these providers, they should provide an API key to access their public API's. Once the capsule is created, the templates will make use of this information via environment variables, which are automatically set up for you upon capsule creation. You can learn more about how these templates make use of these environment variables [here](templates.md). + +

Template Setup

+ +## Monitor Deployment + +Code Capsules will automatically build and deploy your Agent Capsule. You can view the build log by selecting the "Build logs" tab to monitor the deployment progress. + +

Build Logs

+ +Once the build is complete, use the Chat tab to interface with your newly running agent. + +

Chat Tab

diff --git a/products/agent-capsule/logs.md b/products/agent-capsule/logs.md new file mode 100644 index 000000000..42a7a34ef --- /dev/null +++ b/products/agent-capsule/logs.md @@ -0,0 +1,15 @@ +# Logs + +Use Capsule logs to monitor activity and debug issues. + +## View Capsule Logs + +View a Capsule's system logs in the **Logs** tab. + +

Logs Tab

+ +## View Access Logs + +For Capsules that serve web traffic, open the **Access Logs** tab to view HTTP request logs. + +

Access Logs Tab

diff --git a/products/agent-capsule/monitor.md b/products/agent-capsule/monitor.md new file mode 100644 index 000000000..a08e56e19 --- /dev/null +++ b/products/agent-capsule/monitor.md @@ -0,0 +1,5 @@ +# Monitor + +Each Capsule tracks its usage data. View this information by opening the **Metrics** tab on the Capsule's page. + +

Monitor Tab

diff --git a/products/agent-capsule/scale.md b/products/agent-capsule/scale.md new file mode 100644 index 000000000..8a23c804c --- /dev/null +++ b/products/agent-capsule/scale.md @@ -0,0 +1,11 @@ +# Scale + +You can allocate more resources to a Capsule as your application's traffic and computational needs change. + +View the scaling options available for your Capsule in the **Scale** tab of the Capsule dashboard. To adjust the allocated resources, click **Edit** in the **Capsule Capacity** section. + +

Scale Tab

+ +Use the sliders to configure the Capsule's resources, then click **Save**. + +

Edit Scale

diff --git a/products/agent-capsule/templates.md b/products/agent-capsule/templates.md new file mode 100644 index 000000000..209c78eb3 --- /dev/null +++ b/products/agent-capsule/templates.md @@ -0,0 +1,306 @@ +# Templates + +Code Capsules provides a variety of agent template repos for you to use as the base for your Agent Capsule. + +Each template comes with a tutorial on how to successfully deploy the template, and can be accessed from our GitHub pages. See the list of available templates below: + +
TemplateFunctionsGitHub repo
Base Agent
  • Basic agent communication
  • RAG (context) functionality
https://github.com/codecapsules-io/ai-agent-template
Telegram Bot Agent
  • Base Agent functionality (forked off Base Agent)
  • Runs a Telegram bot which calls the agent for communication
https://github.com/codecapsules-io/ai-telegram-bot-agent-template
Google Calendar Agent
  • Base Agent functionality (forked off Base Agent)
  • Add events to Google Calendar
  • Get a list of events from Google Calendar
https://github.com/codecapsules-io/ai-calendar-agent-template
+ +## Architecture + +Each template consists of the same base architecture, containing the following: + +* A list of endpoints: required for interaction with the Code Capsules Agent Chat tab +* A memory store: allows for the agent to retain overall memory. Useful when the agent needs to store some memory "globally" (i.e. will be applied across all prompts). By default, a connection attempt will be made to a Redis instance, but will fall back to an in-memory store if unavailable +* A vector store: allows for the agent to gain context through RAG. Using the prescribed endpoints, one can add context using text or a URL. By default, a connection attempt will be made to a Redis instance, but will fall back to an in-memory vector store if unavailable + +## Creating a New Agent + +Follow the following procedure to begin creating your new agent. In this example, we will use Google as the provider, but there are other options available. + +1. If you already have a free or paid tier Google AI Studio account and API key, you can move to step 3, else continue to step 2. +2. Follow the following guidelines to create a new Google Gemini API key: [https://ai.google.dev/gemini-api/docs/api-key](https://ai.google.dev/gemini-api/docs/api-key). Make sure to copy your key somewhere safe as it will be needed later. +3. Navigate to one of the template repositories on GitHub as described above. If you are new to AI Agent development, it is recommended to start with a simple Base Agent. +4. Using the template repo, create your own new repository by following the steps here: [https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template). +5. Follow the setup steps for the template in the relevant README.md file which can be found in the same GitHub repository. +6. [Create a new Agent Capsule](deploy.md), linking your newly created repo, and adding your provider, model, and API key when requested. +7. Once the capsule is built, navigate to the Chat page - ask your newly deployed Agent Capsule anything you'd like! Remember: if you are using a template, the agent will most likely be confined to a specific purpose, so be sure to read the README.md file for more information on its capabilities. +8. You can now modify your codebase however you'd like to include new tools, context, and more. + +{% hint style="warning" %} +Agent Capsule templates have been built with the capabilities of using either a Redis or in-memory vector store. When using the in-memory option (i.e. no Redis Capsule is linked), it is recommended to scale the Agent Capsule to the following in order to ensure optimal performance: + +* CPU 25% +* Memory 1GB +* Replicas 1 + +To do this, visit the Agent Capsule [Scale](scale.md) page. +{% endhint %} + +## Setting up a Vector Store (RAG) + +Each template has been written to use memory as a vector store for RAG. However, the templates also cater for connections to a Redis instance as its vector store. In order to set this up, follow the following steps: + +1. Create a [Redis Capsule](https://docs.codecapsules.io/database/redis). +2. Copy the **Connection String** in the **Details** tab of your **Redis Capsule**. +3. Navigate to the **Config** page of your **Agent Capsule**. +4. On the **Environment Variables** section (on the right-hand side), click the **Text Editor**. +5. Add the following at the bottom of the Environment Variables list: + +```dotenv +REDIS_URL=your_copied_connection_string +``` + +6. Wait for the Agent Capsule to restart - it should now use the Redis Capsule as its vector store. + +### Testing RAG + +In order to test RAG functionality, do the following: + +1. Make a call to the following endpoint: + +{% tabs %} +{% tab title="cURL" %} +```shellscript +curl -L \ + --request POST \ + --url '{agent_capsule_public_url}/api/context/text' \ + --header 'Content-Type: application/json' \ + --data '{ + "text": "George is the king of the jungle. He likes hats and eats snails." + }' +``` +{% endtab %} + +{% tab title="Javascript" %} +```javascript +const response = await fetch('{agent_capsule_public_url}/api/context/text', { + method: 'POST', + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "text": "George is the king of the jungle. He likes hats and eats snails." + }) +}); + +const data = await response.json(); +``` +{% endtab %} +{% endtabs %} + +2. Navigate to the Agent Capsule **Chat** tab. +3. Ask the agent the following question: + +``` +Who is the king of the jungle? +``` + +The agent should respond with something along the lines of: + +``` +George is the king of the jungle. He likes hats and eats snails. +``` + +## Accessing documentation + +All agent templates come with pre-written OpenAPI documentation. In order to access this documentation, an environment variable needs to be added to the Agent Capsule. Follow the following steps to do so: + +1. Open Code Capsules. +2. Navigate to the Config page of your Agent Capsule. +3. On the right-hand side, in the Environment Variables section, click 'Text Editor'. +4. Paste the following into the bottom of the editor: + +```dotenv +SHOW_DOCUMENTATION=true +``` + +5. Click 'Save'. +6. Wait for the Agent Capsule to restart. +7. Navigate to the 'Details' page of your Agent Capsule. +8. Copy the 'Public URL' link. +9. In a new browser tab, paste the URL and append `/api-docs` to the end of the URL. +10. Once the page is loaded, you should see some fully functional OpenAPI documentation for your agent, unique to your selected agent template. + +These documents are served directly from the `src/docs/swagger.json` file in the agent repo. + +## Customisation + +If you've followed the above steps to create an Agent Capsule, you're probably now looking into how you can add your own tools, context, and other customisation. Follow the topics below to investigate how to do this. + +### Changing the Provider and Model + +Changing the public AI provider and model through the Code Capsules site is easy. You can do this by navigating to the Config page for the Agent Capsule. Here, you can edit the `Agent Config` to change these details to cater your needs. After the changes are applied, the Agent Capsule will restart and use your newly provided configuration. See more [here](configure.md). + +### Changing the System Prompt + +Each agent template comes with a pre-written system prompt found in the `src/modules/agent/config/system-prompt.ts` file. This will provide your agent with a base prompt from which it will build it's context. + +It is important to note that changing this prompt will require you to push your changes to the relevant GitHub repo and branch, and ensuring that a new build is started in Code Capsules. Once the build is complete, your changes will be ready for use. + +### Adding New Tools + +Adding a new tool to your agent has been made easy with the simple layout structure built into the agent templates. Follow these simple steps to add a new tool, with a side-by-side example of creating a new `getWeather` tool. + +1. Navigate to the /src/modules/agent/tools/implementations folder. +2. Create a new file to describe your new tool. + +{% tabs %} +{% tab title="Step" %} +New file:\ +`src/modules/agent/tools/implementations/my-new-tool.tool.ts` +{% endtab %} + +{% tab title="Example (getWeather)" %} +New file:\ +`src/modules/agent/tools/implementations/get-weather.tool.ts` +{% endtab %} +{% endtabs %} + +3. In your new file, add code with the following structure, replacing where necessary: + +{% tabs %} +{% tab title="Step" %} +{% code title="src/modules/agent/tools/implementations/my-new-tool.tool.ts" %} +```typescript +import { z } from "zod"; +import { tool } from "langchain"; + +import { BaseTool } from "../base.tool"; + +export class NewTool implements BaseTool { + public tool = tool( + async (input) => { + return `New tool with input ${input.anInputString}`; + }, + { + name: "newTool", + description: "New tool with an input string", + schema: z.object({ + anInputString: z.string(), + }), + } + ); +} + +``` +{% endcode %} +{% endtab %} + +{% tab title="Example (getWeather)" %} +{% code title="src/modules/agent/tools/implementations/get-weather.tool.ts" %} +```typescript +import { z } from "zod"; +import { tool } from "langchain"; + +import { BaseTool } from "../base.tool"; + +export class GetWeatherTool implements BaseTool { + public tool = tool( + async (input) => { + return `The weather in ${input.location} is sunny and 20 degrees!`; + }, + { + name: "getWeather", + description: "Get the weather in a location", + schema: z.object({ + location: z.string().describe("The location to get the weather for"), + }), + } + ); +} + +``` +{% endcode %} +{% endtab %} +{% endtabs %} + +4. In the `src/modules/agent/tools/implementations/index.ts` file, export your new tool. + +{% tabs %} +{% tab title="Step" %} +{% code title="src/modules/agent/tools/implementations/index.ts" %} +```typescript +export * from "./new-tool"; +``` +{% endcode %} +{% endtab %} + +{% tab title="Example (getWeather)" %} +{% code title="src/modules/agent/tools/implementations/index.ts" %} +```typescript +export * from "./get-weather.tool"; +``` +{% endcode %} +{% endtab %} +{% endtabs %} + +5. In the `src/modules/agent/tools/tools-manager.ts` file, add your new tool to the list in the constructor. + +{% tabs %} +{% tab title="Step" %} +{% code title="src/modules/agent/tools/tools-manager.ts" %} +```typescript +this.tools.push(new NewTool()); +``` +{% endcode %} +{% endtab %} + +{% tab title="Example (getWeather)" %} +{% code title="src/modules/agent/tools/tools-manager.ts" %} +```typescript +this.tools.push(new GetWeatherTool()); +``` +{% endcode %} +{% endtab %} +{% endtabs %} + +6. (Optional) Add new System Prompt context in the `src/modules/agent/config/system-prompt.ts` file. + +{% tabs %} +{% tab title="Step" %} +{% code title="src/modules/agent/config/system-prompt.ts" overflow="wrap" %} +``` +You are a helpful assistant with access to the following tool: +newTool - a new tool which retrieves an inut string and returns the same string. +This is a very basic tool which is just for testing Agent functionality, so ensure to just fire off this tool as necessary without being concerned about input or output. +An example of a user wanting to fire this would be "Please use my newTool with the input 'Hello, friend!'" +``` +{% endcode %} +{% endtab %} + +{% tab title="Example (getWeather)" %} +{% code title="src/modules/agent/config/system-prompt.ts" overflow="wrap" %} +``` +You are a helpful assistant with access to the following tool: +getWeather - a tool used to get the weather of a specific location. +This is a very basic tool which is just for testing Agent functionality, so ensure to just fire off this tool as necessary without being concerned about input or output. It only returns that the weather is sunny in the provided location, and this is what is expected. +An example of a user wanting to fire this would be "What is the weather in Tokyo today?", which should return "The weather in Tokyo is sunny and 20 degrees". This can then be formatted into a nice, unique sentence for the user. +``` +{% endcode %} +{% endtab %} +{% endtabs %} + +7. Push your code. + +```shellscript +git add . +git commit -m "Added new tool" +git push origin main +``` + +8. Code Capsules, if configured to do so, will automatically rebuild your Agent Capsule. Once complete, navigate to your Chat page and ask the agent a question. + +{% tabs %} +{% tab title="Step" %} +``` +Please use my newTool with the input 'Hello, friend!' +``` +{% endtab %} + +{% tab title="Example (getWeather)" %} +``` +What is the weather in Tokyo today? +``` +{% endtab %} +{% endtabs %} diff --git a/products/backend-capsule/add-procfile.md b/products/backend-capsule/add-procfile.md index 65faa4b76..9f82849b8 100644 --- a/products/backend-capsule/add-procfile.md +++ b/products/backend-capsule/add-procfile.md @@ -4,7 +4,7 @@ A Procfile tells the Backend Capsule which processes to run and how to start the Instead of using a Procfile, you can specify build and run commands directly in the Code Capsules UI. For example, the screenshot below shows how to enter a run command for a Node.js application. -![Run command for Node application](../../.gitbook/assets/run-command.png) +![Run command for Node application](/broken/files/4gGbhQn58nTmplEiCs08) ## Procfile Naming and Location diff --git a/products/database-capsule/migrations.md b/products/database-capsule/migrations.md index d0178437d..9dc2a9ead 100644 --- a/products/database-capsule/migrations.md +++ b/products/database-capsule/migrations.md @@ -38,7 +38,7 @@ Here we also add`"sql-file": true` to ensure that database migrations run using Find the database URL for a MySQL Data Capsule in the **Config** tab of a Backend Capsule: -![DATABASE URL](../../.gitbook/assets/configure-tab.png) +![DATABASE URL](/broken/files/biFc2iNjdhn8kmkDA4fT) You can also access the database URL using an environment variable as follows: @@ -52,7 +52,7 @@ Run the following command to create a folder to store migrations: The folder should contain three files: -![SQL files](../../docs/assets/reference/database-migration-images/sql-files.png) +![SQL files](/broken/files/ID8PTuBwAqzVNCjhB2aN) MySQL queries are stored in the two generated SQL files: One named with an `up` suffix and the other with a `down` suffix. @@ -99,7 +99,7 @@ To run these migrations in a production environment, update the Capsule's **Run Edit the **Run Command** in the **Config** tab of the Backend Capsule. -![Run Command](../../.gitbook/assets/configure-tab-run-command.png) +![Run Command](/broken/files/FevqCUejsIG1z6eCVcYs) ## Step 7: Push the Changes diff --git a/products/frontend-capsule/custom-domains.md b/products/frontend-capsule/custom-domains.md index 8a9b64503..d227b7ba7 100644 --- a/products/frontend-capsule/custom-domains.md +++ b/products/frontend-capsule/custom-domains.md @@ -16,7 +16,7 @@ Each Capsule can route to **only one** root domain. You won't be able to add mul To add a new custom domain, click the yellow **+** button in the top-right corner of the dashboard. -![Add a New Domain](../../docs/assets/reference/custom-domain/add-domain.png) +![Add a New Domain](/broken/files/NSVVF1LcZUXhQYm5Cz3v) Copy and save the **Static IP address**. @@ -64,7 +64,7 @@ Before adding a subdomain, make sure your custom domain has an [A record](custom To add a new subdomain, click the yellow **+** button in the top-right corner of the dashboard. -![Add a New Domain](../../docs/assets/reference/custom-domain/add-domain.png) +![Add a New Domain](/broken/files/NSVVF1LcZUXhQYm5Cz3v) Click the **Add Custom Domain** link and enter the subdomain to create in the **Domain Name** field. @@ -106,7 +106,7 @@ Removing a custom domain or subdomain does not update or delete its DNS records. ## Understanding URL Structure -![URL Make Up](../../docs/assets/documentation/url-makeup.png) +![URL Make Up](/broken/files/tbzUYpGwu2kRRy23DlWC) * **Uniform Resource Locator (URL):** A web address used to locate a resource on the internet. URLs typically include a subdomain, a second-level domain, and a top-level domain. * **Subdomain:** The portion of a URL before the main domain name, most commonly `www`. Subdomains are often used to organize different services or sections of a website (for example, `hr.myapplication.com` might route users to your company’s human resources portal). diff --git a/products/storage-capsule/deploy.md b/products/storage-capsule/deploy.md index 7b104616a..f5a895073 100644 --- a/products/storage-capsule/deploy.md +++ b/products/storage-capsule/deploy.md @@ -18,7 +18,7 @@ Log in to your Code Capsules account and navigate to the Space where you want to Click the yellow **+** button on the bottom-left corner of the dashboard. Select **New Capsule** and then **Persistent Storage** from the dropdown. -![Create Data Capsule](../../.gitbook/assets/create-persistent-capsule.png) +![Create Data Capsule](/broken/files/8CouzzPxAl0fKrJ7qYA0) Select your payment method, then click **Create Capsule**. @@ -28,7 +28,7 @@ You need to bind the Storage Capsule to a Backend Capsule hosted on Code Capsule Navigate to the Backend Capsule and open the **Config** tab. Scroll down to the **Bind Data Capsule** section, where your recently created Storage Capsule is listed. -![Bind Data Capsule](../../.gitbook/assets/bind-persistent.png) +![Bind Data Capsule](/broken/files/roMn17PkntOMIVZ3b5eh) Click **Bind** to bind the Capsules. @@ -36,7 +36,7 @@ During the bind process, Code Capsules creates a `PERSISTENT_STORAGE_DIR` enviro When the two Capsules are bound, scroll to the top of the **Config** tab to view the value of the variable. -![PERSISTENT STORAGE DIR Environment Variable](../../.gitbook/assets/env-variables-persistent-storage.png) +![PERSISTENT STORAGE DIR Environment Variable](/broken/files/J967MQBHQzSee4uOf0ce) Now you can use this environment variable in your code to read and write to the Storage Capsule. Copy the value of the `PERSISTENT_STORAGE_DIR` variable and assign it to the `db_directory` variable. Alternatively, reference it directly using `os.getenv` in Python or `process.env` in Node.js. @@ -91,7 +91,7 @@ To enable file browsing: 2. Go to the **Details** tab 3. Toggle **Public Access** to **Enabled** -![Toggle Storage to Public Acess Enabled](../../get-started/.gitbook/assets/toggle-public-access.png) +![Toggle Storage to Public Acess Enabled](/broken/files/E9mwIX5ibKFi9uVc92xs) Enabling this setting doesn't make your files publicly accessible on the internet. They are served over the WebDAV protocol and require authentication credentials to access. @@ -109,7 +109,7 @@ The WebDAV server will now appear as a mounted drive in **Finder**. Here you can see the files inside a WordPress Capsule accessed locally through **Finder** in macOS. -![See Your Files Locally](../../get-started/.gitbook/assets/see-your-files.png) +![See Your Files Locally](/broken/files/mQvTCXHR1XwggrD81YaW) #### Windows diff --git a/products/storage-capsule/monitor.md b/products/storage-capsule/monitor.md index 92871bbfd..6a4742d4e 100644 --- a/products/storage-capsule/monitor.md +++ b/products/storage-capsule/monitor.md @@ -2,4 +2,4 @@ Each Capsule tracks its usage data and you can view this information by opening the "Metrics" tab on your Capsule's page. -![Monitor Capsule Metrics](<../.gitbook/assets/memory-capsule/monitor/storage-metrics (1).png>) +![Monitor Capsule Metrics](/broken/files/5VxIHPM09eOV0FGSbrej) diff --git a/products/storage-capsule/scale.md b/products/storage-capsule/scale.md index 21d658710..b7974449e 100644 --- a/products/storage-capsule/scale.md +++ b/products/storage-capsule/scale.md @@ -2,8 +2,8 @@ It is possible to allocate more resources to your Capsule depending on how much traffic your application will be getting and its computational needs. To view the different scaling options available for your Capsule, navigate to the "Scale" tab while on your Capsule's dashboard, and click the "Edit" button in the "Capsule Capacity" section. -![Scale a Capsule](<../.gitbook/assets/memory-capsule/scale/storage-scale-edit (1).png>) +![Scale a Capsule](/broken/files/ZcVSaVR4oacq7wVISLLf) Change the allocated resource for the Capsule with the sliders. Click "Save" when done. -![Configure Capsule Capacity](<../.gitbook/assets/memory-capsule/scale/storage-scale-custom (1).png>) +![Configure Capsule Capacity](/broken/files/Njn4AFPGAXXMXCWOXwHe) diff --git a/products/wordpress-capsule/deploy.md b/products/wordpress-capsule/deploy.md index 2e2e71de5..f1acb4625 100644 --- a/products/wordpress-capsule/deploy.md +++ b/products/wordpress-capsule/deploy.md @@ -12,7 +12,7 @@ Before creating your WordPress capsule, you'll need a Team and a Space. You can If you already have a Team and Space set up, log in to your Code Capsules account. On the dashboard, click the yellow `+` on the bottom left of the screen then click "New Capsule". -![Create a Capsule](../../get-started/.gitbook/assets/add-capsule.png) +![Create a Capsule](/broken/files/4bJZiaOBexUoKSnAhzd2) ## Create the Capsule @@ -20,15 +20,15 @@ A [Capsule](https://app.gitbook.com/s/gIlxo9gU7Lotj1cdGRh6/capsules/what-is-a-ca To create a Wordpress Capsule first choose "WordPress" as the Capsule type, as well as your Team, and Space. -![Choose a Capsule Type](../../get-started/.gitbook/assets/wordpress-capsule-type.png) +![Choose a Capsule Type](/broken/files/trWzz1caiyuoKcK430qr) Next choose your payment plan, or create a custom plan. -![Choose Plan](../../get-started/.gitbook/assets/wordpress-choose-plan.png) +![Choose Plan](/broken/files/lAFLsN91u5PwqspEmd7x) A Wordpress Capsule requires a connection to a MySQL Database Capsule as well as a Persistent Storage Capsule. Either select a previosuly created instance of each from the dropdowns, or click the yellow `+` next to each and follow the prompts for creating each Capsule. Click "Create Capsule". -![Deploy Configuration](../../get-started/.gitbook/assets/wordpress-configure-capsule.png) +![Deploy Configuration](/broken/files/mRVMETH0XZ6kAiZlm7r2) ## Choose How to Deploy @@ -40,7 +40,7 @@ To automatically download and deploy a Wordpress version on Code Capsules: 2. Choose your WordPress version 3. Click "Next" -![Choose Wordpress Version](../../get-started/.gitbook/assets/wordpress-version.png) +![Choose Wordpress Version](/broken/files/6DjdVUiXgO9sJFm2JAJ2) ### Git Managed @@ -51,7 +51,7 @@ To deploy WordPress from your version control repository: 3. Select the branch to deploy from 4. Click "Next" -![Choose repo](../../get-started/.gitbook/assets/wordpress-git-managed.png) +![Choose repo](/broken/files/PVPsEvZLR56b3KuhEGRn) You can read more about connecting your account to a version control provider in [this guide](https://docs.codecapsules.io/platform/account/connect-version-control). @@ -59,11 +59,11 @@ You can read more about connecting your account to a version control provider in Code Capsules will automatically build and deploy your WordPress application. You can view the build log by selecting the "Logs" tab to monitor the deployment progress. -![Logs](../../get-started/.gitbook/assets/wordpress-logs.png) +![Logs](/broken/files/WquVsllQEiLSboZ1Milm) Once the build is complete, click the URL link in the "Details" tab, to access your WordPress site. -![URL](../../get-started/.gitbook/assets/wordpress-url.png) +![URL](/broken/files/kNeV7S3JXfbpohcGRjxF) ## Set Up WordPress @@ -75,8 +75,8 @@ When you first visit your WordPress site, you'll see the installation screen: 4. Provide your email address. 5. Click "Install WordPress". -![Setup Wordpress Admin Account](../../get-started/.gitbook/assets/wordpress-setup.png) +![Setup Wordpress Admin Account](/broken/files/YGwoiXq1kKA3XnNQ8nry) After installation, you'll see the WordPress admin dashboard and can begin customizing your site. -![Welcome to Wordpress](../../get-started/.gitbook/assets/wordpress-welcome.png) +![Welcome to Wordpress](/broken/files/9pMn9vOvou2GXVOzuPwx) diff --git a/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/app.png b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/app.png new file mode 100644 index 000000000..f9d005998 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/app.png differ diff --git a/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/envactive.png b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/envactive.png new file mode 100644 index 000000000..e21bd3a86 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/envactive.png differ diff --git a/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/graphic.png b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/graphic.png new file mode 100644 index 000000000..26bce2d5c Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/graphic.png differ diff --git a/tutorials/.gitbook/assets/build-a-mern-job-board/job-board-ui.png b/tutorials/.gitbook/assets/build-a-mern-job-board/job-board-ui.png new file mode 100644 index 000000000..90ff17374 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-mern-job-board/job-board-ui.png differ diff --git a/tutorials/.gitbook/assets/build-a-mern-job-board/mern-stack.png b/tutorials/.gitbook/assets/build-a-mern-job-board/mern-stack.png new file mode 100644 index 000000000..f605b090b Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-mern-job-board/mern-stack.png differ diff --git a/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/401-auth.png b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/401-auth.png new file mode 100644 index 000000000..04ff1123d Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/401-auth.png differ diff --git a/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/create-indexjs.gif b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/create-indexjs.gif new file mode 100644 index 000000000..6d34918b8 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/create-indexjs.gif differ diff --git a/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/postman-slash-command.png b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/postman-slash-command.png new file mode 100644 index 000000000..0b149d5a7 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/postman-slash-command.png differ diff --git a/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/slash-command-test.png b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/slash-command-test.png new file mode 100644 index 000000000..78cee26e2 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/slash-command-test.png differ diff --git a/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/startup-message.png b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/startup-message.png new file mode 100644 index 000000000..648211141 Binary files /dev/null and b/tutorials/.gitbook/assets/build-a-slackbot-with-node.js-to-monitor-your-applications/startup-message.png differ diff --git a/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/configuration.png b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/configuration.png new file mode 100644 index 000000000..7f8bfaea5 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/configuration.png differ diff --git a/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/final-app.png b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/final-app.png new file mode 100644 index 000000000..3ed6fa038 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/final-app.png differ diff --git a/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend-with-form.png b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend-with-form.png new file mode 100644 index 000000000..25e69c7a0 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend-with-form.png differ diff --git a/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend.png b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend.png new file mode 100644 index 000000000..c4fab3c8b Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend.png differ diff --git a/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/flask-htmx.png b/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/flask-htmx.png new file mode 100644 index 000000000..2744f6631 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/flask-htmx.png differ diff --git a/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/venvactive.png b/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/venvactive.png new file mode 100644 index 000000000..c2de1c1e1 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-full-stack-application-with-flask-and-htmx/venvactive.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-error.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-error.png new file mode 100644 index 000000000..fc6eab483 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-error.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-settings.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-settings.png new file mode 100644 index 000000000..7a3198755 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-settings.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-success.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-success.png new file mode 100644 index 000000000..5ba96ab5d Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/auth-success.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/delete-game.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/delete-game.png new file mode 100644 index 000000000..4183fc0c7 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/delete-game.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/env-user-password.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/env-user-password.png new file mode 100644 index 000000000..7c777352d Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/env-user-password.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/get-results.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/get-results.png new file mode 100644 index 000000000..49cd07622 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/get-results.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/post-game.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/post-game.png new file mode 100644 index 000000000..4dd45cff9 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/post-game.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/put-game.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/put-game.png new file mode 100644 index 000000000..178e88818 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/put-game.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/run-command-setup.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/run-command-setup.png new file mode 100644 index 000000000..6471e2cb6 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/run-command-setup.png differ diff --git a/tutorials/.gitbook/assets/building-a-game-catalogue-api/setup-logs.png b/tutorials/.gitbook/assets/building-a-game-catalogue-api/setup-logs.png new file mode 100644 index 000000000..9744d0e94 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-game-catalogue-api/setup-logs.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/auth.png b/tutorials/.gitbook/assets/building-a-web-file-store/auth.png new file mode 100644 index 000000000..bba45da76 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/auth.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/blank-files.png b/tutorials/.gitbook/assets/building-a-web-file-store/blank-files.png new file mode 100644 index 000000000..c92202cb3 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/blank-files.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/download-file.png b/tutorials/.gitbook/assets/building-a-web-file-store/download-file.png new file mode 100644 index 000000000..573f26cda Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/download-file.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/env-variables-persistent-storage.png b/tutorials/.gitbook/assets/building-a-web-file-store/env-variables-persistent-storage.png new file mode 100644 index 000000000..9bfc623da Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/env-variables-persistent-storage.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/file-delete.png b/tutorials/.gitbook/assets/building-a-web-file-store/file-delete.png new file mode 100644 index 000000000..2acd8032b Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/file-delete.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/upload-section.png b/tutorials/.gitbook/assets/building-a-web-file-store/upload-section.png new file mode 100644 index 000000000..2363c2fca Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/upload-section.png differ diff --git a/tutorials/.gitbook/assets/building-a-web-file-store/username-env.png b/tutorials/.gitbook/assets/building-a-web-file-store/username-env.png new file mode 100644 index 000000000..435b00518 Binary files /dev/null and b/tutorials/.gitbook/assets/building-a-web-file-store/username-env.png differ diff --git a/tutorials/.gitbook/assets/telegram-bot-cover-go.jpg b/tutorials/.gitbook/assets/telegram-bot-cover-go.jpg new file mode 100644 index 000000000..7303ad644 Binary files /dev/null and b/tutorials/.gitbook/assets/telegram-bot-cover-go.jpg differ diff --git a/tutorials/.gitbook/assets/telegram-bot-cover-nodejs.jpg b/tutorials/.gitbook/assets/telegram-bot-cover-nodejs.jpg new file mode 100644 index 000000000..bb3e13dd6 Binary files /dev/null and b/tutorials/.gitbook/assets/telegram-bot-cover-nodejs.jpg differ diff --git a/tutorials/.gitbook/assets/telegram-bot-cover-python.jpg b/tutorials/.gitbook/assets/telegram-bot-cover-python.jpg new file mode 100644 index 000000000..0f6e9393e Binary files /dev/null and b/tutorials/.gitbook/assets/telegram-bot-cover-python.jpg differ diff --git a/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/app-no-nav.png b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/app-no-nav.png new file mode 100644 index 000000000..d4b9e0c6e Binary files /dev/null and b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/app-no-nav.png differ diff --git a/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/custom-heading.png b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/custom-heading.png new file mode 100644 index 000000000..cc8ad8eef Binary files /dev/null and b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/custom-heading.png differ diff --git a/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/initial-app.png b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/initial-app.png new file mode 100644 index 000000000..5346fe945 Binary files /dev/null and b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/initial-app.png differ diff --git a/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/movie-app.png b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/movie-app.png new file mode 100644 index 000000000..d58d65a07 Binary files /dev/null and b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/movie-app.png differ diff --git a/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/pizza-app.png b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/pizza-app.png new file mode 100644 index 000000000..149524852 Binary files /dev/null and b/tutorials/.gitbook/assets/white-label-your-app-with-code-capsules/pizza-app.png differ diff --git a/tutorials/SUMMARY.md b/tutorials/SUMMARY.md index 08c221aa4..bab3404bf 100644 --- a/tutorials/SUMMARY.md +++ b/tutorials/SUMMARY.md @@ -1,16 +1,16 @@ # Table of contents * [Tutorials Overview](README.md) -* [How to Create and Host an AI-Backed Telegram Bot with Go on Code Capsules](create-and-host-go-ai-telegram-bot.md) -* [How to Create and Host a Telegram Bot on Code Capsules](how-to-create-and-host-a-telegram-bot-on-code-capsules.md) -* [Create and Host a Telegram Bot with Node.js on Code Capsules](create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md) +* [How to Create and Host a Python Telegram Bot on Code Capsules](how-to-create-and-host-a-telegram-bot-on-code-capsules.md) +* [How to Create and Host a Node.js Telegram Bot on Code Capsules](create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md) +* [How to Create and Host a Go Telegram Bot on Code Capsules](create-and-host-go-ai-telegram-bot.md) +* [Creating and Hosting an API With Flask](creating-and-hosting-an-api-with-flask/README.md) + * [API Reference \[Sample\]](creating-and-hosting-an-api-with-flask/api-reference-sample.md) +* [Building a Full Stack Application with Flask and HTMx](building-a-full-stack-application-with-flask-and-htmx.md) * [How to Deploy a React Token dApp to Code Capsules](how-to-deploy-a-react-token-dapp-to-code-capsules.md) * [Nuxt3 and Nitro](nuxt3-and-nitro.md) * [How to Deploy a React Token dApp to Code Capsules](how-to-deploy-a-react-token-dapp-to-code-capsules.md) * [Optimizing Performance in MERN Stack: Tips and Techniques](optimizing-performance-in-mern-stack-tips-and-techniques.md) -* [Creating and Hosting an API With Flask](creating-and-hosting-an-api-with-flask/README.md) - * [API Reference \[Sample\]](creating-and-hosting-an-api-with-flask/api-reference-sample.md) -* [Building a Full Stack Application with Flask and HTMx](building-a-full-stack-application-with-flask-and-htmx.md) * [Build a Slackbot with Node.js to Monitor your Applications](build-a-slackbot-with-node.js-to-monitor-your-applications.md) * [Video Guides](video-guides.md) * [Building a Full Stack Application With Express and HTMx](building-a-full-stack-application-with-express-and-htmx.md) @@ -21,7 +21,4 @@ * [Build a Generative Art Application With Pillow, Flask and HTMx](build-a-generative-art-application-with-pillow-flask-and-htmx.md) * [White-Label Your App With Code Capsules](white-label-your-app-with-code-capsules.md) * [Building a Game Catalogue API](building-a-game-catalogue-api.md) -* [Deploy a Python Telegram Bot (Webhook Method) to Production in 5 Minutes](deploy-a-python-telegram-bot-webhook-method-to-production-in-5-minutes.md) -* [Deploy a Node.js Telegram Bot (Webhook Method) to Production in 5 Minutes](deploy-a-node.js-telegram-bot-webhook-method-to-production-in-5-minutes.md) -* [Deploy a Node.js Discord Bot to Production in 5 Minutes](deploy-a-node.js-discord-bot-to-production-in-5-minutes.md) * [Best Practices for Structuring MEAN/MERN/MEVN Projects](best-practices-for-structuring-mean-mern-mevn-projects.md) diff --git a/tutorials/build-a-generative-art-application-with-pillow-flask-and-htmx.md b/tutorials/build-a-generative-art-application-with-pillow-flask-and-htmx.md index e43da2899..ef7da8377 100644 --- a/tutorials/build-a-generative-art-application-with-pillow-flask-and-htmx.md +++ b/tutorials/build-a-generative-art-application-with-pillow-flask-and-htmx.md @@ -6,7 +6,7 @@ In this tutorial, we’ll show you how to build a web application that creates i Here’s an example of a graphic image that can be created by the app we’ll build: -![graphic](https://codecapsules.io/wp-content/uploads/2023/07/graphic.png) +![graphic](.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/graphic.png) You can also add text to the generated images to create image covers and different marketing posts. @@ -52,7 +52,7 @@ Windows When you’ve activated the virtual environment, the name `env` will appear on the far left of your current line. This confirms that the activation was successful. -![envactive](https://codecapsules.io/wp-content/uploads/2023/07/envactive.png) +![envactive](.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/envactive.png) Now we can install dependencies our app needs to the environment. Run the command below from a terminal in the project root folder to install the packages we’ll need: @@ -383,4 +383,4 @@ The final step is to deploy our app. Log into your Code Capsules account and lin That’s it! Your “Generate Art” app should be live and fully functional now. -![app](https://codecapsules.io/wp-content/uploads/2023/07/app.png) +![app](.gitbook/assets/build-a-generative-art-application-with-pillow-flask-and-htmx/app.png) diff --git a/tutorials/build-a-mern-job-board.md b/tutorials/build-a-mern-job-board.md index b9b5d7952..07d21b385 100644 --- a/tutorials/build-a-mern-job-board.md +++ b/tutorials/build-a-mern-job-board.md @@ -47,7 +47,7 @@ Whenever we change our application’s frontend code, we edit the files in the ` Run `node index.js` in the terminal from the project’s root folder to start the boilerplate MERN application. You can view it in your browser at `http://localhost:8080`. The app should look something like this: -![mern stack](https://codecapsules.io/wp-content/uploads/2023/07/mern-stack.png) +![mern stack](.gitbook/assets/build-a-mern-job-board/mern-stack.png) Let’s extend this frontend to reflect the job board functionality. @@ -171,7 +171,7 @@ You’ll notice the page layout has changed, but the styling is a bit off. Add t When you rebuild your application and take a look at the frontend, it should look like this: -![job board ui](https://codecapsules.io/wp-content/uploads/2023/07/job-board-ui.png) +![job board ui](.gitbook/assets/build-a-mern-job-board/job-board-ui.png) ### Extending the Backend diff --git a/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md b/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md index b16f822a2..5d400717c 100644 --- a/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md +++ b/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md @@ -2,9 +2,10 @@ description: >- Create a bot that monitors the state of your applications and reports any status changes via Slack. -cover: .gitbook/assets/CodeCapsules_SlackBot.jpg +cover: /broken/files/LZ9vKYmOY5gPQMepT9Cj coverY: 0 layout: + width: default cover: visible: true size: hero @@ -18,6 +19,8 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- # Build a Slackbot with Node.js to Monitor your Applications @@ -81,7 +84,7 @@ npm install express body-parser superagent Now let's create an `index.js` file, which will be the main file for our app. A simple way to do this is to open up your project folder in an editor, like [Visual Studio Code](https://code.visualstudio.com). Now you can create a new `index.js` file. -

Create Index.js in Visual Studio

+

Create Index.js in Visual Studio

Save this blank file. Now add another file named `.gitignore` and add this lines to it, and save: @@ -125,11 +128,11 @@ For this tutorial, we would like the following two functions: Our first requirement can be configured on the Slack side by clicking "OAuth & Permissions" on the left panel. Scroll down to the _Scopes_ section, click "Add an OAuth Scope" under the _Bot Token Scopes_ section, and choose "Chat:Write" from the options list. This now allows our bot to initiate and post messages to us when it starts up. -

Select Scopes Slack

+

Select Scopes Slack

Our second requirement can be configured by setting up a _slash command_. Click on the "Slash Commands" menu item on the left, under _Features_. -

Slash Command Menu

+

Slash Command Menu

Then click "Create a new Command". We'll give the command the name _/stats_. For the _Request URL_, copy the _Domain_ name from your Code Capsules Details page. @@ -137,7 +140,7 @@ Then click "Create a new Command". We'll give the command the name _/stats_. For Paste your domain into the _Request URL_ box on Slack, and add `/slack/command/stats` to the end of it. We can fill in a description as well, something like 'Returns key stats from the app'. -
+
Great, now we can click "Save" at the bottom of the page to finish setting up our slash command. @@ -188,7 +191,7 @@ Let's add this to our environment variables as well, as it keeps all the configu We also need to invite our bot to the chosen channel, so that it will be able to post there. Go to the channel, and @ mention the name you gave the bot to add it. Click "Invite Them" when Slack prompts you. -
+
Now let's add the code to call Slack on startup, and write a message to our channel. We can modify our boilerplate code above to make an HTTP POST to the endpoint `https://slack.com/api/chat.postMessage`. We'll use [Superagent](https://www.npmjs.com/package/superagent) to make the call. @@ -258,7 +261,7 @@ git push origin If all goes well, in a few minutes you should get a message on your Slack channel from your code! -
+
#### Adding a slash command @@ -321,13 +324,13 @@ After the code has finished deploying on Code Capsules (it should send a startup Type `/stats` in the channel we chose earlier. After a second or two, the app should respond with its current vital stats and information. -
+
#### Adding verification We can ask our app via Slack (which we use constantly!) how it's doing; pretty cool, huh? There is a problem, though. If we call our slash command endpoint from anywhere else, for instance, if we just call it using [Postman](https://www.postman.com), it also returns all the information and stats! This would not be good for a production system, as sensitive information will be easily found by attackers. -
+
So, how can we ensure that the request comes from our Slack workspace? Luckily, Slack has thought about this and sends a [message signature with its requests](https://api.slack.com/authentication/verifying-requests-from-slack). From the [guide in Slack's docs](https://api.slack.com/authentication/verifying-requests-from-slack#verifying-requests-from-slack-using-signing-secrets__a-recipe-for-security__step-by-step-walk-through-for-validating-a-request), we can put together some code to check that the request is legitimately from Slack. The main parts of the check, copied from the docs, look like this: @@ -405,12 +408,10 @@ Then, on the first few lines of the function, we get the timestamp Slack sends f After that, we retrieve the Slack Signing Secret from our environment variables. Let's get our Signing Secret from Slack and add it to the Code Capsules environment now. Head over to your Slack app dashboard, and click on "Basic Information" in the left-hand sidebar. Then scroll down to _App Credentials_, and look for the _Signing Secret_. Click "Show", and copy the secret. -
+
Now, head over to your Capsule on Code Capsules and click on the _Config_ tab. Add a new environment variable with _Name_ `SLACK_SIGNING_SECRET` and paste in the value of the _Signing Secret_ we copied above. Click "Update & Start Build" to save the changes. - -
Ok, back to the function. After we retrieve the signing secret from the environment variables, we read out the hash calculated and sent by Slack from the headers using `const slack_signature = req.headers['x-slack-signature']`. This will be a string that looks something like `v0=xxxxxxxxxxxxxxxxxxxxxxx`, where the `xxxx` represents the actual hash value. We need to split the version identifier `v0` from the beginning of the string, though, as this is not part of the hash value. We do this in the next line, `const [version, slack_hash] = slack_signature.split('=')`. Now we have both the version and the hash string in variables that we can access. @@ -453,7 +454,7 @@ git push origin Once the code is up and running on Code Capsules, test it out to see that it still responds to the Slack slash command. Then you can try again from Postman or other similar apps, and see that it will not send any info without a valid signature (you can use `v0=a2114d57b48eac39b9ad189dd8316235a7b4a8d21a10bd27519666489c69b503` as an example `x-slack-signature` parameter): -
+
### Things to Try Next diff --git a/tutorials/building-a-book-recommendations-app-with-php-sqlite-and-docker.md b/tutorials/building-a-book-recommendations-app-with-php-sqlite-and-docker.md index 62eba6a32..4550e8eea 100644 --- a/tutorials/building-a-book-recommendations-app-with-php-sqlite-and-docker.md +++ b/tutorials/building-a-book-recommendations-app-with-php-sqlite-and-docker.md @@ -4,7 +4,7 @@ PHP is one of the first technologies that made dynamic web applications possible Here’s what the final app will look like: -![final app](https://codecapsules.io/wp-content/uploads/2023/07/final-app.png) +![final app](.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/final-app.png) ### Requirements @@ -89,7 +89,7 @@ docker build . -t book-app && docker run -p 8000:80 book-app This builds a Docker image from the `Dockerfile` in the current directory and gives it `book-app` as a tag. The second command (after `&&`) runs the container, and maps our local port 8000 to the Docker port 80. Once it’s running, you can visit `http://localhost:8000` in your web browser to see the application. -![frontend](https://codecapsules.io/wp-content/uploads/2023/07/frontend.png) +![frontend](.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend.png) Hit `Ctrl + C` in the terminal window running Docker to stop the server. @@ -116,7 +116,7 @@ This sets up a form with inputs and a submit button. Note the hidden field with If you run the app again, you’ll see something like the following. -![frontend with form](https://codecapsules.io/wp-content/uploads/2023/07/frontend-with-form.png) +![frontend with form](.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/frontend-with-form.png) Now you can type in a book and author name and press the “Save” button, but then the app will crash as we haven’t built the backend yet. Let’s do that next. @@ -338,6 +338,6 @@ Now create a new Data Capsule and a Docker Capsule in a single Space in Code Cap For the Docker capsule, choose your GitHub repository and enter `Dockerfile` for the Dockerfile location. In the configuration tab, set “Network Port” to “80” to match what Apache is running on, and bind the Docker Capsule to the Data Capsule. -![Configuration](https://codecapsules.io/wp-content/uploads/2023/07/configuration.png) +![Configuration](.gitbook/assets/building-a-book-recommendations-app-with-php-sqlite-and-docker/configuration.png) Deploy and build the application, and you should see it running on a custom URL that you can share with the world. diff --git a/tutorials/building-a-full-stack-application-with-flask-and-htmx.md b/tutorials/building-a-full-stack-application-with-flask-and-htmx.md index aae087b5c..ae53ab0df 100644 --- a/tutorials/building-a-full-stack-application-with-flask-and-htmx.md +++ b/tutorials/building-a-full-stack-application-with-flask-and-htmx.md @@ -2,9 +2,10 @@ description: >- Create a full stack application with Flask and HTMx to build a lightweight interactive site. -cover: .gitbook/assets/flask-htmx-cover.png +cover: /broken/files/UA3xgYd6QBlSI3wFjFHf coverY: 0 layout: + width: default cover: visible: true size: hero @@ -18,6 +19,8 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- # Building a Full Stack Application with Flask and HTMx @@ -35,7 +38,7 @@ This is where a new HTML extension called HTMx enters and shines. HTMx gives tra In this tutorial, we’ll explore the benefits of HTMx by building a full stack application using Flask and HTMx. Our application will be a book recommendation app that supports CRUD functionality. The final app will look a bit like this: -
+
### Overview and Requirements @@ -86,7 +89,7 @@ source env/bin/activate After activating the virtual environment, the name `env` should appear in brackets on the leftmost part of your terminal in your current line. This signals that the activation was successful. -
+
#### Installing Dependencies @@ -223,7 +226,7 @@ In our form, we used the beforeend value to tell HTMx that we want to append the In the table, however, we used the outerHTML value to denote that we want to swap the entire `` element with the returned content. -The table rows are dynamically generated using Jinja2's `{% for book in books %}` loop syntax, which iterates through each book in the books list passed from our Flask backend. +The table rows are dynamically generated using Jinja2's `{% for book in books %}` loop syntax, which iterates through each book in the books list passed from our Flask backend. A full list of acceptable hx-swap values can be viewed [here](https://htmx.org/docs/#swapping). @@ -467,7 +470,7 @@ If the user goes through with updating the book title, then the `/update` route Our app is ready to be tested. Navigate to the project’s root folder in a terminal and run the following command: `python3 run.py`. This should start up a development server on port 5000. Open your browser at `http://127.0.0.1:5000/` and you should see your app running: -
+
Once you are satisfied with the app, you can commit and push your changes to GitHub with the following commands. diff --git a/tutorials/building-a-game-catalogue-api.md b/tutorials/building-a-game-catalogue-api.md index 88b1c4727..98e67ba3b 100644 --- a/tutorials/building-a-game-catalogue-api.md +++ b/tutorials/building-a-game-catalogue-api.md @@ -165,7 +165,7 @@ npm run setup Click “Save” to save this new setting. -![run command setup](https://codecapsules.io/wp-content/uploads/2023/07/run-command-setup.png) +![run command setup](.gitbook/assets/building-a-game-catalogue-api/run-command-setup.png) Let’s commit the above code to the repo, and push it up so that Code Capsules can run it. Commit and push using the following commands in the terminal: @@ -177,7 +177,7 @@ git push origin If you navigate to the “Logs” tab on the Backend Capsule, you should see the script booting up and the result of the `CREATE TABLE` command. -![setup logs](https://codecapsules.io/wp-content/uploads/2023/07/setup-logs.png) +![setup logs](.gitbook/assets/building-a-game-catalogue-api/setup-logs.png) Once this is done, you can change the “Run Command” under the “Configure” tab back to: @@ -265,7 +265,7 @@ git push origin If you visit the Code Capsules dashboard for the Backend Capsule, you should see a note that it’s building. Once it’s finished building, head over to your site in a browser and navigate to the `/games` route. You should see it return an empty array: -![get results](https://codecapsules.io/wp-content/uploads/2023/07/get-results.png) +![get results](.gitbook/assets/building-a-game-catalogue-api/get-results.png) This works, but is not very interesting! Let’s add a create route so that we can add new game entries. @@ -350,7 +350,7 @@ Add the following JSON payload to the body: Click “Send”, and your API should send back the newly inserted game, along with its `id`: -![post game](https://codecapsules.io/wp-content/uploads/2023/07/post-game.png) +![post game](.gitbook/assets/building-a-game-catalogue-api/post-game.png) #### Adding an Update Route @@ -386,7 +386,7 @@ In the `queryResults` callback, we set the `req.body.id` field to the `id` from Commit and push this code to deploy it to Code Capsules. Now, you can test this route in Postman, by updating the HTTP method to `put`. Add the ID `1` to the games path, and change some of the information in the body. Click “Send” and you should see the API return the updated document. -![put game](https://codecapsules.io/wp-content/uploads/2023/07/put-game.png) +![put game](.gitbook/assets/building-a-game-catalogue-api/put-game.png) #### Adding a Delete Route @@ -416,7 +416,7 @@ Because we don’t have any record to return (we deleted it!), we just return a Great, it’s time to commit this code, push it up and test it. You should be able to select the “DELETE” verb in Postman, and add in a game `id` to the route. Click “Send”, and you should see a blank reply, with the status code as `200 OK`. -![delete game](https://codecapsules.io/wp-content/uploads/2023/07/delete-game.png) +![delete game](.gitbook/assets/building-a-game-catalogue-api/delete-game.png) #### Adding Authentication @@ -441,7 +441,7 @@ We’ll need a place to store the user credentials, so we can check them against Head over to the “Config” page on your Backend Capsule, and add 2 new environment variables : `USERNAME` and `PASSWORD`. Supply values of your own to set your username and password, and click `Update Capsule` when you are done. -![env user password](https://codecapsules.io/wp-content/uploads/2023/07/env-user-password.png) +![env user password](.gitbook/assets/building-a-game-catalogue-api/env-user-password.png) Now we can add the Passport code to check incoming credentials against these stored credentials. Add this code just above the `var gamesRouter = require('./routes/games');` line in `app.js`: @@ -478,15 +478,15 @@ We set the `session` flag to false, as the convention for APIs is to require cre Commit and push this updated code to deploy it. Once it is running, if you try any of the routes in Postman, you should see an authentication error message. -![auth error](https://codecapsules.io/wp-content/uploads/2023/07/auth-error.png) +![auth error](.gitbook/assets/building-a-game-catalogue-api/auth-error.png) To send the credentials along with your request, select the “Authorisation” tab in Postman. Choose “Basic Auth” from the dropdown list, and enter the credentials you set in the right-hand pane. -![auth settings](https://codecapsules.io/wp-content/uploads/2023/07/auth-settings.png) +![auth settings](.gitbook/assets/building-a-game-catalogue-api/auth-settings.png) If you try your query again, it should let you pass, and come back with the usual response. -![auth success](https://codecapsules.io/wp-content/uploads/2023/07/auth-success.png) +![auth success](.gitbook/assets/building-a-game-catalogue-api/auth-success.png) ### Next Steps diff --git a/tutorials/building-a-web-file-store.md b/tutorials/building-a-web-file-store.md index a1f9c5600..7935e2876 100644 --- a/tutorials/building-a-web-file-store.md +++ b/tutorials/building-a-web-file-store.md @@ -81,7 +81,7 @@ To use the Data Capsule with the Backend Capsule, we need to link the two. Head \ After binding the capsules, scroll up to the section “Capsule Parameters”. You’ll notice that an environment variable, `PERSISTENT_STORAGE_DIR`, is automatically added with the mount point. We’ll use this environment variable in the code to access the storage drive.\\ -
+
@@ -152,7 +152,7 @@ Then we set up a simple table, and use the Handlebars of each function to iterat You can save, commit and push your changes so far. Our code should deploy automatically on [Code Capsules](https://codecapsules.io/). After deploying, you can visit the public URL, and you should see something like this: \ -![blank files](https://codecapsules.io/wp-content/uploads/2023/07/blank-files.png) +![blank files](.gitbook/assets/building-a-web-file-store/blank-files.png) This is good, but a little uninteresting without any files to view! @@ -234,7 +234,7 @@ This is a good point to commit the code to Git, and test the new deployment on C \ The upload control may look slightly different depending on the web browser and operating system you use. Try choosing a file and uploading it, and you should see it appear in the browser. -
+
#### Downloading a File @@ -277,7 +277,7 @@ Now we need a way to call this route from the front end. Open the `index.hbs` fi Commit these changes, and wait for Code Capsules to redeploy the site. If you navigate to the site now, you should see the file you uploaded earlier as a hyperlink. Clicking on the link should download the file.\\ -
+
#### Deleting a File @@ -349,7 +349,7 @@ Now let’s hook this function up to the button we added for each file. We’ll Commit these changes, and wait for Code Capsules to redeploy the site. Then navigate to the site and try out the “Delete” button next to the filename.\\ -
+
#### Adding Authentication @@ -430,7 +430,7 @@ Head over to the “Config” tab on your backend Code Capsule, and add 2 new en \ **Note:** _While this method of storing user credentials is appropriate for a small, single-user hobby project, it is not sufficient for production with customer credentials. Look to implementing a more robust user store, with password hashing and salting, or using a third-party authentication service such as a social network or an OAuth provider_ -
+
Passport offers many other [authentication strategies](https://www.passportjs.org/features/), from OAuth 2.0 strategies allowing authentication through Facebook, Google, Twitter and other OAuth 2.0 providers, to API authentication strategies such as Bearer Tokens. @@ -491,7 +491,7 @@ We’re done with authentication. Commit these changes, and wait for Code Capsul \ Congratulations, you have completed building a personal web drive using [Code Capsules](https://codecapsules.io/) and [Node.js](https://nodejs.org/)! -
+
### Next Steps diff --git a/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md b/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md index 7266ec9de..ba6ede00b 100644 --- a/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md +++ b/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md @@ -2,12 +2,14 @@ description: >- Social media bots allow you to automate responses and reactions to posts or messages sent to the bot. -cover: .gitbook/assets/telegrambot.jpg +cover: .gitbook/assets/telegram-bot-cover-nodejs.jpg coverY: 0 +coverHeight: 449 layout: + width: default cover: visible: true - size: hero + size: full title: visible: true description: @@ -18,9 +20,13 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- -# Create and Host a Telegram Bot with Node.js on Code Capsules +# How to Create and Host a Node.js Telegram Bot on Code Capsules + +_This guide uses Node.js. You can find the Python version_ [_here_](https://docs.codecapsules.io/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules) _or the Go version_ [_here_](https://docs.codecapsules.io/tutorials/create-and-host-go-ai-telegram-bot). In this tutorial, we'll extend a boilerplate Express application on Code Capsules to create a Telegram bot in [Node.js](https://nodejs.org/en/about/) that tracks and responds with current Ethereum prices. diff --git a/tutorials/create-and-host-go-ai-telegram-bot.md b/tutorials/create-and-host-go-ai-telegram-bot.md index c9ec8f1ba..299f1c3b2 100644 --- a/tutorials/create-and-host-go-ai-telegram-bot.md +++ b/tutorials/create-and-host-go-ai-telegram-bot.md @@ -1,12 +1,15 @@ --- description: >- - Build a Telegram bot that uses AI to respond to users with a custom personality. -cover: .gitbook/assets/telegram-bot-cover-go-2.png + Build a Telegram bot that uses AI to respond to users with a custom + personality. +cover: .gitbook/assets/telegram-bot-cover-go.jpg coverY: 0 +coverHeight: 462 layout: + width: default cover: visible: true - size: hero + size: full title: visible: true description: @@ -17,13 +20,13 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- -![Creating Telegram Bot Cover](.gitbook/assets/telegram-bot-cover-go-2.png) - -*This guide uses Go. You can find the Node.js version [here](https://docs.codecapsules.io/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules) or the Python version [here](https://docs.codecapsules.io/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules)*. +# How to Create and Host a Go Telegram Bot on Code Capsules -# How to Create and Host an AI-Backed Telegram Bot on Code Capsules +_This guide uses Go. You can find the Node.js version_ [_here_](https://docs.codecapsules.io/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules) _or the Python version_ [_here_](https://docs.codecapsules.io/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules). In this tutorial we'll create a [Telegram bot](https://core.telegram.org/bots/) from scratch using [Go](https://go.dev/) and host it in a [new Capsule](https://app.codecapsules.io/new/capsule?capsuleType=backend). The bot will start with the basic functionality of checking the current air temperature of a given city. Then, we'll extend its functionality by adding AI capabilities using Google AI Studio. @@ -31,8 +34,8 @@ In this tutorial we'll create a [Telegram bot](https://core.telegram.org/bots/) For this project we will use the following tech stack: -- **Frontend**: A Telegram bot that accepts specific commands from users. -- **Backend**: An application written in Go and supported by various third-party APIs. +* **Frontend**: A Telegram bot that accepts specific commands from users. +* **Backend**: An application written in Go and supported by various third-party APIs. The rest of the stack will be handled by our Backend Capsule. @@ -40,14 +43,13 @@ Create a Code Capsules account [here](https://codecapsules.io/) if you don't alr We will host our code on GitHub, so make sure you have a [GitHub account](https://github.com/signup) and are familiar with [Git](https://git-scm.com/). You can find a guide to getting started with Git [here](https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control). - -#### Create a Telegram Account +#### **Create a Telegram Account** Go to [Telegram](https://telegram.org/), download the app for your desired platform, and create an account. For development purposes, we recommend downloading the version suited to your development environment, but it will work fine on your phone. -#### Install Go +#### **Install Go** If you have Homebrew configured, you can run the following code to install Go in a single step: @@ -65,21 +67,21 @@ Start a project by creating a new directory for local development: mkdir go-bot && cd go-bot ``` -#### Set Up Third-Party APIs +#### **Set Up Third-Party APIs** We will make use of APIs from Weatherstack and Google AI Studio. Weatherstack provides weather data with 100 free requests per month. To obtain a Weatherstack API key: -- Create a free [account](https://weatherstack.com/product). -- Log in and take note of the API key presented in the control panel. +* Create a free [account](https://weatherstack.com/product). +* Log in and take note of the API key presented in the control panel. Google AI Studio provides access to generative AI models with a free tier for API calls. To obtain a Google AI Studio API key: -- Go to [Google AI Studio](https://aistudio.google.com/). -- Sign in with your Google account. -- Click on **Get API key** and select **Create API key in new project**. -- Copy the generated API key and store it securely. +* Go to [Google AI Studio](https://aistudio.google.com/). +* Sign in with your Google account. +* Click on **Get API key** and select **Create API key in new project**. +* Copy the generated API key and store it securely. ### Register a Bot Account and Talk to the BotFather @@ -146,7 +148,7 @@ Go requires a package and a function named `main` in order to execute. Specify t package main ``` -#### Imports +#### **Imports** Now we can add imports for the third-party packages. We'll also need the functionality in some of the default packages that are shipped with Go. @@ -165,11 +167,11 @@ import ( ) ``` -#### Helper Functions +#### **Helper Functions** Before we build out the `main()` function, which will control most of the logic to handle the bot commands, we need to build two helper functions that will make the calls to the third-party APIs. -The first helper function retrieves temperature data from the Weatherstack API. +The first helper function retrieves temperature data from the Weatherstack API. First, we define a struct that maps the JSON response from Weatherstack: @@ -276,7 +278,7 @@ From there, all we have to do is send our question to our Google AI Studio API i For some basic error handling, we validate that we received a non-empty response and then check if it exceeds Telegram's message length limit (4096 characters). -#### Main Function +#### **Main Function** We can now begin to build our `main()` function. We need our code to be aware of the environment variables that we set up in our `.env` file. We're using this file for convenience so that we can run the bot locally. Once our code is deployed, we'll configure the environment variables on our server instead. @@ -290,7 +292,6 @@ func main() { Now that the variables are loaded into our environment, we can access them with the `os.Getenv()` function to get our `BOT_TOKEN`, and then we can create a new instance of the Telegram BotAPI. - ```go token := os.Getenv("BOT_TOKEN") if token == "" { @@ -303,7 +304,7 @@ Now that the variables are loaded into our environment, we can access them with } ``` -##### Get Messages +#### **Get Messages** The next step is to enable our backend to respond whenever a user sends a command. Luckily, the Telegram Bot API package offers several ready solutions. The simplest approach is to use polling, in which the backend code continuously queries the bot API to check for new messages. @@ -315,7 +316,7 @@ The next step is to enable our backend to respond whenever a user sends a comman updates := bot.GetUpdatesChan(u) ``` -The above code handles this setup. It uses the `GetUpdatesChan()` function to launch a background [goroutine](https://go.dev/tour/concurrency/1) that polls the Telegram Bot API for new message requests. As soon as a message arrives, it is assigned to the `updates` variable and the rest of the code continues to run. +The above code handles this setup. It uses the `GetUpdatesChan()` function to launch a background [goroutine](https://go.dev/tour/concurrency/1) that polls the Telegram Bot API for new message requests. As soon as a message arrives, it is assigned to the `updates` variable and the rest of the code continues to run. Now that we have polling inplace, we can set up the main loop of our program that will process the user commands when they are available. @@ -335,11 +336,11 @@ Next, we add a check to skip any kind of update we receive that doesn't contain msg := update.Message ``` -##### Process Commands +#### **Process Commands** Now that we know we have a message from the user, we can add the logic for the commands that we want to support. To make the code easier to follow, we'll keep all the logic in the main class. If you are coding a more complex bot, with support for a large number of commands, you would probably want to consider improving the extendibility of your code with some object-oriented principles. For example, this code would be suited to the [Factory Method pattern](https://refactoring.guru/design-patterns/factory-method), which could provide some layers of abstraction that make adding new commands more streamlined. -First, let's look at the temperature command `/temperature [city]`. This will make a call to the Weatherstack API to get the live temperature for the provided city. +First, let's look at the temperature command `/temperature [city]`. This will make a call to the Weatherstack API to get the live temperature for the provided city. ```go if strings.HasPrefix(msg.Text, "/temperature") { @@ -350,9 +351,9 @@ First, let's look at the temperature command `/temperature [city]`. This will ma } ``` -We extract the actual text string from the `Message` object and then check if it starts with our supported command. +We extract the actual text string from the `Message` object and then check if it starts with our supported command. -If any more text appears after the command string, we treat all of it as the city name. Since the Weatherstack API requires multi-word city names to be separated by `+`, we split the rest of the string into parts and then join them back together using `+` symbols. +If any more text appears after the command string, we treat all of it as the city name. Since the Weatherstack API requires multi-word city names to be separated by `+`, we split the rest of the string into parts and then join them back together using `+` symbols. Now that our city name is in the correct format required by the `getTemperature(city)` helper method, we simply call it and return the result to the user. @@ -371,7 +372,7 @@ Now that our city name is in the correct format required by the `getTemperature( One thing to note is error handling. For good UX and security best practices, it is generally best not to send raw error messages to users. Instead, log the real error internally and return a generic error message to the user. -Next, we'll work on the `/askGoku` command. +Next, we'll work on the `/askGoku` command. ```go } else if strings.HasPrefix(msg.Text, "/askGoku") { @@ -399,8 +400,8 @@ Now we can call our `askGoku()` helper function. If the request succeeds, we cre reply := tgbotapi.NewMessage(msg.Chat.ID, response) bot.Send(reply) ``` - -##### Default Response + +#### **Default Response** The last thing we need to do is add a default response if the user sends anything other than the commands that we support. @@ -415,7 +416,7 @@ The last thing we need to do is add a default response if the user sends anythin We can use this default case to show the expected usage for our supported commands. -## Test the Bot Locally +### Test the Bot Locally Before deploying to Code Capsules, test that your bot works correctly. You can run it locally using the polling approach. @@ -425,9 +426,9 @@ go run bot.go Open Telegram, find your bot by username, and test the commands: -- Send `/temperature Cape Town` to check the current temperature. -- Send `/askGoku What is your favorite food?` to get a response from Goku. -- Send any other text to see the welcome message. +* Send `/temperature Cape Town` to check the current temperature. +* Send `/askGoku What is your favorite food?` to get a response from Goku. +* Send any other text to see the welcome message. ![Working Telegram Bot](.gitbook/assets/working-telegram-bot.png) @@ -435,7 +436,7 @@ Check your terminal for any error logs if something doesn't work. Once you've ve ### Deploy the Bot -We will now deploy the bot on Code Capsules and make it more efficient by using webhooks instead of polling. +We will now deploy the bot on Code Capsules and make it more efficient by using webhooks instead of polling. Follow [this quick guide](https://docs.codecapsules.io/backend/go) to set up your Code Capsules account and create a new Capsule. @@ -451,11 +452,11 @@ We can then run the same tests as we ran locally (ensure the local instance is s ### Polling vs Webhooks -The polling approach we used earlier works well for development and small bots. However, polling is not the most bandwidth-efficient method because it requires constant communication between the backend code and the server. +The polling approach we used earlier works well for development and small bots. However, polling is not the most bandwidth-efficient method because it requires constant communication between the backend code and the server. A more efficient alternative is webhooks, which work in the reverse manner. Instead of the bot repeatedly asking Telegram for updates, Telegram will send updates directly to the bot's HTTP server whenever a user sends a message. -#### How to Convert to Webhooks +#### **How to Convert to Webhooks** The main architectural change is replacing the polling loop with an HTTP server. Instead of this: @@ -495,7 +496,7 @@ if _, err := bot.Request(wh); err != nil { The `APP_URL` is the public URL where Telegram can reach our bot. This will be automatically configured in the Capsule. -#### Receiving and Processing Webhook Updates +#### **Receiving and Processing Webhook Updates** The HTTP handler receives JSON from Telegram and unmarshals it into an `Update` struct: diff --git a/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png b/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png new file mode 100644 index 000000000..4d8ca59db Binary files /dev/null and b/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png differ diff --git a/tutorials/creating-and-hosting-an-api-with-flask/README.md b/tutorials/creating-and-hosting-an-api-with-flask/README.md index 47dfd8519..8764fd48c 100644 --- a/tutorials/creating-and-hosting-an-api-with-flask/README.md +++ b/tutorials/creating-and-hosting-an-api-with-flask/README.md @@ -2,9 +2,10 @@ description: >- Build a personal API that lets you access up to the minute exchange rates and weather data for cities of your choosing. -cover: ../.gitbook/assets/creating-flask-api-cover.jpg +cover: /broken/files/VvDc3bsuor0sN6a8xAtG coverY: 68.97777777777776 layout: + width: default cover: visible: true size: hero @@ -18,6 +19,8 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- # Creating and Hosting an API With Flask @@ -71,7 +74,7 @@ envScriptsactivate.bat If the virtual environment has activated correctly, you’ll see (env) to the left of your name in the terminal. -![env active](https://codecapsules.io/wp-content/uploads/2023/07/env-active.png) +![env active](.gitbook/assets/env-active.png) ### Installing the Dependencies diff --git a/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules.md b/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules.md index a5e066b14..dc8fc76c1 100644 --- a/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules.md +++ b/tutorials/how-to-create-and-host-a-telegram-bot-on-code-capsules.md @@ -2,12 +2,14 @@ description: >- Learn how to build a Telegram bot that messages you exchange rate data and weather forecasts for areas of your choosing. -cover: .gitbook/assets/telegram-bot-cover.jpg +cover: .gitbook/assets/telegram-bot-cover-python.jpg coverY: 0 +coverHeight: 445 layout: + width: default cover: visible: true - size: hero + size: full title: visible: true description: @@ -18,11 +20,13 @@ layout: visible: true pagination: visible: true + metadata: + visible: true --- -# How To Create and Host a Telegram Bot on Code Capsules +# How to Create and Host a Python Telegram Bot on Code Capsules -_This guide uses Python. You can find the Node.js version_ [_here_](https://docs.codecapsules.io/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules)_, and the Go version [_here_](https://docs.codecapsules.io/tutorials/create-and-host-go-ai-telegram-bot)._ +_This guide uses Python. You can find the Node.js version_ [_here_](https://docs.codecapsules.io/tutorials/create-and-host-a-telegram-bot-with-node.js-on-code-capsules)_, and the Go version_ [_here_](https://docs.codecapsules.io/tutorials/create-and-host-go-ai-telegram-bot)_._ In this tutorial, we'll create a Telegram bot that will allow us to pull temperature, weather, and exchange rate data on the go by messaging our bot in the Telegram app. @@ -153,7 +157,6 @@ from telegram.ext import Application, CommandHandler From the `python-telegram-bot` library, we import two classes: `Application` and `CommandHandler`. Now we can create our `main()` method like this: - ```python def main(): TOKEN = os.getenv('BOT_TOKEN') diff --git a/tutorials/white-label-your-app-with-code-capsules.md b/tutorials/white-label-your-app-with-code-capsules.md index 684f913ff..25ce3e4de 100644 --- a/tutorials/white-label-your-app-with-code-capsules.md +++ b/tutorials/white-label-your-app-with-code-capsules.md @@ -65,7 +65,7 @@ npm run start Then go to [`http://localhost:3005/`](http://localhost:3005/) to see the app. -![initial app](https://codecapsules.io/wp-content/uploads/2023/08/initial-app.png) +![initial app](.gitbook/assets/white-label-your-app-with-code-capsules/initial-app.png) The application is currently set up for a singular purpose: to store book recommendations. The scope and branding are limited, but the core functionality—a data store with an intuitive UI—could be a great tool for a number of companies. @@ -104,7 +104,7 @@ h1= heading This changes the hard-coded title of the page to the environment variable accessed through the context dictionary. If you run the app now, you will see that the page has a new heading. -![custom heading](https://codecapsules.io/wp-content/uploads/2023/08/custom-heading.png) +![custom heading](.gitbook/assets/white-label-your-app-with-code-capsules/custom-heading.png) You can get pretty creative with setting these environment variables. To demonstrate some of the possibilities, define these variables within the `.env` file: @@ -260,7 +260,7 @@ const navStyle = `background-color: ${process.env.navColor}; display: ${display} If you run the code now, you will see the app has a branded look: -![pizza app](https://codecapsules.io/wp-content/uploads/2023/08/pizza-app.png) +![pizza app](.gitbook/assets/white-label-your-app-with-code-capsules/pizza-app.png) We won’t need the `.env` file in our deployment, so you can go ahead and delete that file. @@ -360,11 +360,11 @@ The pizza company’s application has a red theme, a modern sans-serif font, cus The movie company has a dark blue theme, a traditional serif font, custom headings, and its logo. -![movie app](https://codecapsules.io/wp-content/uploads/2023/08/movie-app.png) +![movie app](.gitbook/assets/white-label-your-app-with-code-capsules/movie-app.png) The app also has the option to turn off the navbar, which can be done by setting the `navbar` environment variable to `false`. This would be the result: -![app no nav](https://codecapsules.io/wp-content/uploads/2023/08/app-no-nav.png) +![app no nav](.gitbook/assets/white-label-your-app-with-code-capsules/app-no-nav.png) Stylistic changes can be made by changing colors, font types, text, and logos, but pretty large changes can also be made to the UI by hiding and revealing its parts through variable choices. It’s all up to the designer of the application to decide how far they want to go in providing this kind of customization to their client.