1 00:00:02,230 --> 00:00:08,830 Ahora, además de configurar un nuevo proyecto desde cero con React Native CLI o con la expo CLI y 2 00:00:08,860 --> 00:00:10,820 luego elegir el flujo de trabajo 3 00:00:11,020 --> 00:00:19,710 desnudo, incluso puede convertir un proyecto administrado en un proyecto de flujo de trabajo desnudo React Native y eso es bastante bueno porque eso significa que 4 00:00:19,900 --> 00:00:24,480 puede obtener todo las características de conveniencia del flujo de trabajo administrado durante 5 00:00:24,490 --> 00:00:32,170 el desarrollo y una vez que haya terminado, por ejemplo, o una vez que necesite un determinado paquete de terceros que integre algunas 6 00:00:32,230 --> 00:00:38,110 características que no ha incorporado en la exposición y que absolutamente necesita, en tal caso puede todavía 7 00:00:38,110 --> 00:00:43,180 cambia y no tiene que reconstruir la aplicación desde cero y crear un nuevo proyecto 8 00:00:43,180 --> 00:00:44,890 y copiar su código. 9 00:00:45,010 --> 00:00:51,380 ¿Cómo? Bueno, en su proyecto y esta es la característica 10 00:00:51,380 --> 00:00:57,520 nativa del dispositivo, el proyecto de grandes lugares que construimos anteriormente en el curso donde podemos agregar lugares, donde, por 11 00:00:57,520 --> 00:01:05,230 supuesto, estamos usando la ubicación, los mapas, la cámara, SQLite, donde estamos usando todos estos cosas, allí en este proyecto, simplemente puede ejecutar expo 12 00:01:05,230 --> 00:01:10,390 eject y esto transforma su proyecto en un proyecto de flujo de trabajo administrado no expo. 13 00:01:10,390 --> 00:01:13,110 Sin embargo, es importante, no hay vuelta atrás, por supuesto, 14 00:01:13,110 --> 00:01:18,550 puede copiar su carpeta y hacer una copia de seguridad y guardar esto o si está usando git, por supuesto, 15 00:01:18,550 --> 00:01:23,860 puede volver a una confirmación anterior, pero si no ha guardado su proyecto, una vez que lo expulsa, no 16 00:01:23,860 --> 00:01:25,360 puede transformarlo de nuevo, 17 00:01:25,360 --> 00:01:26,900 así que tenga en cuenta esto. 18 00:01:27,160 --> 00:01:32,680 Tendrías que crear un nuevo proyecto gestionado por la exposición y copiar todo tu código 19 00:01:32,680 --> 00:01:33,970 si querías volver. 20 00:01:33,970 --> 00:01:40,720 Entonces, si ejecuta la expulsión de la exposición, en realidad se le debe preguntar a qué tipo de proyecto desea 21 00:01:40,750 --> 00:01:46,180 expulsar y aquí tengo dos opciones al final. Ahora, por cierto, las opciones que ves aquí pueden diferir con 22 00:01:46,210 --> 00:01:52,360 el tiempo, pero aquí, las dos opciones que tengo son kit básico y expo. El kit de Expo está en desuso, esto 23 00:01:52,360 --> 00:01:58,780 es básicamente lo que teníamos antes de que tuviéramos el flujo de trabajo simple, por lo que realmente no 24 00:01:58,780 --> 00:02:02,520 deberías cambiar a esto, sino que puedes cambiar a desnudo 25 00:02:02,530 --> 00:02:08,710 aquí, lo que simplemente significa que ahora esto se transformará en un proyecto React Native, como si fuera 26 00:02:08,710 --> 00:02:13,010 creado con React Native CLI sin el envoltorio de exposición, pero estará preconfigurado 27 00:02:13,030 --> 00:02:18,640 como se menciona aquí en la página react-native-unimodules, que es una especie de paquete que expo necesita 28 00:02:18,670 --> 00:02:26,200 exponer todas estas API de exposición a un aplicación no expo. Por lo tanto, preconfigurará todas estas cosas durante cada acción para 29 00:02:26,200 --> 00:02:29,140 que no tenga que hacer eso, por lo 30 00:02:29,350 --> 00:02:36,120 que obtendrá una aplicación React Native plus, por así decirlo. Entonces, si presiono enter aquí y ahora es 31 00:02:36,120 --> 00:02:42,310 importante, no puede volver una vez que se haya completado, puede elegir un nombre para la pantalla 32 00:02:42,910 --> 00:02:50,490 de inicio y elegiré lugares excelentes aquí, por ejemplo, presione enter, ahora nombre mi Android Studio y Xcode proyecta rn-guide 33 00:02:50,530 --> 00:02:54,670 pero eso depende de usted y ahora esto hará su trabajo. 34 00:02:54,880 --> 00:02:56,280 Transforma el proyecto, agrega una 35 00:02:56,290 --> 00:03:02,380 carpeta de Android y como estoy en macOS, también agrega una carpeta de iOS. Por supuesto, en Windows y Linux, no lo 36 00:03:02,380 --> 00:03:06,970 hará porque allí, dado que ahora necesita compilar esto localmente, no puede 37 00:03:06,970 --> 00:03:08,660 compilar aplicaciones iOS 38 00:03:09,640 --> 00:03:16,450 y preconfigura todo e instala un par de dependencias para que pueda usar su código existente y todos 39 00:03:16,450 --> 00:03:22,150 los paquetes de exposición que ya instaló en esta configuración básica, por lo que no 40 00:03:22,150 --> 00:03:25,130 solo configura todos los elementos de unimódulos aquí, 41 00:03:25,240 --> 00:03:32,710 sino que también se asegura de que todos los paquetes que ya está utilizando, como ubicación de exposición o SQLite 42 00:03:33,130 --> 00:03:37,980 de exposición, también esos paquetes trabajo. Así que ahora esto puede llevar 43 00:03:38,010 --> 00:03:46,260 un tiempo, así que esperemos a que termine y aquí está hecho y verá que en realidad me dice que generalmente hizo 44 00:03:46,260 --> 00:03:50,430 su trabajo, pero había dos paquetes que requieren una configuración manual. 45 00:03:50,430 --> 00:03:54,750 Simplemente puede hacer clic en estos enlaces para obtener instrucciones sobre lo que necesita hacer 46 00:03:54,780 --> 00:04:00,810 allí, es el selector de imágenes de la exposición y el paquete de mapas React Native donde necesita hacer una instalación 47 00:04:00,810 --> 00:04:01,980 manual para terminarlo. 48 00:04:02,820 --> 00:04:05,010 Entonces, aquí en la página del selector 49 00:04:05,010 --> 00:04:11,400 de imágenes de la exposición, al final lo que tenemos que hacer es ejecutar el puerto de instalación en la carpeta iOS, 50 00:04:11,400 --> 00:04:11,810 por 51 00:04:11,820 --> 00:04:18,660 lo que debemos hacer todas las cosas después de instalar el paquete. Entonces, en la carpeta del proyecto, navegaré a iOS y 52 00:04:18,660 --> 00:04:24,930 ejecutaré la instalación del puerto, el puerto es como npm para iOS, instala algunas dependencias que iOS necesita para funcionar correctamente, 53 00:04:25,050 --> 00:04:32,040 así que eso es lo que está sucediendo ahora y una vez hecho esto, también lo haremos necesitamos agregar esta entrada aquí al 54 00:04:32,040 --> 00:04:36,030 manifiesto de Android, así que eso también es algo que tendremos que hacer. 55 00:04:36,270 --> 00:04:42,030 Por lo tanto, debemos ir a la carpeta de Android, la carpeta de la aplicación allí y en la carpeta de origen, el 56 00:04:42,360 --> 00:04:47,070 Manifiesto de Android y luego, como se describe aquí, agregar esto dentro de las etiquetas de la aplicación. 57 00:04:47,070 --> 00:04:57,060 Así que aquí está la aplicación y allí, deberíamos agregar esta entrada de actividad aquí, como esta, que es obligatoria. 58 00:04:57,300 --> 00:05:02,280 Ahora que ya estoy aquí, también verá que este archivo de manifiesto también se 59 00:05:02,280 --> 00:05:02,950 configuró 60 00:05:03,090 --> 00:05:08,940 de cierta manera, incluye todos los permisos y, por supuesto, no desea hacerlo, solo desea solicitar 61 00:05:08,940 --> 00:05:10,390 los permisos realmente necesitas 62 00:05:10,410 --> 00:05:18,480 Entonces, como dice aquí, elimine los permisos que su aplicación no necesita y, por ejemplo, mi aplicación de demostración 63 00:05:18,480 --> 00:05:24,300 aquí solo debería necesitar el permiso de ubicación de acceso de acceso que moveré 64 00:05:27,440 --> 00:05:36,890 allí y, por supuesto, el permiso de la cámara que moveré allí y también el permiso de escritura de almacenamiento externo, que también 65 00:05:41,790 --> 00:05:43,520 debería ser necesario. 66 00:05:43,530 --> 00:05:48,900 En realidad, estos deben ser todos los permisos y puede verificar todos los paquetes de terceros o todos 67 00:05:48,900 --> 00:05:54,110 los paquetes de API de exposición que está utilizando para asegurarse de que no le faltan permisos. 68 00:05:54,300 --> 00:06:00,840 Con eso, en realidad comentaré todos estos permisos aquí y también todos estos permisos y lo 69 00:06:00,840 --> 00:06:09,170 probaremos para ver si eso funciona. Entonces, con eso, la configuración del paquete selector de imágenes está lista. Ahora, los mapas React Native 70 00:06:09,190 --> 00:06:14,880 también deben configurarse y allí podemos sumergirnos en las instrucciones de instalación. 71 00:06:14,880 --> 00:06:18,260 Ahora este comando de instalación npm, eso ya sucedió, pero ahora lo que 72 00:06:18,390 --> 00:06:24,960 tenemos que hacer es ejecutar el enlace React Native React Native maps. Entonces, simplemente volvamos a subir un 73 00:06:25,020 --> 00:06:32,380 nivel en la carpeta del proyecto raíz y ejecute React Native link React Native maps 74 00:06:32,380 --> 00:06:34,590 y eso ahora vinculará 75 00:06:34,600 --> 00:06:40,870 todo, asegúrese de que todo funcione correctamente, que todo esté configurado correctamente 76 00:06:40,870 --> 00:06:49,120 y que aún necesite hacer algo de manual cosas, todas estas cosas aquí no deberían ser 77 00:06:49,270 --> 00:07:00,230 necesarias, todo debería hacerse con enlaces afortunadamente, pero en Android, debe asegurarse de agregar esta entrada aquí, esta entrada de metadatos en 78 00:07:00,230 --> 00:07:00,790 la 79 00:07:00,790 --> 00:07:05,520 clave de su aplicación en el Manifiesto de Android. 80 00:07:05,630 --> 00:07:11,990 Entonces, aquí dentro de la aplicación, podemos agregar esta entrada y allí debe colocar su clave API de 81 00:07:11,990 --> 00:07:12,740 Google Maps. 82 00:07:12,840 --> 00:07:14,680 Ahora lo tengo en la 83 00:07:14,690 --> 00:07:21,230 carpeta env si lo recuerdas, así que solo tomaré esta clave y la agregaré aquí, reemplazaré tu clave de API 84 00:07:21,230 --> 00:07:23,490 de Google Maps aquí y también es 85 00:07:23,660 --> 00:07:31,040 importante, si vas a la página de API de Google Maps, necesitas para habilitar este SDK de mapas para Android en su proyecto, 86 00:07:31,040 --> 00:07:31,790 eso es 87 00:07:31,790 --> 00:07:36,500 importante; de lo contrario, esto no funcionará. Para iOS, no necesita hacer nada especial a menos 88 00:07:36,500 --> 00:07:41,690 que quiera usar Google Maps allí, en cuyo caso debe seguir las instrucciones dadas en las instrucciones de React Native Maps 89 00:07:41,870 --> 00:07:44,920 aquí para saber cómo usar Google Maps en iOS pero para Android 90 00:07:45,800 --> 00:07:52,930 usted definitivamente necesita habilitar el SDK de Google Maps para la API de Android aquí. Para habilitar esta API, puede ir a Google Cloud Platform aquí 91 00:07:52,940 --> 00:07:58,760 para el proyecto en el que trabajó anteriormente cuando configuró esa clave API y así sucesivamente, y 92 00:07:59,000 --> 00:08:05,240 luego aquí, en API y servicios, puede ir a la biblioteca que lo lleva a una biblioteca de 93 00:08:05,240 --> 00:08:09,710 todas las API de Google y allí el SDK de mapas para Android, 94 00:08:09,710 --> 00:08:11,120 debe habilitar esto. 95 00:08:11,120 --> 00:08:15,980 También necesitará configurar el SDK de mapas para iOS si desea usar Google Maps en iOS, que 96 00:08:15,980 --> 00:08:17,150 no usaré aquí. 97 00:08:17,350 --> 00:08:18,760 Ahora ya debería estar habilitado aquí, pero 98 00:08:18,770 --> 00:08:21,500 asegúrese de que lo esté. Entonces, en caso de que no 99 00:08:21,590 --> 00:08:22,710 esté habilitado, definitivamente hágalo. 100 00:08:24,370 --> 00:08:27,240 Con eso, esto también debería configurarse de manera que 101 00:08:27,250 --> 00:08:34,450 funcione y ahora si ejecutamos react-native run-android, la aplicación que creamos en un módulo anterior con el flujo de trabajo administrado expo ahora debería 102 00:08:34,450 --> 00:08:41,260 funcionar, ahora sin el flujo de trabajo administrado expo sin el cliente expo se usa en el simulador o en el dispositivo 103 00:08:41,260 --> 00:08:47,770 real, sino que se construye localmente con Android Studio o, por supuesto, también con iOS si desea usar eso y, por 104 00:08:47,770 --> 00:08:54,000 lo tanto, de la misma manera que lo haría en un proyecto creado por React Native CLI pero ahora, después 105 00:08:54,010 --> 00:08:55,510 de expulsarlo del flujo 106 00:08:55,510 --> 00:09:01,000 de trabajo administrado, lo que, por supuesto, significa que todo este código se escribió en el flujo de 107 00:09:01,000 --> 00:09:07,180 trabajo administrado y, sin embargo, ahora lo ejecuto en el flujo de trabajo no administrado, lo cual es bastante bueno. 108 00:09:07,180 --> 00:09:10,830 Esperemos a que esto termine y veamos si esta aplicación funciona como debería. 109 00:09:11,590 --> 00:09:16,780 Aquí viene el emulador de Android, que es el emulador que quiero usar para probar porque allí 110 00:09:16,780 --> 00:09:23,020 puedo usar la cámara del emulador para probar y nuevamente, solo para enfatizar esto, esto ahora no está usando la 111 00:09:23,020 --> 00:09:24,400 aplicación de cliente expo, 112 00:09:24,400 --> 00:09:28,930 tampoco pudimos ' t escanee un código de barras aquí porque no hay código 113 00:09:28,940 --> 00:09:34,570 de barras para escanear, esta es realmente una aplicación construida con Android Studio y enviada a nuestra aplicación. 114 00:09:34,720 --> 00:09:38,710 Así que aquí está nuestra aplicación y ahora intentemos agregar un nuevo 115 00:09:38,710 --> 00:09:44,470 lugar aquí, probar, tomar una imagen, permitir el acceso a la cámara, por supuesto, y luego tomar 116 00:09:49,370 --> 00:09:50,630 esta imagen, sí, recortarla, 117 00:09:53,960 --> 00:09:55,190 elegir una ubicación 118 00:09:56,060 --> 00:09:58,010 en el mapa tal vez, 119 00:10:00,760 --> 00:10:04,050 aquí está el mapa que viene, esta ubicación se ve 120 00:10:04,070 --> 00:10:06,760 bien para mí, guarda esto, guarda el lugar, 121 00:10:06,760 --> 00:10:07,540 aquí 122 00:10:07,540 --> 00:10:09,940 estamos y ahora déjame cerrar esta aplicación. 123 00:10:10,060 --> 00:10:13,210 Allí, también ves que esta es realmente una aplicación 124 00:10:13,210 --> 00:10:19,210 independiente instalada, si abro el cajón de aplicaciones aquí en el dispositivo, aquí en el simulador, es esta 125 00:10:19,380 --> 00:10:22,040 aplicación de lugares fantásticos que ves aquí. 126 00:10:22,040 --> 00:10:28,920 Entonces, si lanzo esto, ahora relanza la aplicación en la que trabajamos y está nuestro lugar, ya que estaba almacenado en el 127 00:10:29,190 --> 00:10:30,330 almacenamiento local, la imagen 128 00:10:30,330 --> 00:10:34,540 obviamente estaba almacenada en el sistema de archivos; de lo contrario, no la 129 00:10:34,710 --> 00:10:41,370 veríamos y funciona como antes, pero ahora no dentro del cliente expo sino como una aplicación independiente sin ningún envoltorio de 130 00:10:41,370 --> 00:10:41,970 expo, 131 00:10:41,970 --> 00:10:48,300 todavía usando algunas de las API de expo y paquetes de expo con la ayuda de este paquete de unimódulos 132 00:10:48,300 --> 00:10:53,640 que se agrega y configura automáticamente al flujo de trabajo simple que, por otro lado, obtuvimos con 133 00:10:53,700 --> 00:10:55,080 la ayuda de expulsar. 134 00:10:55,080 --> 00:10:57,000 Así que hay muchas cosas geniales pasando allí.