Back4app’e Nasıl Dosya Yüklenir

Kullanıcıların dosya yüklemelerini içeren web uygulamaları geliştirirken etkili dosya yönetimi çok önemlidir.

Back4app, Parse tabanlı kolay ve verimli bir dosya depolama, yönetim ve alma çözümü mekanizması sağlar.

Bu kılavuzda, dosya depolama özelliklerini bir React uygulamasıyla entegre ederek Back4app kullanarak dosyalarınızı nasıl depolayacağınızı öğreneceksiniz.

Back4app’te Dosya Depolama Nasıl Çalışır?

Back4app, Parse.File sınıfını kullanarak dosya yüklemelerini ve depolamayı yönetir.

Parse.File sınıfı, resimler, videolar, belgeler ve diğer ikili veriler gibi Parse.Object içinde saklanamayacak kadar büyük dosyaları saklamanıza olanak tanır.

Back4app’in bulut depolama alanına bir dosya yüklemek için, dosya verileriyle birlikte bir Parse.File örneği oluşturmanız ve örneği kaydetmeniz gerekir. Yeni bir Parse.File örneği bir dosya adı, dosya ve içerik/dosya türü (isteğe bağlı) gerektirir.

Parse’ın uygun şekilde işlemesine yardımcı olmak için dosya adının bir dosya uzantısı içerdiğinden emin olmak önemlidir.

Ancak, her yükleme benzersiz bir tanımlayıcı aldığı için adlarınızın benzersiz olması gerekmez, bu nedenle example.jpeg adlı birden fazla dosya yüklemek adlandırma çakışmalarına neden olmaz.

Bir dosya yüklediğinizde, Parse.File dosya adındaki dosya uzantısına göre türünü otomatik olarak algılar. Ancak, Content-Type parametresini belirterek otomatik algılamayı geçersiz kılabilirsiniz.

Back4app’te yüklediğiniz dosyalara erişmek için, onları yükledikten sonra bir veri nesnesiyle ilişkilendirmeniz gerekir.

Ardından, dosyaları almak için ilişkili veri nesnesini sorgulayabilirsiniz. Yüklenen ancak bir veri nesnesiyle ilişkilendirilmeyen dosyalar “öksüz dosyalar” haline gelir ve bunlara erişemezsiniz.

Artık Back4app’te dosya depolamanın nasıl çalıştığını anladığınıza göre, Back4app’ten dosyaları nasıl depolayabileceğinizi ve alabileceğinizi göstermek için React ile bir galeri uygulaması oluşturacaksınız.

React Uygulaması Oluşturma

Back4app’in dosya depolama özelliklerini React ile uygulamak için öncelikle Back4app ile entegre olacak bir React uygulaması oluşturmanız gerekir. Bunu yapmak için, web uygulamalarını hızlı bir şekilde oluşturmaya yönelik bir ön uç aracı olan Vite’ı kullanırsınız.

Aşağıdaki komutu terminalinizde çalıştırarak Vite ile bir React uygulaması oluşturabilirsiniz:

npm init vite

Yukarıdaki komutu çalıştırdığınızda, Vite web uygulamanızı oluşturmak için kullanmak istediğiniz çerçeveyi seçmeniz için bir seçenek listesi vermeden önce proje için bir ad vermenizi isteyecektir.

Yukarıdaki görselde görüldüğü gibi projenin adı gallery-app. React seçeneğini seçtikten sonra React uygulamasını geliştireceğiniz programlama dilini seçeceksiniz.

Bu proje için JavaScript seçeneğini seçin. Artık projeniz hazır.

Ardından, projenize bazı gerekli bağımlılıkları yüklemeniz gerekir. Bağımlılıkları yüklemek için proje dizininize geçin ve aşağıdaki komutu çalıştırın:

# Switch to the project directory
cd gallery-app

# Install dependencies
npm install

Bu komut, projenizdeki gerekli tüm bağımlılıkları yükleyecektir ve artık uygulamanızı IDE’nizde oluşturmaya başlayabilirsiniz.

React Uygulamasını Oluşturma

React projenizi IDE ile açın ve src dizininde bir components klasörü oluşturun. Components klasörü içerisine bir FileUpload bileşeni ekleyin.

FileUpload bileşenine aşağıdaki kod satırlarını ekleyin:

//FileUpload.jsx
import React from "react";

function FileUpload({updateData}) {
  const [file, setFile] = React.useState("");

  const handleFIleUpload = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <label htmlFor="file-upload" className="custom-file-upload">
        Choose File
      </label>
      <input
        id="file-upload"
        type="file"
        style={{ display: "none" }}
        onChange={handleFileUpload}
      />
    </form>
  );
}

export default FileUpload;

Yukarıdaki kod bloğu, yerel bir dosya seçmenize olanak tanıyan bir FileUpload bileşenini temsil eder. Bir dosya durumu içerir. Cihazınızdan yerel bir dosyaya erişmek ve seçmek için dosya türünde bir giriş öğesi kullanır.

Kod bloğunda bir handleFileSelect fonksiyonu vardır. Bu fonksiyon, dosya durumunu kullanıcı tarafından seçilen ilk dosya ile güncellemek için setFile yöntemini kullanır.

Şimdi, aşağıdaki kod bloğunda yer alan kod satırlarını ekleyerek uygulama bileşeninizdeki kodu değiştirin:

//App.jsx
import FileUpload from "./components/FileUpload";

function App() {
  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>
      <>
        <FileUpload />
      </>
    </main>
  );
}

export default App;

Yukarıdaki kod bloğu FileUpload bileşenini içe aktarır ve bir ana öğe içinde işler. Bileşen ayrıca “Galerim” metnini oluşturan bir h1 öğesi içerir.

Bileşenleriniz hazır. Daha sonra, uygulamayı şekillendirmeniz gerekir. Bunu yapmak için index.css dosyanızdaki kodu değiştirin ve yerine bu kodu ekleyin:

/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #F2F2F2;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.container{
  inline-size: 60%;
  margin: auto;
}

.title{
  text-align: center;
  margin-block-start: 1rem;
  margin-block-end: 6rem;
}

.custom-file-upload {
  display: inline-block;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
}

.custom-file-upload:hover {
  background-color: #333333;
  color: #FFFFFF;
}

Back4app Uygulamasının Kurulumu

Bir Back4app uygulaması kurmak için Back4app hesabınıza giriş yapmış olmanız gerekir. Eğer bir hesabınız yoksa, ücretsiz olarak bir hesap oluşturabilirsiniz.

Giriş yaptıktan sonra, yeni bir uygulama oluşturmak için Back4app AI aracısını kullanacaksınız. AI aracısı, istemleri kullanarak Back4app uygulamalarınızla etkileşim kurmanıza ve bunları yönetmenize olanak tanıyan bir Back4app hizmetidir.

Aşağıdaki resimde gösterildiği gibi, hesap kontrol panelinizin gezinme çubuğundaki AI temsilcisi bağlantısına tıklayarak erişebilirsiniz.

YZ aracısı ile bir Back4app uygulaması oluşturmak için, YZ’den aşağıdaki komut istemine benzer bir uygulama oluşturmasını isteyen bir mesaj yazın:

Create a new Back4app application named gallery-app

Yukarıdaki istem, yapay zekanın yeni bir Back4app uygulaması oluşturmasını sağlayacaktır. Yapay zeka uygulamayı oluşturduktan sonra, uygulamanın kimlik bilgileriyle birlikte oluşturulduğunu onaylayan bir yanıt gönderecektir.

Bu şekilde:

Artık Back4app uygulamanız hazır. Uygulama Kimliği ve JavaScript anahtarı kimlik bilgilerini kopyalayın çünkü bunlara daha sonra ihtiyacınız olacak.

Uygulamaya erişmek için gezinti çubuğundaki “Uygulamalarım” bağlantısına tıklayarak uygulama kontrol panelinizi ziyaret edin.

AI aracısını kullanarak bir Back4app arka ucunu başarıyla oluşturduğunuza göre, şimdi React uygulamanızı arka ucunuza bağlamanız gerekecek.

React Uygulamanızı Back4app’e Bağlama

React uygulamanızı Back4app’e bağlamak için aşağıdaki komutu çalıştırarak Parse SDK’yı yüklemeniz gerekecektir:

npm install parse

Ardından, parse’ın küçültülmüş bir sürümünü uygulama bileşeninize aktarın ve aşağıdaki kod bloğunu uygulama bileşeninize ekleyerek makalenin başlarında kaydettiğiniz kimlik bilgileriyle başlatın:

//App.jsx

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";

'YOUR_APPLICATION_ID' ve 'YOUR_CLIENT_KEY' ifadelerini Back4App’inizden aldığınız kimlik bilgileriyle değiştirin. Kimlik bilgilerini güvenli bir şekilde, örneğin env değişkenleri kullanarak kaydettiğinizden emin olun.

Back4app’e Dosya Yükleme

Back4app’in bulut depolama alanında bir dosya saklamak için öncelikle bir Parse.File örneği oluşturmanız gerekir. Ardından, Parse.File örneğini save yöntemini çağırarak kaydetmeniz gerekir.

Ardından, dosyayı geri alabilmek için kaydedilen dosyayı bir veri nesnesiyle ilişkilendirmeniz gerekir.

Bunu başarmak için Parse.Object‘in yeni bir alt sınıfını oluşturun, dosyayı yeni alt sınıfınızın bir özelliğine ekleyin ve Back4app’e kaydedin.

Yukarıdaki mantığı uygulamak için FileUpload bileşenindeki handleFileUpload işlevini aşağıdaki kod bloğuyla eşleşecek şekilde değiştirin:

//FileUpload.jsx
const handleFileUpload = async (event) => {
    event.preventDefault();
    try {
      let name = "image.jpg";
      const File = new Parse.File(name, event.target.files[0]);
      const photo = await File.save();

      const Gallery = Parse.Object.extend("Gallery");
      const gallery = new Gallery();
      gallery.set("photo", photo);
      await gallery.save();

      console.log("File saved:", File);
      updateData();
    } catch (error) {
      console.error("Error saving file:", error);
    }
  };

handleFileUpload işlevi, bir fotoğrafın yerel cihazınızdan sunucuya yüklenmesinden sorumlu mantığı tutar. Yeni bir Parse.File örneği oluşturur.

Parse.File yöntemi iki argüman alır: fotoğrafın adını temsil eden name değişkeni ve kullanıcının seçtiği ilk dosya.

İşlev, File örneğindeki save yöntemini çağırarak dosyayı sunucuya kaydeder. Ardından, bir Gallery sınıfı için yeni bir Parse nesnesi oluşturur.

set metodunu kullanarak, fotoğraf dosyasını galeri nesnesinin photo özelliğinin değeri olarak ayarlar. Son olarak, fonksiyon galeri nesnesini gallery.save() fonksiyonu ile sunucuya kaydeder.

Back4app’ten Dosya Getirme

Back4app’in bulut depolama alanından bir dosya almak için, dosyayı tutan Parse Nesnesini almanız gerekir. Bunu, Parse Nesnesi ile sınıfı hedefleyen yeni bir sorgu oluşturarak yapabilirsiniz.

Yukarıdaki mantığı uygulamak için bir Feed bileşeni oluşturun ve aşağıdaki kod bloğunu buna ekleyin:

//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";

function Feed({data}) {
  const [gallery, setGallery] = React.useState([]);

  React.useEffect(() => {
    const fetchFiles = async () => {
      let query = new Parse.Query("Gallery");
      const results = await query.find();
      setGallery(results);
    };
    fetchFiles();
  }, [data]);

  return (
    <div className="photos">
      {gallery.map((item) => (
        <img src={item.get("photo").url()} key={item.id} />
      ))}
    </div>
  );
}

export default Feed;

Yukarıdaki kod bloğu bir galeri durumu oluşturur ve ona boş bir dizi atar. fetchFiles işlevini çalıştırmak için useEffect kancasını kullanır.

useEffect kancası, bileşenin ilk render’ından sonra ve veri prop’u her değiştiğinde işlevi çalıştırır.

fetchFiles işlevi, Parse.Query yöntemiyle “Gallery” sınıfını hedefleyen yeni bir sorgu oluşturur.

Sorgu üzerinde find yöntemi çağrıldığında, sorgunun sonuçlarını içeren bir dizi döndürülür. Son olarak, fetchFiles fonksiyonu setGallery fonksiyonunu kullanarak sonuç dizisini galeri durumuna atar.

Son olarak, map yöntemi ile galeri dizisindeki her öğe için bir img öğesi oluşturursunuz. Kod, img öğesinin src niteliğinin değerini her öğenin fotoğraf özelliğinin URL’ sine ayarlar.

Aşağıdaki kod bloğunu index.css dosyanıza ekleyerek div öğesini photos sınıfı ile stilize edin:

/*index.css*/
.photos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-block-start: 4rem;
}

Feed bileşenini uygulamanızda görüntülemek için, Feed bileşenini içe aktardığınızdan ve App bileşeninizde çağırdığınızdan emin olun. Tüm değişiklikleri yaptıktan sonra, App bileşeniniz aşağıdaki gibi görünmelidir:

//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

function App() {
  const [data, setData] = React.useState(1);

  const updateData = (prevState) => {
    setData(() => prevState + 1);
  };

  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>

      <>
        <FileUpload updateData={updateData} />
        <Feed data={data} />
      </>
    </main>
  );
}

export default App;

Uygulamanızı Test Etme

Aşağıdaki kod bloğunu uygulamanızın dizininde çalıştırarak uygulamanızı başlatın:

npm run dev

Yukarıdaki komutu çalıştırmak, uygulamanızı http://localhost:5173/ adresinde başlatacaktır.

http://localhost:5173/ adresine gidin ve aşağıdaki resme benzer bir sayfa görmelisiniz:

“Dosya Seç” düğmesine tıklayın ve yerel cihazınızdan bir görüntü seçin.

Back4app uygulamanızın kontrol panelini ziyaret ederek görüntünün başarıyla yüklenip yüklenmediğini doğrulayabilirsiniz.

Başarılı bir yüklemenin ardından Back4app, aşağıdaki resimde gösterildiği gibi "Galeri" sınıf tablosuna bir satır ekleyecektir.

Alternatif olarak, aşağıdaki resimde gösterildiği gibi ekranınızda görüntülenen görüntüyü görerek doğrulayabilirsiniz.

Uygulamanızı Back4app Konteynerlerine Dağıtma

Bu bölümde, uygulamanızı Back4app Containers üzerinde dağıtacaksınız. Bunu yapmak için önce uygulamanızı dockerize etmeli ve bir GitHub deposuna göndermelisiniz.

Dağıtım işlemini Back4app kullanıcı arayüzünü kullanarak manuel olarak veya Back4app AI aracısını kullanarak otomatik olarak yürütebilirsiniz. Bu eğitimde, dağıtım işlemini AI aracısını kullanarak yürüteceksiniz.

Dockerfile Oluşturma

Uygulamanızın kök dizininde bir Dockerfile oluşturun ve kod bloğunu buna ekleyin:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

Ardından, uygulamanızın kök dizininde bir .dockerignore dosyası oluşturun ve aşağıdaki kod bloğunu buna ekleyin:

node_modules

Node modüllerini .dockerignore dosyasına eklemek, Docker ‘ın görüntüyü oluştururken node_modules klasörünü bağlamdan hariç tutmasını sağlayacaktır.

React uygulamasını Vite ile oluşturduğunuzu unutmayın, bu nedenle Vite’ı Docker’ı destekleyecek şekilde yapılandırmanız gerekecektir. Vite’ı yapılandırmak için vite.config.js dosyasındaki kodu aşağıdaki kod bloğu ile değiştirin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Bu kod bloğu, Vite’ın sunucuyu yalnızca belirtilen bağlantı noktası kullanılabilir olduğunda başlatmasını sağlar ve geliştirme sunucusunun 5173 numaralı bağlantı noktasını dinleyeceği bağlantı noktası numarasını belirtir.

Ardından, terminalinizde aşağıdaki komutu çalıştırarak her şeyin çalıştığından emin olmak için uygulamanın docker görüntüsünü oluşturun:

docker build -t gallery-app .

Burada, uygulamanızı başarıyla dockerize ettiniz ve bir sonraki adımda onu dağıtacaksınız.

Uygulamanızı Dağıtma

Uygulamanızı dağıtmadan önce GitHub hesabınızı Back4app Github uygulamasıyla entegre edin ve dağıtmak istediğiniz depoya erişim izni verin.

AI aracısına gidin ve uygulamanızı dağıtmak için aşağıdaki komut istemini girin:

Deploy my repository <<repository-url>> on Back4app containers

repository-url ‘yi uygulamanızın GitHub depo URL’si ile değiştirin. Yukarıdaki komut istemi dağıtım sürecini başlatır.

Yukarıdaki resimde görüldüğü gibi, AI aracısı dağıtım sürecini başlatmıştır. Bu arada, dağıtım durumu “dağıtılıyor” şeklindedir.

Birkaç dakika sonra, AI aracısına uygulamanın dağıtım durumunu sorabilirsiniz. Uygulama başarıyla dağıtıldıysa, dağıtım durumu hazır olarak değişecektir.

Bu şekilde:

Yukarıdaki resimde, dağıtım durumunun “ dağıtılıyor “dan “hazır “ a değiştiğini görebilirsiniz; bu da uygulamanın başarıyla dağıtıldığını ve artık yayında olduğunu gösterir.

Sağlanan uygulama URL’sini kullanarak tarayıcınızdan uygulamaya erişebilirsiniz.

Sonuç

Bu makalede, React ile basit bir galeri uygulaması oluşturarak Back4app kullanarak nasıl dosya yükleyeceğinizi ve getireceğinizi öğrendiniz.

Ayrıca, Back4app AI aracısını kullanarak Back4app üzerinde bir React uygulamasının nasıl dağıtılacağını keşfettiniz.

Back4app ile dosyalarınızı verimli ve güvenli bir şekilde saklayabilir ve yönetebilirsiniz. Bu eğitimde kullanılan kod bu GitHub deposunda mevcuttur.