Tutorial de Bubble.io - Obtener la información del navegador del usuario en Bubble

En este vídeo aprenderás diferentes formas de obtener información del navegador en Bubble.

A la izquierda:

🔗 Detección de la plataforma del navegador por Mintflow https://bubble.io/plugin/browser-platform-detection-1593944068480x773811449950634000

🔗 Agente de usuario: http://wieistmeinuseragent.de/

🔗 Browser Language and Locale Plugin by Digital Eye https://bubble.io/plugin/browser-language-and-locale-1611674652831x297972691674333200

🔗 https://de.wikipedia.org/wiki/Locale

🔗 Toolbox Plugin de Misha V https://bubble.io/plugin/toolbox-1488796042609x768734193128308700

🔗 API de pila de usuario https://userstack.com

Fragmentos de código:

🤖 Fragmento de Javascript del agente de usuario:

var ua_result = navigator.userAgent;
bubble_fn_ua(ua_resultado);
console.log (ua_resultado);

🤖 Idioma del navegador:

var language_result = navigator.language;
bubble_fn_language(language_result);
console.log (idioma_resultado);

Transcripción del vídeo:

Hola, me llamo Chris Strobl, soy el fundador de No Code Germany y hoy hablamos de cómo obtenemos la información del navegador en la burbuja. Tenemos tres maneras de hacerlo. La primera forma es con el Plugin de Detección de Plataforma del Navegador. Este es un plugin gratuito de Mind Flow y vamos a empezar ahora mismo a ver cómo podemos utilizarlo.

Vamos una vez en los Plugins, instalar este plugin. Luego vamos a la pestaña de Diseño y añadimos este plugin en Detección de Plataforma de Elementos Visuales. Puedes ponerlo en cualquier lugar de la pantalla. Una vez añadido este plugin, ya tenemos acceso a los datos del navegador. Ya he preparado un campo de texto y aquí insertamos los datos dinámicamente. Esto significa Detección de Plataforma como ua ua significa Agente de Usuario. Si vas a la página web. ¿Cómo es mi Agente de Usuario D, verá lo que es un Agente de Usuario en detalle? Un agente de usuario es una parte de la cabecera http que se transmite. Esto da varias informaciones sobre el cliente, es decir, el ordenador del usuario. Cómo llega a esta web, por ejemplo, en mi caso todo es a través de un Mac y a través de un navegador Chrome.

Ahora si volvemos a la pestaña de diseño, podemos añadir los otros datos también y el nombre que hacemos Plataforma Detección un Nombre bajo Versión. Tomemos la versión, la disposición, la disposición. La descripción del sistema operativo de detección de plataformas del sistema operativo. Producto.

Y por último, Fabricación, Plataforma, Direcciones Fabricación. Vayamos a la vista previa y echemos un vistazo a lo que tenemos aquí. Verás, obtenemos el agente de usuario. Esto es exactamente lo mismo que aquí. Luego tenemos el navegador, Chrome. Tenemos la versión, el diseño. El sistema operativo con OS X. De nuevo, la descripción del navegador, pero no obtenemos el producto ni la fabricación.

Es decir, qué portátil o qué dispositivo final se está utilizando aquí. Como puede ver, obtenemos bastantes datos con el Plugin de Detección de la Plataforma del Navegador. Y ahora pasamos al segundo plugin que me gustaría mostrarte, es decir, el plugin Browser Language and local. Para ello, entramos de nuevo en el editor. Entramos en el plugin Browser Language and Local, lo instalamos y esto de nuevo es un plugin gratuito Conditional n y ahora vamos una vez en el diseño para usarlo.

En Elementos visuales, este lenguaje de navegación te inserta. De nuevo, este elemento no es visible en la página web, pero una vez insertado en la página, tenemos acceso a los datos. Volvemos al cuadro de texto y ahora insertamos un Idioma del Navegador como. Lenguaje y navegador local. Puede que te preguntes qué es un local y éste es una especie de parámetro ESTÁNDAR junto al idioma del navegador y éste podría ser Diseño para Alemania, por ejemplo. Y esto entonces tiene diferentes efectos en dos formatos de teclado, diseño, juego de caracteres, sino también los formatos de fecha.

Ahora vamos a entrar en la prueba y echar un vistazo al resultado... Puedes ver que en mi caso el idioma del navegador está configurado en inglés y el sistema operativo también está configurado en inglés localmente. En el siguiente paso, te mostraré cómo podemos obtener también el agente de usuario y el idioma del navegador sin un plugin, que está hecho especialmente, pero con el JavaScript Toolbox.

Para ello, entramos de nuevo en el editor en Plugins instalados, el plugin gratuito y muy popular Toolbox y luego entra en el flujo de trabajo y vamos si se carga la página. Modo de funcionamiento. JavaScript Aquí añadimos las siguientes tres líneas Y lo más importante aquí es que tenemos esta variable burbuja entre otras cosas para obtener el agente de usuario. También he puesto este fragmento de código en la descripción del vídeo para que podamos insertarlo. Vamos a entrar en el diseño de los elementos visuales de JavaScript dos burbujas. Añadimos esto. Ahora es importante que añadamos el sufijo, es decir, como acabamos de hacer en el flujo de trabajo. Y como tipo de valor hacemos texto y publicamos el valor que activamos. Ahora vamos a la vista previa y miramos el conjunto en El Cónsul. Porque tenemos el registro de la consola que se ha establecido aquí.

Eso significa que la vista previa es una vez. A continuación, hacemos clic con el botón derecho del ratón y vamos a la consola y ahora verá que hemos mostrado nuestro agente de usuario aquí una vez y por lo tanto ya hemos obtenido con éxito el agente de usuario. A continuación queremos mostrarlo en el campo de texto. Para ello, volvemos al diseño, entramos en este campo de texto y seleccionamos Agente de Usuario. JavaScript al valor de la burbuja. Agente del usuario. Volvemos a hacer clic en Vista previa.

Y ahora vemos que obtenemos exactamente el mismo agente de usuario aquí. Ahora queremos obtener el idioma del navegador a través de Toolbox. Para ello, volvemos al flujo de trabajo del editor. Cuando se carga la página. Plugins Ejecutar JavaScript de nuevo. Ahora copiamos estas tres líneas y esta vez el sufijo es el idioma y tenemos de nuevo así que bloquear para probarlo una vez. A continuación, entramos en el diseñado hacer el elemento visual JavaScript a la burbuja de nuevo, esta vez el lenguaje de sufijo. Valor público. Texto.

Y ve a la vista previa una vez ahora.

Investiga. En la consola y vemos aquí ahora. El idioma del navegador en GB. Luego queremos acceder a él exactamente de la misma manera en el lenguaje del navegador. Esta vez JavaScript a Bubble by value y vaya a Preview de nuevo. Y puedes ver, de forma análoga al Browser Language Plugin, que podemos hacer lo mismo con Toolbox. Ahora bien, si necesitas información más compleja sobre tus usuarios, también existen servicios como User Stack Users. ICQ es una API que permite obtener información en tiempo real sobre dispositivos de navegación o sistemas operativos. Y podemos integrar esto maravillosamente en la Burbuja con una API. Lo mejor es entrar en el ICQ de los usuarios y conectarlo al conector de la API.

Yo mismo ya me he registrado y, por tanto, voy directamente a la documentación. Para el usuario Steeg necesitas tus Claves de Acceso, que puedes encontrar en tu Configuración. Ahora vamos una vez en la burbuja al Conector API y allí ya he configurado la Pila de Usuarios. Esto significa que se toma la API del ActionScript de la Pila de Usuario como en la documentación.

E inserte sus claves API aquí Como autenticación se toman las claves privadas en la URL y luego. Hacer una llamada, concretamente una llamada a la API, allí los usuarios punto com barra. Luego agrega tu Agente de Usuario, lo copias del navegador que tienes aquí arriba. Y hacer el formato sin Aquí dejar todo abierto para usted. Entonces vamos a la llamada de las llaves del Rin. Y ahora puedes ver que obtenemos todo tipo de información directamente de User Steeg, por ejemplo, que uso un Apple, un Mac, que usamos qué sistema operativo exacto y otra información. Lo guardamos y ahora podemos utilizarlo directamente en Bubble.

Para ello, volvemos a entrar en el campo de texto y ahora añadimos. Obtener datos Froman, API externa, User Steeg Y hacemos este parámetro dinámicamente con JavaScript para Burbujear un valor que nuestro Agente de Usuario y luego para el Agente de Usuario, entre otros, a continuación, Obtener datos de la API externa. Lo hacemos todo de forma análoga. Y toma el nombre aquí. Coge el navegador. Aquí ahora Obtenga los datos de la API externa EE.UU. se eleva directamente. Y ahora necesito la versión del navegador aquí. Entonces el motor del navegador obtiene los datos de la API externa. Motor del navegador. Obtener datos de la API externa User Steeg Volvemos a hacer esto de forma dinámica.

Y pregunta si el conjunto es un dispositivo móvil. El blanco es móvil. A continuación, el sistema operativo. Nombre del sistema operativo. Y aquí hacemos Typekit y finalmente el Brant Obtener datos de una API externa. De nuevo, lo hacemos de forma dinámica y el Brant. Vamos a ir a la vista previa y echar un vistazo a esto... Y ya veis como ahora tenemos que obtener el agente de usuario igual que el anterior. Y en las otras formas. Pero también tenemos la información de que estamos usando un Mac, el nombre del navegador. La versión del navegador es similar a las demás. Pero también vemos el motor del navegador. Podemos comprobar si estamos utilizando un dispositivo móvil.

En este caso, todo está en el escritorio. Obtenemos el sistema operativo y también vemos que estamos usando un Apple y así puedes ver que tenemos diferentes formas de obtener información del navegador en la burbuja. Ese Plugin de Lenguaje del Navegador es falible en todas las áreas. Tanto el plugin de detección del navegador como la caja de herramientas tienen sus ventajas y desventajas. Y si necesitas más información, puedes ver que servicios como User Stack también son relativamente fáciles de integrar en la Burbuja.

Cuando se utilizan APIs como el SDK de usuario, sólo hay que tener en cuenta el aspecto de los precios. Especialmente si tiene más usuarios, estos servicios, por supuesto, ya no son gratuitos.

Si te ha gustado este vídeo, no dudes en hacer clic en el botón de "me gusta", suscríbete a nuestro canal, si tienes alguna pregunta, no dudes en escribirnos en los comentarios. Te deseo que sigas teniendo éxito y que nos veamos pronto.