Transcripciones
1. Introducción: ¿ alguna vez has querido convertir tus pies más prototipos en una app nativa de Rus y Android ? Si es así, estás en el lugar correcto. Hola, Mi nombre es un sarpullido y soy diseñador de UX en las partituras, tú y yo vamos a diseñar y crear tres diferentes re premio APS juntos, una app de contacto y RSC PM, y un seguro justo sin cortar. Ya me escuchaste, con la ayuda de la plataforma Bravo, es posible convertir realmente tus pies. Mi diseño en APS nativa rápidamente. Y la buena noticia es que puedes publicar tu app en la app store o lugar. O al final del curso, aprenderás a hacer de riel world aplicaciones que están conectadas a una base de datos utilizando la Bravo Story una plataforma. Entonces si estás listo para subir de nivel, tus habilidades están viendo clase
2. ¿Qué es Bravo?: Hola a todos. Y bienvenidos de nuevo a otro video de thes curso en estos video, vamos a estar hablando de Bravo. ¿ Qué es Bravo? Bravo es una plataforma en línea que ese eres tú. Convierte tus prototipos de figura en la app nativa Rus y Android. Incidente. No se requiere cotización. Es increíble, ¿no? Pero, ¿cómo funciona? Bravo utiliza etiquetas especiales con el fin de dividir el diseño de tu app en diferentes partes. Por caso, si tienes una barra de navegación y necesita pegarse a la parte superior de tu pantalla, podemos usar su etiqueta específica para hacerlo. Dónde debes escribir estos tanques deben en el tanque que quieres usar después del nombre fuera de tu capa en la capa este En los videos caídos, aprendes a usar estos tanques en tu proyecto, así que mira que
3. Crea una aplicación RSVP: Hola a todos. Y bienvenidos de nuevo a otro video de las partituras. En este video, vamos a crear una sencilla aplicación R S V P, la cual va a estar recogiendo algunos datos. Para ello, necesitamos crear una cuenta sobre estudio Bravo, un sitio web que se llama bravo studio dot app. Entonces lo que quiero que hagas es que sigas adelante y abras este sitio web y aquí puedes
registrarte fácilmente . Perfecto. Y seguro, necesitas tener una hazaña. Mi cuenta y cabe mencionar que usar Bravo es totalmente gratis. Por lo que no necesitas pagar nada por estos servicios, lo cual es impresionante. Está bien. Y luego puedes registrarte con tus pies, mi cuenta o con tu cuenta de Google. No obstante, te
sugiero que firmes a tus pies mi cuenta, porque más adelante, es mucho más fácil conectar nuestro higo, mi diseño al estudio Bravo. Entonces sigamos adelante y pinchemos y registrémonos con Vignal. Bastante bien. Y aquí te está pidiendo tu permiso y voy a dar click en permitir acceso bastante bueno. Y ahí vamos. Cuando firmas primero, tienes tres proyectos que crear. No obstante, si quieres conseguir más, puedes referirte fácilmente a tus amigos. Y si se inscriben, pueden conseguir más proyectos. Y ahora es el momento de ir a nuestros pies. Mi cuenta. Ahí vamos. De hecho, el objetivo de este curso es darte la capacidad de convertir tus prototipos de higment en un IRS nativo y Android. Por lo que no vamos a hablar de diseño específicamente en las partituras. Entonces, en primer lugar, como adivinan, necesitamos tener un tablero de arte. Entonces voy a presionar una en mi palabra clave y en tu lado derecho, podemos elegir entre diferentes dispositivos. Asegúrate de usar una placa de arte para dispositivos móviles porque el estudio Brahma está hecho para crear aplicaciones
móviles, no sitios web. De acuerdo, entonces voy a seguir adelante y elegir iPhone 11 pro o ex, fantástico. Y déjame hacer doble click en su nombre para poder renombrarme a R S V. P. Uh, bastante bueno thes proyecto va a tener sólo una pantalla. OK, ahora, sigamos adelante y cambiemos el color de fondo a algo así como azul oscuro. Está bastante bien. Y después de eso voy a seleccionar texto presionando el té en mi teclado y crujiendo aquí. Fantástico. Vamos a la derecha. Bienvenido de nuevo. Voy a cambiar su color a blanco y vamos a hacerlo más grande. Entonces voy a fijar el tamaño del fondo a 60 puntos bastante bueno. Y déjame disminuir el con off esta capa de texto. Creo que si disminuyo la finca, tamaño sería mejor para es bastante bueno. Es la cabecera va a ser 90 y queda. Patting va a ser 40 tienen razón. Y ahora voy a seguir adelante y crear un rectángulo como este. Arrastremos y soltemos bastante bien. Y también puedo aumentar el radio de esquina a 20. Fantástico. El color de este rectángulo no importa, porque más adelante, vamos a poner siempre. ¿ Estuvo encima de este rectángulo? Está bien, tienen razón. Fantástico. Hay una cosa que debes tener en cuenta. Y así es como Bravo puede reconocer diferentes partes fuera de tu app. Está bien. Como ya he mencionado en el video anterior, Bravo utiliza algunos tanques con el fin de dividir la pantalla de tu app en diferentes partes. Ok, Uno de esos tanques se llama contenedor. Entonces, por ejemplo, aquí necesitamos tener un contenedor, que es toda la pantalla, porque no vamos a repetir esta pantalla una y otra vez. Entonces lo que voy a hacer es seleccionar el marco a la derecha en la parte superior. Y ese es Dragon Drum arriba, nerd. Dos pies, toda
la pantalla Fantásticos tienen razón. El nombre no importa aquí. Como ya les dije antes, vamos a cargar una página web aquí. Pero, ¿qué tipo de página web? No estoy seguro si estás familiarizado con el sitio web type form o no, Pero déjame darte una breve explicación sobre esta gran plataforma. En realidad, type form es una plataforma en línea que te permite crear formularios dinámicos con el fin de recopilar datos de tus clientes o de tus clientes que podamos crear. Las encuestas pueden crear diferentes formas. Incluso puedes aceptar pagos. No obstante, en estos tutorial, vas a utilizar un formulario de tipo simple con el fin de recopilar algunos datos y escribir formulario
guardará esos datos para nosotros de forma gratuita. Eso es bastante guay. Entonces, antes que nada,
asegúrate de apuntarte en forma de tipo que calma y con pluma libre. Se pueden crear hasta tres formularios y se pueden obtener hasta 100 respuestas al mes, lo cual es bastante aceptable para efectos de este curso. Entonces, primer lugar, lo que quiero que hagas es dar click en el nuevo tipo cuatro, y aquí tienes acceso a diferentes plantillas. Se puede abrir, por ejemplo, formularios y registro. Ahí vamos, y aquí hay dos opciones. Hagamos clic en plantilla de formulario de registro en línea, la correcta Bastante bueno. Aquí, puedes previsualizar tu plantilla, según conceda, nos hola y vamos a dar click y ponernos en contacto. Empecemos con tu nombre de pila. Escribamos un sarpullido, un derecho sombreros un cardo y tu dirección de correo electrónico preguntada en test dot com, y aquí puedes elegir un país. No importa qué país elijas y registre mi información. Perfecto. Entonces así es básicamente como funciona el tipo de forma. Y ahora sigamos adelante y pinchemos. Usa esta plantilla bastante buena aquí. Podrás crear diferentes preguntas en función de tus necesidades. Podemos constantes les miente algunos apagados. Se paga a los maestros, pero no necesitamos trabajar con esas características pagadas por ahora. Entonces lo que voy a hacer ahora es hacer clic en este icono de diseño Fantástico, y vamos a personalizar. Y aquí puedes personalizar tu formulario como desees, lo cual es bastante genial, ¿no? En primer lugar, voy a cambiar el color de fondo porque si vuelvo a nuestro diseño fig MMA, hemos usado un color azul oscuro. Y cuando estás cargando esa edad de rep aquí, no
es tan guay tener aquí un fondo blanco. Entonces lo que voy a hacer es seleccionar toda la pantalla. Voy a copiar el código de color de la sección de combustible, y ha vuelto a nuestro formulario de registro en forma tipo que calma. Y aquí voy a abrir este color Bagram. Y vamos a dar un paso a este código aquí. Fantástico. Lo siguiente que necesitamos cambiar es el color de nuestras preguntas. Creo que si lo cambias a esposa, sería genial. Ahora vamos a dar click en publicar, ya
sabes, para publicar tus cambios y luego y vamos a dar click en Guardar como nueva cosa que guardó. Una vez más, eso es publicarlo fantástico. Y si voy a conectarme, puedes ver que puedes conectar tu tipo formulario cuenta dos servicios diferentes como hojas de
Google, Google analytics, etcétera. Incluso podemos conectarnos a tu cuenta de mesa aérea lo cual es bastante útil. Y usaremos este sitio web en nuestros próximos proyectos. Créeme, va a ser tan interesante. Está bien, Ahora, vamos a compartir. Y aquí está nuestro enlace. Ahora es el momento de dirigirse a los tanques de Brambles. Página. De acuerdo, entonces si abres, sitio web
brother studio dot y te desplazas hacia abajo hasta el final de la página en la sección de pie , podemos ver el enlace de aprender debajo del recurso es sección. Entonces voy a dar click en eso. También puedes obtener acceso a esta página usando esta guía de ayuda. Fantástico. Y en la sección de conceptos, puedes abrir tanques Bravo. Entonces, vamos a dar click en eso. Ahí vamos. Y aquí está al menos fuera de los tanques Bravo que puedes utilizar en tus proyectos. En estos proyectos, vamos a usar un arma. ¿ Estás bien? Ahí vamos. Aquí está nuestro elemento. Y aquí está nuestro tanque. Entonces voy a hacer doble clic en ese copiado y su cabeza sobre nuestro proyecto de figura. Y aquí hay un rectángulo. Voy a hacer doble clic en eso. Vamos a renombrarme a por ti. El nombre no importa, así que puedes elegir lo que quieras, y voy a pegar nuestro componente. Y por último pero no menos importante, necesitamos copiar este enlace de forma temporal que vienen y vamos a pegarlo aquí, justo por allá. Naturaleza para pegar el enlace en el lugar correcto justo después de esto, Colin. Y ese es O. Pero ¿cómo puedes revisar tu app? Es tan sencillo. En primer lugar, sigamos adelante y cambiemos tu nombre a R S V P. Nuevo. Y luego voy a dar clic y compartir y ka peeling, luego dirigirme a Brava Studio y hacer clic en Importar desde Fig MMA y peguemos el enlace aquí. Importación. Se va a llevar un momento, y ahí vamos. Ahora eres Proyecto FEMA. Está conectado con éxito a tu estudio Bravo. Y para poder previsualizar tu app en tu teléfono, debes descargar la app Bravo vision en tu teléfono. Si puedes,
puedes previsualizar el icono de tu lado derecho. Hay un código Q R. De acuerdo, este es el código de cura de tu aplicación, y si quieres una vista previa en un iPhone, puedes dar click en discernir. Todavía no está en la tienda APP,
sin embargo, sin embargo, se puede descargar aplicación de vuelo de prueba y luego se puede en Seúl la aplicación de visión Bravo fácilmente . Y si quieres usar un dispositivo android, puedes obtener la app de la tienda de juegos. Cuando tengas la app, puedes abrirla y luego verás dos fondos diferentes. El primero se llama Vista previa una APP, y el 2do 1 se llama C Scan APS. Demos click en Vista previa de una app Fantástica. Y como puedo ver, ahora
puedes escanear tu código de cura para que la señorita pueda. Y ahí vamos ahora. Como puedes ver, tu forma de tiempo es baja que en tu app, que es bastante genial. Y si hace clic puede ponerse en el botón táctil, se
puede ver que funciona perfectamente. Entonces voy a escribir mi nombre,
mi apellido y una dirección de correo electrónico. Ese eres tú, el país, presentarte
aleatoriamente. Y eso es todo. Fue bastante guay, ¿no? Pero donde se guardan nuestros datos. Si vuelves a tu cuenta de formulario tipo, hay otro toque llamado resultados. Entonces voy a dar click en eso y ahí vamos aquí tenemos una respuesta, y si vas a respuestas aquí, podemos ver tu respuesta. También puedes descargar todas las respuestas aquí. Y la gran parte es siempre que decidas cambiar algo en tus cuatro, por ejemplo, si vas a crear y quieres cambiar algo aquí, va a cambiar de inmediato en tu app. Es bastante increíble, ¿no? Muy bien, chicos, eso es propio de estos videos. Espero que lo haya disfrutado y te veo en el siguiente video.
4. Crea una aplicación de contacto: Hola a todos. Espero que lo estés haciendo bien en estos videos. Vamos a seguir adelante y crear un contacto menos juntos. No obstante, esta vez vas a usar un A P I con el fin de sacar algunos datos de un servidor. Está bien, pero no te preocupes, voy a hacer que sea tan sencillo para ti menos enviado. Entonces, antes que nada, sigamos adelante y abramos Sigma. Y aquí acabo de crear un nuevo proyecto llamado Contact That. De acuerdo, va a tener una sola pantalla. Entonces vamos a presionar un en nuestro teclado y voy a insertar un nuevo tablero de arte. Escojamos iPhone 11 pro o huevos bastante buenos. Y es llamarlo contacto. Fantástico. Y en nuestro contacto, menos, vamos a tener algunas tarjetas. De acuerdo, que mantiene la información fuera de nuestros contactos. Entonces supongamos que vamos a poner el nombre y apellido y también la dirección de correo electrónico a nuestros usuarios. De acuerdo, Entonces, antes que nada, necesitamos crear una tarjeta. Voy a seguir adelante y elegir el rectángulo de la barra de herramientas, y vamos a arrastrar y soltar así. Fantástico. Voy a alinearlo al centro o está enteramente. Y como se puede ver, la almohadilla derecha e izquierda. Se dice que Ings a 24 píxeles, lo cual está bien. Voy a cambiar el máximo a 80. Fantástico. Y entonces aumentemos el radio a 10 así, y voy a poner el color a blanco bastante bueno. Como puedes ver, es invisible porque no tenemos sombras. Entonces voy a añadir efectos y esa ciudad para soltar sombra. Y voy a poner la cantidad de Blair en 20 y de yo asciendo a 10 bastante bueno en. Disminuya la capacidad a 10% o incluso menos. Vamos a ponerlo al 5%. Está bastante bien. También puedes agregar struck a ella. Entonces voy a añadir trazo y vamos a disminuir su espesor a 0.5 bastante bueno. Puedes cambiar su color a lo que quieras, pero por ahora es increíble. Ahora necesitamos tomar asesinos, el 1er 1 para nuestro nombre y apellido y el 2do 1 para nuestra dirección de correo electrónico. Entonces voy a presionar el té en mi teclado. Ese es Quicken aquí. Eso es correcto. Nombre y apellido que ha disminuido el tamaño de la fuente a 18 puntos. Fantástico. Voy a moverlo al lado izquierdo. Está a la izquierda y los encabezamientos superiores van a ser 16 células de cerdo como esta y déjame cambiar el camino a medio. Voy a duplicarlo, moverlo hacia abajo, y el relleno entre ellos va a ser seis celdas grandes. Creo que está bien. Y ahora cambiemos el camino a lo regular. Y aquí, vamos a escribir correo electrónico. No obstante, ten en cuenta que no tenemos información sobre la longitud de nuestro nombre y apellido y también la dirección de correo electrónico. Entonces aumentemos el con off nuestro texto. Capas como esta fantástica y ésta también. Bastante bien tienen razón. Todo está bien. Ahora. Seleccionemos todas estas capas y haga clic derecho y una de estas capas y elijamos la
selección de marcos . Como ya he mencionado antes, necesitas estructurar tu app de una manera que Bravo pueda entender fácilmente. De acuerdo, entonces esta tarjeta es un contenedor. Voy a cambiar su nombre a menos y entre paréntesis. Escribamos contenedor y básicamente terminamos. No obstante, una cosa más importante ya que podemos ver el marco que acabamos de crear, es no tocar ninguno fuera de los bordes de nuestro tablero de arte, y esto es un problema porque Bravo puede reconocer un contenedor siempre que al menos uno de los bordes de cada marco toca el tablero de arte. De acuerdo, entonces aquí podemos solucionar fácilmente este problema aumentando el con off este marco. Entonces voy a incrementarlo así. Fantástico. Y luego te voy a mostrar un buen truco. Seleccionemos todos nuestros elementos manteniendo pulsada la tecla shift en nuestro teclado. Agruparlos presionando el comando G. Si estás usando Mac o control. Cielos, si estás usando ventanas y aquí tenemos un grupo. Ahora alinémonos al centro horizontalmente y un punto más importante que debes tener en cuenta. Bravo no te deja en pad ings a tus elementos en Brava Studio. Por lo que necesitas predecir tu relleno con anticipación. Por ejemplo, aquí supuso que empezamos a duplicar estas tarjetas bien, porque no tenemos ningún relleno. Se va a ver así. De acuerdo, que no es lo que queremos. Por lo que necesitamos agregarle algunas almohadilla ings para que quede claro. Entonces aumentemos también la altura de nuestro contenedor. Al igual que esto. Creo que es genial, tienen razón. Eso es todo por ahora. Adelante y saquemos el enlace. Yo lo voy a copiar. Voy a ir a Bravo. Estudio importa desde pies. Mamá, lo voy a pegar aquí. Importar. Y ahí vamos. Ahora nuestro diseño está conectado con Bravo Studio, pero no hace nada. ¿ Cómo podemos agregar algunas funcionalidades para comer? Como mencioné antes en este proyecto, vamos a usar algunos ojos AP. Qué hay en un P I Ap I significa interfaz de programación de aplicaciones. Algunos de ustedes tal vez no tengan idea de lo que es. Entonces déjame explicártelo con palabras simples. Supongamos que estás en un restaurante y quieres pedir algo para comer. Cuando ordenes, tu pedido debe ser trasladado a la cocina. ¿ Verdad? Por lo que la persona que traslada tu pedido a la cocina se llama A P i o mesero en un restaurante. Entonces un p. soy básicamente un mensajero que va a enviar una solicitud al servidor y luego te toma la respuesta también. Muy bien, eso es suficiente para una teoría. Entonces ahora vamos a meternos en ello. Lo que quiero que hagas es abrir Google y buscar Jason Placeholder y dar click en la primera entrada. Ahí vamos. Este sitio web nos proporciona los ojos AP públicos amigos. En realidad, tenemos diferentes tipos de ojos AP, por ejemplo, que tienen ojos AP públicos o privados. Pero para ti como diseñador, no
es importante sumergirte en los puntos técnicos. No obstante, debes saber que con la ayuda de un A p I, puedes recibir algunos datos de un servidor de forma remota Ok, justo ahí bajo el recurso es sección. Se puede ver que tenemos diferente recurso es como posts, comentarios, álbumes, fotos para hacer usuarios y estos son los números son respuestas. Está bien para estos proyectos, vas a usar el último, que se llama usuarios. Entonces vamos a abrirla están bien Ahí vamos. Como podemos ver aquí tenemos algunos tecnicos que se estructura extrañamente para aquellos de ustedes que no saben cómo se llama la estructura. Me gustaría decir que se llama Jason. De acuerdo, Jason significa notación de objetos JavaScript, y nos ayuda a golpear sus datos de una manera clara. Y también nos ayuda a recuperar y leer datos fácilmente. De acuerdo, Así que como puedes ver aquí, tenemos d nombre, nombre usuario, dirección de
correo electrónico y bajo dirección. Contamos con calle suite C T código Z, etcétera. Entonces lo que voy a hacer es seleccionar el enlace que se copia y volver al estudio Brava. Y esta vez, en lugar de ir a la sección de proyectos, voy a ir a la biblioteca de datos. Entonces, elijamos eso. Como puedes ver, ya
he agregado algunas colecciones de datos para probar cosas. Así que haga clic en nueva colección y su nombre lo. Contacta la descripción no importa. Contacta también. Eso salvó. Y ahí vamos aquí, puedes crear una solicitud. Como ya les he explicado antes, enviaremos una solicitud con el fin de obtener algunas respuestas. Entonces vamos a dar click en este ícono azul. Ahí vamos. Y puedes cambiar el nombre de tu solicitud aquí. Entonces voy a renombrarme también Contactar Menos Fantástico. Voy a quitar estos u r l y vamos a dar un paso al u r l que acabamos de copiar del sitio web Jason Placeholder. Y debido a que este es un AP público, no tenemos
que proporcionar ninguna contraseña a Brahma studio o digamos clave, Ok, así que simplemente podemos seguir adelante y tocino enviar nuestro derecho. Y ahora, como pueden ver, tenemos algunas respuestas aquí. Parece complejo. Ya lo sé, pero créeme, es tan sencillo. Entonces como puedes ver, tenemos datos que tenemos que i d que un nombre, nombre de
usuario, usuario dirección de
correo electrónico y todas esas cosas que acabamos de ver. Por ejemplo, Como pueden ver, tienen yo d un nombre. Y aquí se puede ver el nombre de idea Juan como éste por el hecho de que estamos recuperando los 10 registros. Como se puede ver aquí, tenemos 10 I ds diferentes. Tenemos que seleccionar todos de esta gota muchos. Entonces voy a seleccionar todos y vamos a revisar este Jake Marks. Entonces necesitamos seleccionar nombre y también la dirección de correo electrónico, y eso es todo. Entonces, ¿qué más debemos hacer? El último que tenemos que hacer es vincular nuestros datos de recuperar para nuestro diseño. Entonces vamos a los proyectos. Y aquí tenemos al contratista. Voy a dar click en esta pantalla de contacto y aquí tenemos que soltar menús, colecciones y solicitudes. Entonces a partir de colecciones que zapata el contacto abd y acabamos de crear y a partir de solicitudes solo
tenemos una. Usemos el contacto menos bastante bueno y voy a dar click en el botón agregar contenido. Fantástico. Lo primero que tenemos que añadir es lo menos. Como se puede ver, se indica que se trata de un marco, y si se acuerda, aquí
hemos creado un marco. Por lo que voy a dar click en ese Agradécele a cualquier parte fuera de esta ventana. Fantástico. Y desde este menú drop, voy a enlazar este menos dos datos. Y si esperas un segundo, puedes ver que aparece inmediatamente un icono más. Entonces voy a dar click en eso. Y ahora necesitamos agregar nombre y apellidos y dirección de correo electrónico. Y como puedes ver, el correo electrónico se conecta automáticamente al correo electrónico y necesitamos cambiar el nombre y apellido a nombre. Y eso es Oh, así que ahora si la vista previa nuestro laboratorio, se
puede ver que no tenemos tanto espacio en blanco en la parte superior, entonces ¿cómo podemos hazañas que vamos a los pies deben proyectar, y aquí en la parte superior, estoy va a crear otro contenedor, que es invisible. Entonces vamos a crear un rectángulo como este. Voy a mover estos contenedor hacia abajo y eso es aumentar su altura a algo así. Y recuerda, cuando estás trabajando con Bravo, tus marcos no deben superponerse entre sí. OK, así que asegúrate de que estén perfectamente alineados así. Y creo que es una buena idea agregar un poco de encabezamiento superior a nuestro contenedor. Entonces voy a elegir esta película grupal abajo. Y recuerda, Grupo de
Lengua. Está bien así. Y eso ha cambiado el color de este contenedor. Voy a ponerlo de pie blanco ya que queríamos ser invisibles. Y ahora hagamos click derecho en eso y elijamos selección de fotogramas para crear otro fotograma. Y voy a renombrarme a Top Frame y entre paréntesis. Vamos a la derecha contenedor. Fantástico. Ahora vamos a Brava Studio e inner para actualizar tu app. Siempre debes hacer clic en las actualizaciones bastante bien en ahora. Si haces una vista previa de tu app, puedes ver que tenemos un espacio negativo en la parte superior, que es exactamente lo que queremos. Está bien, chicos. Muchas gracias por ver este video. Espero que lo hayas disfrutado y te veo en el siguiente video. Entonces nos vemos entonces
5. Diseño de una aplicación de muebles: parte 1: Hola a todos. En este video, vamos a diseñar una aplicación de muebles en la Fig MMA con el fin de conectarlo al estudio Brava y sacar datos de Air Table. Entonces, en primer lugar, vamos a crear un proyecto de producto y voy a nombrar necesidades de diseño Los New Perfect. Puedes nombrarlo, lo que quieras. Y luego voy a presionar un en mi teclado y eso son zapatos y iPhone 11 pro o
tablero de arte Eggs . Fantástico. En realidad, voy a mantenerlo tan simple. Entonces no va a tener tantos tableros de arte. Voy a tener una pantalla de lanzamiento, el menú de diapositivas, una pantalla de producto. Y luego vamos a añadir una pantalla de promoción de pantalla de detalle y eventualmente pantalla OK, así que empecemos con la creación de nuestra pantalla de lanzamiento. Entonces, en primer lugar, voy a cambiar el nombre a pantalla de lanzamiento. Tenemos que volver a estos nombres y añadir algunos tanques al final. Pero por ahora, dejémoslo tal como está. Entonces vamos a crear aquí un logo sencillo, así que voy a crear un rectángulo. Mantengamos el turno en nuestro teclado y la gota de dragón. Voy a hacerlo 105 5 105 Esa es una línea al centro y voy a aumentar el
radio de esquina a 30. Fantástico. Entonces cambiemos el campo a 20 a 22 22. Fantástico. Voy a subirlo. Entonces agreguemos aquí una letra D. Entonces voy a presionar el y vamos a cambiar su color a Blanco. Voy a cambiar el tamaño del teléfono a 65 puntos. Impresionante. Entonces agreguemos otra capa de texto y añadamos un signo más. Voy a cambiar el camino a Regular, y eso ha cambiado un color al doble F D 600. Fantástico. Entonces eso es correcto. Da click en eso y lo voy a hacer un esbozo. De acuerdo, así que ya no es un texto que tu, voy a hacerlo más pequeño, bastante bueno. Y entonces necesitamos tener una capa de texto justo debajo de nuestro logotipo. Y llamémoslo diseño. Además, lo voy a hacer más pequeño. Entonces pongámoslo en 24 puntos y alineándonos al centro Muy bien. Voy a seleccionar todas estas capas,
agruparlas presionando el comando G o controlado G. Si estás usando ventanas y ese es el nombre lo logo y luego seleccionar ambos sus años una vez más ,
agruparlas y déjalo como facilidad tienen razón. Bastante bien. Uno piensa que hay que tener en cuenta es que esta pantalla de almuerzo no va a agudos en la aplicación de
visión Bravo . De acuerdo, solo
creamos es para la app realmente real siempre que quieras publicar tu app, la app store o play store. De acuerdo, entonces sigamos adelante y diseñemos nuestra pantalla de menú. OK, entonces voy a duplicar esta pantalla de almuerzo y eso es quitar estos elementos. Voy a renombrarme a menú por ahora. Y cambiemos el color a algo cabello oscuro un poco bastante bueno. Y lo que voy a hacer es crear menú de snipe. Entonces necesito un rectángulo que sea arrastrar y soltar así bastante bueno. Voy a cambiar su color a un blanco sólido. Y cambiemos el con 2 281 y luego voy a aumentar el resplandor de esquina a 20. No obstante, asegúrese de ajustar el radio de esquina fuera de estas dos esquinas. Arriba izquierda e inferior izquierda a cero. De acuerdo, así que voy a hacer clic en el icono de Andy y vamos a establecer esta cantidad de cero y esta cantidad era de Irán donde están bien. Y ahora necesitamos agregar una imagen de perfil justo por ahí en la parte superior. Entonces voy a seguir adelante y crear un rectángulo aquí que fije su con y alto a 50. Fantástico. Y entonces aumentemos el radio de esquina a 18 así. Y ahora necesitamos un correo electrónico. Entonces ahora voy a usar un tapón llamado contenidos riel. Y si no tienes este tapón, asegúrate de ir al menú plug INS y desde manage plug ins puedes encontrar fácilmente el
árbol de contenido de enchufar y en cosas. Muy bien, así que ahora vamos a ejecutar el tapón fantástico y vamos a dar click en el Pueblo Avatares. Voy a hacer clic en femenino así, y luego vamos a añadir un nombre y un nombre de usuario. De acuerdo, entonces voy a escribir a Emma, en realidad. Y como pueden ver, estoy usando al robot un fondo. Cambiemos su camino a medio, y voy a fijar el tamaño del fondo en 16 puntos. Realmente bueno. Es relleno izquierdo va a ser una púa. Sonidos lo voy a duplicar por comando D o control. El Si estás usando Windows, vamos a moverlo hacia abajo y voy a escribir un uso temprano. Están en lo cierto. Enseguida en Emma subrayamos Ashley. Pero esta vez cambiemos el camino a Regular y el tamaño del fondo a 14 puntos. Entonces lo voy a hacer un poco más ligero. Entonces cambiémoslo por algo así. Siete. C siete c y siete c. Bastante bien. Entonces eso es grupo. Estos dos toman capas, y voy a seleccionar nuestro lugar de imagen, Hohler, y eso las ha alineado verticalmente. Fantástico. También podemos agregar indicador de estado también. Entonces vamos a añadir un círculo como este, y voy a cambiar su color a 20 C 96 8 Entonces vamos a añadir un trazo como este. Voy a poner el color a blanco sólido y vamos a cambiar su grosor a 0.5. Estarías bien, y voy a añadir una sombra de gota para comer. Entonces cambiemos. Es por eso que a uno, es bastante bueno. Entonces vamos a seleccionar todos estos elementos y agruparlos, y voy a llamarlo bien, fino detalle. Fantástico. Deja de agregar, van a ser 68 pixeles y es relleno izquierdo va a ser 30. Píxeles como este son ahora mismo. Es hora de crear nuestros sub menús. Vamos a crear cuatro diferentes subsecuentes productos promociones sitio web y soporte. Entonces voy a empezar agregando una capa de texto. Entonces vamos a acertar los productos y entonces eso se ha incrementado el tamaño de la fuente a 18 puntos. Fantástico. Cuando un zoológico significa y voy a abrir los activos, encuentra que puedes descargar desde el recurso es sección de estos núcleos. Voy a importar algunos iconos. Entonces para el primer sub menú, voy a importar productos. Entonces, arrastrémoslo y soltémoslo aquí. Bastante bien dicho, como ambos fuera de ellos y alinearlos verticalmente. Fantástico. Entonces revisemos los ings de almohadilla. El relleno izquierdo debe ser un pico. Suena así. Y necesitamos una pequeña flecha derecha aquí. Entonces desde el mismo archivo de activos, voy a agregar estas flecha derecha. Entonces arrastrémoslo y soltémoslo aquí bastante bien. Esa es una línea. Todos estos tres elementos fantásticos. Y el relleno de Roy de esta flecha derecha va a ser de 32 píxeles. Bastante bien. Selecciona todos estos elementos, agruparlos y vamos a renombrarme también productos. Está bien, ahora vamos a duplicarlo película abajo. El relleno entre ellos va a ser de 50 píxeles como éste. Y ahora voy a escribir promociones y vamos a cambiar este ícono, así que lo voy a quitar y llevemos su propio ícono Fantástico. Vamos a alinearlos verticalmente y voy a poner estos ascensos. Puedo escribir bajo el grupo de productos aquí y vamos a renombrarme a promociones bastante buenas. Y luego necesitamos revisar el pad ings. Van a ser ocho pixeles así. Una vez más película duplicada abajo. El relleno debe ser de 50 píxeles, y esta vez voy a escribir sitio web que se eliminó el ícono y traer el ícono del sitio web . Ahí vamos. Vamos a moverlo justo a su propio grupo, que es éste que voy a renombrar website toe y es el relleno correcto va a ser ocho píxeles también. Y por último pero no menos importante, voy a duplicarlo. Y vamos a cambiarte para apoyar bastante bien. Quitemos estos ícono y traigamos aquí el ícono de soporte. Ahí vamos. Voy a moverlo a su propio grupo y eso es renombrarme para apoyar y luego revisar el pad ings. Un pixel posee fantástico son en este momento todo se ve muy bien. Lo único que voy a cambiar son las señales de este indicador. Entonces déjame agrandar un poco. Voy a ponerlo en 10 por 10 y vamos a aumentar su grosor a uno. Creo que ahora es mucho, mucho mejor. Perfecto. El próximo screening va a ser nuestra pantalla de productos. OK, entonces vamos a presionar a en nuestro teclado. Voy a añadir una nueva obra de arte aquí. Cambiemos su nombre por productos. Fantástico. Entonces en esta página, vamos a tener un menú de hamburguesas justo en la parte superior izquierda. Y después de eso, vamos a tener un título grande, que va a ser el título del producto. Y luego necesitamos tener una tarjeta bien para nuestro producto que está trayendo el
ícono del manual de hamburguesas de nuestra carpeta de activos. Ahí vamos menú arrastrar y soltar su Voy a moverlo aquí. Es encabezamiento superior va a ser 60 y es relleno izquierdo va a ser 16 como este. Y entonces eso es en una capa de texto aquí. Voy a escribir productos. No obstante, hagámoslo audaz, y voy a aumentar el tamaño del fondo a 32 puntos. Fantástico. Su adición superior va a ser de 30 píxeles y el relleno izquierdo debe ser de 16 celdas de picos
también . Muy bien, Entonces, como mencioné antes aquí necesitamos crear un contenedor. Entonces vamos a seleccionar un fotograma a y voy a arrastrarlo y soltarlo. Para crear un contenedor perfecto, voy a poner su máximo en 144. Y ahora vamos a cogerlo Products title. Por ahora, no
agregamos tanques porque en el siguiente video, vamos a sumar esos impuestos específicos, Así que lo siguiente que tenemos que hacer es crear nuestra tarjeta. Por lo que para nuestra tarjeta, necesitamos tener una imagen y nombre asegurado descripción y una etiqueta de precio. Entonces, antes que nada, voy a crear un rectángulo aquí. Ahí vamos. Hagámoslo cuadrado. Entonces voy a ponerlo en 156 por 156 Bastante bien. Y aumentemos el radio de esquina a 16. Y esta vez voy a usar otro tapón para agregar una imagen para comer. Entonces vamos a enchufes. Voy a elegir el enchufe splash de Young, y si no tienes este enchufe, puedes volver a seguir adelante e instalarlo. Entonces, vamos a ejecutarlo. Por supuesto, puedes agregar cualquier imagen que quieras, no importa, y ahora voy a elegir el interior. Tienes razón. Creo que es genial. Entonces agreguemos una capa de texto. Voy a escribir nombre y eso es disminución. Es señales divertidas a 16 puntos y una forma de regular. Bastante bien. Lo voy a alinear. Es stop head va a ser de ocho píxeles y estos dos deben estar alineados perfectamente fantásticos. Entonces eso está duplicado. Bajando aquí, voy a escribir breve descripción y luego cambiemos su color a algo más ligero. Ahí vamos y su máximo escondite va a ser de cuatro píxeles. Una vez más película duplicada aquí abajo. Tenemos que tener que textualizar capas. El 1er 1 va a ser un signo de dólar así, acuerdo? Y yo también voy a cambiar su color. 20 c nueve y 68. Fantástico. Eso es película duplicada al lado derecho. Y aquí vamos a la derecha, Price. Entonces, ¿por qué dividimos estas dos capas de texto? Porque más adelante, vas a sacar algunos datos y vas a cambiar. Thes toma capas de acuerdo a nuestra base de datos. Entonces, debido a que estamos almacenando datos sin el signo del dólar en nuestra base de datos, solo
necesitamos cambiar la cantidad de esta capa de texto. Por lo que estos signos de dólar deben estar intactos tienen razón. Está palmaditas a la izquierda van a ser de dos píxeles. Fantástico. Y ahora es el momento de crear a nuestro amigo porque esta tarjeta es otro contenedor. Entonces lo que voy a hacer es seleccionar todos estos elementos manteniendo pulsada la tecla shift en mi teclado así, asegúrate de seleccionarlos todos y con razón puede una de estas capas y presionar la
selección de fotogramas . Y ahora tenemos un nuevo marco. No obstante, como ya he mencionado antes, cuando creamos un marco, al
menos uno de sus bordes debe tocar el lado izquierdo o derecho de nuestra pantalla, ¿de acuerdo? O la parte superior de nuestra pantalla. Entonces en este caso, voy a agrandar nuestro marco. Entonces agrandémoslo así. Voy a poner el con 2 183 y alto a 249 así. Y entonces ese es grupo Todos los elementos dentro de estos marco así, y los voy a alinear al centro tanto vertical como horizontalmente. Fantástico. Ahora podemos agruparlos, seleccionar el marco, y lo voy a alinear con el borde de nuestra pantalla para que toque el borde izquierdo. Una cosa importante que debes saber sobre Bravo es ahora que estamos creando este auto único, lo va a repetir a través de nuestro tablero de arte. Está bien. No obstante, ¿cómo puedes decidir si se va a repetir horizontal o verticalmente en estos juegos siempre que el con off tu amigo sea menor al 50% de tu pantalla? Al igual que en este caso, Bravo primero lo va a repetir o está enteramente y luego verticalmente. Por lo que la siguiente tarjeta va a aparecer justo al lado de ella y luego la siguiente fila. Y esto es exactamente lo que queremos que sean en este momento necesitamos asegurarnos de que nuestros marcos o alineen perfectamente y que yo lo renombre a tarjeta de producto. Fantástico. Perfecto. Ahora ya terminamos con nuestra pantalla de productos así están bien, chicos, Muchas gracias por ver este video. Espero que lo hayan disfrutado en el siguiente video. Vamos a terminar de diseñar este proyecto juntos. Espero que disfruten de este video e incluso de verte que
6. Diseño de una aplicación de muebles: parte 2: Hola a todos. Bienvenido de nuevo a otro video de las partituras en este video. Vamos a terminar de diseñar este proyecto juntos. Entonces ahora voy a seguir adelante e insertar otro, no se aburran presionando un en mi teclado y elijamos este tablero de arte. Y ese es Renay yo a detallar porque esta va a ser nuestra página de detalles. Por lo que siempre que un usuario haga clic en esta tarjeta, va a llevar al usuario a estos detalles Página y el usuario podrá ver los detalles específicos sobre ese producto. Entonces en esta página, vamos a tener una imagen grande. De acuerdo, así que sigamos adelante y creemos un rectángulo como este. Fantástico. Voy a aumentar el radio de esquina a 30. No obstante, pongamos el radio de esquina fuera de las dos esquinas a cero. Entonces voy a ponerlo a cero y éste también,
así . Y luego, una vez más, vamos a ejecutar el tapón de salpicaduras de la ONU con el fin de recuperar una gran imagen interior están bien bastante bien, y vamos a añadir algo de sombra de gota para comer. Entonces voy a cambiar el monto de Blair a 20 y la cantidad A Y a 10 y vamos a disminuir la capacidad a 10% fantástico Entonces, ¿qué más necesitamos? ¿ Justo en la parte superior? Vamos a añadir Flecha izquierda para los fines de navegación entre nuestras pantallas. Entonces abramos nuestro culo. Está bien. Y aquí tenemos un icono de flecha izquierda. Voy a arrastrarlo y soltarlo. Año que le queda. El relleno va a tener 24 picos viejos, y su encabezamiento superior va a ser 46 como este. Y voy a añadir otro ícono justo por ahí, que es un ícono de compartir. Y desde aquí, voy a arrastrar y soltar estos ícono de compartir así. Voy a moverlo hacia arriba, y está bien. El relleno va a ser 24 celdas de pico. Eso te hace significar. Y el encabezamiento superior va a ser 43. Pizza uno es perfecto. Está bien, aquí, tenemos que poner un icono de juego. No obstante, les voy a mostrar cómo crear uno de manera fácil y rápida. Entonces necesitamos un círculo. Entonces déjame dibujar un círculo aquí y fui una ciudad a 64 por 64. Hagámoslo blanco. Fantástico. Y entonces necesitamos un triángulo. Entonces voy a crear un polígono como este y vamos a aumentar el radio de esquina a cinco como este, y voy a hacerlo negro. Fantástico. Que yo giré 90 grados y me voy a alinear en el centro tanto vertical como horizontalmente. Entonces vamos a agruparlos y voy a colegas jugar botón. Fantástico. Muy bien, Ahora es el momento de agregar nuestras capas de texto. Entonces aquí necesitamos tener un nombre,
una etiqueta de precio y una descripción mentirosa. Entonces agreguemos un texto de que estás aquí. Voy a escribir nombre y hagámoslo medio. Y voy a aumentar la ciencia del fondo a 24 puntos. Realmente bueno. Se deja de rumbo va a ser 16 celdas de pico y la lucha de izquierda debe ser de 24 píxeles. No obstante, recuerda aumentar el con un poco porque no sabemos de la longitud de nuestro nombre que vamos a sacar de nuestra base de datos. ¿ De acuerdo? Está bien. Vamos a añadir otra capa de texto de nuevo. Necesitamos un signo de dólar. Hagámoslo regular. Y el tamaño de la fuente va a ser de 16 puntos y el color debe ser de 20 c 968. Fantástico. Dejar de esconderse van a ser cuatro píxeles. Déjame duplicar película al lado derecho. Y aquí vamos a precio correcto. Voy a agrandarlo un poco están bien. Y por último pero no menos importante, vamos a añadir aquí nuestra descripción mentirosa. Entonces voy a copiar y pegar la descripción de Epsom Epsom de la página web de epsom dot com. Puedes escribir lo que quieras, así que vamos a añadir un texto que tu pegarlo aquí y recuerda disminuir el con fuera de tu
capa de texto . Bastante bien. Vamos a poner el con 2 327 Bastante bien. Y voy a cambiar la altura de la línea a 24 hagámosla un poco más ligera. Fantástico. Déjame una línea en el centro. Se deja de rumbo van a ser 24 celdas pic y ya terminamos. Muy bien, chicos, eso es todo por este video. En el siguiente video, conectaremos nuestro diseño al estudio Bravo y usaremos el sitio web de la mesa aérea con el fin recuperar algunos datos de nuestra base de datos. Está bien. Además, agregaremos dos pantallas más diseño de llantas también. Entonces nos vemos entonces
7. Conectar tu aplicación a una base de datos: Hola a todos. Espero que lo estés haciendo bien en estos videos. Vamos a añadir los tanques de estudio de caldo a nuestro diseño. Y después de eso, lo
vamos a conectar con el estudio hermano con el fin de recuperar algunos datos de Air Table. Pero antes de explicar sobre la mesa de aire, sumemos esos tanques a nuestros componentes aquí con el fin de hacerlos reconocibles por Robert Studio para nuestra pantalla de lanzamiento. Como ya he mencionado antes, no
va a comprar en la visión Bravo arriba. No obstante, debemos especificarlo por su etiqueta específica. Entonces si abres la página web de ataques Bravo desde su página web, puedes ver que tenemos pantalla de salpicaduras justo por ahí. De acuerdo, entonces voy a seleccionar estos comando tag, ver o controlar. Ver, Déjame quitarle su nombre y pegarlo aquí y ya está hecho. Entonces necesitamos hacer que nuestra pantalla de menú reconozca una campana por Bravo studio. Por lo que necesitamos otra etiqueta Forest night menu. Podemos usar thes tag. Está bien. Menú Colin Snide. Entonces, vamos a seleccionarlo. Comando C. Y aquí voy a renombrarme por el nombre de la etiqueta. Ahí vamos. Y después de eso, podemos conectar nuestras pantallas. Está bien. Entonces, por ejemplo, aquí tenemos los productos. Así que vamos a dar clic en la pestaña del prototipo así. Y como puedes ver, Circle aparece de inmediato. Voy a dar click en esa bodega y dejarla caer aquí. Ahí vamos. Y ahora estos subterráneos están conectados a productos. Y además tenemos promociones en página web. No obstante, aún no
diseñamos estas dos pantallas. Entonces, por ahora, dejémoslos como están. Pero por el apoyo, voy a añadir una etiqueta específica para llamar a un número. Entonces me voy a desplazar hacia abajo y ahí vamos. Tenemos diálogo telefónico abierto, así que vamos a seleccionar esto. Como puedes ver, es una acción, tienen razón. Y después de su nombre, lo
voy a pegar. Puedes cambiar este número telefónico a lo que quieras. Bastante bien. Y luego necesitamos conectar estos ícono del menú de hamburguesas dedo del pie nuestro menú. De acuerdo, Así que vamos a seleccionar este ícono y arrastrarlo y soltarlo así y quiere a su hijo. Por lo que voy a seleccionar esta pantalla de menú. Recuerda, necesitamos conectar toda la pantalla ahí bego arrastrarla y soltarla bastante bien. Y una cosa importante que necesitamos cambiar es el punto de partida fuera de nuestras pantallas. Entonces Como puedes ver ahora, el punto de partida es la pantalla de menú, que no es lo que queremos. Así que arrastremos y soltemos el ícono cuadrado de ahí mismo. Por lo que ahora esta página de productos es nuestra primera pantalla. Y después de eso necesitamos conectar nuestra tarjeta de producto a nuestra página de detalles. Entonces vamos a conectarlo así bastante bien. También necesitamos conectar esta flecha izquierda a la pantalla de nuestros productos. Está bien. Y ahora necesitamos agregar algunas etiquetas para este botón de reproducción y esta cuota. No puedo dejar que seleccione este botón de reproducción. Voy a dar click en diseño y desde la página de impuestos, voy a buscar video abierto. Vale, recuerda que tienes diferentes tipos de videos. Tienes video, cuál es este divertido? Se trata de un audio menos video. Ese otro lugar cuando un usuario está en la pantalla de la aplicación, OK, pero siempre que quieras reproducir un video con audio, puedes usar este hack. Entonces lo voy a seleccionar y es pegarlo después del nombre de este fondo. Y aquí puedes agregar cualquier cosa, así que voy a pegar un enlace aquí de ti a ti. Ahí vamos. Y eso es todo por el icono de compartir. Vayamos a la Página de Tanques Bravo. Y aquí tienes diálogo compartido abierto. Entonces elijamos eso, copiarlo y pegarlo después del nombre de este ícono. Y aquí puedes agregar cualquier U R l que quieras Podría ser tu sitio web, sitios web de
tu cliente, lo que quieras. Muy bien,
Entonces, ¿qué más? Productos de la India Página, tenemos un componente de tarjeta aquí. De acuerdo, Sin embargo, necesitamos agregar algún impuesto. Por ejemplo, aquí tenemos dos contenedores diferentes para el 1er 1 Vamos a seleccionar el título de los productos. Añadamos corchetes. Y entre esos soportes, voy a añadir contenedor. Consulta este paling. Es tan importante y déjame copiarlo. Y voy a pagar asiento por estas tarjetas de producto también, porque este es nuestro segundo contenedor aquí. Voy a añadir un asterisco para nuestra tarjeta de producto porque más adelante cuando estamos conectando están diseñados para Bravo studio. Es mucho más fácil reconocer estos elementos con estos asteriscos. Y luego voy a añadir un asterisco por nuestro precio por la breve descripción y por último por nuestro nombre, capa de
texto, está
bien, y en la página de detalles, necesitamos tener un marco grande. De acuerdo, que incluye todos nuestros elementos. Entonces vamos a seleccionar a nuestro amigo también. Y voy a arrastrar y soltar así. Voy a nombrarlo marco y dentro de corchetes. Así es, Container. Y luego voy a añadir una serie de culos antes de que nuestra toma nombre de Capas aquí y por el precio también. Y aquí, llamémoslo descripción. Fantástico. Ahora voy a añadir otro ataque a esta descripción, que se llama Flexo. Entonces, ¿qué es la escama? Así que tack. Si te diriges a los tanques Bravo, te
puedo mostrar la explicación exacta. Ahí vamos. Entonces cada vez que uses la etiqueta flexor, va a hacer que tus picos de tanque se expandan hacia abajo para alimentar el contenido conectado Y a p I OK, pero debes tener en cuenta que las marcas fiscales deben ser el elemento inferior más del contenedor. Al igual que nuestro diseño. No hay nada después. De acuerdo, así que eso es agregar lo atacó como So. Entonces ahora va a crecer verticalmente, no importa cuánto tiempo tengan los impuestos correctos. Y lo siguiente que necesitamos cambiar es el nombre de nuestra imagen. Entonces déjame la imagen correcta, y eso es todo. Muy bien, ahora vamos a dar click en este ícono de compartir. Copiar Enlace. Vayamos al estudio Bravo. Voy a importar de Fatemeh Pegar aquí. Está bien. Como pueden ver, aquí
tenemos una advertencia que arreglar, pero no es un problema. Por lo que revisaremos nuestra app. Y si algo va mal, regresaremos y lo arreglaremos. ¿ Todo bien? Por lo que ahora nuestro diseño está conectado al estudio Bravo, y es hora de crear nuestro abajo la biblioteca. De acuerdo, Pero esta vez, en lugar de sacar algunos datos públicos, vamos a crear nuestra propia base de datos. ¿ De acuerdo? Va a ser tan sencillo, Créeme. Ahora lo que quiero que hagas es abrir el sitio web de la mesa aérea, así que cada mesa es básicamente una hoja de cálculo. Está bien. No obstante, es más flexible, y te va a permitir crear tu propia base de datos basada en tus datos para que puedas utilizarla forma gratuita. Asegúrate de apuntarte aquí, pero por ahora, porque ya me inscribí, así que voy a firmar están bien. Ahí vamos. Ahora estamos en nuestro tablero de mesa de aire, acuerdo. Y hay tantas características que puedes usar. No obstante, para estos tutorial, nos vamos a centrar en crear una base de datos sencilla. De acuerdo, Así que vamos a dar click en este icono más, que se llama en una base. Comience con la plantilla. Y aquí tenemos algunos panfletos. De acuerdo, elegamos el producto. Plantilla usada católica. Ahí vamos. Aquí es facilidad. Voy a abrirla. Muy bien, Aquí tenemos al menos productos fuera con una imagen con un precio con una descripción, como se puede ver aquí, y un montón de otros datos. Entonces lo que vamos a hacer es tirar estos datos a nuestro estudio Bravo y vincularlos con nuestro diseño. ¿ De acuerdo? Al gusto de nuestros proyectos anteriores, vamos a mandar un A P. solicito para eso. No obstante este tiempo, no
vamos a enviar un ap público solicito vamos a enviar solicitud de AP privada. OK, entonces vamos a ayudar. A p I la documentación es correcta. Y ahora vamos a la sección de autenticación. Ahí vamos. Elegiremos estos tu l, que es tu ap único. Me siento aquí justo antes del signo de interrogación. Voy a copiar y vamos al estudio Bravo y voy a crear un nuevo que una biblioteca haga clic en nueva colección, y voy a escribir tabla de área a otra vez Mesa de aire para guardarla. Y aquí voy a crear cualquier solicitud. Cambiemos su nombre a producto. Menos porque nuestra primera solicitud va a sacar algunos datos para nuestros productos. Página. Está bien. Para nuestra página de detalles, crearemos una nueva solicitud más adelante. Entonces vamos a ritmo de que todos ustedes están aquí bastante bien, pero esta vez, porque este es un AP privado, necesitamos agregar un valor clave aquí, que es algo así como nombre de usuario y contraseña. De acuerdo, para estos i p I. Entonces lo que tienes que hacer es ir a la configuración de tu cuenta. Y aquí bajo la sección A P I, se
puede generar una clave A p I. Está bien. Está bien. Entonces esta es tu llave. No obstante, vayamos a esta página. Entonces vamos a copiar esta palabra de autorización. Acude a Brava Studio y pegarlo para la llave. Y yo también voy a copiar y pegar esta parte. Por el valor. Fantástico. No obstante, necesitas cambiar este punto con tu clave única a partir de aquí. Voy a copiarlo y pegarlo aquí, y eso es todo. Ahora vamos a enviar nuestra solicitud. Ahí vamos. Tenemos algunas respuestas. Entonces, ¿qué necesitamos? Necesitamos a nuestro papá o registros. Entonces digamos así. Nosotros los necesitamos a todos. Entonces elijamos todo desde el menú desplegable. Necesitamos también los registros de datos I d. porque vamos a conectar nuestra página de productos con nuestra página de detalles. De acuerdo, entonces cada producto tiene su i.
D.único D. Necesitamos eso también. También necesitamos la u R l de cada imagen. Entonces vamos a revisar esa casilla de verificación. Entonces necesitamos el costo unitario, que es el precio, el nombre y la descripción, y eso es todo. Como puedes ver, es automáticamente seguro por lo que no necesitas hacer nada más. Ahora vamos a los proyectos. Abre nuestro diseño más nuevo proyecto, y vamos a utilizar nuestra pantalla de productos aquí desde estos menú drop. Voy a elegir Air Table a y desde solicitud. Tenemos sólo un producto menos, agreguemos contenido. En primer lugar, necesitamos agregar nuestra tarjeta de producto porque va a estar repitiendo. Entonces vamos así. Y ahora usemos registros y luego haga clic en Caramelos más icono. Y agreguemos nuestro nombre, breve descripción, precio y nuestra imagen. De acuerdo, entonces aquí vamos a seleccionar los datos correctos para nuestra imagen. Va a ser la imagen de los campos de tu l El precio va a ser el costo unitario. La breve descripción va a ser ésta, y el nombre va a ser éste. Fantástico. Ahora en realidad podemos seguir adelante y previsualizar nuestra aplicación. Por lo que voy a abrir la app Bravo vision en mi teléfono. Y siempre que quieras probar una nueva app o quieras salir de tu anterior app en la
visión Bravo , puedes sacudir tu teléfono,
derecha, derecha, previsualizar una app, y ahí vamos. Como puedes ver, contamos con nuestros productos con todos los detalles. No obstante, las descripciones no son las mismas porque en nuestra base de datos, si ves aquí, puedes ver que todas las descripciones son iguales, lo que podemos seguir adelante y cambiarlas si quieres. Y recuerda, si haces un cambio aquí, tu APP va a cambiar automáticamente en tiempo real. Es bastante impresionante, ¿no? Entonces vamos a comprobarlo. Por ejemplo, voy a seguir adelante y cambiar este nombre. Marjorie Cambio. Vamos a cambiarte a moderado. De acuerdo, ahora que sacuden mi teléfono y prensa manual de actualización, que puede desplazarse por ahí vamos, tenemos a Modry bastante bien. Echemos un vistazo a nuestro ligero menú también. Y como puedes ver, funciona perfectamente. Es increíble, ¿no? Pero, ¿qué va a pasar si toco uno de estos productos? Entonces usemos este. Y, como pueden ver, porque no hicimos una solicitud para nuestra página de detalles y no vinculamos ningún dato con nuestros elementos, no nos muestra correcto,
papá, papá, sin embargo, todas las demás cosas funcionaron perfectamente. Entonces vamos a revisar nuestro icono de compartir. Ahí vamos. Funciona perfectamente. Muy bien, Así que ahora sigamos adelante y creemos una solicitud para nuestra página de detalles. Entonces en Data Library, voy a abrir el aire Mesa dos y vamos a crear otra solicitud. Y eso cambió su nombre a página de detalles. Y esta vez necesitamos copiar el mismo tu l aquí. Pero esta vez necesitamos agregar algo después de esta palabra de muebles. De acuerdo, agreguemos una tajada hacia adelante un signo de dólar para cuidar a Lee corchetes y dentro eso es correcto, yo d. ¿
Entonces qué significa? Significa que estamos enviando una solicitud con el fin de obtener productos con Ellos son ID únicos. Si recuerdas Hemos seleccionado bien las ideas de registro aquí con el fin de conectarlo a nuestra página de
detalles. De acuerdo, entonces aquí necesitamos conseguir ideas específicas. Bueno, para el encabezado, necesitamos lo mismo. Voy a copiarlos y pegarlos aquí están bien. Y queda una cosa más por delante. Vayamos a la lista de productos. Y aquí voy a seleccionar las salidas seleccionadas. Y como pueden ver, tenemos un registro de datos, ¿de acuerdo? Y esto ya es así que vamos a seleccionar eso. Yo lo voy a copiar. Vamos a la página de detalles y en el perímetro. Eso es correcto. Yo d aquí. Recuerda que no se debe capitalizar. Y por el valor, voy a dar un ritmo a las tomas que acabamos de copiar bastante bien. Y ahora enviemos nuestra solicitud. Ahí vamos. Tenemos sus respuestas, y esta vez necesitamos al papá. I d. Necesitamos las imágenes. Tú eres yo necesitamos la unidad. Cuesta la descripción del nombre, y eso es todo. OK, ahora volvamos a nuestros proyectos, y voy a seleccionar aquí la pantalla de detalles de las colecciones. Voy a seleccionar la tabla de área dos, y aquí ahora tenemos dos solicitudes que seleccionan la página de detalles y agregan contenido aquí. Añadamos nuestra imagen, nuestro precio, nuestra descripción y nuestro nombre bastante bueno. Y ahora los encontremos sin datos. Por lo que el nombre debe estar conectado al campo diciendo que la descripción está conectada a sentir descripción ya, y el precio debe estar conectado a los campos, costo
unitario y la imagen a imágenes. Eres L R. Correcto. Y ahora seleccionemos las salidas seleccionadas en nuestra solicitud de página de detalles. Y aquí, como pueden ver, tenemos el ideal capaz. No obstante, se capitaliza. Entonces vamos a cambiarte, dedo del pie. Yo d. Muy bien, así que ahora vamos a ir a nuestro producto menos solicitud y seleccionar una salidas seleccionadas. Y aquí tenemos registros de datos. Yo d De acuerdo, necesitamos cambiar su etiqueta a I d Pero recuerda que no debe ser capitalizada. ¿ De acuerdo? Es tan importante. Ahora volvamos a nuestro proyecto, y voy a abrir la aplicación de visión Bravo vamos a sacudir el teléfono y presionar actualización manual, y voy a tocar una de estas tarjetas. Ahí vamos. Ahora funciona perfectamente. Voy a seleccionar al moderado ya que se puede ver todo. Está bien. Es increíble. ¿ no es así? Déjame abrir el menú. Y si presiono apoyo, se
puede ver que una colección bombea de inmediato. Bastante bien. Está bien. Ahora, como pueden ver, cada vez que actualicemos nuestras bases de datos de mesa de área, Ok, aquí. Necesitamos actualizar la APP de forma manual. OK? No hay forma de actualizarlo bien en el acto. Entonces vamos a arreglar ese problema en un segundo. Vayamos a nuestra Fatemeh. Y aquí vamos a añadir un nuevo tachuelo. Voy a ir a Bravo Tanks, Page, y les voy a mostrar un nuevo tanque increíble, que es alberca para refrescar. Eso es doble clic en esa alfombra, y la voy a pegar aquí en lugar del nombre del producto así. Ahora, acabamos de agregar el pool para actualizar la funcionalidad a nuestra aplicación. Entonces uno de cada agrega un nuevo producto aquí o eliminamos eso y el usuario actualiza la página aquí, el usuario puede ver los cambios que realizamos de inmediato. Es bastante intenso. También podemos añadirlo a esta página también. Bastante bien. Mantengamos esos nombres justo antes de estos tanques para mantener todo organizado. Entonces voy a agregar productos aquí y detalle aquí mismo. De acuerdo, así que vamos a revisar nuestra aplicación una vez más. No obstante, antes de eso, necesitamos presionar actualización Aquí están ahora mismo. Si tiro hacia abajo, se
puede ver el indicador de carga, que indica que esta página es refrescante anterior, um, también en nuestra página
de detalles, sucede lo mismo. Muy bien, chicos, eso es todo por este video. Muchas gracias por ver esto. Espero que lo hayan disfrutado. Y te veo en el siguiente video, Así que nos vemos ahí.
8. Agrega más características a tu aplicación en tu aplicación: Hola a todos. Y bienvenidos de nuevo a otro video fuera de las partituras en este video, vamos a sumar dos pantallas más a nuestro proyecto porque quiero mostrarles las otras funcionalidades fuera de los tanques Bravo. Entonces vamos a presionar un en nuestra palabra clave. Voy a agregar Cualquiera es pobre a nuestro lienzo, y voy a renombrarme a promociones. Fantástico. Sigamos adelante y seleccionemos estos contenedores copiados y pegados por allá con la ayuda de comando. Ver o controlar C y control ser. Y voy a quitar estos ligeros menú on Vamos a renombrarme a promociones Bastante bien. Voy a renombrar estos título así Promociones título. Fantástico. Aquí, voy a añadir un rectángulo. Asegúrate de que tenga un marco. Entonces, vamos a dar click derecho en eso. Permítanme aumentar su líder de altura. Está bastante bien. ¿ Verdad? Haga clic en eso y haga clic en selección de marcos. Fantástico. Voy a llamarlo Animación. Está bien. Voy a ser tan malo. Asegúrese de que esos contenedores estén alineados. O recuerda añadir también la etiqueta de contenedor. Bastante bien. Déjame subirlo. Fantástico. Ahora te voy a mostrar cómo puedes agregar mucha animación a tu pantalla. Entonces busquemos animaciones de Lottie y ahí vamos. Yo lo voy a abrir. Este es un gran sitio web para encontrar animaciones geniales, y desde aquí puedes descargar algunas animaciones gratuitas. Escojamos este, y necesitamos aquí la etiqueta Lottie. Entonces primero, vamos a copiar. Voy a pegar aquí. Fantástico. Una vez más, vamos a copiar esto tu l y pegarlo justo por ahí. Bastante bien. Por lo que seguro, jugará
nuestra animación. Pero antes de comprobar que eso está en otra pantalla. Presionemos un en nuestro teclado y añadamos otro nuestro puerto aquí. Voy a renombrarme a Website, y es o rectángulo así. Y esta vez voy a usar este tanque Web EU que se copia y pega. Aquí. Puedes poner lo que realmente quieras. Por ejemplo, podemos escribirte dot com. Ahí vamos, y eso es todo. Antes de probar nuestra app, tenemos que recordar conectar estas dos pantallas toe son muchos Ok, así que vamos a seleccionar esta pantalla de diapositivas de menú podría convertirse en prototipo, y voy a elegir promociones que estén conectadas a promociones y a la web que está conectado a la página web. Ahora vamos a actualizarlo para abrir una vez más la app Bravo vision en tu teléfono operado manualmente o puedes previsualizar de nuevo. Ahí vamos. Abramos el ligero menú y elijamos promociones. Puedes ver lo increíbles y fáciles tés para agregar una animación a tu AMP. Es bastante guay, ¿no? Ahora vamos dedo del pie Sitio web y aquí facilidad. Este es el tú a ti y puedes ver que todas sus funcionalidades funcionan perfectamente son chicos
correctos que zona para estos video. Espero que lo hayas disfrutado y te veo en el siguiente video.
9. Publica tu aplicación iOS y Android: Hola a todos. Espero que te vaya bien en este video. Te voy a mostrar cómo puedes conseguir tus paquetes APP con el fin de publicar tu app en la tienda
APP o en la colocada, o es tan genial, ¿no? En primer lugar, abramos tu estudio Bravo. Y como puedes ver, estoy en la sección de dashboard y elige la app que quieres publicar. De acuerdo, voy a elegir diseño más nuevo. Y aquí en la parte superior, tienes una opción llamada Descargar los paquetes de paquetes de APP. De acuerdo, voy a dar click en eso. Y hay una breve explicación sobre el proceso de publicación de tu app. De acuerdo, así puedes solicitar tus paquetes de paquetes para en nosotros y Android por separado aquí, y podría tardar hasta 24 horas. Aún así, el equipo Bravo prepara el paquete para ti y te lo envía. ¿ De acuerdo? Se va a enviar a tu correo electrónico. Ahora, abramos la página web de Bravo Studio. Y como puedes ver, han actualizado su página de aterrizaje. Por lo que justo en la parte superior, se
puede ver el botón de aprender. Voy a dar click en eso. Y de aquí bajo el recurso es sección voy a abrir renunciando
guía de publicación APS . Está bien. Y como tesis ditto realmente no se va a enfocar en el proceso de desarrollo, no
voy a pasar por cada detalle aquí. No obstante, voy a ir a ti cómo puedes publicar tu app. Entonces, cuando hayas recibido tus paquetes de paquete del equipo Bravo, podrás publicar tu aplicación en la tienda APP o play store. De acuerdo, Si quieres publicar la versión en EU, necesitas tener una computadora de caballa s. ¿ De acuerdo? Es un must have. Y también necesitas formar parte del programa de desarrolladores de Apple. Se trata de un programa basado en suscripción que puedes consultar sabuesos desde este enlace. Ahí vamos. Podemos seguir adelante y comprobarlo. Y también puedes utilizar diferentes servicios como el sitio web de fast lane, que va a publicar tu aplicación por ti. Asegúrate de seguir estas guías paso a paso. Y además, si quieres publicar tu app en play store, necesitas descargar el estudio Android, que está disponible tanto para windows como para mi clase. Y puedes seguir los pasos aquí. Muy bien, chicos, eso es todo para el senatorial D. Espero que lo hayan disfrutado. Asegúrate de escribir tu opinión al respecto en la sección de revisión para que me hagas saber lo que
piensas. Si quieres conocer más sobre Fatemeh y quieres convertirte en diseñador de interfaces de usuario, asegúrate de revisar mi otro curso, que se llama Learn Feet. My User Interface Design Essentials. Eres diseño UX. Está disponible en camisa de habilidad, y seguro que te gustará una vez más. Muchas gracias por ver estos tutorial, y espero verte en otros cursos.
Arash Ahadzadeh, UI/UX Designer | University Lecturer
