El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

En aquest projecte, construirem una aplicació de xat en temps real utilitzant React Native. Aquest projecte ens permetrà aplicar molts dels conceptes apresos al llarg del curs, com ara la gestió de l'estat, la navegació, la integració amb APIs i l'ús de components avançats.

Objectius del Projecte

Crear una interfície d'usuari atractiva per a l'aplicació de xat.
Implementar la navegació entre diferents pantalles.
Utilitzar Firebase per a l'autenticació d'usuaris i l'emmagatzematge de missatges.
Gestionar l'estat de l'aplicació amb Context API i Hooks.
Implementar funcionalitats de xat en temps real.

Requisits Previs

Abans de començar, assegura't de tenir instal·lats els següents elements:

Node.js i npm
React Native CLI o Expo CLI
Un compte de Firebase

Passos del Projecte

Configuració del Projecte

1.1. Crear un nou projecte de React Native

npx react-native init ChatApp
cd ChatApp

1.2. Instal·lar les dependències necessàries

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Configuració de Firebase

2.1. Crear un projecte a Firebase

Accedeix a Firebase Console.
Crea un nou projecte.
Afegeix una aplicació per a Android i una per a iOS.
Descarrega els fitxers google-services.json (Android) i GoogleService-Info.plist (iOS) i col·loca'ls a les carpetes corresponents del teu projecte.

2.2. Configurar Firebase a React Native

Afegeix la configuració de Firebase al teu projecte:

// App.js
import firebase from '@react-native-firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

Implementació de l'Autenticació

3.1. Crear la pantalla de registre

// screens/RegisterScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import auth from '@react-native-firebase/auth';

const RegisterScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = () => {
    auth()
      .createUserWithEmailAndPassword(email, password)
      .then(() => {
        navigation.navigate('Chat');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Register" onPress={handleRegister} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
});

export default RegisterScreen;

3.2. Crear la pantalla de login

// screens/LoginScreen.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import auth from '@react-native-firebase/auth';

const LoginScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    auth()
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        navigation.navigate('Chat');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
});

export default LoginScreen;

Implementació del Xat

4.1. Crear la pantalla de xat

// screens/ChatScreen.js
import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, FlatList, Text, StyleSheet } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import auth from '@react-native-firebase/auth';

const ChatScreen = () => {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = firestore()
      .collection('messages')
      .orderBy('createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const messages = querySnapshot.docs.map(doc => ({
          _id: doc.id,
          text: doc.data().text,
          createdAt: doc.data().createdAt.toDate(),
          user: doc.data().user,
        }));
        setMessages(messages);
      });

    return () => unsubscribe();
  }, []);

  const handleSend = () => {
    const { uid, email } = auth().currentUser;
    firestore().collection('messages').add({
      text: message,
      createdAt: new Date(),
      user: {
        _id: uid,
        email,
      },
    });
    setMessage('');
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={messages}
        renderItem={({ item }) => (
          <View style={styles.message}>
            <Text>{item.user.email}</Text>
            <Text>{item.text}</Text>
          </View>
        )}
        keyExtractor={item => item._id}
        inverted
      />
      <TextInput
        style={styles.input}
        placeholder="Type a message"
        value={message}
        onChangeText={setMessage}
      />
      <Button title="Send" onPress={handleSend} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
  message: {
    padding: 8,
    borderBottomWidth: 1,
    borderBottomColor: 'gray',
  },
});

export default ChatScreen;

Navegació

5.1. Configurar la navegació

// App.js
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import RegisterScreen from './screens/RegisterScreen';
import LoginScreen from './screens/LoginScreen';
import ChatScreen from './screens/ChatScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Chat" component={ChatScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Conclusió

En aquest projecte, hem creat una aplicació de xat en temps real utilitzant React Native i Firebase. Hem cobert la configuració del projecte, la implementació de l'autenticació, la creació de la interfície de xat i la configuració de la navegació. Aquest projecte ens ha permès aplicar molts dels conceptes apresos al llarg del curs i ens ha proporcionat una base sòlida per a desenvolupar aplicacions mòbils més complexes.

Exercicis Pràctics

Afegir funcionalitats addicionals: Implementa la funcionalitat de xat en grup, on diversos usuaris poden unir-se a un mateix xat.
Millorar la interfície d'usuari: Utilitza llibreries com react-native-paper o react-native-elements per millorar l'aspecte visual de l'aplicació.
Notificacions push: Implementa notificacions push per avisar els usuaris quan reben un nou missatge.

Solucions

Exercici 1: Afegir funcionalitats addicionals

Per implementar la funcionalitat de xat en grup, pots crear una col·lecció de grups a Firestore i permetre als usuaris unir-se a diferents grups. Cada grup tindrà la seva pròpia col·lecció de missatges.

Exercici 2: Millorar la interfície d'usuari

Pots utilitzar components de react-native-paper per crear una interfície d'usuari més atractiva. Per exemple, pots substituir els components Button i TextInput per components de react-native-paper.

Exercici 3: Notificacions push

Per implementar notificacions push, pots utilitzar react-native-firebase/messaging per gestionar les notificacions push a l'aplicació. Hauràs de configurar Firebase Cloud Messaging (FCM) i implementar la lògica per enviar i rebre notificacions.

Amb això, hem completat el projecte de l'aplicació de xat. Felicitats per arribar fins aquí! Ara estàs preparat per crear aplicacions mòbils més complexes i avançades amb React Native.

Projecte 5: Aplicació de xat