diff --git a/README.md b/README.md index 02ff0bc..07e1698 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,21 @@ # Telegram Mini App Template -## Prerequisites +Template for implementing Telegram Bots with Mini Apps. Deployed instance available at [@tg_mini_app_template_bot](https://t.me/tg_mini_app_template_bot). + +## Features +- Example of creating [Inline Keyboard](https://core.telegram.org/bots/features#inline-keyboards) to interact with the user. Keyboard creation can be found in [main.go](api/main.go) +- Example of adjusting UI styles to the user's current color theme using [ThemeParams](https://core.telegram.org/bots/webapps#themeparams). CSS variable usage can be found in [App.css](ui/src/App.css) +- Example of interaction with [telegram-web-app.js](https://core.telegram.org/bots/webapps#initializing-mini-apps) to show a native alert. Script usage can be found in [App.js](ui/src/App.js) +- [Local environment](#local-environment) with [docker-compose](https://docs.docker.com/compose/), that serves traffic over HTTPS proxy and automatically applies UI changes without rebuilding the container +- [Continious deliviery](#production-deployment) to [Google Cloud Platform](https://cloud.google.com/) + +## Setup prerequisites Telegram Bot token is required to interact with [Telegram Bot API](https://core.telegram.org/bots). To get one, сreate a bot using [@BotFather](https://t.me/botfather). ## Local environment This repository provides an easy-to-use local development environment. Using it you can start writing your bot business logic without spending time on the environment. Local environment includes: -- [ngrok](https://ngrok.com/) reverse proxy to server local mini-app and bot deployment over HTTPs +- [ngrok](https://ngrok.com/) reverse proxy to server local mini-app and bot deployment over HTTPS - [nginx](https://www.nginx.com/) reverse proxy to host both API and UI on one ngrok domain and thus fit into the [free plan](https://ngrok.com/pricing) - React fast refresh to avoid rebuilding docker container on each change of the UI code @@ -14,18 +23,18 @@ Local environment setup: 1. Create an account on [ngrok](https://ngrok.com/) 0. Get a [ngrok auth token](https://ngrok.com/docs/secure-tunnels/ngrok-agent/tunnel-authtokens/) and save it to `NGROK_AUTHTOKEN` variable in `.env` file in the project root directory 0. Claim a [free ngrok domain](https://ngrok.com/blog-post/free-static-domains-ngrok-users) and save it to `NGROK_DOMAIN` variable in `.env` file in the project root directory -0. Copy [Telegram Bot token](#prerequisites) and save it to `TELEGRAM_BOT_TOKEN` variable in `.env` file in the project root directory +0. Copy [Telegram Bot token](#setup-prerequisites) and save it to `TELEGRAM_BOT_TOKEN` variable in `.env` file in the project root directory 0. Install [Docker](https://docs.docker.com/get-docker/) -To start or update environment with latest code changes, use: +To start or update the environment with the latest code changes, use: ```sh docker compose up --build -d ``` -After successful deployment, your local bot API will be available at https://ngrok-domain/api. Use this URL to set bot webhook as described [switching bot environment](#switching-bot-environment). +After successful deployment, your local bot API will be available at https://ngrok-domain/api. Use this URL to set the bot webhook as described [switching bot environment](#switching-bot-environment). ## Production deployment -This repository provides a [workflow](https://docs.github.com/actions) to automatically deploy the code to [Google Cloud Platform](https://cloud.google.com/). Deploy job is triggered on each push to the [main](https://github.com/st-matskevich/tg-mini-app-template/tree/main) branch. +This repository provides a [workflow](https://docs.github.com/actions) to automatically deploy the code to [Google Cloud Platform](https://cloud.google.com/). The deploy job is triggered on each push to the [main](https://github.com/st-matskevich/tg-mini-app-template/tree/main) branch. GCP services used for deployment: - [Cloud Run](https://cloud.google.com/run) to host dockerized API and UI code @@ -48,7 +57,7 @@ Deployment setup: - Secret Manager API (to securely store secrets) 0. Create [Artifact Registry for Docker images](https://cloud.google.com/artifact-registry/docs/docker/store-docker-container-images#create) in `GCP_PROJECT_REGION` region 0. Copy Artifact Registry name and save it to `GCP_ARTIFACT_REGISTRY` GitHub variable -0. [Create a secret](https://cloud.google.com/secret-manager/docs/creating-and-accessing-secrets#create) with [Telegram Bot token](#prerequisites) in Secret Manager +0. [Create a secret](https://cloud.google.com/secret-manager/docs/creating-and-accessing-secrets#create) with [Telegram Bot token](#setup-prerequisites) in Secret Manager 0. Copy the secret name and save it to `GCP_TG_TOKEN_SECRET` GitHub variable 0. Define the following GitHub variables: - `GCP_UI_SERVICE_NAME` with the desired name of UI Cloud Run instance @@ -56,7 +65,7 @@ Deployment setup: - `GCP_API_SERVICE_NAME` with the desired name of API Cloud Run instance - `GCP_API_SERVICE_MAX_INSTANCES` with the desired maximum number of API service instances -After successful deployment, obtain API service URL from either `deploy-api` job results or from [GCP Project Console](https://console.cloud.google.com) and proceed to [switching bot environment](#switching-bot-environment). +After successful deployment, obtain the bot API URL from either `deploy-api` job results or from [GCP Project Console](https://console.cloud.google.com) and proceed to [switching bot environment](#switching-bot-environment). ## Switching bot environment After the bot is either [launched locally](#local-environment) or [deployed in GCP](#production-deployment), Telegram needs to be configured with a proper webhook URL. To set it, use: @@ -64,6 +73,19 @@ After the bot is either [launched locally](#local-environment) or [deployed in G curl https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/setWebhook?url=${BOT_API_URL}/bot ``` +## Template structure +- Project root directory - contains files for [local environment](#local-environment) + - [docker-compose.yml](docker-compose.yml) - docker-compose file to setup [local environment](#local-environment) + - [proxy.template](proxy.template) - nginx config template to route ngrok domain to API and UI containers +- [api](/api/) - contains files for the bot backend written in Go + - [Dockerfile](/api/Dockerfile) - docker file for the API service image + - Other files - minimal Go package layout with HTTP endpoint to handle [Telegram Bot API](https://core.telegram.org/bots/api) calls +- [ui](/ui/) - contains files for the mini app UI written in JS with React + - [dev.dockerfile](/ui/dev.dockerfile) - docker file for the [local environment](#local-environment) to track code changes and updated served UI bundle + - [prod.dockerfile](/ui/prod.dockerfile) - docker file for the [production deployment](#production-deployment) to bundle UI and serve via nginx + - [nginx.template](/ui/nginx.template) - nginx config template for production UI service image + - Other files - React template with minimal changes for the integration with Telegram + ## Built with - [Docker](https://www.docker.com/) - [Go](https://go.dev/) @@ -77,4 +99,4 @@ Distributed under the MIT License. See [LICENSE](LICENSE) for more information. ## Contributing Want a new feature added? Found a bug? -Go ahead an open [a new issue](https://github.com/st-matskevich/tg-mini-app-template/issues/new) or feel free to submit a pull request. \ No newline at end of file +Go ahead and open [a new issue](https://github.com/st-matskevich/tg-mini-app-template/issues/new) or feel free to submit a pull request. \ No newline at end of file diff --git a/ui/src/App.css b/ui/src/App.css index 23a5cd5..493c86e 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -13,6 +13,7 @@ } } +/* Example of adjusting UI styles to the user's current color theme using ThemeParams */ .App-header { background-color: var(--tg-theme-bg-color); min-height: 100vh; diff --git a/ui/src/App.js b/ui/src/App.js index c371f4b..c5b0708 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -3,6 +3,7 @@ import './App.css'; function App() { const onShowTelegramDialog = () => { + // Example of interaction with telegram-web-app.js script to show a native alert window.Telegram.WebApp.showAlert("Message from Telegram Mini App Template Bot"); };