Detectar navegación movil en Laravel

Al momento de desarrollar aplicaciones web, es indispensable pensar en la adaptabilidad de cualquier aplicación web y uno de estos aspectos pasa por detectar de manera programática el tipo de dispositivo con el cual se está accediendo a la aplicación: ¿es un dispositivo móvil o un ordenador de escritorio?.

Experiencia del Usuario (UX) Optimizada

La experiencia del usuario es primordial, si la aplicación tarda mucho tiempo en aparecer o aparecen muchos elementos que no son importantes, y esto es un factor importante si se accede a la app web desde un dispositivo con pantalla reducida como un teléfono, se debe de adaptar la interfaz en base a los criterios anteriormente descritos y con esto, mejorar la usabilidad y la satisfacción del usuario.

Rendimiento y Carga Eficiente

Los dispositivos móviles suelen tener recursos más limitados en comparación con los ordenadores. Detectar el tipo de dispositivo nos permite cargar sólo los elementos necesarios por ejemplo, si tenemos un blog, y tenemos en un lateral un menú de opciones y publicidad, en el modo móvil podemos evitar que se cargue la misma dando prioridad al contenido que el cliente quiere visualizar.

SEO y Posicionamiento en Buscadores

En una aplicación tipo blog el SEO no puede faltar, y es que precisamente los dos aspectos mencionados anteriormente son fundamentales para que motores como Google verifiquen que el modo móvil presentado es óptimo y no tiene elementos que compliquen la navegabilidad de la aplicación.

Compatibilidad con Tecnologías Emergentes

La aplicación es más que código en Laravel, la experiencia desde el lado del cliente es fundamental, puede que exista alguna tecnología experimental que solamente funcione en algunos dispositivos y que puedes definir para que funcionen en estos dispositivos, obviando los demás.

En esta entrada vamos a conocer una tecnología que nos permitirá crear los cimientos para lograr lo anteriormente señalado, que son solamente algunos puntos que debemos de tener en cuenta y de la importancia de detectar el tipo de dispositivo.

Este paquete, permite determinar entre una gran cantidad de dispositivos como:

isiPhone()
isXiaomi()
isAndroidOS()
isiOS()
isiPadOS()

Aunque, usualmente lo que queremos es determinar si un usuario está navegando por nuestra aplicación en Laravel mediante un teléfono o computador, para ello, tenemos acceso a la siguiente función:

$detect = new MobileDetect();
$detect->isMobile();

Este es un paquete para PHP y no específico para Laravel, aunque Laravel tiene unos pocos paquetes para lograr este objetivo:

Al momento en el cual se escriben estas palabras, llevan varios años sin actualizar y no funcionan es las últimas versiones de Laravel, asun así, este paquete lo podemos emplear in mayor problema; desde nuestro proyecto en Laravel, ejecutamos el siguiente comando de composer:

$ composer require mobiledetect/mobiledetectlib

Para emplearlo, podemos crear una función de ayuda, como vimos en el apartado de los helpers:

function isMobile()
{
   $detect = new MobileDetect();
   // var_dump($detect->getUserAgent()); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
   try {
       return $detect->isMobile(); // bool(false)
   } catch (\Detection\Exception\MobileDetectException $e) {
   }
   return false;
   // try {
   //     $isTablet = $detect->isTablet(); // bool(false)
   //     // var_dump($isTablet);
   // } catch (\Detection\Exception\MobileDetectException $e) {
   // }
}

Y con esto, podremos acceder a la función isMobile() desde cualquier parte de nuestra aplicación, ya sea un archivo blade, controlador u otro.

Transcripción del vídeo

Seguramente muchas veces va requerir poder detectar el tipo de dispositivo con el cual está accediendo tu usuario ya sea para medir algunas métricas internas o usualmente para poder cambiar la experiencia de la ui Es decir de la interfaz gráfica y poder optimizarla al mismo ya que hay cosas que puede que tú quieras Mostrar y generar para cuando está consumida mediante un ordenador y hay otras cosas que vas a querer remover o simplemente agregar y ya no me refiero solamente al estilo ya que esto lo pudieras hacer fácilmente mediante css sino ya directamente a funcionalidades dibujar un banner más quitar por ejemplo un diálogo de alertas para mostrar información cuando estamos en dispositivos móviles para que no salgan esas fastidiosas alertas cosas de ese tipo Entonces esto se puede hacer en laravel fácilmente ahora bien aquí tenemos como que algo que analizar ya que si buscamos móvil laravel detector o algo así vas a encontrar algunos paquetes si los abrimos:

Tiene como 8 años que no se actualiza y como puedes suponer no te va a funcionar no lo vas a poder instalar y por aquí también tenemos otro bastante antiguo entonces no te va a funcionar por lo tanto tenemos que ir a otra forma de poder utilizar o poder instalar este tipo de características Entonces es aquí donde podemos revisar un paquete que no es específico para Laravel sino es ya genérico para php que viene siendo el que tenemos aquí en pantalla el de Movil detection cuya página viene siendo la que tenemos Bueno aquí te indico que es básicamente esto que esto es no es un paquete específico para Laravel sino es genérico para a php voy a buscar aquí por el nombre este enlace te lo voy a dejar en la descripción de este video cualquier cosa que no esté me lo indicas y esto es otra vez para php Fíjate que por aquí no aparece nada de laravel tal cual puedes ver y lo podemos adaptar perfectamente ya que ambos emplean composer para poder funcionar entonces mientras te voy dando un poquito más de información de esto puedes ir al enlace asociado a este video instalar mientras tanto el de móvil detector móvil detector y dejarlo ahí entonces otra vez me parece importante otra vez volver un poco a lo que sería la importancia de esto como te indicaba para mejorar experiencia del usuario y con este optimizar también la carga de los recursos Ya que en un dispositivo móvil es obviamente un equipo más limitado que un ordenador y por lo tanto ahí tenemos que optimizar los recursos que estamos cargando es decir si no vamos a emplear algo para un dispositivo móvil que si empleamos en ordenador simplemente mediante un condicional en lo que sería por ejemplo el controlador o playade pudiéramos simplemente limitarlo o o no devolverlo Ya de una ya vamos a hacer unos ejemplos con esto pero a la finales si por ejemplo tienes un js que solamente vas a utilizar en ordenador entonces ahí colocas un condicional y si es un dispositivo móvil por ejemplo Y es ahí donde no quieres devolver el dicho recurso colocas un condicional y simplemente dice que si es un dispositivo móvil no lo devuelva y se acabó el asunto es básicamente eso, entonces ya a partir de aquí puedes verle un poquito de sentido a todo esto es para mejorar la eficiencia y la carga más o menos lo mismo que te indicaba por acá en base a la u poder mejorar los tiempos de respuesta y esto obviamente también es un punto importante si tienes un blot y quiere mejorar lo que sería el seo y el posicionamiento y es precisamente para no devolver tanto recursos sino lo mínimo necesario para que bueno el usuario pueda disfrutar la experiencia y bueno puedes ver que es es un paquete que sí se actualiza:

composer require mobiledetect/mobiledetectlib

y lo pudimos instalar aquí perfectamente tal cual puedes ver entonces ya ahí lo pudiéramos emplear y cómo funciona básicamente tenemos varias funciones para detectar el tipo de dispositivo claro esto usualmente no lo queremos A menos que quieras guardar algunas métricas ahí sí pudieras emplearlo pero usualmente Queremos saber si es PC o si es un dispositivo móvil para hacer sea lo que sea que quieras hacer y para para eso tenemos una función llamada isMobile() que es la que pudiéramos emplear ojo otra vez existen muchísimas funciones y la puedes evaluar cuando instalemos y cuando empecemos a referenciar estas funciones pero para efectos de este video simplemente voy a utilizar esta y luego las otras Simplemente te las presento pero son de este estilo obviamente ya son bastante descriptivas si estás en iOS entonces en caso de que no sé el navegador de iOS o algo por ahí tenga una característica especial de ese ambiente y pudieras colocarla y si no bueno no la colocas Bueno ya lo instalamos y aquí tenemos un pequeño ejemplo de lo que nosotros vamos a hacer entonces por aquí lo que hacemos Es crear una instancia de móvil detector por aquí preguntamos cuál es el agente bueno esto lo coloqué en un Bom para que lo pudieras ver y lo que nos interesa aquí es preguntar si is Mobil es decir si es un dispositivo móvil y aquí bueno Esto puede lanzar una sección y por eso que lo colocamos acá bien para poder emplear esto en cualquier parte lo mejor es crear un archivo donde ayuda y luego referenciamos elile desde donde nosotros queramos Así que es lo que nosotros vamos a hacer ya que otra vez recuerda que es un paquete genérico para php entonces rapidito vamos a crear aquí ahora aquí el composer voy a crear aquí una carpeta llamada helpers muy pendiente con las mayúsculas punto bueno si la quieres colocar en mayúscula si no coló en minúsculas pero a lo que me refiero cuando lo vayamos a referenciar siempre creo una carpeta tengo que darle la opción de aquí en App Ahora sí venimos acá
rapidito y buscamos el de este que tenemos aquí colocamos comillas dobles colocamos fields:

"autoload": {
       "psr-4": {
           "App\\": "app/",
           "Database\\Factories\\": "database/factories/",
           "Database\\Seeders\\": "database/seeders/"
       },
       "files": [
           "app/Helpers/helper.php",
       ]
   },

Me pareció la opción coloco una coma aquí y colocamos nuestros archivos de ayuda que en este caso es solamente este de hel bueno Me faltó aquí agregar el de App otra vez pendiente aquí con las mayúsculas lo mejor es que puedes hacer aquí es copiar y pegar para que no te equivoques en nada y colocas app aquí por supuesto Entonces ya esto lo vimos anteriormente:

composer dump-autoload

Para que nos referencie el archivo que acabamos de crear lo dejamos ahí y mientras tanto podemos ir trabajando por acá qué es lo que vamos a hacer vamos a crear una función colocamos función colocamos por ejemplo is Mobile para este ejemplo en la cual vamos a detectar el dispositivo voy a llamarlo aquí detect va a ser igual a New móvil:

function isMobile()
{
   $detect = new MobileDetect();
   // var_dump($detect->getUserAgent()); // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."
   try {
       return $detect->isMobile(); // bool(false)
   } catch (\Detection\Exception\MobileDetectException $e) {
   }
   return false;
   // try {
   //     $isTablet = $detect->isTablet(); // bool(false)
   //     // var_dump($isTablet);
   // } catch (\Detection\Exception\MobileDetectException $e) {
   // }
}

Fíjate que ya le importa ahí tienes el paquete En caso de que no lo encuentre y por aquí vamos a preguntar qué demonios es detect get user agents para obtener el agente Bueno aquí puedes un click como te digo y empezar a explorar todas las funciones o métodos que tenemos acá; debes de inspecionar el código fuente de la librería y con eso, ver todas las funciones disponibles

table si es un si es una tablet tenemos muchas entonces si quieras algo más específico seguro ente por aquí lo encuentras Bueno creo que ya entendiste el punto son muchos entonces ya a partir de este punto que esto es un un heer Entonces los podemos emplear desde cualquier parte de momento … obviamente funciona tal cual puedes ver que era lo importante de todo esto qué es lo que te haas con esto ya depende de ti en este caso como te digo usualmente lo que queremos es saber qué dispositivo estamos utilizando si es un pc si es otra cosa Bueno un móvil y por lo tanto es la implementación que nos que yo voy a hacer pero otra vez aquí puedes ver que le puedes sacar mucho jugo a esto dependiendo de lo que quieras realizar entonces voy a colocar aquí el TR set tal cual indica la documentación oficial ya esto lo puedes ver en la documentación oficial aquí no me interesa hacer nada aquí sería el de móvil detection ex section sería esto y por acá vamos a retornar sí esto es muy emocionante vas a ver la salida is Mobile que nos indica si es un dispositivo móvil o no y lo que puedes esperar que va a ocurrir por aquí es que no vemos nada porque no es un dispositivo móvil y por lo tanto devuelve un falso y eso es lo emocionante de esto que no vemos nada entonces voy aquí darle f12 para abrir aquí mi herramientas de desarrolladores doy al iconito y coloco aquí un dispositivo móvil y bueno no vemos demonio a ver cómo le hago con el zoom porque está un poco complicado aquí debería aparecer Lo que pasa que hay mucha cosa aquí en esta vista voy a quitar todo esto del Body al menos para este ejemplo ahorita lo coloco otra vez ahí está nuestro bonito uno que indica que estamos en un dispositivo móvil porque bueno esto un dispositivo móvil y por lo tanto ahí lo podemos ver si tienes dudas de qué es lo que está haciendo puedes venir acá y descomentar esto desc comamos y aquí puedes ver que indica que estás en Bueno un dispositivo Mac es un móvil es un iPhone porque es el dispositivo que yo seleccioné Claro puedes seleccionar aquí un Pixel y otra vez se fue el zoom el demonio y aquí vemos un poco la información … lo que puedes ver en pantalla si venimos otra vez a navegador normal Aquí vamos a ver queé es un pc tal cual puedes ver en mi caso es Windows Entonces es eso básicamente qué es lo que hagas con ya depende de ti ya que otra vez puedes ver que lo podemos emplear perfectamente desde aquí desde el Welcome digo des Blade en caso de que no lo entiendas todavía voy a hacer aquí un pequeño ejemplo a la final todo estos son siempre condicionales B coloco bf hay que coloco ismobile aquí … quería llegar con esto que esto es lo mejor que nosotros podemos hacer y es algo que también puedes adaptar a otros paquetes si quieres un paquete que está para php que es así de sencillo es decir no tiene mucha integración con nada y lo puedes instalar perfectamente en larabel tal cual pudiste ver entonces para facilitarte la vida para hacerlo como quien dice compatible con laravel simplemente puedes crearte aquí un helper o un fake también pero en este caso yo recomiendo los helpers y Bueno le colocas ahí tu lógica y lo empleas desde cualquier parte de la aplicación así que queda como si fuera nativo a nivel de nuestro framework Así que pues nada sin más que decir vamos a la siguiente clase.

05-08-2024 - Andrés Cruz

In english

Laravel Laragon

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy