Hacer una aplicación como

Reaccionar aplicación nativa de clonación de Instagram | Reaccionar script nativo para Instagram

Explicación del clon nativo de Instagram de React. Utilice el paquete react-native-webview para insertar un WebView en su aplicación React Native. Puedes instalarlo...

Escrito por Ashok Kumar · Lectura de 10 min >
Cree una aplicación de clonación de Instagram con React Native
Índice del contenido hide

No reinventes la rueda. Necesitas crear un negocio, no una aplicación. Concéntrese en lo que hace que su startup sea única y su producto atractivo en lugar de escribir código repetitivo desde cero.

Lanza una plataforma de redes sociales y para compartir fotos y vídeos como Instagram para cautivar a millones de personas en un instante.

Aquí he enumerado el script de clonación de Instagram nativo de React número uno con un conjunto de funciones de vanguardia. Sólo para su comodidad, he actualizado las capturas de pantalla de la aplicación de clonación de Instagram nativa de reacción.

¿Qué es React y por qué React Native es un clon de Instagram?

reaccionar clon nativo de instagram
clon de Instagram nativo de reacción

El clon de Instagram con tecnología nativa React es una solución de redes sociales de marca blanca que se puede personalizar y lanzar rápidamente. Es una opción fantástica para las empresas que esperan ingresar al mercado de aplicaciones de redes sociales en un futuro próximo. Al igual que la aplicación de Instagram, nuestra solución viene precargada con todas las características y funcionalidades.

En MakeANApp, nos esforzamos por ayudar a las empresas a implementar rápidamente su aplicación de red social en su especialidad. Otro beneficio importante es que brindamos la solución a un costo razonable. Contáctenos, inicie rápidamente la aplicación y ayude a sus usuarios a conectarse globalmente sin dificultad.

React es un marco JavaScript front-end de código abierto que se utiliza para crear interfaces de usuario increíbles y reutilizables. Para obtener más información sobre React, puede dirigirse a  aquí.

Estrategias de monetización incluidas en el clon nativo de Instagram de React

Para una plataforma de redes sociales como Instagram, la publicidad ha sido tradicionalmente la principal fuente de ingresos. Puedes ganar mucho dinero a través de varios métodos en nuestro clon nativo de Instagram, como publicaciones patrocinadas y anuncios en carrusel. Echemos un vistazo más de cerca a cada uno de ellos.

Permitir que personas y empresas promocionen sus publicaciones para llegar a una audiencia más amplia, especialmente a aquellos que no siguen sus perfiles. Les permite mejorar su perfil, mejorar la participación en las publicaciones y aumentar su número de seguidores. A estas publicaciones patrocinadas se les agrega una etiqueta patrocinada y un botón de llamado a la acción. Tiene el potencial de ser su principal fuente de ingresos, permitiéndole ganar una cantidad significativa de dinero.

La publicidad en carrusel, al igual que las publicaciones patrocinadas, ayuda en la promoción de las publicaciones. La única distinción es que permite anunciar muchas fotos en una sola publicación. Es decir, las empresas pueden utilizar varias fotografías para contar una historia, aumentando la participación de los usuarios.

Compras en la aplicación

Permita que los usuarios paguen una tarifa para acceder a filtros y efectos personalizados. También hay una serie de funciones únicas en Instagram, como la aplicación, por las que puedes cobrar a los clientes. También le ayuda a ganar dinero de forma constante a lo largo del tiempo.

Aquí hay una guía general sobre cómo integrar la funcionalidad de Instagram en React Native usando WebView:

Configurar una vista web:

Ingrese al react-native-webview Paquete para insertar un WebView en su aplicación React Native. Puedes instalarlo usando npm o hilo:

npm install react-native-webview
# or
yarn add react-native-webview

Importe y utilice el componente WebView en su código React Native.

import React from 'react';
import { WebView } from 'react-native-webview';

const InstagramWebView = () => {
  return (
    <WebView
      source={{ uri: 'https://www.instagram.com/' }}
      style={{ flex: 1 }}
    />
  );
};

export default InstagramWebView;

Manejar la autenticación:

  1. Si su aplicación requiere autenticación de usuario, es posible que deba manejarla manualmente. Cuando los usuarios inician sesión a través de WebView, puede extraer la información necesaria de los eventos de navegación de WebView.
  2. Análisis de datos: Ingrese al onMessage accesorio de WebView para comunicarse entre su aplicación React Native y WebView. Puede pasar datos desde WebView a su aplicación React Native y viceversa.
const InstagramWebView = () => { const handleMessage = (evento) => { const datos = JSON.parse(event.nativeEvent.data); // Manejar los datos recibidos desde WebView }; devolver ( ); };

Pantalla para clonar Instagram nativo de React

Reaccionar pantalla nativa de clonación de Instagram 1
Reaccionar pantalla nativa de clonación de Instagram 2
Pantalla 3 de la aplicación React Native Instagram Clone
Pantalla 4 de la aplicación React Native Instagram Clone

5 pasos para iniciar el desarrollo de la aplicación de clonación de Instagram nativa de React

  • Estudio de requisitos
  • Diseño frontal
  • Desarrollo back-end
  • controles de calidad
  • Implementación de la aplicación

Crea tu propio clon nativo de Instagram de reacción

Para desarrollar su propia aplicación de red social para compartir fotografías en minutos, descargue la aplicación premium Clone de Instagram en React Native, que está completamente vinculada con el backend de Firebase. Debido a que React Native es compatible con varias plataformas, puede publicar su aplicación de redes sociales tanto en iOS como en Android.

¿Cuáles son los beneficios de la aplicación React Native Instagram Clone?

Se pueden ahorrar 6 meses de desarrollo. Puedes empezar ahora mismo. Evite todas las etapas del desarrollo del producto, como la creación de esquemas, la creación de prototipos, el diseño, la codificación, las pruebas, la corrección de errores, la optimización y la mejora del rendimiento.

  • Más de $15,000 en ahorros
  • Ahorre tiempo y dinero evitando contratar y despedir a diseñadores, desarrolladores y evaluadores.
  • Diseño y codificación del más alto calibre. Nuestros desarrolladores han trabajado para empresas reconocidas como Facebook, Instagram y Twitter.

Funciones imprescindibles en la aplicación Instagram React Native Clone que superarán al Instagram original

  • Alimentación
    • Artículos
    • Carruseles de imágenes
    • Líneas de tiempo cronológicas
    • Listas de feeds en tiempo real
    • Los me gusta en tiempo real cuentan
    • Los comentarios en tiempo real cuentan
    • Integración de cámara/biblioteca de fotos
    • Crear una nueva publicación
    • Comentarios
    • Lista de comentarios
    • Vídeos de soporte
    • Registros/Selector de ubicación interactivo
    • Compartir publicación externamente
    • Hashtags
    • Menciones / Etiquetas
  • Historias
    • Agregar una nueva historia
    • Feed de amigos de historias
    • Visor interactivo de medios de historias
    • Historias que desaparecen
    • Integración de cámara/biblioteca de fotos
    • Vídeos de soporte
  • Filtros de fotos de Instagram
    • 27 hermosos filtros de fotos
    • Selección de varias fotos
    • Integración de cámara, biblioteca y vídeo
    • Compositor interactivo de IG
    • Soporte para filtros personalizados
  • Explorar alimentación
    • Diseño de cuadrícula de exploración de Instagram
    • Flujo de publicaciones en tiempo real
  • Seguir listas
    • Seguir dejar de seguir
    • lista de seguidores
    • siguientes listas
    • Listas de seguimiento de otros usuarios
    • Actualizaciones de historias y feeds en tiempo real
    • Buscar usuarios
  • Los mensajes directos
    • Conversaciones privadas en tiempo real
    • Conversaciones grupales en tiempo real
    • Los mensajes de texto
    • Mensajes con fotos
    • Mensajes de video
    • Mensajes de audio
    • Indicadores de estado en línea
    • En respuesta a la funcionalidad
    • Estado visto (Facepile)
    • Mensajes no leídos
    • Visor de medios en pantalla completa
    • URL en las que se puede hacer clic
    • Crear grupo
    • Ajustes de grupo
  • Notificaciones push e insignias
  • Modo oscuro
  • Localización (varios idiomas) y compatibilidad con RTL
  • Mi Perfil
    • Diseño de cuadrícula de perfil de Instagram
    • Actualizaciones de publicaciones en tiempo real
    • Ver la funcionalidad de otros perfiles
    • Seguidores y seguidores conteos en tiempo real
  • Informes y bloqueo (según las directrices de Apple)
  • Administración de cuentas
    • Autenticación telefónica con confirmación por SMS
    • Autenticación de Apple (iOS)
    • Iniciar sesión con Facebook
    • Iniciar sesión con correo electrónico y contraseña
    • registro de usuario
    • Funcionalidad “Guardar contraseña”
    • Restablecer la Contraseña
    • Flujo de recorrido
    • Editar detalles de la cuenta
    • Ajustes
    • Contacta con nosotros
    • Cerrar Sesión
  • Integración de back-end
    • Autenticación con Firebase Auth
    • Integración de base de datos con Firebase Firestore
    • Almacenamiento de fotos y videos con Firebase Storage
    • Notificaciones push con Firebase Cloud Messaging
  • Rendimiento optimizado
    • Sincronización instantánea en todos los feeds
    • Almacenamiento en caché de imágenes
    • Estados vacíos y cargando
    • Manejo elegante de errores
    • Retroalimentación háptica
    • Optimizado para el crecimiento y la retención de usuarios
    • Compresión de fotos y vídeos
    • Desnormalización para feeds rápidos

Creación de componentes de interfaz de usuario en la aplicación React Native Instagram Clone

Ahora que estamos listos para comenzar a construir aplicaciones de reacción, diseñaremos los componentes que necesitaremos.

En ReactNative, ¿cuáles son los componentes de Instagram Clone?

Quizás te preguntes qué son los componentes si eres nuevo en React. No te quedes más perplejo. Los componentes de React te permiten dividir tu interfaz de usuario en partes más pequeñas. En lugar de crear la interfaz completa en un archivo, la divide en componentes separados y reutilizables que combina para crear su programa terminado.

Construyendo un mini clon de Instagram con React Native

Usando JavaScript y React Native, podemos crear aplicaciones móviles para una variedad de plataformas y para cualquier categoría o cualquier aplicación de clonación como Instagram o WhatsApp. Las interfaces que creamos también se traducen a vistas nativas. Podremos compartir gran parte del código que creamos entre dispositivos iOS y Android y React Native simplifica la creación de código específico de la plataforma cuando sea necesario. Podemos crear aplicaciones para ambas plataformas con un solo lenguaje (JavaScript), marco (React), motor de estilo y cadena de herramientas. Una vez que lo hayas aprendido, podrás escribirlo en cualquier lugar.

Hoy, construiremos una aplicación similar a Instagram utilizando los componentes React Native más comunes. Los componentes Ver, Texto, Imagen y FlatList se utilizarán para crear la fuente de imágenes principal. También usaremos TextInput y ScrollView para crear una pantalla de comentarios.

Si no está familiarizado con la exposición, puede aprender cómo crear una aplicación nativa de React aquí.
Debemos dividir la interfaz de usuario de nuestra aplicación en componentes, que luego desarrollaremos y vincularemos. Comencemos analizando la página de alimentación de imágenes. mire aquí.

Cuando hayamos terminado, tendremos que crear cuatro componentes:

  • Avatar: la foto de perfil o las iniciales del autor de la imagen.
  • AuthorRow: la fila horizontal que contiene información sobre el autor: su avatar y su nombre.
  • Tarjeta: el elemento en el feed de imágenes que contiene la imagen e información sobre su autor.
  • CardList: la lista de tarjetas en el feed
Avatar

Es más fácil mantener todos nuestros componentes juntos en un directorio de componentes para aplicaciones simples. Pero en una aplicación complicada como el clon nativo de Instagram de React y Javascript. Creemos un nuevo directorio llamado componentes y un nuevo archivo llamado dentro de él. js
Los componentes Ver y Texto se representarán utilizando nuestro componente Avatar. Se utilizará la hoja de estilo y se utilizarán PropTypes para validar cadenas, números enteros y accesorios de color. En Avatar, pegue el código a continuación. js

import { ColorPropType, StyleSheet, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

export default function Avatar({ size, backgroundColor, initials }) {
  const style = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor,
  };

  return (
    <View style={[styles.container, style]}>
      <Text style={styles.text}>{initials}</Text>
    </View>
  );
}

Avatar.propTypes = {
  initials: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  backgroundColor: ColorPropType.isRequired,
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
  },
});
AutorRow.js

Cree otro archivo, AuthorRow.js, en la misma carpeta "Componentes". Este es un componente de fila horizontal que contiene nuestro Avatar y el nombre completo del autor. Importaremos en gran medida cosas que ya hemos visto en este archivo: StyleSheet, View, Text, PropTypes y React. También agregaremos TouchableOpacity para manejar los toques en el texto de "Comentarios", lo que nos transportará a la pantalla de comentarios. Además, necesitaremos importar el componente Avatar que acabamos de crear y algunas de las funciones de utilidad que clonamos en este proyecto al comienzo del capítulo. A AuthorRow.js, agregue el siguiente bloque de código.

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';


import Avatar from './Avatar';
import getAvatarColor from '../utils/getAvatarColor';
import getInitials from '../utils/getInitials';


export default function AutoRow ({ fullname, linkText, onPressLinkText }) {
    return (
        <View style = {styles.container}>
            <Avatar
                size={35}
                initials={getInitials(fullname)}
                backgroundColor =  {getAvatarColor(fullname)} 
                />
                <Text style = {styles.text} numberofLines={1}>
                    {fullname}
                </Text>
                {!!linkText && (
                    <TouchableOpacity onPress={onPressLinkText} >
                        <Text numberOfLines={1}>{linkText}</Text>
                    </TouchableOpacity>
)}
        </View>
    )
}

const styles =StyleSheet.create({
    container: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    text: {
        flex: 1,
        marginHorizontal: 6,
    },
});
Tarjeta

A continuación, crearemos la tarjeta que contiene AuthorRow y el componente Imagen, descargaremos imágenes desde un URI. Cree un nuevo archivo Card.js en el directorio de componentes. Agregue lo siguiente a este archivo:

import { ActivityIndicator, Image, StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import AuthorRow from './AuthorRow';

export default class Card extends React.Component {
  static propTypes = {
    fullname: PropTypes.string.isRequired,
    image: Image.propTypes.source.isRequired,
    linkText: PropTypes.string.isRequired,
    onPressLinkText: PropTypes.func.isRequired,
  };

  state = {
    loading: true,
  };

  handleLoad = () => {
    this.setState({ loading: false });
  };

  render() {
    const { fullname, image, linkText, onPressLinkText } = this.props;
    const { loading } = this.state;

    return (
      <View>
        <AuthorRow
          fullname={fullname}
          linkText={linkText}
          onPressLinkText={onPressLinkText}
        />
        <View style={styles.image}>
          {loading && (
            <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
          )}
          <Image
            style={StyleSheet.absoluteFill}
            source={image}
            onLoad={this.handleLoad}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    backgroundColor: 'rgba(0,0,0,0.02)',
  },
});

Introducción a cómo crear un clon de Instagram con React JS y next js

Hola, aprenderás cómo crear un clon de Instagram con React JS y next js. Utilizaremos Bootstrap 5 para crear nuestra plantilla de clonación de Instagram. Estoy muy feliz de mostrarles todo porque es una de las mejores aplicaciones que crearemos juntos.

Hoy obtendrás una gran cantidad de conocimientos.

  • Uno de ellos será obtener objetos de la API, crear una secuencia de fotos o crear un perfil de usuario.
  • Este artículo sirve como hoja de ruta para nuestra aplicación y describe todo lo que necesitamos saber paso a paso.
  • Puede crear la aplicación usted mismo y escribir el código que crea que funcionaría bien, o puede crearla paso a paso.

Cómo crear la aplicación Next.JS para la aplicación React Native Instagram Clone

Para ahorrar mucho tiempo y centrarme solo en la codificación, he creado un iniciador de proyecto que puedes encontrar aquí:

https://github.com/Duomly/nextjs-photo-app-duomly/tree/start-here

Debes clonar el repositorio de GitHub y comenzar a codificar en esa rama.

Cómo crear un encabezado en Next.js para clonar Instagram en React Js

El encabezado es un componente esencial en prácticamente cualquier programa; nosotros también lo necesitaremos.

En esta situación, necesitaremos crear un único componente llamado encabezado.

Agregue la plantilla necesaria a js.
En Next.JS, ¿cómo se crea un pie de página para React Instagram Clone?

También necesitaremos el elemento de pie de página, que es similar al encabezado.

  • Se requerirá un pie de página.
  • El pie de página es un archivo y componente JSX.
  • Después de eso, necesitaremos crear una plantilla de pie de página con todos los botones relevantes. En mi caso, hay un botón que te lleva al sitio y otro que te lleva al perfil del usuario.
  • En la aplicación, agregue un encabezado y un pie de página.

Jsx
Nuestras piezas de encabezado y pie de página están completas, ¡lo cual es fantástico!

Ahora debemos integrarlos en nuestra aplicación.

Para hacerlo, abra la aplicación. JSX y arrastre y suelte estas piezas en nuestra plantilla de renderizado.

En React Native o Next.JS, ¿cómo se obtienen datos de una API?
¿Cuál es el aspecto más importante de las aplicaciones de imágenes?

Fotos!

Para obtener fotografías debemos utilizar una API ficticia que devuelve un archivo JSON con datos simulados.

Usando app.jsx, obtenga datos de /mocks/items.json).

Puede incluir la llamada de incendio inicial en el gancho "useEffect".

¿Cómo se hace un componente de tarjeta? Siguiente.js

La tarjeta, que contiene fotografías, hashtags y datos vinculados a la imagen, es el segundo aspecto clave que podemos ver en las aplicaciones relacionadas con la fotografía.

Para incluir esta lógica en nuestra aplicación, necesitaremos crear un componente "Tarjeta" en la tarjeta de archivo.

Jsx.

Ese componente se encuentra en la carpeta "componentes/inicio".

Crear una plantilla de componentes para tarjetas
A continuación, desarrollaremos una plantilla HTML que se parece a Instagram dentro del componente de tarjeta.

Utilicé el elemento de tarjeta Bootstrap 5 con algunos ajustes y te recomiendo que hagas lo mismo.

Bootstrap 5 es un marco CSS fantástico que ha alterado la forma en que se crean las aplicaciones. Es similar a Tailwind CSS.

Creo que el diseño de elementos también ha mejorado.

Incluya un componente de tarjeta en la página de inicio.
La tarjeta fue una de las plantillas HTML más difíciles de crear y ya la completó; ¡bien hecho!

Ahora es el momento de dejar que nuestro software reproduzca estas tarjetas.

Para hacerlo, vaya a la página de inicio, que en este caso es páginas/índice. js.

A continuación, desarrollaremos una función de mapa y la aplicaremos a nuestros datos, así como también renderizaremos los componentes de la Tarjeta y enviaremos los datos fotográficos a cada uno de ellos.

A continuación, aprenda cómo hacer una ruta.

js \sSiguiente.

No necesitamos construir rutas diferentes en js.

Resulta muy útil cuando necesitamos crear una aplicación rápidamente.

Para configurar el enrutamiento, todo lo que tenemos que hacer es ir al directorio “páginas” y crear un directorio/archivo que corresponda a la ruta que queremos visitar más adelante.

Por ejemplo, si queremos tener la ruta “/usuario/1”, donde “1” es un id, debemos crear el directorio “usuario” y el archivo “[id].jsx” dentro de él.

Hagámoslo de inmediato para que podamos visitar los perfiles de los usuarios en los próximos pasos.

En Next.JS, ¿cómo se crea una vista detallada?
Una vez que hayamos completado nuestro enrutamiento, debemos ir a [id].jsx y escribir algo de lógica allí.

Comencemos construyendo un componente funcional estándar llamado "UserPage".

Ese componente debería aceptar accesorios.

En Next.JS, ¿cómo adquiero el ID de ruta?
No profundizaremos en cosas grandes como redux ni administraremos el estado en otros lugares porque es un proyecto simple que utiliza una API falsa.

  • Simplemente tomamos todos los datos en este escenario y ahora necesitamos filtrarlos.
  • Construyamos una lógica que pueda extraer la identificación del usuario de la ruta.
  • A continuación, debemos construir una función que filtre todas las fotografías y seleccione solo aquellas que sean relevantes para nuestros usuarios.

Supongamos que el usuario visitado no tiene ningún dato, en cuyo caso el router debería enviarnos a la ruta “/”.

Como último paso, debemos crear el gancho de estado y nombrar su captador "marcado" y su definidor "setBookmarked", con "falso" como valor predeterminado.

Crea tu propia plantilla de página de usuario.
Este es el paso final, donde debemos diseñar plantillas.

Utilicé Bootstrap 5 para hacer la plantilla, tal como lo hice en el paso de crear tarjetas.

Puedes ver la película en YouTube para ver cómo lo logré, o puedes escribir tu propio código y compararlo después para ver si lo hiciste de manera similar.

Intentar realizar la tarea por tu cuenta es una técnica de aprendizaje mucho más eficaz. Aún es mejor si cometes muchos errores.

En Next.js, ¿cómo puedo agregar estilos?

  • El estilo es la última fase de la aplicación.
  • El estilo siempre es importante cuando se trabaja en un proyecto front-end.
  • Habrá algunos cambios incluso si utiliza marcos ya preparados como Bootstrap o Tailwind.
  • Tuve que pulir algunos rellenos o configurar espacios en blanco como “espacios de descanso” en mi situación.
  • Lo siguiente que tenía que hacer era cambiar la configuración del color de arranque a negro puro.

Ya se ha completado cómo hacer un clon de Instagram con React JS y Next JS.

¡Felicitaciones por terminar su aplicación de clonación de Instagram!

En el episodio de hoy, aprendiste cómo usar React.JS y Next.JS para crear aplicaciones increíbles.

Tengo muchas ganas de enseñarles todos estos increíbles temas y ver a nuestros alumnos desarrollar esos excelentes talentos.

Escrito por Ashok Kumar
Director ejecutivo, fundador y director de marketing de Make An App Like. Soy escritor en OutlookIndia.com, KhaleejTimes, DeccanHerald. Contáctame para publicar tu contenido. Mi Perfil

Deje un comentario

Translate »