Cómo conectar un micrófono USB a un celular
Uno Platform: La revolución
Cuando surgieron Ionic y React Native fue algo
revolucionario, porque nos permitieron desarrollar aplicaciones móviles
(IOS como para Android principalmente) usando un mismo código. Sin embargo, seguíamos desarrollando
para web con otras herramientas (.NET, PHP, React, Angular, etc). Ahora,
hace apenas 3 años, la comunidad Open
Source presentó Uno Platform que
al igual que los framework y librerías ya mencionados, permite
desarrollar aplicaciones móviles , pero agrega la novedad de ese mismo
código que se utiliza para desarrollar aplicaciones móviles ,
poder utilizarlo para crear aplicaciones
de escritorio y aplicaciones WebAssembly .
Quizás, por ser Uno Platform
una herramienta relativamente nueva, todavía la comunidad de desarrolladores no
se ha volcado totalmente a utilizarla, pero parece prometer mucho. Ya vemos
como empresas como National Geographic Learning ya usan Uno Platform.
Auditoría Informática - Guía práctica, desde cero a experto.
Subiendo imágenes en React Native y Firebase con React
Pedro Lara
En esta ocasión me propongo compartir
estos pasos para subir una una imagen en una aplicación creada con React
Native y Expo.
Para este ejemplo asumimos que ya
disponemos de un proyecto creado en firebase con una ruta llamada “/imagenes”
en la que vamos a guardar nuestras imágenes.
Lo primero que vamos a hacer es instalar
las dependencias necesarias para poder hacer uso de la Gallery de nuestro
teléfono:
expo install expo-permissions
También debemos instalar image Picker:
expo install expo-image-picker
Vamos
a crear un componente llamado perfil_component
y tres métodos que se encargarán de realizar todo el proceso dese validar los
permisos de acceder a la galería de imágenes hasta enviar las imágenes a
Firebase:
changePhoto() “Se
ejecutará al presionar un icono para subir una imagen
loadImageFromGallery() “
Se
encargará validar los permisos de acceder a la galería de imágenes de acceder a ella
uploadImage() Se encargará de subir la imagen a Firebase
fileToBlob() Se encargará de convertir la imagen a blob
updateProfile() Se encargará de actualizar la imagen en el
perfil del usuario
1. Creando el componenente perfil_component
Creamos un componente al que llamaremos perfil_component. En este nuevo
componente vamos a hacer uso de un avatar que nos ofrece react. Hacemos el import desde react-native-elements:
perfil_component.js
import { Avatar } from
'react-native-elements';
import React from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
export default function App() {
return (
<View>
<Avatar
rounded
size= "large"
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
/>
</View>
);
}
El componente avatar recibe
varios parámetros los cuales podemos ver en la documentación oficial,
pero para nuestro caso, solo usaremos tres: rounded, source
y size.
Creamos un evento onPress
en nuestro avatar para poder capturar cuando el usuario toque la imagen. Este
evento onPress llamará una función que llamaremos onChangePhoto. Este método llamará a otro método llamado loadImageFromGallery el cual crearemos en nuestro
Helpers:
import { Avatar } from
'react-native-elements';
import React from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
export default function App() {
return (
<View>
<Avatar
rounded
size= "large"
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
onPress={()=>{
changePhoto()}
}
/>
</View>
);
}
2. Creando el método changePhoto()
const changePhoto = async ()=>{
const result = await
loadImageFromGAllery([1,1])
if(!result.status){
return
}
const
resultUploadImage = await uploadImage(result.image, "imagenes",
user.uid)
if(!resultUploadImage.statusResponse){
setLoading(false)
Alert.alert("Ha
ocurrido un error al almacenar la imagen")
return
}
const
resultUpdateProfile = await updateProfile({protoURL: resultUploadImage.url})
if(resultUpdateProfile.statusResponse){
setPhotoURL(resultUploadImage.url)
}else{
Alert.alert("Ha ocurrido un error al actualizar la imagen de
perfil")
}
}
3. Creando el método loadImageFromGallery
El método loadImageFromGallery se encargará de validar los permisos de
acceder a la galería de imágenes así como cargar la imagen. En nuestro
fichero helpers.js importamos la validación de permisos que
nos ofrece expo, así como la función ImagePicker que nos permite acceder a las
imágenes. Luego implementamos la subida de imágenes:
helpers.js
import
* as Permissions from 'expo-permissions'
import * as ImagePicker
from 'expo-image-picker'
Dentro
de nuestro método loadImageFromGAllery creamos la
implementación para acceder a la galería de imágenes de nuestro teléfono:
export const
loadImageFromGAllery = async(array) =>{
const
response = { status: false, images: null }
const
resultPermisions = await Permissions.askAsync(Permissions.CAMERA)
if(resultPermisions.status
== 'denied'){
Alert('Debes
de darle permisos para accedera la imagenes del telfono')
return response
}
const
result = await ImagePicker.launchImageLibraryAsync({
allowsEditing:
true,
aspect:
array
})
if(result.cancelled){
return
response
}
response.status
= true
response.iamge
= result.uri
return response;
}
La
función Permissions.askAsync le pregunta al usuario si desea otorgar permisos
de la Gallería de imagines a la aplicación. Con el parámetro
allowsEditing: true habitamos que el usuario pueda editar la imagen
seleccionada. Con aspect: array le pasamos las dimensiones de la imagen. Con
result.cancelled validamos si el usuario cancela la acción antes de guardar la
imagen. Mientras que con result.uri obtenemos la ruta de la imagen
seleccionada.
4. Creando el método uploadImage()
export const uploadImage
= async(image, path, name)=>{
const result = {statusResponse: false,
error: null, url:null}
const ref =
firebase.storage().ref(path).child(name)
const blob = await fileToBlob(image)
try{
await ref.put(blob)
const url = await
firebase.storage().ref(`${path}/${name}`).getDownloadURL()
result.statusResponse =true
result.url = url
}catch(error){
result.error = error
console.log(error)
}
return result
}
5. Crenado e método fileToBlob()
Aprovechamos
y creamos otro método en nuestro fichero helper.js para convertir la imagen en
blob.
export
const fileToBlob = async(path)=>{
const file = await fetch(path)
const blob = await file.blob()
return blob
}
6. Creando
el método updateProfile()
export const updateProfile = async(data)=>{
const result =
{statusResponse:true, error:null}
try{
await
firebase.auth().currentUser.updateProfile(data)
}catch(error){
result.statusResponse = false
result.error = error
}
console.log(result)
return result
}
Salto La Golondrina, municipio Salcedo, provincia de Hermanas Mirabal, República Dominicana
