Inicio > Delphi, WebService, XE5 > (4/5) Generación del cliente iOS/Android (código compartido)

(4/5) Generación del cliente iOS/Android (código compartido)

Share Button

mobile-productsContinuando con la  “hoja de ruta” y después de que en la última entrada de esta serie creáramos un cliente de “escritorio” para acceder a la Base de Datos a través de un webservice; En esta entrada vamos a generar una aplicación móvil para acceder a los datos, tal y como estaba definido en las premisas iniciales.

“ROADMAP” DE LAS ENTRADAS

Para ello voy a utilizar Delphi XE5. Basándonos en uno de los ejemplos anteriores, ya casi tenemos todo el trabajo hecho, ya que la base del código y los componentes utilizados van a ser los mismos. Por lo tanto, lo único que voy a tener que definir es la nueva interficie para la plataforma móvil.

Iniciaremos el proyecto utilizando la opción desde el IDE para un nuevo proyecto móvil.

Imagen751Para la conexión a nuestro WebService vamos a utilizar los componentes REST que vienen con Delphi, que ya utilizamos en la aplicación de escritorio de la entrada anterior. Vamos a utilizar la búsqueda por ID y la búsqueda por Nombre (utilizando caracteres comodín). Vamos a verlo paso a paso.

“Soltamos” los componentes en el formulario.

La URL base (inicial) será la de nuestro WebService. A Esta URL le añadiremos los parámetros necesarios para conseguir los datos que queramos.

Utilizaremos un componente TRESTResponseDatasetAdapter para capturar la respuesta (que viene en JSON) y almacenarla en un DataSet (TClientDataset). Una vez capturamos, los mostraremos en un ListView y de ahí accederemos a un formulario de detalle con los campos.
Debemos realizar la definición de campos que vamos a obtener en la respuesta tal y como se ve en la imagen siguiente. La misma que nos retorna el WebService.

Exactamente igual a los pasos que realizamos en el cliente de escritorio.

Imagen753

El resultado de la consulta lo mostraremos en un TListView, y al pulsar sobre algún elemento, muestro los datos de detalle del usuario. Para asignar los campos al TListView utilizaremos el “LiveBindings Designer”.

Imagen1158

El funcionamiento es el esperado, al igual que veíamos en nuestras aplicaciones de escritorio. A continuación os muestro un vídeo de la aplicación compilada y funcionando en Android.

A continuación compilaré la misma aplicación para iOS. Para ello cambiamos la “Target Platform” y veremos a ver que pasa…

COMPILACIÓN IOS

Si mayores problemas la aplicación ha funcionado perfectamente. Os coloco unas imágenes y os comento a continuación algunos detalles a tener en cuenta.

iphone

1) Actualizar la versión de PASServer. En mi caso he tenido que actualizar la versión del PASServer. En esta entrada anterior del blog ya comenté los pasos para realizarlo.

2) Distribuir la librería libmidas.dylib  que no se había incluído por defecto. En la opción de deployment, podemos añadir los ficheros que se necesitan distribuir con la aplicación; En nuestro caso esta librería necesaria para trabajar en iOS con TClientDataset. A continuación os muestro la imagen del asistente.

Imagen758

3) Asignar imágenes a la aplicación; En este caso para iOS el IDE no “aprovecha” (ni lo intenta) las imágenes definidas para Android, aunque algunas podrían serlo. Así que hay que volver a asignar las imágenes con unos tamaños un tanto extraños.

Imagen1159Con esto concluye  todo el proceso de generación de la aplicaciones móviles, tanto para Android como para iPhone.

Es la siguiente espero poder mostraros todo el proceso de publicación para así completar el ciclo completo de esta aplicación (o de estas, ya que hemos visto varias).

Como siempre cualquier sugerencia, comentario, puntualización,… será bienvenida.

AÑADO: Os adjunto el link al código fuente de la aplicación.

AÑADO (27/05/2014): He añadido las imágenes al ejemplo (fichero de descarga) tal y como me han solicitado en los comentarios.

Link a la aplicación en Google Play

<Descarga código fuente>

Hasta la próxima.

Share Button
Categories: Delphi, WebService, XE5 Tags: , , , ,
  1. lunes, 17 de febrero de 2014 a las 23:14 | #1

    Un artículo excelente Germán, lo voy a reproducir porque quiero aprender esto del REST, además de que me queda excelente para una pequeña aplicación que estoy desarrollando :)

    Saludos

    PD; ya espero con ansia la siguiente entrega :)

  2. Neftalí
    lunes, 17 de febrero de 2014 a las 23:18 | #2

    @Eliseo GN
    Perfecto Eliseo. Espero que te sea útil.
    Ya queda poco, y espero en breve tener la última, con la publicación de la aplicación.

    Un saludo.

  3. martes, 18 de febrero de 2014 a las 07:19 | #3

    Como siempre un gran artículo. …y esperado como agua de mayo!!.
    Considero esta série de artículos un buenisimo punto de partida para adentrarse en el protocolo REST.

  4. socger
    jueves, 27 de marzo de 2014 a las 21:04 | #4

    Serías tan amable de decirnos como bajar este código.

    Saludos

  5. Neftalí
    viernes, 28 de marzo de 2014 a las 08:44 | #5

    @socger
    Hola Socger.
    Al final de la entrada he añadido el link con el código fuente de la aplicación.

    Un saludo.

  6. socger
    viernes, 28 de marzo de 2014 a las 13:43 | #6

    Muchas Gracias.

    Necesitaba probarlo y aprender.

    Saludos

  7. juan
    martes, 27 de mayo de 2014 a las 11:30 | #7

    Neftali en el ejemplo te has olvidado poner el directorio de los iconos y no deja compilarlo, a no ser que creemos otros iconos,

    Otra cosa al compilarlo en Xe6 hay que añadir al uses
    Androidapi.Helpers
    si no, da un error con la función StrTojURI();

    Pero aun así no funciona, aun estando en debug da un error al final de algo de certificados al intentarlo ejecutar via usb en un movil.

  8. Neftalí
    martes, 27 de mayo de 2014 a las 12:25 | #8

    @juan
    Hola Juan.
    Gracias por los comentarios.
    He subido las imágenes dentro del ZIP, para que estén disponibles.

    En cuanto a que no te funciona, tal vez sea un problema tuyo,. Acabo de probar de nuevo la que hay subida a la “play Store” y la que tengo en mi equipo y a mi si me conectan perfectamente y se traen los datos correspondientes a la consulta.

    ¿Puedes comentar exactamente qué error te da?

    Un saludo.

  9. juan
    martes, 27 de mayo de 2014 a las 13:42 | #9

    Nada el problema era que al haber compilado antes en xe5, al ejecutar el programa compilado en XE6 hay que desinstalar en el movil la aplicación anterior, si no da errores de permisos.

    De todos modos la interface del programa al menos en mi movil no se termina de ver bien, al bajar con el dedo por la lista de la agenda entra en las fichas,
    y si compilamos en xe6 las fichas se ven descuadradas

  10. juan
    martes, 27 de mayo de 2014 a las 14:05 | #10

    @juan
    Solucionado,
    lo de los clicks es que hay que borrar el evento Listview1.Onclick y dejar sólo el evento Listview1.OnItemclick,
    y lo otro que decía que aparecía descuadrado haciendo las casillas donde se muestra el teléfono más grandes se soluciona.

  11. eric
    miércoles, 27 de agosto de 2014 a las 22:45 | #11

    Saludos
    Bueno la verdad me siento algo perdido amigo, en si quisiera saber cómo o a quien dirigirme
    pero aquí estoy, creo tienes un excelente sitio, y pues en si lo que quiero hacer es generar una aplicación de base de datos, en la cual pueda utilizar varios campos, y por lo menos dos tablas en delphi, para android con FMonkey, que aun no se si es la forma correcta de pronunciarlo, pero ya estoy algo cansado buscando, y pues bueno espero me puedas brindar alguna alternativa, ya que veo conoces bastante de el tema, y bueno de ante mano gracias, y en serio creo cuentas con excelentes aportes

  12. Neftalí
    lunes, 8 de septiembre de 2014 a las 08:47 | #12

    @eric
    Hola Eric.
    Puedes realizar aplicaciones de Base de Datos para Android con Delphi, utilizando FireMonkey (FMX). Lo más sencillo es que revises los ejemplos que vienen con delphi, y los videos que hay en “Embarcadero Tech” (Youtube). Ahí puedes encontrar algunos ejemplos de conexión a Base de Datos.
    Hay varias formas de hacerlo, así que dependerá de la Base de Datos que quieras/debas utilizar.

    Un saludo.

  13. Juanlu
    martes, 18 de noviembre de 2014 a las 16:05 | #13

    Me has salvado la vida, estaba desesperado con el acceso a datos. Había pensado en lo del web services pero no caí en los JSON.
    Hasta había pensado en meter un iblite embebida en la app.
    Así funciona muy bien, una pregunta.
    Tengo que cargar en un listview unos 700 registros, no es que tarde mucho, pero algo si, depende del móvil. ¿puedes darme algún consejo?

    Muchas gracias por el tutorial.

  14. Neftalí
    martes, 18 de noviembre de 2014 a las 17:07 | #14

    @Juanlu
    No creo que sea cuestión de memoria, más bien de la cantidad de datos que vayas a traer y del tipo de conexión.
    700 registro “normales” no me parecen mucho para cualquiera de los móviles actuales.

    Un saludo.

  15. Daniel
    miércoles, 10 de mayo de 2017 a las 23:27 | #15

    Una pregunta y asi mismo puedo ir creando contactos desde la base de datos y se van actualizando en la app..? …?? o solo me salen los contactos q los creo al comienzo..?

  16. jueves, 11 de mayo de 2017 a las 07:32 | #16

    @Daniel
    Siempre te saldrán actualizados.
    Piensa que haces las consultas contra la Base de Datos, por lo tanto lo que haya en la Base de Datos es lo que saldrá en tu aplicación.

  1. Sin trackbacks aún.
What is 17 + 4 ?
Please leave these two fields as-is:
IMPORTANTE! Para continuar, debes contestar la pregunta anterior (para evitar SPAM) :-)