GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 1 LEONEL FERNANDO PEÑARRIETA PROGRAMACIÓN MÓVIL GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 2 PROGRAMACIÓN MÓVIL GUÍA DIDÁCTICA T.S. DESARROLLO DE SOFTWARE 2023 PROFESOR AUTOR: LEONEL FERNANDO PEÑARRIETA TRUJILLO - leonel.penarrieta@cordillera.edu.ec PRIMERA EDICIÓN ISBN – 978-9942-616-59-3 Reservados todos los derechos. Está prohibido, bajo las sanciones penales y el resarcimiento civil previstos en las leyes, reproducir, registrar o transmitir esta publicación, integra o parcialmente, por cualquier sistema de recuperación y por cualquier medio, sea mecánico, electrónico, magnético, eletróptico, por fotocopia o por cualquiera otro, sin la autorización por escrito al Centro de Investigación y Desarrollo Ecuador (CIDE) y el Instituto Tecnológico Universitario Cordillera (ITSCO). © CIDE EDITORIAL Nº RADICACIÓN: 73452 Guayaquil, Ecuador Copyright © 2023 Centro de Investigación y Desarrollo Ecuador Tel.: + (593) 04 2037524 http://www.cidecuador.org © INSTITUTO TECNOLÓGICO UNIVERSITARIO CORDILLERA Quito - Ecuador Copyright © 2023 Teléfonos: + 593(2) 433649, Av. De la Prensa N45-268 y Logroño, Quito http://www.cordillera.edu.ec ESTE TRABAJO HA SIDO ACREDITADO BAJO LA LICENCIA CREATIVE COMMONS ATRIBUCIÓN 4.0 INTERNACIONAL DE RECONOCIMIENTO – NO COMERCIAL- NO SE UTILICE CON FINES COMERCIALES, NI SE REALICEN OBRAS DERIVADAS. HTTP://CREATIVECOMMONS.ORG/LICENSES/BY/4.0/. mailto:leonel.penarrieta@cordillera.edu.ec http://www.cidecuador.org/ http://www.cordillera.edu.ec/ http://creativecommons.org/licenses/by/4.0/ GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 3 CARTA DE REVISIÓN DE PARES ACADÉMICOS El Centro de Investigación y Desarrollo Ecuador (CIDE), a través de su Editorial Radicación Nº 73452 certifica por medio de la presente que el libro: Título: Programación móvil Autor: Leonel Fernando Peñarrieta Trujillo ISBN: 978-9942-616-59-3 Formato: Digital Fecha de publicación: 19 de abril 2023 Código de barras: Fue evaluado por el Comité Académico y Científico de CIDE EDITORIAL y fue ACEPTADO para su publicación, el proceso de revisión de pares contempló aspectos relacionados con la temporalidad, normalidad de contenido, coherencia, estilo, formato sobre el tema seleccionado. El Comité Académico y Científico está conformado por:  Ing. Guido Rosales Uriona  Phd. Alexandre Bergel  Dr. Roger Dante Prado Lafuente Lic. Pedro Misacc Naranjo, MSc. COORDINADOR DE PUBLICACIONES EDITORIAL-CIDE. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 4 CONTENIDOS 1. DATOS INFORMATIVOS DE LA ASIGNATURA ................................ 7 2. PRESENTACIÓN Y PRÓLOGO DE LA ASIGNATURA. ...................... 8 3. INTRODUCCIÓN A LA ASIGNATURA .............................................. 9 3.1. Breve descripción de la materia .................................................................... 9 3.2. Importancia de la materia .............................................................................. 9 3.3. ¿Qué voy a encontrar en este documento? ............................................... 10 3.4. Objetivo de la guía didáctica ..................................................................... 10 4. PROFESOR AUTOR - PERFIL PROFESIONAL .................................. 11 5. OBJETIVO DE LA ASIGNATURA..................................................... 13 6. RESULTADO DE APRENDIZAJE ...................................................... 13 6.1. Cognitivo .......................................................................................................... 13 6.2. Procedimental ................................................................................................. 13 6.3. Actitudinal ........................................................................................................ 13 6.4. Valores ............................................................................................................. 14 7. UNIDAD 1 ....................................................................................... 16 7.1. Bloques fundamentales de una APP ........................................................... 16 7.1.1. Introducción ....................................................................................... 17 7.1.2. Programación Nativa ..................................................................... 18 7.1.3. Arquitectura del Sistema operativo ............................................. 19 7.1.2. Arquitectura Android ...................................................................... 19 7.1.3. Arquitectura IOS .............................................................................. 21 7.2. Bloques Fundamentales De Una App ......................................................... 23 7.2.1. Layouts y controles básicos ........................................................... 23 7.3. Conociendo Xamarin.forms ........................................................................... 28 7.3.1. Layouts y controles básicos ........................................................... 28 7.4. ACTIVADES DE LA UNIDAD 1 ...................................................................... 33 7.4.1. Actividades de aprendizaje en contacto con el docente ........ 33 7.4.2. Actividad de aprendizaje autónomo (Aula Virtual) ................. 35 GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 5 7.4.3. Actividad de aprendizaje práctico - experimental .................. 37 7.5. EVALUACIÓN DEL APRENDIZAJE DE LA UNIDAD 1 ................................ 39 7.5.1. Evaluación actividades de docencia............................................ 39 7.5.2. Evaluación actividades practico experimental .......................... 39 7.5.3. Evaluación actividades de trabajo autónomo ........................... 39 7.5.4. Examen .............................................................................................. 39 8. UNIDAD 2 ....................................................................................... 42 8.1. Uso de controles avanzados ........................................................................ 42 8.1.1. Base de Datos SQLite..................................................................... 42 8.2. Consumo de WebServices ............................................................................ 46 8.2.1. Estándares que emplea para funcionar. .................................... 46 8.3. Notificaciones locales y Broadcast Receivers. .......................................... 47 8.3.1. Notificaciones Broadcast ............................................................... 47 8.3.2. Notificaciones Locales .................................................................... 50 8.4. ACTIVADES DE LA UNIDAD 2 ...................................................................... 52 8.4.1. Actividades de aprendizaje en contacto con el docente ........ 52 8.4.2. Actividad de aprendizaje autónomo .......................................... 54 8.5. EVALUACIÓN DEL APRENDIZAJE DE LA UNIDAD 2 ................................ 55 8.5.1. Evaluación actividades de docencia............................................ 55 8.5.2. Evaluación actividades practico experimental .......................... 55 8.5.3. Evaluación actividades de trabajo autónomo ........................... 55 8.5.4. Examen .............................................................................................. 56 9. UNIDAD 3 ....................................................................................... 58 9.1. Geolocalización .............................................................................................. 58 9.1.1. GPS .................................................................................................... 58 9.2. Sensores ........................................................................................................... 61 9.3. Flutter ................................................................................................................ 63 9.3.1. Introducción ....................................................................................... 63 9.4. ACTIVADES DE LA UNIDAD 3 ...................................................................... 68 9.4.1. Actividades de aprendizaje en contacto con el docente ........ 68 9.4.2. Actividad de aprendizaje autónomo .......................................... 72 9.5. EVALUACIÓN DEL APRENDIZAJE DE LA UNIDAD 1 ................................ 74 9.5.1. Evaluación actividades de docencia............................................ 74 GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 6 9.5.2. Evaluación actividades practico experimental .......................... 74 9.5.3. Evaluación actividades de trabajo autónomo ........................... 74 9.5.4. Examen .............................................................................................. 75 9.6. BIBLIOGRAFÍA ................................................................................................. 76 9.6.1. Referencias Bibliográficas ............................................................. 76 9.6.2. Sitios de interés................................................................................ 78 10. ACRÓNIMOS, ABREVIATURAS Y GLOSARIO DE TÉRMINOS ....... 79 11. ÍNDICE DE TABLAS.......................................................................... 80 12. ÍNDICE DE FIGURAS ....................................................................... 80 13. ÌNDICE DE ECUACIONES O FÓRMULAS ........................................ 82 GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 7 1. DATOS INFORMATIVOS DE LA ASIGNATURA CARRERA DESARROLLO DE SOFTWARE NIVEL Cuarto MODALIDAD Presencial JORNADA Matutina, Nocturna ASIGNATURA/MATERIA Programación Móvil CAMPO DE FORMACIÓN Adaptación e Innovación Tecnológica UNIDAD DE ORGANIZACIÓN CURRICULAR Profesional HORAS DE LA ASIGNATURA 135 horas ORGANIZACIÓN DEL APRENDIZAJE Horas de Docencia: 54 horas Horas de Prácticas de Aprendizaje: 40 horas Horas de Trabajo Autónomo: 41 horas PRERREQUISITOS Programación Orientada a Objetos II GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 8 2. PRESENTACIÓN Y PRÓLOGO DE LA ASIGNATURA. Bienvenidos a la asignatura de programación móvil, espero que en este lugar encuentren las herramientas para su formación como desarrolladores, así como también experiencias y aprendizaje que les resulten significativos en términos personales. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 9 3. INTRODUCCIÓN A LA ASIGNATURA 3.1. Breve descripción de la materia La asignatura La Programación Móvil forma parte de la Unidad de formación Profesional y su tratamiento es de naturaleza teórico - práctica orientada a proporcionar al estudiante de la Carrera de Desarrollo de Software, una visión general de su campo ocupacional, así como iniciarlo en el aprendizaje de los paradigmas de programación y las características de los lenguajes de mayor demanda en el sector empresarial, se ha convertido en una parte importante del acceso a la información, el uso de aplicaciones especializadas es una necesidad en la industria. Los teléfonos celulares inteligentes son dispositivos imprescindibles en la sociedad, con capacidades de acceder a Internet a través de diferentes tecnologías de red inalámbrica de alta velocidad. Sin embargo, a pesar de sus capacidades, el desarrollo de aplicaciones para dispositivos móviles presenta desafíos que no están presentes en el desarrollo de software tradicional. Esto se debe a que, comparados con las computadoras de escritorio y servidores, los dispositivos móviles poseen un poder de cómputo, almacenamiento y despliegue de información más limitada. Adicionalmente, la fuente de energía de los dispositivos móviles son baterías, por lo que es esencial el uso eficiente de los recursos. 3.2. Importancia de la materia La importancia de la Programación Móvil radica en la óptica globalizada para solución de problemas en los procesos de las empresas, pues es necesario considerar el desglose en procedimientos y tareas que finalmente son las que se automatizarán, a fin de optimizar todos los recursos que dispone la empresa. desde el punto de vista funcional la programación GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 10 móvil es una herramienta o un lenguaje de programación que todo profesional informático debe conocer ya que permite el desarrollo de la lógica y experticia de manera gráfica y practica para la solución y control a problemas planteados. 3.3. ¿Qué voy a encontrar en este documento? La asignatura está estructurada en tres (3) unidades, en la unidad uno (1) se pone en conocimiento del estudiante los Entornos de Programación Móvil que es la base fundamental para su inicio en el mundo de la programación móvil, en esta se tratara temas como entornos gráficos, emulador, uso del Android manifest, entre otros. Para la Unidad dos (2) Vista e interfaces de usuario, donde se abordará elementos como el diseño estructurado de un programa, bloques estructurados, usos correctos de los eventos que posee cada control del entorno gráfico. Para la unidad tres (3) se establece el uso de herramientas avanzadas donde se permitirá crear una conexión de los datos obtenidos y almacenarlos en base de datos, geolocalización y Sensores, en la cual se utilizarán los componentes internos de nuestro dispositivo móvil como cámara, GPS y sensores. 3.4. Objetivo de la guía didáctica La presente guía es una compilación de información de fuentes bibliográficas actualizadas y científicas que a la vez explican de manera didáctica los contenidos más importantes de la asignatura. El objetivo es brindar tanto a las/los estudiantes como al cuerpo docente, un material de apoyo como guía de estudio que complemente a la asignatura que se desarrolla en las aulas. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 11 4. PROFESOR AUTOR - PERFIL PROFESIONAL Soy Leonel Fernando Peñarrieta Trujillo, Tecnólogo en análisis de sistemas, Ingeniero en Sistemas Informáticos. Presidente de la empresa Creating Software CIA. LTDA. Perfil profesional me encuentro trabajando como desarrllador para la Unidad de Gestión y Regulariación como servidor publico sp7, con el cargo de especialista de Planificación Estratégica y Tecnología. Soy desarrollador freelance dedicado a desarrollar programas o software para empresas o particulares a la medida. Actualmente coordino la asignatura de Programación Móvil, Programación Web I y Programación Orientada a Objetos II. Espero que esta materia pueda ayudar a nuestros estudiantes a desarrollar aplicaciones orientadas a cualquier arquitectura que ayuden a dar solución a la necesidad de una empresa u organización en general. Me puedes contactar a través de leonel.penarrieta@cordillera.edu.ec mailto:leonel.penarrieta@cordillera.edu.ec GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 12 El éxito no es la clave de la felicidad. La felicidad es la clave del éxito. Si amas lo que haces tendrás éxito. No te des por vencido por más obstáculos que encuentres en tu caminar lucha y supera cada uno de ellos y lograras llegar al lugar tan ansiado, recuerda no estás solo aquí estaremos para ayudarte a dar cada paso. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 13 5. OBJETIVO DE LA ASIGNATURA Desarrollar aplicaciones informáticas utilizando lenguajes de programación estructurada y orientada a objetos, editar, compilar y ejecutar algoritmos que permitan dar solución a los problemas analizados. 6. RESULTADO DE APRENDIZAJE 6.1. Cognitivo • CIE1 Reconocer los componentes básicos del entorno gráfico en el diseño de un aplicativo móvil y compararlos con productos ya terminados. • CIE2 Bosquejar una solución mediante la herramienta multiplataforma para poder integrar los componentes físicos de un dispositivo móvil y poder experimentar su funcionamiento. 6.2. Procedimental • Código Aplicar los fundamentos del desarrollo móvil, utilizando el lenguaje de programación con el fin de aprender su beneficio en el desarrollo. • PIE2 Programar aplicaciones de software para dispositivos móviles mediante la herramienta multiplataforma para tener un aplicativo funcional que se utilice los dispositivos internos de un sistema operativo móvil. 6.3. Actitudinal • Código Utilizar las herramientas tecnológicas para el mejoramiento de las actividades laborales (eficiencia). • AIE2 Investigar las tendencias y plataformas actuales en adaptación de contenidos para dispositivos móviles. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 14 6.4. Valores • Respeto VIE1 Tratar adecuadamente a las personas escuchando los fundamentos y puntos de vista individuales, aceptando opiniones y comportamientos del entorno social. Respeto: Acepta las diferencias individuales y grupales sin querer imponer su opinión como la única válida. • Amor VIE2 Compromiso ético de brindar ayuda de forma incondicional a los que nos rodean con el objetivo de potenciar su desarrollo profesional, bienestar y felicidad personal, a través de una autentica preocupación por el otro. Siempre se tiene presente que los DEMÁS, REALMENTE NOS IMPORTA • Innovación VIE3 Generar de forma creativa propuesta de mejora para la gestión académica, organizacional y tecnológica que conduzcan al crecimiento y desarrollo institucional. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 15 UNIDAD 1 GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 16 7. UNIDAD 1 7.1. Bloques fundamentales de una APP El uso continuo de aplicaciones en nuestros moviles o tablets se ha convertido en parte primordial de nuestras vida cotidiana, no solo utilizamos estas apps en nuestros moviles sino que tambien las podemos utlizar en cualquier equipo inteliigente (smart tv, refrigeradoras, microondas, computadoras, etc.), haciedo que la vida del ser humano sea vea inmerso en la utilizacion de cualquier app ya sea para realizar pagos, comprar, vender, etc. Para empezar en el dearrollo de una aplicación movil hay que enteder los conceptos claro de programación y de app. Programacion: Es ordenar, estructurar o componer una serie de acciones (algoritmos) cronológicas para cumplir un objetivo. App: El término app significa aplicación. De hecho, es la abreviatura de la palabra aplication en inglés. Las apps son herramientas de software escritas en distintos lenguajes de programación (según el desarrollador que la programe) para teléfonos inteligentes -o smartphones´ y tablets. Se caracterizan por ser útiles, dinámicas y fáciles de instalar y manejar. SABIAS QUE. Los orígenes de las apps móviles se remontan a los años 90 con la irrupción de los teléfonos móviles a nivel mundial. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 17 7.1.1. Introducción La programación móvil es desarrollar aplicaciones para aparatos como celuares, smartphones, PDA’s, PocketPC’s y dispositivos con recursos limitados. Hay que ser claros en la diferencia entre programación móvil y programación embebida, que son cosas parecidad (recursos limitados) pero distintas en esencia. Encasi culuier ambito de programación que escojas, hoy en dia tienes disponibles inifiniades de herramientas, lenguajs y entornos que puedes elegir. En el mundo del desarrollo para moviles y tablestas pasa lo mismo. Actualmente dispones de muchas opciones si te quieres dedicar a este ámbito y en concreto debes elegir entre:  Los lenguajes y herramientas nativos de cada plataforma.  Herramientas multiplataforma que compilan a código nativo.  Herramientas multiplataforma en html. Figura 1 DMCA. Ilustración de aplicaciones móviles [Figura] Recuperado de https://www.pngwing.com/es/free-png-xirhe GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 18 7.1.2. Programación Nativa El código nativo es una forma de código de la programación de computadora que se configura para funcionar con el uso de un procesador especificado en este caso para una arquitectura movil (Android e IOS). Es adecuado aclarar que un desarrollo nativo es crear aplicaciones netamente u orientadas para Android o IOS, cada una de ellas utiliza un lenguaje de prgramación diferente, herramientas propias y paradigmas de programación particulares. A cambio obtienes la máxima flexibilidad, adaptación total al entorno en el que se ejecutan las aplicaciones y el máximo rendimeinto. La desventaja principal es uqe tienes que dominar muchos lenguajes y herramientas y ademas el tiempo de desarrollo se multiplica mucho, pues es necesario crear desde cero dos aplicación una en Android y otra en IOS. Nota importante: Si decides especializarte en IOS y programar para la plataforma de iPhone y iPad, entonces debes aprender a programar con Objective- C o Swift y utilizar XCode y adquirir un ordenador Mac. Para Android es necesario utilizar Android Studio como IDE de desarrollo y como lenguaje de programación Java. Material complementario: Programación Móvil. https://sway.office.com/BM7YFz8uP9dwYGOm?ref=Link https://sway.office.com/BM7YFz8uP9dwYGOm?ref=Link GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 19 Dentro del desarrollo de aplicaciones moviles o Apps se necesita conocer principalmente la arquitectura del sistema operativo para el cual va ir enfocado el desarrollo hablando de Android e IOS. 7.1.3. Arquitectura del Sistema operativo Cada sistema operativo en cuanto a dispositivos móviles, Tablet, etc., tiene su arquitectura que hacen que funcionen sus componentes internos y externos del dispositivo para ello hay que entender como esta compuesto y que se pude utilizar dentro del dispositivo en cuestión. 7.1.2. Arquitectura Android Android es una pila de software de código abierto basado en Linux para una gran variedad de dispositivos a continuación se muestra la arquitectura del S.O. La base de la plataforma Android es el kernel de Linux. Por ejemplo, el tiempo de ejecución de Android (ART) se basa en el kernel de Linux para funcionalidades subyacentes, como la generación de subprocesos y la administración de memoria de bajo nivel. El uso del kernel de Linux permite que Android aproveche funciones de seguridad claves y, al mismo tiempo, permite a los fabricantes de dispositivos desarrollar controladores de hardware para un kernel conocido. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 20 Figura 2 Developers. Pila de software de Android [Figura] Recuperado de https://developer.android.com/guide/platform?hl=es- 419#:~:text=Android%20es%20una%20pila%20de,principales%20de%20la%20plataf orma%20Android. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 21 7.1.3. Arquitectura IOS La arquitectura iOS está basada en capas o niveles, donde las más altas contienen los servicios y tecnologías más importantes para el desarrollo de aplicaciones, y las capas más bajas controlan los servicios básicos. Figura 3 Karen Melissa Rojas Lizarazo. Arquitectura IOS [Figura] Recuperado de Revista Facultad de Ingeniería, UPTC, Julio-Diciembre de 2011, Vol. 20, No. Capa Core OS: bluetooth, accesorios externos, acelerar marco, seguridad, etc. Capa Core Services: libreta de direcciones, Kit Framework, Marco Social, etc. Capa Media: Gráfico ULKit, Graphics Framework, Media Player, Kit Av, Open AL, Imágenes, etc. Capa Cocoa Touch: Interfaz del usuario. Dentro del desarrollo de aplicaciones móviles hay que definir muy bien con que herramienta y que le lenguaje de programación se va a empezar a desarrollar ya que en la actualidad hay muchas formas y herramientas de cómo desarrollar aplicaciones que pueden ser Frameworks, aplicaciones pagadas, Nativo, etc. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 22 Teniendo en cuenta todo esto y de acuerdo a tus conocimientos se recomienda utilizar cada una de estas herramientas y lenguajes de programación existentes a continuación te mostrare un gráfico que puede ayudarte a tomar la elección de acuerdo a tus capacidades. Figura 4 Microsoft. Diagrama elección desarrollo móvil [Figura] Recuperado https://sway.office.com/BM7YFz8uP9dwYGOm?ref=Link En esta guía vamos a utilizar un Framework que nos permitirá desarrollar aplicaciones móviles de forma nativa cross platform es decir que mediante un solo desarrollo podemos compilar la aplicación a Android e IOS de forma nativa. Xamarin es una herramienta para los desarrolladores de aplicaciones móviles, y la novedad de esta herramienta es la capacidad que tiene para que el desarrollador escriba su app en lenguaje C# y el mismo código sea traducido para ejecutarse en iOS, Android y Windows Phone. C# es el lenguaje consentido de Microsoft, por lo tanto es muy popular dentro de los programadores .NET, pero aunque este lenguaje sea muy popular existe una desventaja al momento de crear aplicaciones móviles. https://sway.office.com/BM7YFz8uP9dwYGOm?ref=Link GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 23 Para crear aplicaciones iOS se necesitan escribir código en Objetive-C y para crear Apps Android necesitamos conocer Java; Xamarin viene a unificar estas diferencias con su IDE Xamarin Studio, ya que solamente necesitamos dominar C# para crear aplicaciones iOS, Android y Windows Phone. 7.2. Bloques Fundamentales De Una App 7.2.1. Layouts y controles básicos Las páginas de Xamarin.forms representan pantallas de aplicaciones móviles multiplataforma. Todos los tipos de página que se describen a continuación se derivan de Xamarin.forms Page clase. Estos elementos visuales ocupan todos o la mayoría de la pantalla. Un Page objeto representa un ViewController en iOS y un Page en la plataforma Universal de Windows. En Android, cada página ocupa la pantalla como una Activity, pero las páginas de Xamarin.forms no son Activity objetos. Dentro de estos componentes tenemos dos grandes tipos de diseños que se pueden utilizar y hay que tener en cuenta como se inicio y como podemos utilizarlas en conjunto dentro del desarrollo y diseño de la interfaz gráfica. Nota importante: Según 3Androides Technology S.L.U. el Framework de desarrollo Xamarin está considerado dentro de los 10 Framework más utilizado por los desarrolladores a nivel mundial en la creación de aplicaciones móviles. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 24 7.2.1.1. Páginas Estas páginas son las encargadas de dar la estructura principal a la aplicación que vamos a desarrollar para así poder empezar a ir diseñando la interfaz de usuario final con la que la aplicación finalizara dentro de las cuales tenemos las siguientes páginas de acuerdo a la documentación oficial de Xamarin.forms. Figura 5 Microsoft. Páginas de Xamarin Forms [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/pages 7.2.1.2. Diseño de página Son subtipos especializados de vistas que actúan como contenedores para vistas y otros diseños. Estos diseños están creados especialmente para poder ir ubicando cada uno de los componentes que conformaran nuestra interfaz grafica de la aplicación en la que estemos desarrollando así podremos ubicar una imagen, un texto, un botón en la posición en que necesitemos de acuerdo a los requerimientos del usuario o de la aplicación. Dentro de la cual tenemos los siguientes diseños y sus respectivos métodos de utilización. https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/pages GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 25 Figura 6 Microsoft. Diseño de páginas de Xamarin Forms [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/layouts Hay que mencionar que tanto la página como el diseño siempre van agarrados de la mano el uno no puede funcionar sin el otro por eso siempre se debe escoger primero el tiempo de página y luego el diseño con el cual se va a empezar a diseñar la interfaz gráfica. 7.2.1.3. Componentes Las vistas son objetos de la interfaz de usuario, como etiquetas, botones y controles deslizantes que normalmente se conocen como controles o widgets en otros entornos de programación gráficos. Todas las vistas compatibles con Xamarin.forms derivan de la clase View. Pueden dividirse en varias categorías: GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 26 Componentes para presentación Figura 7 Microsoft. Componente de etiquetas [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/views Componentes que inician comandos Figura 8 Microsoft. Componentes de comandos [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/views GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 27 Componentes para establecer valores Figura 9 Microsoft. Componentes de valores [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/views Componentes para editar textos Figura 10 Microsoft. Componentes de textos [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/views GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 28 Componentes de colecciones Figura 11 Microsoft. Componentes de colecciones [Figura] Recuperado https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/controls/views 7.3. Conociendo Xamarin.forms 7.3.1. Layouts y controles básicos Xamarin es una herramienta para los desarrolladores de aplicaciones móviles, y la novedad de esta herramienta es la capacidad que tiene para que el desarrollador escriba su app en lenguaje C# y el mismo código sea traducido para ejecutarse en iOS, Android y Windows Phone. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 29 Al momento de empezar a crear aplicaciones con Xamarin.forms debemos tener en cuenta su arquitectura y que es lo que podemos encontrar dentro de nuestro proyecto. La solución creada se compone de 3 proyectos, o 4 proyectos si creas la aplicación desde Visual Studio en Windows. El primer proyecto es el PCL, es el proyecto más importante en una aplicación desarrollada con Xamarin Forms, ya que contiene el código que se compilará para funcionar en Android y iOS. También encontrarás proyectos iOS y Android (tal vez Windows), para que puedas agregar funcionalidades nativas, aunque en el caso de Xamarin.forms, raramente utilizarás. Toda la interfaz y lógica de la aplicación la podemos crear desde el proyecto PCL y es justo lo que haremos ahora. Una de las cosas geniales de utilizar Xamarin.forms, no sólo es poder compartir código C#, sino que puedes compartir código XAML para definir la interfaz de Android y iOS solamente una vez. Comencemos justamente definiendo la interfaz para nuestra aplicación abriendo el archivo MainPage.xaml. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 30 XAML es un lenguaje de marcado, similar a HTML o XML, así que, si tienes experiencia en alguno de esos lenguajes, XAML te será muy familiar. La MainPage por defecto está conformada por un ContentPage que contiene un Label. Para definir nuestra aplicación Hola Mundo cambiaremos el contenido del ContentPage para que sea un Grid en lugar del label. Este contenedor nos permitirá tener varios elementos en la interfaz, cosa que el ContentPage no permite por sí sólo. Dentro del Grid podrás definir un nuevo Label y establecer su contenido a algo como “Escribe tu nombre”, en un momento agregaremos una caja de texto para que el usuario escriba su nombre en ella. Nota que la definición requiere una etiqueta de apertura y una de término de la definición. Figura 12 Código Xamel Define debajo del Label un Entry, en este caso la definición es más corta. Nota que la etiqueta de cierre puede contener simplemente “/>” si no definimos contenido. Este Entry deberá tener un nombre para que a través de él accedamos a el elemento desde el código C#. Figura 13 Código Xamel la etiqueta x:NAme="nombreTextCell" es el identificador que se le dará a esta variable para ser utilizada dentro de la programación. (x:Name se utiliza en todos los controles para poderle dar un nombre de identificador). Finalmente define un Button debajo del Entry, en este caso necesitaremos manejar el evento de click, es decir, responder cuando el usuario presiona sobre el botón, para eso podemos definir un nombre para el evento Clicked. Cuando lo hagamos, automáticamente se creará un método en el archivo GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 31 MainPage.xaml.cs que se ejecutará cada que el usuario presione en el botón. Además, el botón deberá tener un texto como llamada de acción. Figura 14 Código Xamel al momento de utilizar el inteligent del propio IDE, al momento de crear el Clicked=" " nos crea un método público con el nombre por defecto "Button_Clicked" para poder llamar la acción que va a ejecutar ese botón. Finalmente, podemos abrir el archivo C# de la misma clase donde el método se creó automáticamente y agregar una línea de código que nos permita mostrar un mensaje personalizado al usuario. Figura 15 Código Visual C# Estos símbolos {} me permiten capturar el nombre del identificador de cada uno de los complementos swing del diseño xaml. GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 32 Teniendo esto, puedes probar la aplicación en iOS y Android, nota que los elementos se adaptan a el Sistema Operativo para mostrarlos en su forma nativa, aun cuando sólo los definimos una vez, y que el código C# funciona perfectamente en ambas plataformas. Figura 16 Ejecución Aplicación GUÍA DIDÁCTICA: PROGRAMACIÓN MÓVIL 33 7.4. ACTIVADES DE LA UNIDAD 1 7.4.1. Actividades de aprendizaje en contacto con el docente A. GLOSARIO DE TÉRMINOS TÉCNICOS 7.4.1.1. Descripción Para realizar esta actividad cada estudiante debera realizar una entrada de un termino tecnico con su respectiva definicion y ejemplo de utlizacion del termino tecnico: 1. Leer la página oficial de Xamarin.forms Vistas - Xamarin | Microsoft Docs. para ayuda en cuanto a los términos técnicos. 2. Llegar a un consenso de que termino subir teniendo en cuanta que no se repita dentro de la lista de términos que están en el glosario. 3. Escribir una entrada sobre el término que va ubicar dentro del apartado teniendo en cuenta su título, descripción y ejemplo. Instrucciones importantes el ejemplo de cómo deben subir las entradas serian así: “Label Muestra cadenas de texto de una sola línea o bloques de texto de varias líneas, con un formato constante o variable. Ejemplo: