1 00:00:02,160 --> 00:00:05,140 Para este módulo y para esta aplicación que 2 00:00:05,160 --> 00:00:11,310 estamos construyendo, nuevamente encontrará un proyecto inicial adjunto a esta conferencia que puede usar para comenzar con esto o 3 00:00:11,310 --> 00:00:15,480 puede crear una nueva aplicación de exposición por su cuenta, por supuesto. 4 00:00:15,480 --> 00:00:21,300 Ahora, esta es la aplicación que adjunté, una aplicación muy básica con la que soy tu aplicación, que apenas podemos ver, lo que no 5 00:00:21,330 --> 00:00:23,980 importa porque de todos modos no conservaremos este texto y 6 00:00:24,160 --> 00:00:26,370 solo tenemos esa aplicación. archivo js. 7 00:00:26,430 --> 00:00:32,130 Ahora, muchas de las cosas que hago en este módulo serán cosas que viste en los módulos anteriores porque obviamente esa 8 00:00:32,130 --> 00:00:33,660 es la idea central aquí. 9 00:00:33,660 --> 00:00:39,480 Practicaremos lo que hemos aprendido hasta ahora y habrá algunas cosas nuevas o algunos patrones que 10 00:00:39,480 --> 00:00:41,710 podrían ser interesantes para usted también. 11 00:00:41,730 --> 00:00:47,160 Ahora, por supuesto, en esta aplicación que esbocé en la última conferencia, tendremos un par de pantallas, por lo que 12 00:00:47,160 --> 00:00:52,230 definitivamente necesitaremos navegación y, por lo tanto, agregaré una carpeta de navegación para poder almacenar mi configuración de 13 00:00:52,230 --> 00:00:54,380 navegación allí. y esa es, por supuesto, 14 00:00:54,420 --> 00:00:57,480 solo una posible configuración, como mencioné antes, puede trabajar con 15 00:00:57,480 --> 00:01:03,690 cualquier estructura de carpetas que desee y que funcione para usted. Además de la carpeta de navegación, también quiero 16 00:01:03,690 --> 00:01:04,740 tener una 17 00:01:04,740 --> 00:01:09,690 carpeta de pantallas aquí, en esa carpeta de pantallas también quiero almacenar 18 00:01:09,690 --> 00:01:15,660 las pantallas entre las que podemos navegar y agregaré una carpeta de componentes para todos 19 00:01:15,660 --> 00:01:18,460 mis componentes regulares, por supuesto, las 20 00:01:18,520 --> 00:01:24,450 pantallas también son React componentes, pero los componentes normales que quiero decir aquí son los 21 00:01:24,450 --> 00:01:30,720 componentes que no cargamos directamente como pantallas, pero que incorporamos en las pantallas o en otros 22 00:01:30,720 --> 00:01:37,500 componentes, así que eso es lo que tendremos aquí. También agregaré una carpeta de constantes porque de nuevo, 23 00:01:37,500 --> 00:01:43,860 trabajaré con mis constantes de color aquí para poder usar mis colores preseleccionados en toda la aplicación. 24 00:01:43,880 --> 00:01:49,280 Ahora que hay muchas maneras diferentes de comenzar, lo que me gusta hacer primero en mis 25 00:01:49,280 --> 00:01:51,020 aplicaciones es que empiezo 26 00:01:51,020 --> 00:01:56,870 con las pantallas, aunque si todavía no agrego el contenido a todas, me gusta agregar este general estructura 27 00:01:56,870 --> 00:02:01,570 para que siempre pueda ver en qué todavía necesito trabajar, qué características aún faltan. 28 00:02:01,880 --> 00:02:04,980 Por lo tanto, agregaré las pantallas que tendré en esta 29 00:02:05,180 --> 00:02:09,890 aplicación y aquí haré algo que no he hecho antes y que es totalmente opcional, pero 30 00:02:09,890 --> 00:02:12,120 organizaré mis pantallas en subcarpetas separadas. 31 00:02:12,170 --> 00:02:15,770 Tendré una carpeta con las pantallas relacionadas con mi tienda y, 32 00:02:15,770 --> 00:02:20,930 por supuesto, dado que crearemos una aplicación de compras, todas las pantallas están relacionadas con la 33 00:02:20,930 --> 00:02:26,540 tienda, pero aquí quiero tener las pantallas que nos ayudan directamente a ver nuestros productos, y agregarlos. al 34 00:02:26,540 --> 00:02:27,120 carrito 35 00:02:27,530 --> 00:02:34,430 y así sucesivamente y luego quiero tener una carpeta separada y esa es mi carpeta de usuario, podría decir, allí quiero tener 36 00:02:34,430 --> 00:02:36,400 las pantallas relacionadas con el usuario, 37 00:02:36,470 --> 00:02:40,370 por lo que serían mis productos de usuario y los productos de administración. 38 00:02:40,440 --> 00:02:42,590 Así es como dividiré 39 00:02:42,590 --> 00:02:45,950 esto, pero, por supuesto, puedes organizarlo como quieras. 40 00:02:45,950 --> 00:02:52,670 Entonces, en la carpeta de la tienda aquí, por ejemplo, quiero tener la pantalla de vista general de mis productos y esa 41 00:02:52,760 --> 00:02:58,340 será la pantalla que veremos cuando se cargue la aplicación donde tengamos todos los productos para trabajar y 42 00:02:58,340 --> 00:03:04,880 donde podamos seleccionar un producto o agregarlo directamente al carro Por lo tanto, también necesitaremos una pantalla de detalles del producto, 43 00:03:04,880 --> 00:03:10,520 esa es la pantalla que vemos cuando seleccionamos un producto y queremos obtener más información al respecto, luego podemos hacer 44 00:03:10,520 --> 00:03:16,940 clic o tocarlo y acceder a esa pantalla de detalles. También necesitaremos una pantalla de carrito, como era de esperar la pantalla 45 00:03:16,940 --> 00:03:22,430 que vemos cuando agregamos un artículo al carrito o no, que luego vemos pero que podemos visitar para ver el 46 00:03:22,430 --> 00:03:23,000 artículo 47 00:03:23,000 --> 00:03:24,440 allí, así que eso es 48 00:03:25,470 --> 00:03:30,600 algo que podemos hacer allí y yo ' También agregaremos una pantalla de pedidos donde podemos ver nuestros pedidos. 49 00:03:30,600 --> 00:03:35,730 Ahora, por cierto, podría argumentar que la pantalla del carrito y la pantalla del pedido pertenecen a la carpeta 50 00:03:35,730 --> 00:03:39,450 del usuario porque son exclusivas para el usuario, cada usuario tiene sus propios pedidos 51 00:03:39,450 --> 00:03:44,340 y su propio carrito y, por lo tanto, puede ir en cualquier dirección, Creo que están un poco 52 00:03:44,340 --> 00:03:47,970 más en el lado relacionado con el producto de la tienda, pero de 53 00:03:47,970 --> 00:03:51,960 nuevo, eso depende totalmente de usted. En la carpeta de 54 00:03:51,960 --> 00:03:58,980 usuario, quiero tener la pantalla de mis productos de usuario, de modo que sea la pantalla donde vea una lista 55 00:03:59,040 --> 00:04:06,570 de todos los productos que pertenecen a ese usuario y la pantalla de edición de productos, que es la pantalla que usaremos 56 00:04:06,690 --> 00:04:08,710 para agregar nuevos productos o para 57 00:04:08,730 --> 00:04:10,940 editar productos existentes, podremos reutilizar eso. 58 00:04:11,160 --> 00:04:13,490 Estas son las pantallas en las que 59 00:04:13,500 --> 00:04:20,280 trabajaremos a lo largo de este módulo y no las llenaremos de vida inmediatamente ahora, sino que trabajaremos paso 60 00:04:20,280 --> 00:04:20,990 a 61 00:04:21,000 --> 00:04:23,090 paso, pero es lo que necesitaremos. 62 00:04:23,220 --> 00:04:27,450 Ahora, por supuesto, también hay otra carpeta que podemos agregar y esa es la carpeta 63 00:04:27,450 --> 00:04:32,820 de la tienda donde administraremos nuestra tienda Redux y nuestro estado Redux, por lo tanto, cuál es nuestro sistema 64 00:04:32,820 --> 00:04:38,070 de administración de estado con el que quiero trabajar, que por supuesto necesitamos porque tenemos muchos pantallas que tienen 65 00:04:38,070 --> 00:04:44,280 que funcionar en el tipo de datos relacionados y, por lo tanto, necesitamos administrar esos datos, nuestros productos y lo que hay 66 00:04:44,280 --> 00:04:45,090 en el 67 00:04:45,090 --> 00:04:48,200 carrito, etc. a nivel global y Redux es realmente genial 68 00:04:48,240 --> 00:04:53,520 para eso, por lo que definitivamente necesitaremos eso . En la misma nota, también necesitamos instalar algunos paquetes, 69 00:04:53,550 --> 00:05:00,900 por lo que ejecutaré npm install --save e instalar Redux y también React Redux. También necesitaremos React -navigation porque, por 70 00:05:00,900 --> 00:05:07,480 supuesto, agregaremos navegación nuevamente, por lo que ya podemos incluir eso. 71 00:05:07,500 --> 00:05:14,540 También agregaré botones React-header-header porque agregaré botones de encabezado aquí y quiero tener estos botones bien diseñados y 72 00:05:14,550 --> 00:05:19,380 posicionados sin tener que hacer todo ese posicionamiento de estilo por mi 73 00:05:19,380 --> 00:05:22,650 cuenta y eso debería ser todo por ahora. 74 00:05:22,950 --> 00:05:28,770 Así que ya instalaré todos estos paquetes, los necesitaremos en todo este 75 00:05:28,770 --> 00:05:36,570 módulo y con estos paquetes instalados y estos archivos básicos creados, tenemos una configuración base sólida para comenzar. 76 00:05:36,580 --> 00:05:41,820 Ahora, además de estos paquetes, también tenemos que instalar otros dos paquetes con 77 00:05:41,820 --> 00:05:49,050 la ayuda del comando de instalación expo y que es el controlador react-native-Gesture, por lo que expo install 78 00:05:49,050 --> 00:05:55,800 React-native-gest-handler y también el paquete react-native-reanimated . Ambos paquetes también deben instalarse con 79 00:05:55,980 --> 00:05:58,800 el comando de instalación expo. 80 00:05:58,860 --> 00:06:02,100 Ahora, por supuesto, se trata de poblar eso con vida y allí 81 00:06:02,190 --> 00:06:06,720 quiero comenzar con la primera pantalla, veremos cuál es la pantalla de descripción general de los productos.