React Native ile ToDo Uygulaması ( Beginner )

Görsel Temsilidir.

Herkese selamlar,
React Native ile ufaktan içli dışlı olmaya başladığım için kendimce projeler oluşturmaya başladım. Bunlardan ilki herkesin Github Reposunda olan ToDo uygulaması olacaktır.

Burada React-Native Expo-CLI ve FireBase kullanarak ToDo uygulamasını geliştirmeye başlayacağız. Tasarıma önem vermiyorum. O nedenle görüntü kötü görünebilir. O zaman başlayalım..

Expo CLI Bilgisayarınızda kurulu değilse öncelikle Expo-CLI kuralım.

npm install -g expo-cli

Expo-CLI kurulumu tamamlandıktan sonra aşağıdaki komut ile projemizi oluşturalım.

npx create-expo-app TodoApp

App.tsx dosyamızı aşağıdaki gibi oluşturalım.

import React, { useEffect, useState } from "react";
import {
  View,
  TextInput,
  FlatList,
  Button,
  Text,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  Platform,
} from "react-native";
import { db } from "@/hooks/firebaseConfig";
import {
  collection,
  addDoc,
  getDocs,
  deleteDoc,
  doc,
} from "firebase/firestore";

interface Task {
  key: string;
  taskName: string;
}

export default function HomeScreen() {
  const [task, setTask] = useState<string>('');
  const [taskList, setTaskList] = useState<Task[]>([]);

  const addTask = () => {
    if (task.length > 0) {
      setTaskList([...taskList, { key: Math.random().toString(), taskName: task }]);
      setTask('');
    }
  };

  const deleteTask = (taskKey: string) => {
    setTaskList(taskList.filter((task) => task.key !== taskKey));
  };

  const renderItem = ({ item }: { item: Task }) => (
    <View style={styles.taskContainer}>
      <Text>{item.taskName}</Text>
      <TouchableOpacity
        onPress={() => deleteTask(item.key)}
        style={styles.deleteButton}
      >
        <Text style={styles.deleteButtonText}>Sil</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <>
      <StatusBar
        barStyle={Platform.OS === "ios" ? "dark-content" : "light-content"}
      />

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Bir görev ekleyin"
          value={task}
          onChangeText={setTask}
        />
        <Button title="Ekle" onPress={addTask} />
      </View>

      <FlatList
        data={taskList}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        contentContainerStyle={styles.flatListContent}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 20,
    marginTop: StatusBar.currentHeight || 0,
  },
  input: {
    borderColor: "#000",
    borderWidth: 1,
    padding: 10,
    flex: 1,
    marginRight: 10,
  },
  taskContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  deleteButton: {
    backgroundColor: "red",
    padding: 5,
  },
  deleteButtonText: {
    color: "#fff",
  },
  flatListContent: {
    paddingBottom: 20,
  },
});

Yukarıdaki kodun uygulamada nasıl göründüğüne bakalım.

Şimdi Projemize Firebase Ekleme adımlarına geçelim..

Firebase console girip yeni proje oluşturalım.( https://console.firebase.google.com/ )

1. Firebase konsolunda “Proje Ekle” veya “Yeni Proje Oluştur” seçeneğini seçin.
2. Proje adını seçin ve Firebase proje oluşturma adımlarını takip edin.
3. Firebase konsolunda sol menüden Build > Firestore Database kısmına gidin.
4. “Veritabanı Oluştur” butonuna tıklayın ve Firestore’u etkinleştirin.

Firebase projesi oluşturulduktan sonra projeye bağlanabilmek için config bilgilerine ihtiyacımız olacak..

1. Yeniden Firebase Console anasayfasına gidin ( https://console.firebase.google.com/ )
2. “Uygulama ekle” kısmından Web seçeneğine tıklayın ve talimatları takip ederek bir web uygulaması oluşturun.
3. Web uygulaması oluşturulduğunda size firebaseConfig bilgileri verilecektir. Bu bilgileri bir kenara not edin, birazdan bunları uygulamamızda kullanacağız.

Projeye Firebase için gerekli olan paketleri kurmaya gelelim.Bunun için aşağıdaki komutu kullanabilirsiniz.

npm install firebase

Uygulamamız ile Firebase DB arasındaki bağlantıyı kurmak için projemizde bir firebaseConfig.ts adında bir dosya oluşturun ve aşağıdaki komutu yazın.

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

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",
};

// Firebase'i başlat
const app = initializeApp(firebaseConfig);

// Firestore'u başlat
const db = getFirestore(app);

export { db };

firebaseConfig objesindeki alanları az önce oluşturduğumuz firebaseConfig ile doldurmayı unutmayın :)

Tüm adımları tamamladıktan sonra Projemize Firebase’i tamamen entegre edip DB bağlantısını yapalım.Bunun için aşağıdaki kodu kullanabilirsiniz.

import React, { useEffect, useState } from "react";
import {
  View,
  TextInput,
  FlatList,
  Button,
  Text,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  Platform,
} from "react-native";
import { db } from "@/hooks/firebaseConfig";
import {
  collection,
  addDoc,
  getDocs,
  deleteDoc,
  doc,
} from "firebase/firestore";

interface Task {
  key: string;
  taskName: string;
}

export default function HomeScreen() {
  const [task, setTask] = useState<string>("");
  const [taskList, setTaskList] = useState<Task[]>([]);

  const fetchTasks = async () => {
    const querySnapshot = await getDocs(collection(db, "tasks"));
    const tasksData: Task[] = [];
    querySnapshot.forEach((doc) => {
      tasksData.push({
        key: doc.id,
        taskName: doc.data().taskName,
      });
    });
    setTaskList(tasksData);
  };

  const addTask = async () => {
    if (task.length > 0) {
      const docRef = await addDoc(collection(db, "tasks"), {
        taskName: task,
      });
      setTaskList([...taskList, { key: docRef.id, taskName: task }]);
      setTask("");
    }
  };

  const deleteTask = async (taskKey: string) => {
    await deleteDoc(doc(db, "tasks", taskKey));
    setTaskList(taskList.filter((task) => task.key !== taskKey));
  };

  useEffect(() => {
    fetchTasks();
  }, []);

  const renderItem = ({ item }: { item: Task }) => (
    <View style={styles.taskContainer}>
      <Text>{item.taskName}</Text>
      <TouchableOpacity
        onPress={() => deleteTask(item.key)}
        style={styles.deleteButton}
      >
        <Text style={styles.deleteButtonText}>Sil</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <>
      <StatusBar
        barStyle={Platform.OS === "ios" ? "dark-content" : "light-content"}
      />

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Bir görev ekleyin"
          value={task}
          onChangeText={setTask}
        />
        <Button title="Ekle" onPress={addTask} />
      </View>

      <FlatList
        data={taskList}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        contentContainerStyle={styles.flatListContent}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  inputContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 20,
    marginTop: StatusBar.currentHeight || 0,
  input: {
    borderColor: "#000",
    borderWidth: 1,
    padding: 10,
    flex: 1,
    marginRight: 10,
  },
  taskContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  deleteButton: {
    backgroundColor: "red",
    padding: 5,
  },
  deleteButtonText: {
    color: "#fff",
  },
  flatListContent: {
    paddingBottom: 20,
  },
});

Bu adımları yaptıktan sonra ben şuan Windows kullandığım için android’te başlatacağım projeyi “npm run android” diyerek başlatıyorum.

Önceden girmiş olduğum bazı taskları yeniden girdim. Yukarıdaki uygulama görseliyle aynı bir ekran olduğu için yeniden eklemiyorum. Uygulamada eklediğim task’ların aynı şekilde firebase Storage’de kayıt edildiğini gördüm.Aşağıdaki görselde görüntüleyebilirsiniz.

Okuduğunuz için teşekkürler

• 👏 Beğendiyseniz alkışlayın ve beni takip edin 👉
• 📰 Daha fazla içerik görüntülemek için tıklayın
• 🔔 Beni takip edin: LinkedIn!

Her zaman gelişmek için yer olduğunu anlıyorum. Lütfen düşüncelerinizi paylaşmaktan çekinmeyin.