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.
Contents
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.