paint-brush
Cómo hacer una interfaz de usuario de una aplicación web con Pythonpor@anvilworks
16,321 lecturas
16,321 lecturas

Cómo hacer una interfaz de usuario de una aplicación web con Python

por Anvil2022/06/08
Read on Terminal Reader
Read this story w/o Javascript

Demasiado Largo; Para Leer

Anvil le permite crear el front-end de su aplicación completamente en Python, sin necesidad de HTML, CSS o JavaScript. En esta publicación de blog, le mostramos cómo.
featured image - Cómo hacer una interfaz de usuario de una aplicación web con Python
Anvil HackerNoon profile picture

Cómo construir una interfaz de usuario web con Python

Anvil le permite crear el front-end de su aplicación completamente en Python, sin necesidad de HTML, CSS o Javascript. Puedes construir tu interfaz de usuario arrastrando y soltando componentes en el diseñador visual de Anvil o agregando componentes usando el código de Python:


Arrastrar y soltar un componente Botón


Veamos cómo puede usar el editor Anvil para crear una interfaz de usuario al convertir esta aplicación en una aplicación de "hola mundo" que saluda a sus usuarios.

En el medio del IDE de Anvil se encuentra el Editor de formularios, que se divide en la Vista de diseño y la Vista de código. A la derecha del editor de Anvil encontrarás la Caja de herramientas .


Un recorrido rápido por el Editor Anvil


Puede arrastrar y soltar componentes, como etiquetas , desde la caja de herramientas para crear su interfaz de usuario. Esta aplicación de hola mundo también necesitará un cuadro de texto para que los usuarios ingresen su nombre:


Arrastrar una etiqueta y un cuadro de texto


Para configurar los componentes, puede editar sus propiedades en el lado derecho del Panel de propiedades . Esto incluye tanto la información que muestra el componente como su estilo:


Cambiar las propiedades de los componentes Etiqueta y Botón


Cada componente es un objeto de Python, por lo que también puede establecer las propiedades del componente en la Vista de código del Editor de formularios :


Cambiar las propiedades de los componentes en el código


Todos los componentes tienen eventos que pueden generar. Por ejemplo, cuando un usuario de su aplicación hace clic en un componente de botón , genera un evento de clic. Podemos crear un método de Python en la vista de código para que se llame cuando esto suceda. En el método de clic de su botón, puede llamar a la función de alert de Anvil para mostrar una alerta que saluda a sus usuarios:


Configuración de un evento de clic para el botón 'Di hola'


Ahora puede hacer clic en ejecutar para probar su aplicación y su interfaz. Sus usuarios ahora pueden ingresar su nombre y al hacer clic en el botón say hi se muestra la alerta:


Ejecutando la aplicación y probando el botón 'Di hola'


Usar el diseñador de arrastrar y soltar no es su única opción para crear interfaces de usuario en Anvil. También puede crear y agregar componentes a su interfaz de usuario directamente en el código:


Agregar un componente a la interfaz de usuario en el código


Anvil viene con todos los componentes habituales de la interfaz de usuario : botones, cuadros de texto, menús desplegables, tablas, etc. Y si eso no es suficiente, puede crear sus propios componentes personalizados y compartirlos con otras aplicaciones.


Para obtener más información sobre cómo crear interfaces de usuario con Anvil, ¿por qué no comienza con nuestro tutorial de formulario de comentarios de 10 minutos?


>>> Empezar


Cree su propia aplicación con Anvil

Si eres nuevo aquí, ¡bienvenido! Anvil es una plataforma para crear aplicaciones web de pila completa con nada más que Python. No hay necesidad de luchar con JS, HTML, CSS, Python, SQL y todos sus marcos, solo constrúyalo todo en Python .


>>> Prueba Anvil