Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tu primera aplicación con Kivy para móviles

entrerrianas
November 16, 2015

Tu primera aplicación con Kivy para móviles

Introducción para el desarrollo de aplicaciones móviles usando la librería Kivy

entrerrianas

November 16, 2015
Tweet

Other Decks in Programming

Transcript

  1. Introducción Entendiendo cómo se usa Herramientas
    Tu primera aplicación con Kivy para móviles
    Sofía Martin
    Facultad de Informática - UNLP
    Noviembre 2015
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  2. Introducción Entendiendo cómo se usa Herramientas
    Contenido
    1 Introducción
    ¿Qué es?
    Antes que nada
    2 Entendiendo cómo se usa
    Estructura
    Comunicación
    3 Herramientas
    Diseñador
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  3. Introducción Entendiendo cómo se usa Herramientas
    ¿Qué somos, qué queremos?
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  4. Introducción Entendiendo cómo se usa Herramientas
    Características
    Librería UI Python orientada app multitouch.
    Motor gráfico basado en OpenGL ES 2.
    100 % libre.
    Widgets: bloques GUI pre armados.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  5. Introducción Entendiendo cómo se usa Herramientas
    Plataformas
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  6. Introducción Entendiendo cómo se usa Herramientas
    Instalación
    Instalar kivy:
    git clone http://github.com/kivy/kivy
    Instalar y configurar algunas de todas las formas para compilar.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  7. Introducción Entendiendo cómo se usa Herramientas
    Opciones compilación
    Usando el proyecto python-for-android.
    Imagen virtual ya armada con Kivy Android.
    Utilizando la herramienta Buildozer.
    Kivy Launcher.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  8. Introducción Entendiendo cómo se usa Herramientas
    Kivy Launcher
    No se necesita compilar.
    Bajar al app Kivy Launcher.
    Copiar a /sdcard/kivy/
    debe ser un directorio con:
    Archivo principal: main.py
    Información sobre la app :android.txt
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  9. Introducción Entendiendo cómo se usa Herramientas
    Buildozer - preparación
    Modificación del archivo buildozer.spec:
    source.dir = /path/del/proyecto/app
    version = 1.0
    requirements = kivy==master
    Path de android ndk(python-for-andorid)
    android.ndk_path = ~/git/github/python-for-android/
    android/android-ndk-r8c
    Path de android sdk(python-for-andorid)
    android.sdk_path = ~/git/github/python-for-android/
    android/android-sdk-linux
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  10. Introducción Entendiendo cómo se usa Herramientas
    Buildozer - Instalación
    Una vez preparado el archivo
    Instalación de la app
    Copiar el archivo buildozer.spec al directorio del proyecto.
    buildozer -v android debug deploy
    Buildozer compila, genera apk y la instala en el dispositivo
    conectado.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  11. Introducción Entendiendo cómo se usa Herramientas
    Hello Pycon 2015
    from kivy.app import App
    from kivy.uix.button import Button
    class TestApp(App):
    def build(self):
    return Button(text='Hello Pycon 2015')
    TestApp().run()
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  12. Introducción Entendiendo cómo se usa Herramientas
    Armado
    sub-classing la clase App
    Clase App
    from kivy.app import App
    class TestApp(App):
    Implementar su método build()
    para que corra como una
    instancia de un Widget (es el root
    del árbol de widgets).
    Método build()
    def build(self):
    return Button(text='Hello
    Pycon 2015')
    Instanciar esta clase y correr el
    método run().
    Método run()
    TestApp().run()
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  13. Introducción Entendiendo cómo se usa Herramientas
    Componentes
    Permiten ir armando la estructura de la aplicación, en:
    kivy/examples/demo/kivycatalog/
    Widgets catálogo
    Layouts
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  14. Introducción Entendiendo cómo se usa Herramientas
    Kv language
    Separa el diseño de la interfaz gráfica del código.
    Archivo separado con extensión .kv.
    Indentación identifica la estructura.
    Similar a css con html - glade con gtk.
    Ejemplo
    : # cada clase en la aplicación puede identicarse con
    una regla como esta
    Button: #se agrega el widget indicado.
    text:'Hola Pycon 2015' # configuración de una de las
    propiedades del o layout
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  15. Introducción Entendiendo cómo se usa Herramientas
    Archivo py + kv
    main.py
    from kivy.app import App
    class TestApp(App):
    pass
    if __name__=='__main__':
    TestApp().run()
    test.kv
    classTestApp(App) :⇒ test.kv
    Button:
    text:'Hola Pycon 2015'
    Este archivo define el Widget
    Root que se conectará con la App
    y será la base del árbol widget de
    la aplicación.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  16. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    Tipos de Keywords
    Hay 3 tipos de palabras claves específicas en kv:
    app: se refiere a la instancia de la aplicación
    root: es el widget base.
    self: se refiere al widget actual.
    main.py
    class Hola(FloatLayout):
    ....
    def cambiar(self):
    self.ids['saludo'].text
    ='Chau'
    test.kv
    Button:
    id:saludo
    text:'Hola Pycon 2015!!'
    on_press: root.cambiar()
    :
    BoxLayout:
    orientation: 'vertical' if
    self.width < self.height
    else 'horizontal'
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  17. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    Comunicación por id
    test.kv
    Image:
    id: personaje
    source: 'imagenes/
    piepagina.png'
    main.py
    self.pers = self.ids.
    personaje
    self.pers.pos = (550,50) if
    self.pers.pos == self.
    center else self.center
    self.pers = self.ids['
    personaje']
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  18. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    Comunicación por property
    Properties: objetos que se modifican a través del patrón observer.
    class ClockLayout(BoxLayout):
    time_prop = ObjectProperty(None)
    ....
    def cambiar(self):
    self.time_prop.text = "demo"
    self.ids['saludo'].text='Chau'
    self.pers.pos = (550,50) if self.
    pers.pos == self.center else
    self.center
    :
    time_prop: time
    texto: leyendo
    Label:
    id: time
    Button:
    text:'Cambiar'
    on_press: root.
    cambiar()
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  19. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    ScreenManager
    Permite manejar el cambio de pantallas.
    class Hola(FloatLayout):
    time_prop = ObjectProperty(None)
    screen_manager = ObjectProperty(
    None)
    :
    screen_manager: screen_manager
    time_prop: time
    ScreenManager:
    id: screen_manager
    Screen:
    name: 'inicio'
    id: inicio
    def iniciar(self,actual_screen,
    next_screen):
    if (self.ids['usuario'].text != ''):
    self.onNextScreen(actual_screen,
    next_screen)
    def onNextScreen(self, actual_screen,
    next_screen):
    self.list_of_prev_screens.append(
    actual_screen.name)
    self.screen_manager.current =
    next_screen
    GridLayout:
    Button:
    text: 'Connect'
    on_release: root.iniciar(inicio, '
    principal')
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  20. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    Importar
    main.py
    from x.y import z as name
    test.kv
    #:import name x.y.z
    from os.path import isdir #:import isdir os.path.isdir
    import numpy as np #:import np numpy
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  21. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    No repeat yourself
    GridLayout:
    cols: 2
    row_default_height: 10
    GridLayout:
    cols: 2
    row_default_height: 10
    :
    cols: 2
    #spacing: 10
    row_default_height: 10
    :
    cols: 2
    #spacing: 10
    row_default_height:
    .......
    GridMia:
    Label:
    text: 'Usuario:'
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  22. Introducción Entendiendo cómo se usa Herramientas
    Comunicación
    Compatilibidad
    En computadora o en móvil?
    from kivy import platform
    if platform == 'android':
    from plyer import orientation
    orientation.set_sensor(mode='any')
    Sensores ⇒ Plyer
    Es una api que permite acceder a funciones propias de los móviles:
    sensores, cámaras, etc, en Python.
    from plyer import accelerometer
    ...
    accelerometer.enable()
    Clock.schedule_interval(self.get_acceleration, 1 / 20.)
    Archivo buildozer.spec
    requirements = kivy==master,plyer, pyjnius
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  23. Introducción Entendiendo cómo se usa Herramientas
    Kivy Designer
    github.com/kivy/kivy-designer/
    Permite crear la interfaz gráfica mediante selección.
    Crea el archivo .py base y el correspondiente .kv.
    Permite ver las propiedades de cada widget.
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide

  24. Introducción Entendiendo cómo se usa Herramientas
    preguntas?
    @entrerrianas
    [email protected]
    Sofía Martin Facultad de Informática - UNLP
    Tu primera aplicación con Kivy para móviles

    View Slide