Flet Curso: 9 Primera Aplicación Flet Escrita en Python - Contador de Valores Numéricos
Summary
TLDREn este tutorial, se explica cómo construir aplicaciones de escritorio y web utilizando Fleet y Python. Se crea una aplicación de contador sencilla, importando módulos de Fleet y utilizando componentes como Button, Page y TextField. Se detalla el proceso de programar funciones para responder a eventos de clic, y se muestra cómo organizar la interfaz con elementos centrados. Finalmente, se menciona la ejecución de la aplicación y se alude a futuras explicaciones sobre la resolución de problemas encontrados.
Takeaways
- 💻 Se está explicando cómo construir una aplicación de escritorio y web utilizando Fleet y Python.
- 📁 Se sugiere la creación de una carpeta llamada 'demo' y un archivo 'counter.py' para el proyecto.
- 🔍 Se menciona que Fleet soporta Python y pronto incluirá soporte para otros lenguajes de programación.
- 📝 Se proporciona un ejemplo de una aplicación contadora simple utilizando el módulo Fleet.
- 🛠 Se detallan los pasos para importar módulos y elementos de Fleet, como Button, Page y TextField.
- 👨💻 Se describe la creación de una función 'main' que toma un parámetro de tipo 'Page' y configura la interfaz de usuario.
- 🔢 Se implementa un campo de texto con un valor inicial de cero y se ajusta su alineación y tamaño.
- 🔄 Se programan funciones para responder a eventos de clic en botones, incrementando y decrementando el contador.
- 🎯 Se explica cómo agregar elementos a la página y configurar su disposición centralizada.
- 📜 Se indica la necesidad de ejecutar la aplicación a través de la línea de comandos con 'python counter.py'.
- 🔧 Se sugiere que hay un problema con el contador no incrementándose y se promete abordarlo en el siguiente vídeo.
Q & A
¿Qué tipo de aplicación se está construyendo en el guion?
-Se está construyendo una aplicación de escritorio y una aplicación web utilizando Fleet y Python.
¿Qué herramienta de desarrollo se utiliza para crear la aplicación?
-Se utiliza Visual Studio Code como herramienta de desarrollo para crear la aplicación.
¿Cómo se llama la carpeta creada para el proyecto?
-La carpeta creada para el proyecto se llama 'demo'.
¿Cuál es el nombre del archivo creado dentro de la carpeta 'demo'?
-El nombre del archivo creado es 'counter.py'.
¿Qué módulos se importan desde Fleet para construir la aplicación?
-Se importan módulos como Button, Page, TextField y Icon desde Fleet.
¿Cuál es la función principal que se define en el script?
-La función principal que se define es 'main', la cual recibe un parámetro de tipo Page.
¿Cómo se configura el campo de texto 'number' en la aplicación?
-El campo de texto 'number' se configura con un valor inicial de cero, alineación al derecho y un ancho máximo de 100 unidades.
¿Qué función se crea para manejar el clic del botón que disminuye el valor?
-Se crea una función llamada 'click' que disminuye el valor del campo de texto 'number' en uno cada vez que se hace clic.
¿Cómo se agregan los elementos a la página en la función 'main'?
-Los elementos se agregan a la página utilizando la función 'page' y colocándolos en una fila, con un botón, el campo de texto y otro botón.
¿Cómo se ejecuta la aplicación una vez creada?
-La aplicación se ejecuta desde la línea de comandos utilizando el comando 'python counter.py'.
¿Qué problema se presenta al ejecutar la aplicación por primera vez?
-El problema presentado al ejecutar la aplicación es que el contador no se incrementa como se espera.
Outlines
💻 Creación de una aplicación de escritorio y web con Fleet y Python
El primer párrafo explica cómo construir una aplicación de escritorio y web utilizando Fleet y Python. Se menciona la organización de la ventana de trabajo en Visual Studio Code y la creación de una carpeta llamada 'demo' con un archivo 'counter.py'. Se habla de la posibilidad de escribir aplicaciones Flex con Python y se anticipa el soporte para otros lenguajes de programación. Se describe el proceso paso a paso, incluyendo la importación de módulos, la creación de una función 'main' que recibe un parámetro de tipo 'page', y la configuración de la página con un título y alineación vertical. Se detalla la creación de un campo de texto con un valor inicial de cero, alineado a la derecha y un ancho máximo de 100 unidades. Además, se menciona la creación de una función 'click' que responde al clic de un botón, incrementando o decrementando el valor del campo de texto.
🔗 Añadir elementos y acciones en la aplicación con Fleet
El segundo párrafo se centra en la adición de elementos y acciones en la aplicación. Se describe cómo agregar un botón con un texto específico y asociar una acción al clic del botón, en este caso, la función 'minus_click'. Se menciona la referencia a la función como una variable y no como una llamada directa. Se detalla la creación de un campo de texto y la adición de otro botón con un icono. Se indica cómo ubicar los elementos en el centro de la página y se habla de la necesidad de corregir un error visual en la función 'main'. Finalmente, se explica cómo ejecutar la aplicación desde la línea de comandos con 'python counter.py' y se menciona la necesidad de tener un ambiente virtual activo, como se explicó en videos anteriores. Se menciona que la aplicación se ejecuta correctamente, pero hay un problema con el incremento del contador que se promete resolver en el siguiente vídeo.
Mindmap
Keywords
💡Fleet
💡Python
💡Aplicación de escritorio
💡Aplicación web
💡Visual Studio Code
💡Función
💡Eventos
💡Interfaz de usuario (UI)
💡Elementos de la interfaz
💡Lenguaje de marcado
Highlights
Construcción de una aplicación de escritorio y web utilizando Fleet y Python.
Organización de la ventana de Visual Studio Code y ubicación de la ventana de Python.
Creación de una carpeta llamada 'demo' y un archivo 'counter.py'.
Importación de módulos de Fleet y elementos como Button, Page y TextField.
Desactivación del copilot para escribir código sin asistencia.
Función 'main' que toma un parámetro de tipo Page y establece su título.
Alineación vertical y centro de los elementos en la página.
Creación de un campo de texto con alineación a la derecha y ancho máximo de 100 unidades.
Definición de una función 'click' para responder al clic de un botón.
Incremento y decremento del valor del campo de texto mediante funciones 'minus_click' y 'plus_click'.
Adición de elementos a la interfaz de la página y creación de un botón con texto y acción al clic.
Ubicación de los elementos al centro de la página con 'layout.align_items'.
Ejecución de la aplicación mediante la línea de comandos 'python counter.py'.
Necesidad de tener un ambiente virtual activo para ejecutar la aplicación.
Observación de que la aplicación hereda el tema de colores del sistema operativo.
Problema encontrado en la ejecución de la aplicación: el contador no se incrementa.
Promesa de explorar y resolver el problema en el siguiente vídeo.
Transcripts
muy bien entonces
vamos a entender Cómo construir una
aplicación como la que se muestra aquí
en pantalla una aplicación de escritorio
y una aplicación web utilizando
fleet y pyt
ubicaré esta ventana aquí y la de python
a la derecha voy a dejar el tamaño
estándar ahí el zoom por defecto
Ok entonces voy a organizar esto por
carpetas aumentaría un momento otra vez
el tamaño del editor de visual Studio
code entonces aquí
escribamos creemos una carpeta que se
llame demo
de modo inicial contador
y ahí creamos un archivo que se llame
counter.pey vamos a dejar el mismo
nombre que nos sugieren aquí counter.pey
nos mencionan aquí que por el momento
podemos escribir aplicaciones Flex
utilizando python para otros lenguajes
de programación se contará con soporte
muy pronto aquí tenemos el ejemplo de
una aplicación que sirve como contador
Entonces vamos a realizar el paso a paso
importamos Flex el módulo fleet y desde
fleet importamos varios elementos voy a
Desactivar Desactivar copilot para que
no nos digamos adivine el código
desde ahí importamos hay con Button
page Road y también
techfield
observemos que el editor visual Studio
code nos ayuda a identificar los
elementos las clases quieren
incorporadas en ese módulo listo
necesitamos también Ikon ya está creemos
un una función que tenga un parámetro
que se llame page de tipo page Es decir
de esta clase que se está importando
desde flete es una función común y
corriente decimos Main le pasamos un
parámetro al que llamaremos page que es
de tipo page
Ok la página tendrá un título digamos
page punto title le asignamos fleet
Counter fleet Counter nomás
page punto vertical alivement Esta es la
alineación vertical y escribimos que
todos los elementos queden en el centro
creemos un campo de texto que se llame
number voy a dejar el mismo nombre de
variable que sugieren en el código y
creamos un objeto de la clase textiel el
valor inicial será cero sí será cero el
la alineación del texto quedará a la
derecha texaline
right listo y el ancho máximo podría ser
serían 100 unidades
dentro de esta función podemos tener en
cápsula da otra función que permita
responder
al clic sobre un botón vamos a decir
deff click
y esta función recibe ciertos esta esta
función recibe información a la que
llamaremos event event básicamente es un
nombre variable que captura los datos de
ese evento Cuando hacemos clic en algo
entonces el campo text number tendrá un
valor que será el valor actual que tiene
el campo convertido entero ahí
utilizamos value que es una propiedad
para extraer el valor de ese campo y le
restamos 1 esto lo podríamos duplicar
aquí sería
Plus clic
Plus clic Y en lugar de
reducir aumentamos es todo lo que se
requiere ok
vale a la interfaz a la página
necesitamos agregar ciertos elementos
entonces decimos page at abrimos
paréntesis y agregamos una fila Ahí
estamos creando un objeto que tiene los
siguientes elementos
listo
entonces hay un botón y con botón
esto sería el Digamos como el texto que
tendría el elemento es para que tenga
esta apariencia observemos
si el de
que tenga esa apariencia hoy quemonos
nuevamente acá Cuál va a ser la acción
cuando se le haga clic a Ese botón
ejecutar la función minus clic pero aquí
observemos que no estamos Llamando a la
función simplemente la estamos
referenciando como si fuera una variable
después de Ese
botón que tiene apariencia de icono
agregamos el campo de texto
esto de aquí este botón lo podemos
copiar pegar y adaptar copiar pegar y
adaptar es un proceso que requiere
esfuerzo aquí utilizamos el icono at
para que represente esto
Vale
entonces primero aparece este icono
luego el campo de texto y luego el otro
botón
bien hasta ahí vamos bien
después de agregar los elementos le
indicamos que lo que los ubique al
centro a lightman Center ahí la cadena
está escrita con comillas dobles basta
con escribir con comillas simples y no
hay problema
bien por fuera de la función por fuera
de la función
hacemos lo siguiente
decimos fleet punto app y pasamos como
argumento Target Igual amén esta función
que está aquí no Esto está en gris como
opaco es porque aquí nos falta colocarle
Plus clic un error que identifique así
de forma visual
Vale entonces qué debemos hacer para
ejecutar la aplicación escribir en la
línea de comandos python counter.pe
vamos a ver qué tal nos ve es la primera
vez que voy a ejecutar una aplicación de
tipo fleet vale Yo estoy aprendiendo
también esta es una forma digamos de
promover el aprendizaje
python Counter bueno debemos pasarnos a
la carpeta
nosotros creamos una carpeta que se
llama demo inicial contador listo y ahí
ya podemos escribir python Counter
llegue a tener en cuenta es necesario
tener activo el ambiente virtual en los
vídeos anteriores expliqué Cómo realizar
esa tarea exactamente
en el vídeo
5 en el vídeo 6
Ok de la lista de reproducción de este
curso regresamos aquí a la terminal
presionamos enter
esperamos unos segundos y aquí se lanza
la aplicación tiene esta apariencia
oscura oscura quizás tenga que ver el
tema de colores del sistema operativo
las ventanas se ven así en esta
computadora entonces toma digamos hereda
hereda esas capacidades de o esa
configuración de apariencia de tema de
colores del sistema operativo pasa algo
no se está incrementando
qué ocurrirá por lo menos Ahí la
aplicación ya se ejecutó
que estará ocurriendo a ver
no hay error siquiera revisaremos a ver
qué pasa
en el siguiente vídeo para entender Cómo
podemos resolver ese asunto de que no
aumenta el contador
muy bien
hasta la próxima
Voir Plus de Vidéos Connexes
Flet Curso: 11 La Aplicación Flet Escrita en Python También se Ejecuta en el Navegador Web
Flet Curso: 10 Ahora la Aplicación es Funcional - Los Botones Decrementan y Incrementan el Contador
Flet Curso: 13 Empezando el Entendimiento de la Estructura Básica de una Aplicación Tipo Flet
Flet Curso: 15 Usar la Instrucción app.flet(...) para Abrir la Aplicación en el Navegador Web
Curso Android. Trabajo con API y Eventos II. Vídeo 21
ESP32 FIREBASE 4 (APP INVENTOR)
5.0 / 5 (0 votes)