2

Desarrollé una aplicación móvil con Ionic v1. En uno de los módulos o secciones que tiene mi app muestro datos de los usuarios, como nombre, email, teléfono y también la IMAGEN. La imagen esta guardada en mi servidor, mi WebService recibe el archivo desde la app móvil y la guarda.

Cuando selecciono a todos los usuarios para mostrarlos en la aplicación móvil el JSON que envió tiene el formato del objeto más la imagen codificada en base64. Probaba con 10 o 15 usuarios sin ningún problema pero hoy pasamos a la fase QA, con al rededor de 100 usuarios y ahí mi Servidor colapsó. Creo entender que es por tantos caracteres que devuelve mi función ya que la imagen viene en código base64.

Mi webservice esta creado en WCF framework 4.0 con C#, en el web config tengo lo siguiente :

<bindings>
  <webHttpBinding>
    <binding name="LargeWsHttp" maxBufferSize="2147483647"
             maxBufferPoolSize="2147483647"
             maxReceivedMessageSize="2147483647"
             transferMode="Streamed"
             sendTimeout="00:05:00">
    <readerQuotas  maxDepth="2147483647"
                    maxStringContentLength="2147483647"
                    maxArrayLength="2147483647"
                    maxBytesPerRead="2147483647"
                    maxNameTableCharCount="2147483647"/>
    <security mode="None" />
    </binding>
  </webHttpBinding>
</bindings>

Para el asunto de envío y recepción de datos. Pero obviamente debe superar este limite. Mi consulta es ¿Cual es la mejor opción para el tratamiento de las imagenes?

Pensé :

  • Enviar la URL de la imagen y mostrarla en la aplicación, el problema es que la app también puede funcionar offline.

  • Descargar la imagen desde la aplicación móvil y guardarla en la aplicación. Aquí no se si guarda como un archivo o bien en la base de datos local de la app guardarla con el código base64. Esta descarga la haria obteniendo la URL del archivo.

Los usuarios pueden aumentar, pueden ser 500, 1000, 2000 ya que es una aplicación que sera bien popular dentro de una comunidad de un deporte en específico.

Recibo ayuda y crítica constructiva, con el fin de mejorar mi producto.

Cualquier cosa que necesiten, código, explicaciones de los flujos etc, las entregaré.

5
  • 3
    Aquí hay un ejemplo guardando las imágenes en cache, a lo mejor y te es de ayuda github.com/BenBBear/ionic-cache-src
    – x4mp73r
    el 29 mar. 2017 a las 22:31
  • Hace tiempo que jugué con ellos y no recuerdo los detalles, pero en Java (no recuerdo que librería), se podía hacer el mensaje multipart; la primera parte era el mensaje en sí y el resto los "adjuntos"; la ventaja era que el parseo del mensaje era mucho más sencillo y rápido. Entonces usábamos XML, pero veo que "JSon+multipart" también da muchos resultados: stackoverflow.com/questions/9081079/…
    – SJuan76
    el 29 mar. 2017 a las 23:01
  • @x4mp73r gracias voy a revisarlo!
    – sioesi
    el 29 mar. 2017 a las 23:06
  • Lo que entiendo es que en la misma consulta o petición que realizas al WCF, obtienes todas las imagenes y si es asi, no seria lo indicado. Considero mejor opción la de enviar la URL de la imagen y desde la aplicación movil la empiezas a descargar en segundo plano y guardarla en el aplicativo movil. el 19 abr. 2017 a las 13:32
  • @x4mp73r por favor, comentar el plugin como respuesta para marcarla. Eso soluciono mi problemas. Saludos!
    – sioesi
    el 24 may. 2017 a las 20:11

1 respuesta 1

2

Puedes utilizar este plugin, el funcionamiento es mas que nada:

Verifica si encuentra la imagen en cache, en caso de no tenerla, la descarga y la muestra. La próxima vez que se abra la app mostrará todo desde cahe sin necesidad de volver a descargar de nuevo.

Instalación:

bower install ionic-cache-src

Este plugin depende de ngStorage, ngCordova, angular-svg-round-progress. Por lo tanto, se tienen que cargar al index.html.

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script> <!-- Esto puede ser opcional-->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
<script src="lib/ionic-cache-src/ionic-cache-src.js"></script>

También se tiene que añadir a las dependencias en el módulo de angular:

angular . module(' myApp ', [ ' ionic' , ' ionic-cache-src ' ])

Para ver mas personalización y distintas formas de uso con otras tags se puede visitar el repo en el link de arriba.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.