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

HOME

En aquest projecte, construirem una aplicació de xarxes socials utilitzant React Native. Aquesta aplicació permetrà als usuaris crear comptes, iniciar sessió, publicar missatges, veure el feed de publicacions i interactuar amb altres usuaris mitjançant comentaris i likes.

Objectius del projecte

Crear una interfície d'usuari atractiva i funcional.
Implementar autenticació d'usuaris.
Permetre la creació i visualització de publicacions.
Implementar funcionalitats de comentaris i likes.
Gestionar dades amb una API REST.

Requisits previs

Coneixements bàsics de React Native.
Familiaritat amb la gestió d'estat i cicle de vida dels components.
Experiència amb la navegació en React Native.
Coneixements bàsics de xarxes i dades.

Passos del projecte

Configuració inicial del projecte

Crear un nou projecte de React Native:

npx react-native init SocialMediaApp
cd SocialMediaApp

Instal·lar les dependències necessàries:

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install axios

Configuració de la navegació

Configurar la navegació principal:

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import PostScreen from './screens/PostScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Signup" component={SignupScreen} />
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Post" component={PostScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Implementació de l'autenticació d'usuaris

Crear els components de Login i Signup:

// screens/LoginScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import axios from 'axios';

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

  const handleLogin = async () => {
    try {
      const response = await axios.post('https://api.example.com/login', { email, password });
      if (response.data.token) {
        // Guardar el token i navegar a la pantalla principal
        navigation.navigate('Home');
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Text>Login</Text>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
      <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Login" onPress={handleLogin} />
      <Button title="Signup" onPress={() => navigation.navigate('Signup')} />
    </View>
  );
}

// screens/SignupScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import axios from 'axios';

export default function SignupScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async () => {
    try {
      const response = await axios.post('https://api.example.com/signup', { email, password });
      if (response.data.token) {
        // Guardar el token i navegar a la pantalla principal
        navigation.navigate('Home');
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Text>Signup</Text>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
      <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Signup" onPress={handleSignup} />
      <Button title="Login" onPress={() => navigation.navigate('Login')} />
    </View>
  );
}

Creació i visualització de publicacions

Crear el component de publicació:

// screens/PostScreen.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import axios from 'axios';

export default function PostScreen({ navigation }) {
  const [content, setContent] = useState('');

  const handlePost = async () => {
    try {
      const response = await axios.post('https://api.example.com/posts', { content });
      if (response.data.success) {
        navigation.navigate('Home');
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Text>Create Post</Text>
      <TextInput placeholder="What's on your mind?" value={content} onChangeText={setContent} />
      <Button title="Post" onPress={handlePost} />
    </View>
  );
}

Mostrar el feed de publicacions:

// screens/HomeScreen.js
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import axios from 'axios';

export default function HomeScreen({ navigation }) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get('https://api.example.com/posts');
        setPosts(response.data.posts);
      } catch (error) {
        console.error(error);
      }
    };

    fetchPosts();
  }, []);

  return (
    <View>
      <Button title="Create Post" onPress={() => navigation.navigate('Post')} />
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.content}</Text>
          </View>
        )}
      />
    </View>
  );
}

Implementació de comentaris i likes

Afegir funcionalitat de comentaris:

// screens/PostDetailScreen.js
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';
import axios from 'axios';

export default function PostDetailScreen({ route }) {
  const { postId } = route.params;
  const [post, setPost] = useState(null);
  const [comment, setComment] = useState('');
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const response = await axios.get(`https://api.example.com/posts/${postId}`);
        setPost(response.data.post);
        setComments(response.data.comments);
      } catch (error) {
        console.error(error);
      }
    };

    fetchPost();
  }, [postId]);

  const handleComment = async () => {
    try {
      const response = await axios.post(`https://api.example.com/posts/${postId}/comments`, { content: comment });
      if (response.data.success) {
        setComments([...comments, response.data.comment]);
        setComment('');
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      {post && (
        <>
          <Text>{post.content}</Text>
          <FlatList
            data={comments}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
              <View>
                <Text>{item.content}</Text>
              </View>
            )}
          />
          <TextInput placeholder="Add a comment" value={comment} onChangeText={setComment} />
          <Button title="Comment" onPress={handleComment} />
        </>
      )}
    </View>
  );
}

Afegir funcionalitat de likes:

// screens/HomeScreen.js (modificat)
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import axios from 'axios';

export default function HomeScreen({ navigation }) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get('https://api.example.com/posts');
        setPosts(response.data.posts);
      } catch (error) {
        console.error(error);
      }
    };

    fetchPosts();
  }, []);

  const handleLike = async (postId) => {
    try {
      const response = await axios.post(`https://api.example.com/posts/${postId}/like`);
      if (response.data.success) {
        setPosts(posts.map(post => post.id === postId ? { ...post, likes: post.likes + 1 } : post));
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View>
      <Button title="Create Post" onPress={() => navigation.navigate('Post')} />
      <FlatList
        data={posts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.content}</Text>
            <Text>Likes: {item.likes}</Text>
            <Button title="Like" onPress={() => handleLike(item.id)} />
            <Button title="Comments" onPress={() => navigation.navigate('PostDetail', { postId: item.id })} />
          </View>
        )}
      />
    </View>
  );
}

Resum i conclusió

En aquest projecte, hem creat una aplicació de xarxes socials amb React Native que permet als usuaris crear comptes, iniciar sessió, publicar missatges, veure el feed de publicacions, i interactuar amb altres usuaris mitjançant comentaris i likes. Hem utilitzat diverses tecnologies i biblioteques, com ara React Navigation per a la navegació i Axios per a les sol·licituds HTTP.

Aquest projecte ha cobert molts aspectes importants del desenvolupament d'aplicacions mòbils amb React Native, i ha proporcionat una base sòlida per a la creació d'aplicacions més complexes en el futur.

Projecte 4: Aplicació de xarxes socials

Objectius del projecte

Requisits previs

Passos del projecte

Configuració inicial del projecte

Configuració de la navegació

Implementació de l'autenticació d'usuaris

Creació i visualització de publicacions

Implementació de comentaris i likes

Resum i conclusió

Curs de React Native

Mòdul 1: Introducció a React Native

Mòdul 2: Components bàsics i estilització

Mòdul 3: Estat i cicle de vida

Mòdul 4: Navegació

Mòdul 5: Xarxes i dades

Mòdul 6: Conceptes avançats

Mòdul 7: Desplegament i publicació

Mòdul 8: Projectes del món real