En un
art铆culo anterior, habl茅 en detalle sobre nuestra experiencia en la creaci贸n de un servicio web / aplicaci贸n m贸vil para mantener un diario personal. La versi贸n actual de la aplicaci贸n (la versi贸n m铆nima viable ya est谩 disponible en Google Play) se est谩 desarrollando en React Native, y aqu铆 nos detendremos en detalles hoy.
Hablamos de nuestra propia experiencia con el marco, las formas de expandir la funcionalidad, los "escollos" (隆d贸nde est谩s sin ellos!) Y c贸mo los superamos.
Sobre todo el marco
Un poco sobre el h茅roe de la ocasi贸n:
React Native . 隆Sigue siendo bueno!
Para aquellos que conocen JavaScript lo suficiente y especialmente NodeJS, es muy bueno. Si tienes experiencia con React, bueno, o al menos entiendes su idea, mecanismo, 隆es simplemente magn铆fico!
Lo principal es que la salida es una aplicaci贸n verdaderamente nativa. Las extensiones y complementos cubren casi el 99% de las tareas t铆picas. El porcentaje restante en caso de necesidad urgente puede agregarse en los idiomas nativos (java, object-c) y conectarse a la aplicaci贸n React Native.
Pero lo suficiente sobre los profesionales, no les sirve, aunque la lista ser谩 impresionante. Todas las cosas buenas no tienen sentido si la aplicaci贸n no se inicia, y esto es lo primero que nos "complace" con React Native.
Al principio no le gust贸 la versi贸n de NodeJS. Luego la versi贸n npm. Luego, la versi贸n del SDK de Android, luego la versi贸n de las herramientas de Android, entonces ... No tiene sentido escribir c贸mo se resolvieron todos los problemas, porque desde ese momento todo el software anterior ha actualizado sus versiones y las instrucciones ser谩n irrelevantes.
Solo tenga en cuenta: el cuello de botella de React Native es el entorno de construcci贸n. Prep谩rese para el aprendizaje de Google, la lectura de foros y el stackoverflow. Como resultado, pasamos en implementaci贸n: Ubuntu - 3 d铆as, Win10 - 2 d铆as. Por extra帽o que parezca, todo result贸 ser m谩s simple en Windows, bueno, o simplemente en ubuntu se deshicieron de los conos y ya entendieron qu茅 y d贸nde sacar la palma.
Tenga en cuenta que, de repente, alguien es 煤til: el c贸digo presentado a continuaci贸n resolvi贸 todos los problemas con la compatibilidad de las versiones SDK de complementos al compilar el proyecto.
subprojects { afterEvaluate {project -> if (project.hasProperty("android")) { android { compileSdkVersion 26 buildToolsVersion '26.0.3' } } } }
Est谩 escrito en el archivo /android/build.gradle al final. Sin esta "directiva", aparentemente, cada uno de los complementos / extensiones intent贸 compilarse de acuerdo con sus propias versiones del SDK de Android, lo que condujo al ensamblaje del proyecto en una variedad ca贸tica de errores feroces y advertencias desagradables. Nadie sabe cu谩n relevante ser谩 la recomendaci贸n en el futuro. Pero hoy, especialmente despu茅s de que Google ha prohibido por la fuerza el uso de SDK por debajo de la 26陋 revisi贸n para la compilaci贸n, esto ayuda mucho.
El segundo cuello de botella: el dolor no es tanto React Native como, aparentemente, todo el Open Source en su conjunto: soporte limitado. Los repositorios tienen toneladas de problemas no resueltos. Los robots "inteligentes" feroces cierran los errores en ausencia de actividad, a veces incluso despu茅s de 7 d铆as ... Y todo parece estar bien. Nadie le debe nada a nadie. Todos est谩n acostumbrados.
La paciencia se rompi贸 cuando se descubri贸 un "error" al ingresar banalmente texto en una entrada de texto normal. Solo un cuadro de texto. Solo ingrese texto desde el teclado en pantalla. Despu茅s de un par de minutos de impresi贸n, comienzan los terribles retrasos y frenos del sistema. Nos apresuramos a buscar un problema: s铆, hay uno, comenz贸 con la versi贸n RN 5x.xx 驴Resuelve el problema? No Dos o tres temas sobre el tema son simplemente cerrados. Algunos m谩s se fusionaron en
uno grande .
Tuve que cavar adentro, averiguar, probar varias opciones, cambiar las versiones de RN, con la esperanza de que no hubiera una jamba all铆. Como resultado, fue experimentalmente posible minimizar las brechas de rendimiento: eliminaron por completo todo el formato y reescribieron el controlador de entrada. Pero el residuo desagradable permaneci贸. El problema con los desarrolladores del marco, por cierto, no se ha resuelto hasta ahora, han pasado seis meses ...
Base de datos
Realm es una base de datos r谩pida con una funcionalidad impresionante y funciona en Android, IOS, Windows.
Al principio, hubo una doble sensaci贸n, dicen, no hay ORM para ti, realmente no hay sql, la grabaci贸n solo est谩 dentro de la devoluci贸n de llamada. Inusual y extra帽o, especialmente para un desarrollador web originario de PHP, que creci贸 en ActiveRecord y Doctrine. Pero, de hecho, redactar su conjunto m铆nimo de funciones para CRUD result贸 ser bastante simple y r谩pido. Y todas las cuestiones de gustos y h谩bitos se resolvieron leyendo la informaci贸n oficial, concisa, concisa y comprensible.
Y entonces comenz贸 el carrusel de regalos:
- Cifrado de datos, listo para usar
- Carga lenta de datos (extrae de la base de datos solo lo que se necesita en este momento)
- Relaciones reales entre entidades (hola mongo!
- Versiones de la estructura de la base de datos, con migraciones - fuera de la caja
- Y un mont贸n de peque帽as pero bonitas cositas.
Parec铆a que el problema con la base de datos estaba completamente cerrado. Estamos trabajando! El caso fue debatido hasta que llegaron a la b煤squeda. M谩s bien, a la b煤squeda de texto completo. M谩s precisamente, a la b煤squeda de texto completo en ruso, no distingue entre may煤sculas y min煤sculas. El no trabajaba. Absolutamente En ingl茅s - trabajado. Las may煤sculas y min煤sculas tambi茅n funcionaron. Pero sin un registro, pero en ruso, incluso llorar. Despu茅s de buscar en la ayuda, el
rastreador de errores e Internet, result贸 que por algunas razones t茅cnicas era muy inconveniente para el desarrollador "pensar" en admitir codificaciones multibyte y todo lo que va m谩s all谩 del alfabeto latino. Bueno, no lo hizo. Por que no
Nada que hacer, tuve que buscar una soluci贸n. Como resultado de un breve asalto, se tom贸 una decisi贸n "decidida": hacemos un campo separado "fulltext_index". En 茅l, duplicamos todo el texto en may煤sculas, "cortando" simult谩neamente signos de puntuaci贸n innecesarios, problemas innecesarios y todo tipo de basura. Despu茅s de eso, es l贸gico suponer que hacemos una b煤squeda con may煤sculas forzadas.
Victoria! 隆La b煤squeda ahora funciona como un reloj en ruso, incluso en ingl茅s!
Total: a pesar de los problemas con el registro, la base de datos funciona muy r谩pido, la conveniencia es nivelada, un mont贸n de chips listos para usar, en general, lo recomiendo.
Pantalla de navegaci贸n
wix / react-native-navigation es un navegador simple y estable (un enrutador, como dir铆a un programador web).
Se eligi贸 solo porque pas贸 todas las pruebas internas necesarias (abrir la pantalla, apilar llamadas, regresar, barra lateral). En general, el m铆nimo requerido m铆nimo.
A diferencia de la popular
reacci贸n de navegaci贸n , wix tiene un 100% de natividad. As铆 es: todas las transiciones entre pantallas se traducen al c贸digo de la aplicaci贸n Java y funcionan a nivel del sistema.
En el proceso de desarrollo, se encontraron con un terrible error de la "pantalla blanca" que ocurre solo en algunos casos y en dispositivos individuales. Sucede que cuando sale del modo de "suspensi贸n", el proceso de arranque simplemente se congela. El depurador y la depuraci贸n son silenciosos. En github sobre este tema solo hab铆a indicios extra帽os de "... intenta jugar" con el orden de cargar pantallas y otra gracia de brujer铆a. Ni siquiera est谩 claro a qu茅 nivel est谩 enterrado el problema: el c贸digo Java del Android o ya est谩 en la m谩quina JavaScript. Despu茅s de bailar con una pandereta, el error comenz贸 a aparecer con menos frecuencia, pero no desapareci贸 en absoluto, quedando en la lista de problemas no resueltos. Por desgracia
Excluyendo esta "jamba", todo es m谩s o menos tolerable y suave. Y, lo m谩s importante, 隆nativo!
Sistema de archivos
Desde el sistema de archivos, necesit谩bamos almacenar fotos personalizadas, as铆 como trabajar con un par de archivos relacionados con la copia de seguridad. Como resultado de elegir entre dos opciones posibles, la elecci贸n recay贸 en
react-native-fs
"Acceso al sistema de archivos nativo": est谩 escrito en la entrada del repositorio. Bueno, probablemente lo sea, pero con algunas enmiendas y limitaciones.
1. El acceso es solo as铆ncrono. Como resultado, a veces debe recordar haber trabajado con Promise / async / await. Aunque en React empiezas a olvidarte de eso.
La ejecuci贸n s铆ncrona de una funci贸n as铆ncrona (en espera) requiere que la funci贸n actual sea as铆ncrona (as铆ncrona). Para hacer esto, simplemente agregue as铆ncrono delante del nombre de la funci贸n. Y s铆, para el m茅todo de clase React.Component, esto tambi茅n funciona. (en React help, ReactNative no dice nada al respecto, aunque esto est谩 impl铆cito).
export default class CloudIndex extends BasePage { async setupBackupFolders(init = false) {
隆Es importante recordar que despu茅s de esto, la funci贸n tambi茅n se vuelve as铆ncrona! Si ya se ha usado en alg煤n lugar antes, vuelva a verificar su llamada.
2. El acceso multiplataforma completo es solo una parte del sistema de archivos. Esencialmente, solo un directorio: DocumentDirectoryPath. Y este, de hecho, es el directorio en el que se encuentra la aplicaci贸n. Olv铆date de escanear el directorio ra铆z, buscar im谩genes en la galer铆a, audio, etc. Nada de esto est谩 disponible.
Pero en general, resuelve sus tareas al 100%. En la alcanc铆a m谩stil hev.
Acceso a la nube
La tarea es simple y compleja. Simple, porque todos tienen una API: t贸mala y 煤sala. Es dif铆cil: no quiero profundizar, y el formato de hora no me permiti贸 sentarme y hurgar en m茅todos "posiblemente operativos". Decidimos encontrar algo que funcione al 100% y se implemente en una extensi贸n lista para React Native.
Hab铆a exactamente uno de ellos: Google Drive. El trabajo con el disco es comprensible y se basa en solicitudes de API banales. Pero obtener acceso de la aplicaci贸n al disco es una historia completamente diferente.
React-native-google-signin : sistema de gesti贸n de autorizaciones de
google .
Aqu铆 es donde "nos divertimos". Lo quer铆an m谩s simple y m谩s confiable, pero consiguieron ...
Todo comenz贸 con la obtenci贸n de la clave de desarrollador. Anteriormente, Google mismo hizo todo esto. Pero despu茅s de la toma de control de FireBase, se decidi贸 transferir esta funci贸n a su maravillosa consola.
Entonces, para obtener la clave, necesita:
- Registre la aplicaci贸n en la consola de desarrolladores de Google para "habilitar" el acceso al servicio Drive all铆.
- Registre la aplicaci贸n en la consola de Firebase.
- Cree un archivo google-services.json en la consola de Firebase, en el que las claves de servicio est谩n protegidas.
- Deslice este archivo en el proyecto con la extensi贸n instalada react-native-google-signin.
Y luego s铆. Algo comienza a funcionar. M谩s bien, los c贸digos de error en las respuestas de servicio comienzan a ser significativos.
Es especialmente importante tener en cuenta que la clave API obtenida por la aplicaci贸n directamente cuando se conecta al servicio no es para nada eterna. A veces cambia una vez al d铆a, a veces una vez por minuto. Por lo tanto, antes de acceder al servicio, siempre es mejor verificar primero si la clave actual ha caducado. Y si ha expirado, para recibir de nuevo.
El proceso para obtener la clave API de Google es el siguiente:
await GoogleSignin.hasPlayServices() const userInfo = await GoogleSignin.signIn() this.setState({ userInfo: userInfo, }) settings.set('google.drive.key', userInfo.accessToken) trace('>> Key obtained:', userInfo.accessToken) this.apiKey = userInfo.accessToken
Entonces, por ejemplo, en nuestra aplicaci贸n, cuando abrimos la pantalla de respaldo, intentamos obtener carpetas de respaldo de la identificaci贸n de Google. Si todo tiene 茅xito, obtenemos una identificaci贸n.
backupRootID = await Storage.safeCreateFolder({ name: backupFolder, parents: ["root"], }).catch((e)=>{ if(e.status == 401) { trace(' >> Google signin unauthorized', e) signGoogle() return false } else { trace(' >> Google signin failed', e) } })
Si no es as铆 (lleg贸 el error 401), intentamos obtener una nueva clave de API y repetimos la solicitud para obtener nuevamente la identificaci贸n de la carpeta de respaldo.
Y algunas cosas m谩s agradables
Trabaja con fechas y horas
Honor y alabanza
moment.jsEl conocimiento de este milagro comenz贸 hace mucho tiempo y fue muy bueno que funcione igual de bien en el entorno React Native.
Un mont贸n de formatos, magic + - d铆a / mes / a帽o. Soporte para multiling眉ismo y formatos nacionales. Belleza!
Es posible ba帽arnos con tomates, lo que indica que todo esto es f谩cilmente "gobernado" por las manos con la fecha ordinaria, pero en condiciones de r谩pido desarrollo, 隆NO pienses que tales cosas son muy, muy 煤tiles!
Gr谩ficos y Tablas
React-native-charts-wrapper - Contenedor de JavaScript para Android MPAndroidCharts nativo.
Me gust贸 la presencia de una gran cantidad de varios tipos de gr谩ficos (aunque en esta etapa solo utilizamos dos de ellos: lineal y "circular").
Ech贸 a perder la impresi贸n con una exigua referencia de API casi perdida. El autor recomienda consultar la documentaci贸n de los MPAndroidCharts originales. De hecho, el consejo result贸 ser dif铆cil de implementar, ya que este 煤ltimo se est谩 desarrollando continuamente y supera la implementaci贸n del contenedor en varias versiones. Adem谩s, MPAndroidCharts est谩 escrito en Java. Vrapper - en JavaScript. R谩pidamente tienes que pensar en lo que es dif铆cil.
Multiling眉ismo y traducciones
隆React-native-i18n -work como un encanto, muchachos!
Aunque este componente se cuelga en github marcado como obsoleto, pero funciona sin fallas y jambas. Todas las traducciones est谩n perfectamente dispersas en archivos con idiomas.
El uso de los par谩metros del traductor tambi茅n funciona con una explosi贸n:
En el residuo seco
React Native cumpli贸 con casi todas sus expectativas. Con su ayuda, puede ensamblar relativamente r谩pido una aplicaci贸n prototipo, calcular la estructura y la usabilidad. Todas las herramientas necesarias para la "base" son.
Por otro lado, siempre existe el riesgo de estar en un "vac铆o" cuando simplemente no hay soluciones preparadas. Entonces, por ejemplo, lo obtuvimos al subir fotos a la aplicaci贸n, un componente que normalmente puede cortar y pellizcar im谩genes, solo una. Y no comenz贸 en nuestra versi贸n actual. Si la necesidad es muy "aguda", tendr谩 que actualizar casi la mitad del sistema, lo que probablemente lleve a otra b煤squeda de errores.
Como nuestro producto ensamblado en React Native en el mercado se mostrar谩, lo descubriremos en los pr贸ximos meses. Pero esta es una historia completamente diferente.