ReactFlow - Dokümantasyon

Giriş

Proje Oluşturma

React Projesi Oluşturma

Yeni bir React projesi oluşturmak için aşağıdaki komutu terminalinizde çalıştırın:

npx create-react-app my-ReactFlow-app

Oluşturulan proje dizinine girin:

cd my-ReactFlow-app

Projeyi başlatmak için:

npm start

Uygulamanız http://localhost:3000 adresinde çalışacaktır.

Firebase Entegrasyonu

Firebase'i Projeye Ekleme

Firebase'i kullanarak gerçek zamanlı veritabanı işlemleri yapacağız. Firebase SDK'sını yüklemek için:

npm install firebase

src klasörü içinde firebase.js dosyasını oluşturun ve aşağıdaki kodu ekleyin:

// src/firebase.js

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  apiKey: "API_KEYİNİZ",
  authDomain: "PROJE_ID.firebaseapp.com",
  databaseURL: "https://PROJE_ID.firebaseio.com",
  projectId: "PROJE_ID",
  storageBucket: "PROJE_ID.appspot.com",
  messagingSenderId: "MESAJLAŞMA_ID",
  appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
                    

Not: Firebase yapılandırma bilgilerinizi Firebase konsolundan alabilirsiniz. Bu bilgileri firebaseConfig nesnesine doğru bir şekilde eklediğinizden emin olun.

Form Bileşeni

Kullanım

Form bileşeni, yapılandırmanıza bağlı olarak dinamik formlar oluşturmanızı sağlar. Bu formlar, Firebase Realtime Database ile etkileşime girerek verileri belirttiğiniz tablo altında otomatik artan ID'lerle kaydeder.

Bileşen Özellikleri

• reactflow (obje, gerekli): Form alanları, tablo adı ve diğer özelleştirmeleri içeren yapılandırma objesi.

reactflow Yapılandırması

reactflow objesi aşağıdaki özellikleri içermelidir:

• flowTable (string, gerekli): Form verilerinin kaydedileceği Firebase tablosunun adı.
• form (obje dizisi, gerekli): Form alanlarını tanımlayan bir dizi. Her obje şu özelliklere sahip olmalıdır:
  • type (string, gerekli): Input türü (örn. "text", "email", "password").
  • flowname (string, gerekli): Veritabanında input değerinin kaydedileceği anahtar.
  • label (string, opsiyonel): Input alanının üzerinde gösterilecek etiket.
  • placeholder (string, opsiyonel): Input için yer tutucu metin.
  • class (string, opsiyonel): CSS sınıfları.
  • id (string, opsiyonel): HTML id özelliği.
• buttonClass (string, opsiyonel): Gönderme butonu için CSS sınıfları.
• buttonText (string, opsiyonel): Gönderme butonu üzerinde gösterilecek metin. Varsayılan olarak "Formu Kaydet" kullanılır.

Kullanım Örneği

// src/App.js

import React from "react";
import Form from "./reactflow/Form";

const App = () => {
  const testForm = {
    flowTable: "kullanicilar",
    buttonText: "Kaydet",
    form: [
      {
        type: "text",
        flowname: "ad",
        label: "Ad",
        placeholder: "Adınızı girin",
        class: "input-class",
        id: "ad-input",
      },
      {
        type: "email",
        flowname: "email",
        label: "Email",
        placeholder: "Email adresinizi girin",
      },
      {
        type: "password",
        flowname: "sifre",
        label: "Şifre",
        placeholder: "Şifrenizi girin",
      },
    ],
    buttonClass: "submit-button",
  };

  return (
    <div className="App">
      <h1>ReactFlow Dinamik Form</h1>
      <Form reactflow={testForm} />
    </div>
  );
};

export default App;
                    

Template Bileşeni

Kullanım

Template bileşeni, belirtilen Firebase tablosundan veri çekerek özel bir render fonksiyonu ile verileri görüntüler.

Bileşen Özellikleri

• flowTable (string, gerekli): Verilerin çekileceği Firebase tablosunun adı.
• reactflow (fonksiyon, gerekli): Her veri öğesinin nasıl render edileceğini tanımlayan fonksiyon.

Kullanım Örneği

// src/App.js

import React from "react";
import Template from "./reactflow/Template";

const testTemplate = (item) => (
  <div key={item.id} className="item">
    <h3>{item.ad}</h3>
    <p>Email: {item.email}</p>
  </div>
);

const App = () => {
  return (
    <div className="App">
      <h1>ReactFlow Veri Listesi</h1>
      <Template flowTable="kullanicilar" reactflow={testTemplate} />
    </div>
  );
};

export default App;
                    

Input Bileşeni

Kullanım

Input bileşeni, Firebase Realtime Database ile entegre edilmiş özelleştirilebilir bir input alanı sunar. Debounce edilmiş girdi işleme ile verimli performans sağlar ve verilerin gereksiz yere yazılmasını engeller.

Bileşen Özellikleri

• reactflow (obje, opsiyonel): Input alanının yapılandırmasını, veri işlemesini ve diğer özelleştirmeleri içeren obje.

reactflow Yapılandırması

• flowTable (string, gerekli): Verilerin kaydedileceği veya güncelleneceği Firebase tablosunun adı.
• flowname (string, gerekli): Input değerinin veritabanında kaydedileceği anahtar.
• datakey (string, gerekli): Mevcut kayıtları sorgulamak için kullanılan sütun adı.
• data (string, gerekli): Mevcut kayıtları sorgulamak için kullanılan datakey'in değeri.
• flowtype (string, opsiyonel): İşlem türünü belirler ("add" veya "update").
• ClearInput (boolean, opsiyonel): Kaydettikten sonra input alanının temizlenip temizlenmeyeceğini belirler. Varsayılan true.
• placeholder (string, opsiyonel): Input için yer tutucu metin.
• class (string, opsiyonel): CSS sınıfları.
• id (string, opsiyonel): HTML id özelliği.

Kullanım Örneği

// src/App.js

import React from "react";
import Input from "./reactflow/Input";

const App = () => {
  const testInput = {
    flowTable: "urunler",
    flowname: "fiyat",
    datakey: "barkod",
    data: "123456789",
    flowtype: "update",
    placeholder: "Ürün fiyatını girin",
    class: "price-input",
    id: "price-input",
    ClearInput: false,
  };

  return (
    <div className="App">
      <h1>ReactFlow Ürün Fiyat Güncelleme</h1>
      <Input reactflow={testInput} />
    </div>
  );
};

export default App;
                    

Örnek Proje

Yukarıdaki bileşenleri kullanarak basit bir kullanıcı kayıt ve listeleme uygulaması oluşturabilirsiniz. Proje yapısı aşağıdaki gibi olmalıdır:

my-ReactFlow-app/
├── node_modules/
├── public/
├── src/
│   ├── reactflow/
│   │   ├── Form.js
│   │   ├── Input.js
│   │   ├── Template.js
│   │   └── index.js
│   ├── firebase.js
│   ├── App.js
│   ├── index.js
│   └── diğer dosyalar...
├── package.json
└── diğer dosyalar...
                    

Bu yapı ile hem kullanıcı bilgilerini Firebase'e kaydedebilir, hem de kayıtlı kullanıcıları listeleyebilirsiniz.

Genel Notlar

• Firebase Ayarları: Firebase'in projenizde düzgün bir şekilde yapılandırıldığından emin olun.
• Hata Yönetimi: Bileşenler, konsol hataları ile temel hata yönetimi sağlar. Daha kapsamlı bir hata yönetimi eklemek isteyebilirsiniz.
• CSS Stilendirme: class ve buttonClass ile bileşenlerin görünümünü özelleştirebilirsiniz.
• Dil Uyumluluğu: Kod içinde bazı değişken adları ve yorumlar Türkçedir. Projenizin dil bütünlüğü için bunları düzenleyebilirsiniz.

Sonuç

Form, Template ve Input bileşenleri, ReactFlow projenizde Firebase Realtime Database ile etkileşimli bir şekilde çalışmanızı sağlar. reactflow prop'u aracılığıyla sunulan özelleştirme seçenekleri sayesinde, bu bileşenleri geniş bir yelpazede kullanabilirsiniz.

Bu bileşenler, geliştirme sürecini hızlandırmayı ve uygulamanızın ihtiyaçlarına uygun esnek bir yapı sunmayı amaçlar. Umarım bu dokümantasyon, projelerinizi geliştirirken size yardımcı olur. İyi kodlamalar!