Desarrollo e implementación completos / Sudo Null IT News

Amigos, saludos!

Hoy he preparado un artículo breve y relajante, sobre todo en comparación con los anteriores. Recientemente estuve desarrollando una aplicación FullStack para una pequeña página de destino, donde una de las tareas era vincular un formulario del sitio a un bot de Telegram.

La esencia de la tarea:

El usuario ingresa datos en un formulario en el sitio web, luego de lo cual esta información se envía al cliente a través de un bot de Telegram. Los datos se envían en formato HTML, con un conjunto completo de información. Todo esto tuvo que implementarse en JavaScript puro + HTML + CSS. De este problema nació la idea de este artículo.

¿Qué haremos?

Registraremos un bot de Telegram a través de BotFather, crearemos una página agradable con un formulario de recopilación de datos utilizando el servicio gratuito WebSim.ai y luego configuraremos el formulario para enviar mensajes al bot de Telegram usando solo JavaScript, HTML y CSS.

Una vez que el proyecto esté completo, le mostraré cómo ejecutarlo de forma remota para que todos puedan usar nuestro formulario. Para esto usaremos hosting Escuche la nubeporque es rápido y conveniente gracias al CI/CD incorporado. Para implementar, simplemente ejecute tres comandos en el IDE o simplemente arrastre y suelte archivos de proyecto en la interfaz.

Brevemente sobre el proceso de implementación.

El proceso de implementación se reduce a lo siguiente:

1. Preparar archivos de página.

2. Cree un archivo de instrucciones (le proporcionaré uno).

3. Entregue archivos a Amvera a través de GIT o una interfaz nativa.

Después de simples manipulaciones, nuestro sitio estará disponible a través de un dominio HTTPS gratuito proporcionado por Amvera.

Preparando Telegram para recibir mensajes

En este paso, crearemos un bot de Telegram, obtendremos nuestra ID de Telegram para que el bot sepa a quién enviar mensajes y permitiremos que nos envíe mensajes después de “conocerlo”.

Pasos para crear un bot de Telegram:

1. Ir a BotPadre.

2. Ingrese el comando /newbot (o selecciónelo del menú).

3. Piense en un nombre para el bot: cualquier nombre, en cualquier idioma.

4. Asigna un nombre de usuario único en inglés que termine en “bot”, “BOT” o “Bot” (sin espacios).

5. Guarde el token que emitirá BotFather.

Para permitir que el bot le envíe mensajes, vaya al chat con el bot y haga clic en el botón “INICIAR”.

Obtener ID de Telegram:

Para que el bot te envíe mensajes, necesitas obtener tu ID de Telegram. Una forma es usar un bot. Buscador IDBot Pro:

1. Ve al robot.

2. Haga clic en “Iniciar”.

3. Seleccione “Mi información”.

4. Haga clic en su ID y se copiará en el portapapeles.

Preparando la página con el formulario.

Puede crear la página usted mismo o utilizar el servicio WebSim.ai, que generará el formulario requerido. Usaré WebSim.ai.

Escribí en detalle sobre este servicio en este artículo: “WebSim AI: asistente de IA gratuito para un desarrollo web rápido: es hora de que los desarrolladores front-end se pongan a trabajar”.

Quiero que mi formulario tenga los siguientes campos:

• Nombre (Necesariamente)

• Apellido (Necesariamente)

• Fecha de nacimiento (Necesariamente)

• Pol (se requieren casillas de verificación)

• Pasatiempo (lista desplegable, se requiere al menos una)

• Nota (opcional)

Después de enviar el formulario, el usuario verá un mensaje: “Su formulario ha sido enviado”.

Tarea para la red neuronal WebSim

Puedes escribirlo de forma más sencilla, pero quiero que mi tarea sea lo más clara posible.

Vayamos al sitio web de WebSim, iniciemos sesión e insertemos nuestro nombre industrial en el campo de entrada de la solicitud.

Veamos el resultado

Por favor agregue más estilos. Además, permítale corregirnos el bloque de pasatiempos, agregando la capacidad de marcar casillas de verificación y trabajar en un formato de lista desplegable.

Nueva tarea para la red neuronal WebSim

Veamos el resultado

Ahora solo nos falta vincular el envío de este formulario a nuestro telegrama. Preguntemos al servicio sobre esto, ya que WebSim funciona muy bien con JavaScript. Después, si es necesario, ajustaremos el JS a nuestra medida.

Me gustaría que el mensaje se envíe al bot con formato HTML, así que configuremos la tarea de esta manera:

📩 Вам новая заявка:
<b>Имя:</b> Иван
<b>Фамилия:</b> Иванов
<b>Дата рождения:</b> 01.01.1990
<b>Пол:</b> Мужской
<b>Хобби:</b> Чтение, Путешествия
<b>Примечание:</b> Люблю кодить!

Completemos el formulario

Te enviaremos el formulario

Miramos el mensaje

Genial, todo funciona para nosotros.

Ahora descarguemos el resultado y preparémoslo para la implementación.

Para descargar, haga clic en los tres puntos en la esquina superior derecha y haga clic en “Descargar”.

Llamemos al archivo guardado index.html

Ahora tenemos en nuestras manos el código completo del proyecto, que podemos verificar presionando CTRL + U.

Preparando el proyecto para su implementación.

Ahora, en general, estamos listos para la implementación, pero me gustaría poner las cosas en orden en el código. Por lo tanto, dividiré este archivo en una plantilla HTML y en archivos estáticos (JS y CSS). Además, antes de la implementación, necesitaremos crear un pequeño archivo con instrucciones para iniciar correctamente nuestra página con el formulario en la nube.

La estructura que se me ocurrió es la siguiente.

En el directorio raíz del proyecto hay un archivo index.html, así como una carpeta estática que contiene dos archivos:

• script.js es un archivo con código JavaScript.

• style.css es un archivo que contiene estilos para diseño.

Simplemente transfirí los estilos y el código JS de los proporcionados por WebSim.

plantilla html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Личная анкета</title>

    <!-- Импорт стилей -->
    <link rel="stylesheet" href="
</head>
<body>
<div class="container">
    <h1>Личная анкета</h1>
    <form id="personalForm">
        <div class="form-group">
            <label for="firstName" class="required">Имя:</label>
            <input type="text" id="firstName" name="firstName" required>
            <div class="error" id="firstNameError"></div>
        </div>

        <div class="form-group">
            <label for="lastName" class="required">Фамилия:</label>
            <input type="text" id="lastName" name="lastName" required>
            <div class="error" id="lastNameError"></div>
        </div>

        <div class="form-group">
            <label for="birthDate" class="required">Дата рождения:</label>
            <input type="date" id="birthDate" name="birthDate" required>
            <div class="error" id="birthDateError"></div>
        </div>

        <div class="form-group">
            <label class="required">Пол:</label>
            <div class="radio-group">
                <label>
                    <input type="radio" name="gender" value="male" required> Мужской
                </label>
                <label>
                    <input type="radio" name="gender" value="female" required> Женский
                </label>
            </div>
            <div class="error" id="genderError"></div>
        </div>

        <div class="form-group">
            <label for="hobbies" class="required">Хобби:</label>
            <div class="multiselect">
                <button type="button" class="multiselect-btn" id="hobbiesBtn">Выберите хобби</button>
                <div class="multiselect-dropdown" id="hobbiesDropdown">
                    <div class="multiselect-option">
                        <input type="checkbox" id="hobby-reading" value="reading">
                        <label for="hobby-reading">Чтение</label>
                    </div>
                    <div class="multiselect-option">
                        <input type="checkbox" id="hobby-sports" value="sports">
                        <label for="hobby-sports">Спорт</label>
                    </div>
                    <div class="multiselect-option">
                        <input type="checkbox" id="hobby-music" value="music">
                        <label for="hobby-music">Музыка</label>
                    </div>
                    <div class="multiselect-option">
                        <input type="checkbox" id="hobby-travel" value="travel">
                        <label for="hobby-travel">Путешествия</label>
                    </div>
                </div>
            </div>
            <div class="error" id="hobbiesError"></div>
        </div>

        <div class="form-group">
            <label for="notes">Примечание:</label>
            <textarea id="notes" name="notes"></textarea>
        </div>

        <button type="submit">Отправить</button>
    </form>
</div>

<div id="modal" class="modal">
    <div class="modal-content">
        <p>Ваша анкета отправлена</p>
    </div>
</div>

<!-- Импорт JavaScript -->
<script src="
</body>
</html>

Aquí hay un formulario HTML estándar. Se debe prestar especial atención a la importación de estilos y archivos JavaScript. Todo el código fue escrito en un solo archivo.

Importar estilos:

 <link rel="stylesheet" href="

Importar JavaScript:

<script src="

No proporcionaré el código de estilo aquí, ya que demostrar estilos no es el objetivo en sí de este artículo. Demostraré el código JS en parte, es decir, el bloque con el envío de datos desde el formulario al bot de Telegram.

Aquí hay un fragmento de código que se encarga de enviar los datos recopilados al bot de Telegram, con comentarios:

// Функция для отправки данных в Telegram
function sendDataToTelegram(formData) {
    const botToken = '6845698347:AAFsSq0EAlU42lEапfue7R8RtVtT397N9BQ'; // Токен вашего бота
    const chatId = '5120801744'; // ID получателя (пользователя)
    const apiUrl = ` // URL для отправки сообщения

    // Формируем сообщение в формате HTML
    const message = `
📩 Вам новая заявка:
<b>Имя:</b> ${formData.firstName}
<b>Фамилия:</b> ${formData.lastName}
<b>Дата рождения:</b> ${formData.birthDate}
<b>Пол:</b> ${formData.gender === 'male' ? 'Мужской' : 'Женский'}
<b>Хобби:</b> ${formData.hobbies.join(', ')}
<b>Примечание:</b> ${formData.notes || 'Не указано'}
    `;

    // Параметры, которые будем отправлять
    const params = {
        chat_id: chatId, // ID чата
        text: message, // Текст сообщения
        parse_mode: 'HTML' // Режим парсинга HTML
    };

    // Отправляем данные с помощью fetch API
    return fetch(apiUrl, {
        method: 'POST', // Метод отправки
        headers: {
            'Content-Type': 'application/json', // Указываем тип содержимого
        },
        body: JSON.stringify(params) // Преобразуем параметры в JSON
    }).then(response => response.json()); // Возвращаем ответ в формате JSON
}

// Обработчик события отправки формы
form.addEventListener('submit', (e) => {
    e.preventDefault(); // Отменяем стандартное поведение формы
    if (validateForm()) { // Проверяем форму на валидность
        const formData = { // Собираем данные из формы
            firstName: document.getElementById('firstName').value,
            lastName: document.getElementById('lastName').value,
            birthDate: document.getElementById('birthDate').value,
            gender: document.querySelector('input(name="gender"):checked').value,
            hobbies: Array.from(hobbiesCheckboxes)
                .filter(checkbox => checkbox.checked)
                .map(checkbox => checkbox.nextElementSibling.textContent),
            notes: document.getElementById('notes').value
        };

        // Показать состояние загрузки
        modal.innerHTML = '<div class="modal-content"><p>Отправка данных...</p></div>';
        modal.style.display = 'block';

        // Отправляем данные в Telegram
        sendDataToTelegram(formData)
            .then(result => {
                if (result.ok) {
                    // Если данные успешно отправлены
                    modal.innerHTML = '<div class="modal-content"><p>Ваша анкета успешно отправлена</p></div>';
                } else {
                    // Если произошла ошибка при отправке
                    modal.innerHTML = '<div class="modal-content"><p>Ошибка при отправке анкеты. Пожалуйста, попробуйте еще раз.</p></div>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // Обработка ошибки
                modal.innerHTML = '<div class="modal-content"><p>Произошла ошибка. Пожалуйста, попробуйте позже.</p></div>';
            })
            .finally(() => {
                // Закрываем модальное окно и сбрасываем форму через 3 секунды
                setTimeout(() => {
                    modal.style.display = 'none';
                    form.reset(); // Сброс формы
                    updateHobbiesButton(); // Обновляем текст кнопки хобби
                }, 3000);
            });
    }
});

Comentarios de código

• enviar datos a telegrama: Función que envía datos del formulario a Telegram.

• tokenbot y ID de chat: Variables que contienen el token del bot y el ID del chat donde se enviará el mensaje.

• mensaje: Formatear un mensaje usando HTML para resaltar datos.

• buscar: Se utiliza para enviar datos al servidor de Telegram. La respuesta se convierte a JSON.

• Controlador de eventos de envío de formulario: Anula el comportamiento predeterminado del formulario, recopila datos y llama a la función para enviar datos a Telegram.

• ventana modal: Muestra el estado de envío y el mensaje sobre el éxito o fracaso del envío de datos.

Este código garantiza que los datos del formulario se envíen a Telegram con la validación y el manejo del estado necesarios.

El código completo de este proyecto, así como otros contenidos exclusivos que no publico en Habré, se pueden encontrar en mi canal de Telegram “La manera fácil de usar Python».

Implementación del proyecto

Y, al final de esta pequeña guía, implementemos nuestro proyecto de forma remota. Para aterrizar utilizaré el servicio Amvera Cloud. Y antes de comenzar con la implementación, preparemos un pequeño archivo con instrucciones para ejecutar el proyecto.

Crearemos un Dockerfile y si no entiende esto en absoluto, está bien. Simplemente pegue mi código y todo funcionará.

El Dockerfile debe colocarse al mismo nivel que el archivo index.html. Aquí está el contenido:

# Используем официальный образ NGINX в качестве базового
FROM nginx:alpine

# Удаляем дефолтный файл конфигурации NGINX
RUN rm /usr/share/nginx/html/index.html

# Копируем наш index.html в папку с HTML файлами NGINX
COPY index.html /usr/share/nginx/html/

# Копируем статические файлы из папки static в NGINX
COPY static /usr/share/nginx/html/static

# Экспонируем порт 80
EXPOSE 80

# Запускаем NGINX
CMD ("nginx", "-g", "daemon off;")

Este Dockerfile crea un contenedor con un servidor web NGINX que servirá su propio archivo HTML (index.html) en el puerto 80. Garantiza que su página web se ejecute correctamente en Amvera y le permite vincularle un nombre de dominio gratuito habilitado para HTTPS. . lo que nos interesa.

Comencemos el despliegue

• Regístrese en el sitio Escuche la nube si no hubiera registro. Por registrarse recibirá 111 rublos como regalo en su cuenta principal.

• vamos a sección de proyectos

• Haga clic en “Crear”. A continuación, asigne un nombre al proyecto y seleccione un plan tarifario. “Prueba” me vendrá bien. Luego haga clic en “Siguiente”.

• Ahora debes decidir el formato para entregar los archivos al proyecto. Hay una opción “Vía GIT” y “Vía Interfaz”. Como el proyecto no es grande, usaré la segunda opción. A continuación, bastará con descargar todos los archivos del proyecto en una ventana de descarga especial.

• Luego haga clic en “Siguiente” y en la nueva pantalla “Finalizar”, ya que ya hemos preparado todas las configuraciones necesarias.

• Ahora solo queda activar el nombre de dominio. Para hacer esto, ingrese al proyecto y abra la pestaña “Configuración”. A continuación, haz clic en “Agregar dominio” y actívalo.

Eso es suficiente. Ahora todo lo que tienes que hacer es esperar un par de minutos y cuando hagas clic en el nombre del dominio, nuestro sitio web estará disponible con la capacidad de enviar.

Tengo este enlace: https://formahabr-yakvenalex.amvera.io/. Sigamos el enlace y ejecutemos las pruebas.

Resolviendo un problema de seguridad

En la implementación actual, aunque la aplicación funciona, existe una importante vulnerabilidad de seguridad en el token del bot. Cualquiera que abra el panel de desarrollador en un navegador podrá interceptar este token. Esto es inaceptable en proyectos de trabajo. Para solucionar el problema, sugiero usar API rápida para crear un backend simple que oculte de manera confiable el token del bot.

Nuevo enfoque

Crearemos una aplicación de servidor en API rápida con dos funciones principales:

1. Representación de la página de inicio (índice.html).

2. Procesamiento de solicitudes POST con un formulario.

Ahora los datos del formulario no se enviarán directamente a Telegram, sino a través del punto final del servidor. Esto mejorará la seguridad al ocultar datos críticos (como un token de bot).

Nueva estructura del proyecto

FastAPI es flexible, pero se recomienda ceñirse a la estructura estándar:

El código JavaScript para enviar los datos ahora tendrá este aspecto:

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (validateForm()) {
        const formData = {
            firstName: document.getElementById('firstName').value,
            lastName: document.getElementById('lastName').value,
            birthDate: document.getElementById('birthDate').value,
            gender: document.querySelector('input(name="gender"):checked').value,
            hobbies: Array.from(hobbiesCheckboxes)
                .filter(checkbox => checkbox.checked)
                .map(checkbox => checkbox.nextElementSibling.textContent),
            notes: document.getElementById('notes').value
        };

        // Показать состояние загрузки
        modal.innerHTML = '<div class="modal-content"><p>Отправка данных...</p></div>';
        modal.style.display = 'block';

        // Отправка данных на сервер FastAPI
        try {
            const response = await fetch('/send-data/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            });

            const result = await response.json();
            if (result.ok) {
                modal.innerHTML = '<div class="modal-content"><p>Ваша анкета успешно отправлена</p></div>';
            } else {
                const errorMessage = result.error || 'Ошибка при отправке анкеты. Пожалуйста, попробуйте еще раз.';
                modal.innerHTML = `<div class="modal-content"><p>${errorMessage}</p></div>`;
            }
        } catch (error) {
            console.error('Error:', error);
            modal.innerHTML = '<div class="modal-content"><p>Произошла ошибка. Пожалуйста, попробуйте позже.</p></div>';
        } finally {
            setTimeout(() => {
                modal.style.display = 'none';
                form.reset();
                updateHobbiesButton();
            }, 3000);
        }
    }
});

Archivo requisitos.txt

Para el código Python, creemos un archivo. requirements.txt con las siguientes dependencias:

fastapi==0.115.0
uvicorn==0.31.0
python-decouple==3.8
httpx==1.0.0b0
jinja2==3.1.4

• API rápida – el marco principal de backend.

• Uvicornio — servidor para ejecutar la aplicación.

• desacoplamiento de Python — para el almacenamiento seguro del token en .env.

• httpx – para comunicación asincrónica con la API de Telegram.

• Jinja2 — para renderizar plantillas HTML.

Comando de instalación de dependencia:

pip install -r requirements.txt

El archivo .env

Crear un archivo .env para almacenar datos confidenciales:

BOT_TOKEN=тут_ваш_токен
CHAT_ID=тут_id_чата

Lógica de fondo

Toda la lógica de la aplicación estará en el archivo. main.py:

from decouple import config
from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
import httpx
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Разрешаем CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=("*"),  # Разрешить запросы с любых источников
    allow_credentials=True,
    allow_methods=("*"),  # Разрешить все методы
    allow_headers=("*"),  # Разрешить все заголовки
)

# Настройка статических файлов
app.mount("/static", StaticFiles(directory="static"), name="static")

# Настройка шаблонов
templates = Jinja2Templates(directory="templates")


@app.get("/", response_class=HTMLResponse)
async def read_index(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})

  
@app.post("/send-data/")
async def send_data(form_data: dict):
    bot_token = config('BOT_TOKEN')
    chat_id = config('CHAT_ID')
    api_url = f'
    
    message = f"""
📩 Вам новая заявка:
<b>Имя:</b> {form_data('firstName')}
<b>Фамилия:</b> {form_data('lastName')}
<b>Дата рождения:</b> {form_data('birthDate')}
<b>Пол:</b> {'Мужской' if form_data('gender') == 'male' else 'Женский'}
<b>Хобби:</b> {', '.join(form_data('hobbies'))}
<b>Примечание:</b> {form_data.get('notes', 'Не указано')}
    """

    params = {
        "chat_id": chat_id,
        "text": message,
        "parse_mode": "HTML"
    }
    
    async with httpx.AsyncClient() as client:
        response = await client.post(api_url, json=params)
        return {"ok": response.status_code == 200}

Comentarios de código

• CORS: Hemos agregado CORSMiddlewarepara permitir solicitudes de cualquier fuente. Para mejorar la seguridad, puede limitar los dominios permitidos.

• Archivos estáticos: Carpeta de montajes FastAPI /static para trabajar con CSS y JavaScript.

• Solicitud asincrónica: Nosotros usamos httpx.AsyncClient para realizar una solicitud asincrónica a la API de Telegram.

• Plantillas: Para representar páginas HTML utilizamos Jinja2.

El proyecto ahora es seguro y los datos críticos, como el token del bot, están ocultos de forma segura en el servidor. El token ya no es visible en el código fuente de la interfaz, lo que evita que se vea comprometido.

Despliegue de un nuevo formato

Dado que nuestra lógica de diseño ahora ha cambiado, necesitamos actualizar el archivo de instrucciones de implementación a Amvera Cloud. Por supuesto, puedes volver a utilizar Dockerfile, pero quiero mostrarte un enfoque diferente.

Creemos ahora un archivo amvera.yml con este contenido.

meta:
  environment: python
  toolchain:
    name: pip
    version: 3.12
build:
  requirementsPath: requirements.txt
run:
  persistenceMount: /data
  containerPort: 8000
  command: uvicorn main:app --host 0.0.0.0 --port 8000

En este archivo hemos escrito instrucciones estándar para iniciar una aplicación FastApi.

Ahora todo lo que tenemos que hacer es entregar los archivos del proyecto al servidor de Amvera para que obtengamos la siguiente estructura:

Es decir, ya no necesitamos el Dockerfile. Después de la entrega, no olvide reconstruir el proyecto.

Conclusión

En este artículo, no intenté convencerlo de que crear sitios web utilizando redes neuronales sea la única forma. Mi objetivo era mostrar cómo puedes crear rápida y fácilmente una interfaz para tus aplicaciones sin complicaciones innecesarias.

Además, demostré cómo integrar formularios de captura de datos en los bots de Telegram sin utilizar lenguajes de backend como Python o PHP, y expliqué claramente por qué es mejor no hacerlo.

Espero que esta información haya sido útil e interesante para ti. Si es así, dale me gusta y comenta; me motiva a crear contenido más útil y educativo para ti.

Nos vemos pronto.