Como crear una aplicación en kivy - python - parte 1

Bienvenidos a una serie de entradas donde estaré explicando como crear una aplicación usando kivy- python. Lo que desarrollaremos sera una aplicación para escribir, editar o eliminar notas.  El objetivo de este tutorial es mostrarte lo sencillo que es poder desarrollar una app que funcione tanto en android como windows, linux y IOS.

Todo esto gracias a la biblioteca kivy que nos ofrece el fácil y rápido desarrollo de apps para los sistemas operativos ya mencionados. el código fue creado por tito. yo solo explicare a detalle como funciona, asumiendo que eres nuevo en kivy o python y quieres aprender y explorar, si ya tienes una base te sera mas fácil entender el tutorial.

Nuestra app quedara así:

Requisitos para este tutorial

1. Tener instalado python 3.6
2. Tener instalado kivy ultima version y sus dependencias
3. Tener un IDE para trabajar. (Recomiendo pycharm)

Empezaremos creando nuestros archivos main.py y note.kv. como ya sabemos en main.py es donde programamos nuestra app y note.kv nos servirá para la parte gráfica de nuestra app.


Ya creado nuestros dos archivos lo primero que haremos sera exportar desde kivy unos módulos que nos servirán para crear partes gráficas y otros que son base para nuestra app. si quieres saber todos los módulos que kivy tiene visita kivy.org. Abrimos nuestro archivos principal main.py y agregamos:

from kivy.app import App

Aquí importamos en modulo App que es base de cualquier aplicación desarrollada en kivy. a esto le sumamos

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen, SlideTransition
from kivy.properties import ListProperty, StringProperty, \
        NumericProperty, BooleanProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.clock import Clock 

En módulos ScreenManager nos servirá para el manejo de cada ventana creada usando Screen y SlideTransition se encarga del efecto que veremos al cambiar de una ventana a otra. También importamos unas propiedades como ListProperty, StringProperty, NumericProperty, BooleanProperty estas las usaremos mas adelante y otros módulos que cuando los implementemos te entenderás para que sirven.

 Ahora crearemos los objetos que se encargaran de darle sentido a la app, crearemos 4 objetos. MutableTextInput que sera donde escribiremos nuestras notas, este objeto lo veremos dentro de NoteView que además nos permitirá tener una vista previa antes de editar nuestra nota.
NoteListItem donde veremos las notas ya creadas, Notes que sera nuestra ventana donde colocaremos lo anterior.

Recuerda que para crear un objeto usamos class Nombre_de_Objeto(aquía_rgumentos):  Nuestro código seria:

class MutableTextInput(FloatLayout):
    pass
class NoteView(Screen):
    pass
class NoteListItem(BoxLayout):
    pass
class Notes(Screen):
    pass

Por ultimo agregamos

class NoteApp(App):
    def build(self):
        pass
if __name__ == '__main__':
    NoteApp().run()

con esto codigo nuestra app correría sin ningún problema, eso si no veríamos nada mas que una pantalla negra, lo que acabamos de hacer es la implementación de modulo app, que se encargara de la creación de nuestra aplicación es por eso que agregamos def build(self):  Con este código le decimos a kivy que se encargue de todo lo que nuestra app necesite para crear todos los gráficos o cosas que el sistema necesita para que nuestra app corra perfectamente en android, windows, linux o IOS.

Ahora abrimos nuestro segundo archivo note.kv y Agregamos:

#:kivy 1.7.1
<NoteView>:
<NoteListItem>:
<Notes>:

En este caso empezaremos referenciando los objetos principales, ejemplo <NoteView>: estará conectado con nuestra objeto class NoteView(Screen): Recuerda que el lenguaje kv es para el fácil desarrollo de interfaz grafica, por lo tanto nos permite agregar widgets a nuestro objeto. ejemplo si queremos agregar un botón a NoteView(Screen): lo haremos de esta manera:

<NoteView>:
    Button:
        text: "Guardar"
        on_press: root.do_save()
        font_size: 32

Esto es solo un ejemplo de como se trabaja con el lenguaje kv. (No agregues esto al proyecto), Hasta aquí a llegado la parte 1 de como crear una aplicación usando kivy, en los proximos días publicare la siguiente parte.

Por favor cualquier duda o sugerencia dejanos un comentario. Gracias

Continuar leyendo ....

Conceptos básicos de python 3 - Parte 1

Bienvenido a una series de entradas donde explicaremos todo los conceptos básicos de python, donde veremos que fácil es aprender este lenguaje de programación, que nos hace fácil el crear scripts, aplicaciones, programas, páginas web y juegos.

Python cuenta con dos versiones la versión 2.7 (legendaria) y la versión 3.6 (nueva, moderna y sencilla). El pasar de una versión a otra no es cosa del otro mundo. pero el aprender la sintaxis y la forma en que python 3 trabaja nos ayudara a que cualquier proyecto que realicemos sea capaz de correr en cualquier versión superior a 3, la mas actual 3.6.

Empezemos....

Simples operaciones 

Para crear cualquier calculo simplemete escribimos el calculo que queremos realizar directamete el la consola. ejemplo:

A  diferencia de python 2.7 que cuando realizamos una operación como esta:  8/3 como resultado nos daba un numero entero en este caso 3,  en python 3 tendremos un resultado mas real.

Uso de Strings 

El uso de string es tan sencillo como esto:

Fácil uso de input y output

En este ejemplo veras que siempre es usar usar input("") para obtener información de usuario y de ahí imprimirlo usando la función print(""). ejemplo

Operaciones de String

En python podemos sumar strings ejemplo: "hola" + "mundo" daría como resultado una sola string "hola mundo". También podemos hacer multiplicaciones ejemplo. "Hola "* 3 resultado Hola Hola Hola. 

Conversión de datos

Ejemplo si tratamos de sumar "2" + "3" resultado "23" y que al estar entre comillas python las toma como string, esto lo solucionamos convirtiendo los strings  a integer. ejemplo: int("2")+ int("3") resultado 5. También podemos convertir datos que le pedimos a usuario ejemplo:

int(input("ingresa número entero")) o float(input("ingresa numero con decimal).

Declaración de Variables

Una de las cosas que mas me gusta de python es que podemos declarar una variable y usarla al mismo tiempo, haciendo que las lineas de código sean mas cortas, además fáciles de leer y entender.

ejemplo:

Continuar leyendo ....

Como crear una calculadora en kivy

En este pequeño tutorial crearemos una calculadora usando kivy nuestra biblioteca para crear interfaces gráficas en python, como ya sabemos kivy es muy fácil de usar y de implementar. 
Este sera un tutorial dirigido a todas las personas que están empezando a programar en python y quieren empezar a crear pequeños proyectos que son fáciles pero te ayudan a entender la lógica de programación en python.

Requisitos para el tutorial

• Tener instalado python (en este caso de preferencia cualquier versión que sea superior a 3.0)
• Tener instalado kivy y sus dependencias
• Tener ganas de aprender.

Antes de empezar crearemos dos archivos el primero se llamara main.py y el segundo calculadora.kv

El archivo main.py es el principal donde crearemos las función que se encargue de crear las operaciones, además ahí agregaremos el código encargado de crear la aplicación. El archivo calculadora.kv es donde agregaremos comandos en lenguaje kv el lenguaje encargado de crear los gráficos(no significa que no los podamos crear en el archivo main.py es simplemente para hacerlo de forma ordenada.)

En nuestro archivo main.py agregamos.

He dejado comentarios en todo el código con una breve explicación de lo que estamos haciendo, no es necesario que escribas eso, es mas escribe todo el código y después agrega comentarios usando tus propias palabras.

Ahora abrimos nuestro archivo calculadora.kv y agregamos el siguiente código.

#:kivy 1.0
#:import kivy kivy
<CustButton@Button>:
    font_size: 32
    color: 1, 1, 1, 1
<calculadora_screen>:
    size:self.size
    id:My_Calc
    display: entry
    padding: 3
    spacing: 5
    rows: 6
    BoxLayout:
        TextInput:
            id: entry
            font_size: 32
            multiline: False
 
    BoxLayout:
        spacing: 6
        CustButton:
            text: "7"
            on_press:entry.text += self.text
         
        CustButton:
            text: "8"
            on_press:entry.text += self.text
        CustButton:
            text: "9"
            on_press:entry.text += self.text
        CustButton:
            text: "*"
            on_press:entry.text += self.text
 
 
    BoxLayout:
        spacing:6
        CustButton:
            text: "4"
            on_press:entry.text += self.text
         
        CustButton:
            text: "5"
            on_press:entry.text += self.text
        CustButton:
            text: "6"
            on_press:entry.text += self.text
        CustButton:
            text: "/"
            on_press:entry.text += self.text
 
 
    BoxLayout:
        spacing: 6
        CustButton:
            text: "1"
            on_press:entry.text += self.text        
        CustButton:
            text: "2"
            on_press:entry.text += self.text
        CustButton:
            text: "3"
            on_press:entry.text += self.text
        CustButton:
            text: "-"
            on_press:entry.text += self.text
         
         
    BoxLayout:
        spacing: 6
        CustButton:
            text: "AC"
            on_press:entry.text =""
        CustButton:
            text: "0"
            on_press:entry.text += self.text
        CustButton:
            text: "="
            on_press: My_Calc.calculate(entry.text)
        CustButton:
            text: "+"
            on_press:entry.text += self.text

Explicación que pasa en el archivo calculadora.kv

Primero creamos un botón personalizado donde nos aseguramos que todos los botones tengan las mismas propiedades como por ejemplo: color de texto, tamaño de texto, estilo de texto y otros. Esto lo hacemos de esta forma:

<CustButton@Button>:
    font_size: 32
    color: 1, 1, 1, 1

Si notas todo el código cada ves que agregue un botón  use mi botón personalizado CustButton.  

Ahora nos encargaremos de hacer referencia de nuestro clase calculadora_screen. 

<calculadora_screen>:
    size:self.size
    id:My_Calc
    display: entry
    padding: 3
    spacing: 5
    rows: 6

Si ves con detalle nuestro código en el archivo main.py estamos usando un layout llamado GridLayout. donde ordenamos todo mediante la declaración de en cuantas columnas o filas se dividirá nuestra pantalla o área de trabajo. si quieres saber mas aserca de esto visita nuestro post tipos de layout en kivy, donde explicamos con mas detalle lo anterior.
Sabiendo ya que es un GridLayout le agregamos un id: My_Calc además propiedades display: entry que nos servirá para poder agregar los números a la pantalla, también definimos en numero de filas que tendrá nuestro layout rows: 6 y simplemente para que nuestra app se mire bonita agregamos padding: 3 (Espacio entre cada widget) y spacing: 5 (Espacio entre widget y el borde de la pantalla).


Ya definido como se comportara nuestro GridLayout,  Usamos 5 BoxLayout  que tomaran lugar en cada una de las filas que tenemos disponible, esto lo hacemos de arriba hacia abajo.
En el primer BoxLayout agregamos nuestro cuadro de texto/TextInput que es donde aparecerá nuestros números cada ves que presionemos un botón además ahí veremos el resultado de todas las operaciones que realicemos. definiendo el id: entry, el tamaño del texto font_size: 32 y multiline: False para que nuestro TextInput tenga una sola linea.

BoxLayout:
        TextInput:
            id: entry
            font_size: 32
            multiline: False

Tiendo ya esto empezamos a agregar los botones, agregando 4 por cada BoxLayout
ejemplo:

 BoxLayout:
        spacing: 6
        CustButton:
            text: "7"
            on_press:entry.text += self.text

Cada botón tendrá propiedad text donde agregamos el numero que corresponde y  propiedad on_press donde agregamos una pequeña formula entry.text += self.text que lo que hará es usar lo que tengamos en la propiedad text ejemplo text: "7"  y lo agregamos a nuestra a entry.text (recuerda entry es el id de nuestro TextInput).

De esta forma nuestra calculadora debería funcionar a la perfección, Espero que disfrutes esta entrada, cualquier duda o inquietud déjame saberlo comentando. Gracias.

Continuar leyendo ....

Tipos de Layouts en kivy

Bienvenidos amigos en esta ocasión aprendernos un poquito sobre los diferentes tipos de Layouts que kivy nos ofrece y como funciona de forma que los podamos usar en nuestros proyectos. Si no te quieres perder ningún detalle lee con mucho cuidado este post.

Que es un Layout?

Se le llama layout a la parte donde colocaremos los elementos ya sea de una aplicación o algún sitio web, un layout es como un contenedor donde ordenamos los elementos visuales como un widget, botones o cuadros de texto.

En que nos ayudan los layouts?
Simplemente en el ordenamiento adecuado de dos los elementos que una aplicación puede contener gráficamente.

Kivy no es la excepción ya que cuenta con muchos layouts cada uno con características diferentes de los cuales puedes sacarle provecho. Hací podemos crear bellas interfaces para nuestros queridos usuarios.

Tipos de layout:

• FloatLayout
• Gridlayout
• Boxlayout
• Stacklayout
• Relavitelayout
• Anchorlayout

Donde los mas utilizados son los primeros tres, tu puedes usar el que mas se adapte a tus necesidades. 

Para poder mostrarte como funciona cada tipo de layout te dejare imagenes donde veras el código de como trabaja cada uno de los layouts.

Primero crea un archivo de texto como el nombre layouts.py, ahora as click derecho sobre el archivo y selecciona editar con IDLE. ahora escribe todo el código que muestra cada imagen y haciendo F5 veras el resultado. lo mas importante para aprender a usar los layouts es experimentando con ellos, haci que te recomiendo que juegues con el código y lo modifiques ya que de esta manera aprenderás a usarlos rápidamente.

Nota: utilizare imágenes donde estará en código para impedir que solo copies y pegues, ya que no es una buena practica.  

Floatlayout

Este es uno de los utilizados, gracias a la gran ventaja que tenemos de poner elementos en el lugar que mas nos guste. ejemplo:

Gridlayout

Para utilizar este layout tenemos que definir por lo menos su dimensión, si queremos que tenga una columna o mas de igual forma que las filas, puedes ver este layout como una hoja de cálculo donde cada elemento toma su lugar de acuerdo al orden que los agregues por ejemplo:

Boxlayout

En este layout puedes agregar varios elemento los cuales se ordenan dependiendo del  tamaño de cada elemento dentro del mismo.
Por ejemplo:

Stacklayout

En este layout podemos agregar varios elementos cada elemento se acomoda dependiendo del espacio que el Stacklayout tenga para utilizar. Nos seria de mucha utilidad si queremos agregar varios elementos y deseamos que tengan el mismo tamaño, El layout le define el espacio a cada elemento dependiendo del espacio total que el layout tenga disponible. Ejemplo.

Nota: en este caso definimos la orientación, usando comandos como:  ‘lr-tb’, ‘tb-lr’, ‘rl-tb’, ‘tb-rl’, ‘lr-bt’, ‘bt-lr’, ‘rl-bt’ ‘bt-rl', donde lr significa que nuestros elementos se ordenaran de izquierda a derecha y rl lo contrario, al igual tb significa que los elementos se ordenaran de arriba para abajo, otra vez bt lo contrario a lo anterior. También en este caso para definir en padding(espacio entre los widgets) tenemos que definir de la siguiente forma padding:[5,5,5,5]

Relativelayout

Es muy similar al Floatlayout  solo que este caso cada elemento se acomoda de acuerdo a la posición del layout. Ejemplo:

AnchorLayout

Este layout nos permite agregar elementos basándonos en los bordes del mismo. Ejemplo:

Ahora te toca a ti experimentar con todos los layouts y usa el que mas te guste en tus proyectos.

Continuar leyendo ....

Widgets en kivy

Widgets son elementos que forma parte de un programa o aplicación que se encargan de la interacción del usuario con la aplicación, siendo esto fundamental para cualquier proyecto, donde nuestra misión es ofrecerles a nuestros usuarios la mejor experiencia al momento de utilizar nuestra aplicación o programa, todos sabemos que los usuarios son los que deben disfrutar la utilización del mismo.

Kivy nos ofrece una gran variedad de widgets de los cuales podemos sacarles provecho para que nuestros usuarios tengan una experiencia inolvidable con nuestra aplicación.

Recuerda que en kivy usamos la programación orientada a objetos, por lo tanto veremos que para crear interfaces tendremos que crear objetos, esto lo hacemos declarando clases. por ejemplo

from kivy.uix.button import Button
class mybutton(Button):
    pass

Kivy cuenta con una gran variedad de widget donde nuestro usuarios tendrán una interacción directa con ellas, entre ellas: Label, Button, CheckBox, Image, Slider, Progress Bar, Text Input, Toggle button, Switch, Video, además también podemos crear nuestros propios widgets, estos widget los podemos encontrar en las sección kivy.uix, antes de usarlos tenemos que hacer una referencia de lo mismos de esta forma:

from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.checkbox import CheckBox

Una ves hecho esto los widgets referenciados están listos para ser utilizados.

Además de estas existen widget que nuestros usuarios no podrán ver ya que estos simplemente los usaremos para poder colocar nuestros widget que si tiene representación gráfica dentro de el. estos son conocidos como Layouts.

Los layouts son widgets que nos permiten agregar elementos dentro de ellos y ordenarlos de una forma especifica, entre ellas tenemos: Anchor Layout, Box Layout, Float Layout, Grid Layout, PageLayout, Relative Layout, Scatter
Layout, Stack Layout y los usamos de esta manera.

from kivy.uix.floatlayout import FloatLayout
class mylayout(FloatLayout):    pass    #aqui podemos agregar mas widgets.

También tenemos Widgets complejos que los aquellos que fueron creados combinado diferentes widgets ejemplo: Bubble, Drop-Down List, FileChooser, Popup, Spinner, List View, TabbedPanel, Video player,
VKeyboard.

Recuerda que la mejor forma de aprender sus funciones y características es experimentado con ellas.

Continuar leyendo ....