Astro.js arka ucu nasıl oluşturulur?

Astro.js, hızlı, modern web uygulamaları oluşturmak için statik bir site oluşturucu (SSG) ve ön uç çerçevesidir.

Statik HTML, CSS ve JavaScript dosyalarını derleme sırasında önceden işleyerek hızlı ve hafif web siteleri oluşturmanıza olanak tanır.

Geleneksel SSG’lerin aksine Astro.js, statik sayfalarınızı çalışma zamanında JavaScript ile sulandırmanıza da olanak tanıyarak dinamik ve etkileşimli web siteleri oluşturma esnekliği sağlar.

Bu makale, Hizmet Olarak Arka Uç (BaaS) olarak Back4app kullanarak bir Astro.js uygulamasının nasıl oluşturulacağına dair kapsamlı bir eğitim sunmaktadır.

Astro.js’ye genel bir bakış, avantajları ve sınırlamaları ve bir Astro.js uygulamasının nasıl oluşturulacağı ve barındırılacağı konusunda adım adım bir kılavuz sağlayacaktır.

Astro.js’nin Avantajları

Astro.js, modern web siteleri oluşturmak için mükemmel bir seçim olmasını sağlayan birkaç temel özellik tarafından desteklenmektedir:

Ada Mimarisi

Ada mimarisi, bir web sayfasını kapsüllenmiş ve bağımsız işlevsellik adalarına ayırmayı içeren bir web mimarisi modelidir.

Her ada tek bir bileşenle, bir grup bileşenle veya hatta bütün bir sayfayla temsil edilebilir.

Astro.js kullanıcı arayüzünüzü (UI) “Astro Adaları” olarak bilinen daha küçük, izole bileşenlere ayırır. Bu adaları herhangi bir sayfada kullanabilir, böylece kullanılmayan JavaScript’i hafif HTML ile değiştirebilirsiniz.

Ada mimarisinin gelişmiş performans, daha fazla esneklik ve basitleştirilmiş geliştirme dahil olmak üzere çeşitli avantajları vardır.

Minimal JavaScript

Astro “daha az JavaScript” yaklaşımını benimser. JavaScript’i istemciye yalnızca etkileşim için gerekli olduğunda gönderir. Bu, JavaScript paketinin boyutunu azaltmaya yardımcı olur ve yükleme sürelerini iyileştirir.

Astro.js’deki minimal JavaScript, gelişmiş web sitesi performansı, daha iyi SEO, daha az kaynak tüketimi, gelişmiş güvenlik ve daha duyarlı bir kullanıcı deneyimi dahil olmak üzere çeşitli somut avantajlar sunar.

Bu yaklaşım, Astro.js’yi modern web geliştirme için cazip bir seçim haline getirerek verimli ve performanslı web uygulamaları sunmak için uyumludur.

Popüler çerçevelerle entegrasyon

Astro.js’yi React, Svelte, Vue ve Lit dahil olmak üzere çeşitli popüler JavaScript çerçeveleriyle kullanabilirsiniz.

Bu, tercih ettiğiniz araçları seçmenize, mevcut bileşenleri ve bilgileri yeniden kullanmanıza, yerleşik ekosistemlerden yararlanmanıza ve sorunsuz bir geliştirme süreci sürdürmenize olanak tanır.

Bu esneklik ve uyumluluk Astro.js’yi çeşitli projeler için cazip bir seçim haline getirmektedir.

Optimize Edilmiş Yükleme

Optimize edilmiş yükleme, Astro.js’nin temel bir avantajıdır. Kullanıcı deneyimini ve web sitesi performansını geliştirmeye odaklanarak web sayfalarının tasarlanma ve sunulma şeklini temelden değiştirir.

Astro, akıllı telefonlar gibi düşük güçlü cihazlar da dahil olmak üzere farklı cihazlar için yükleme ve oluşturma işlemlerini optimize eder. Kullanıcının cihazı veya ağ koşulları ne olursa olsun sorunsuz bir deneyim sağlamayı amaçlar.

Astro.js’nin Sınırlamaları

Astro.js farkında olmanız gereken bazı sınırlamalara sahiptir. İşte bunlardan bazıları:

Ekosistem Uyumluluğu

Astro.js, React, Svelte ve Vue.js gibi popüler ön uç çerçeveleriyle çalışmak üzere tasarlanmıştır. Bununla birlikte, ekosistemi React veya Vue gibi çerçevelerden daha az olgunlaşmıştır, bu nedenle Astro için açıkça oluşturulmuş daha az üçüncü taraf kitaplığı ve bileşeni bulabilirsiniz.

Çerçeve Aşinalık Gereksinimi

Astro.js, seçilen her çerçeveye aşinalık gerektiren çeşitli ön uç çerçevelerinin kullanımına izin verir.

Bu bilgi genişliği, tek bir çerçevede uzmanlaşan veya web geliştirmeye yeni başlayan geliştiriciler için çok zorlayıcı olabilir.

Birden fazla çerçeve gerektiren bir proje üzerinde çalışmak, çeşitli çerçeveler arasında tutarlılığı korumayı gerektirecektir.

Farklı çerçevelerin kendi gelenekleri ve en iyi uygulamaları olduğundan ve bunları tek bir proje içinde uyumlu hale getirmek potansiyel olarak parçalanmış bir kod yapısına yol açabileceğinden bu çok zor olabilir.

Optimizasyon Öğrenimi

Optimizasyon öğrenimi, bir çerçeve ile oluşturulan web uygulamalarının performansını en üst düzeye çıkarmak için belirli stratejileri anlamak ve uygulamak anlamına gelir.

Astro.js verimlilik ve hız için tasarlanmış olsa da, yeteneklerinden tam olarak yararlanmak, optimizasyon tekniklerini derinlemesine anlamanızı ve bunları geliştirme sürecinde uygulamanızı gerektirir. Bu karmaşık olabilir ve ileri düzeyde bilgi gerektirebilir.

Dergi Uygulamasının Oluşturulması

Bu eğitimin ardından, React.js ile birlikte Astro.js çerçevesini kullanarak temel bir günlük uygulaması oluşturacaksınız.

Günlük uygulaması CRUD (oluşturma, okuma, güncelleme, silme) işlevselliği sağlayacak ve veri depolama ve alma için Back4app kullanacaktır.

Terminalinizde bu komutu çalıştırarak bir Astro.js projesi oluşturabilirsiniz:

npm create astro@latest

Yukarıdaki komut temel bir Astro.js projesi oluşturacak ve TypeScript kullanımı ve katılık seviyesi gibi hususlar da dahil olmak üzere uygulamayı yapılandırma konusunda size rehberlik edecektir.

Astro.js projenize React.js eklemek için terminalinizde bu komutu çalıştırın:

npx astro add react

Artık projeniz hazır. Favori IDE’niz ile uygulamayı geliştirmeye başlayabilirsiniz. İlk olarak, global stillerinizi ve uygulamanın düzenini tanımlarsınız.

Global stillerinizi tanımlamak için src dizini içinde bir styles klasörü oluşturun. Styles klasörünün içinde global.css adında bir dosya oluşturun ve global stillerinizi burada tanımlayın.

Bu şekilde:

Global stilleri yerleştirdikten sonra sıra düzeninizi tanımlamaya gelir. src dizinindeki layouts klasörü içinde bir Layout.astro dosyası bulacaksınız.

Layout.astro dosyasındaki mevcut kodu aşağıdaki kod bloğu ile değiştirin:

Yukarıdaki kod bloğu düzen bileşenini temsil eder. Global stilleri içe aktarır, meta verileri ayarlar ve slot öğesini kullanarak dinamik içerik için bir yer tutucu sağlar.

Bileşenin ana içeriği, style etiketinde tanımlanan belirli bir stile sahip bir h1 başlığıdır.

Sayfalarınıza düzen ve genel stilleri uygulamak için düzen bileşenini sayfa dosyasına aktarın ve HTML bölümünü düzen bileşeninin içine alın.

Düzeni ana sayfanıza uygulamak için, src/pages dizininde bulunan index.astro dosyasında aynı adımları izleyin.

Bu şekilde:

Bu kod bloğu uygulamanızın ana sayfasını tanımlar. “/journal” sayfasına bağlantı içeren bir navigasyon menüsü tanımlar ve navigasyon öğesini ortalamak ve boşluk bırakmak için belirli stiller uygular.

Günlük sayfasını oluşturmak için src/pages dizini içinde journal.astro adında bir dosya oluşturun ve aşağıdaki kod bloğunu dosyaya ekleyin.

Yukarıdaki kod bloğu uygulamanız için günlük sayfasını temsil eder. Düzen bileşenini içe aktarır ve tutarlı bir sayfa yapısı sağlamak için HTML bölümünü sarar.

Kod ayrıca günlük girişlerini yakalamak için başlık ve gövde için giriş alanlarının yanı sıra bir “Günlük” düğmesiyle donatılmış bir form tanımlar. Stil etiketinde tanımlanan CSS stilleri, formun ve öğelerinin görünümünü kontrol eder.

Uygulamanızı web tarayıcınızda başlatmak için uygulamanın geliştirme sunucusunu başlatın. Terminalinizde projenin dizinine gidin ve geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın.

npm run dev

Yukarıdaki komut size http://localhost:4321/ bağlantısını sağlayacaktır. Uygulamanızı görüntülemek için web tarayıcınızda bu bağlantıya gidin.

Ana sayfa şu şekilde görünmelidir:

Günlük sayfasını görüntülemek için “Deneyiminizi kaydedin “ navigasyon bağlantısına tıklayın.

Back4app’i Uygulamanızla Entegre Etme

Back4App, uygulamaların geliştirilmesini ve yönetimini kolaylaştırmak için tasarlanmış bulut tabanlı bir arka uç hizmet platformudur ve Back4app’i Astro.js arka ucu olarak kullanacaktır.

Açık kaynaklı Parse Server çerçevesinden yararlanarak, geliştiricilerin arka uç karmaşıklıklarını basitleştirirken ön uç geliştirmeye odaklanmalarını sağlayan sağlam bir araç paketi sunar.

Back4App, özünde veri depolama, kullanıcı kimlik doğrulama ve gerçek zamanlı veritabanı gibi modern uygulama geliştirme için çok önemli işlevler sunar.

Bu da onu etkileşimli ve dinamik kullanıcı deneyimleri oluşturmak için değerli kılıyor. Platform, farklı geliştirme ihtiyaçlarını karşılayan çeşitli programlama dillerini ve çerçevelerini destekler.

Back4app hesabı oluşturma

Back4app’in sunduğu özellikleri uygulamalarınıza entegre etmek için bir Back4app hesabına sahip olmanız gerekir. Bu basit adımları izleyerek bir hesap oluşturabilirsiniz:

1. Back4app’in web sitesini ziyaret edin.
2. “Kaydol” düğmesine tıklayın.
3. Kayıt formunu doldurun ve gönderin.

Back4app ChatGPT Eklentisi ile tanışın

Back4app kısa süre önce, geliştiricilerin ve teknik bilgisi olmayan meraklıların Back4app uygulamaları oluşturmasına ve bunlarla etkileşim kurmasına yardımcı olmak için ChatGPT eklentisini tanıttı.

Back4app ChatGPT eklentisini kullanarak konuşmalarınızı gerçek uygulamalara dönüştürebilirsiniz. Bu, etkileşime geçmeden önce Back4app platformuyla ilgili deneyime ihtiyacınız olmadığı anlamına gelir.

ChatGPT eklentilerine erişmek için ChatGPT Plus’a abone olmanız gerekir. Abone olduktan sonra, bir açılır menü görüntülemek için “GPT-4” düğmesine tıklayın. Devam etmek için “Eklentiler” seçeneğini seçin.

Ekranınızda mevcut eklentilerin bir listesi görünecektir. Back4app eklentisini bulun ve seçin (Arama çubuğuna “Back4app” yazın).

Eklenti ile Back4app Uygulaması Oluşturma

ChatGPT’de Back4app eklentisini kullanarak bir Back4app uygulaması oluşturmak basit bir iştir. ChatGPT’yi oluşturmak istediğiniz uygulama türü hakkında bilgilendirin, gerisini o halledecektir.

Örneğin:

Yukarıdaki resimde görüldüğü gibi, Back4app ChatGPT eklentisi “Journal application” adında bir Back4app uygulaması oluşturur.

Back4app ChatGPT eklentisinin uygulamayı başarıyla oluşturduğunu doğrulamak için Back4app web sitesine gidin, hesabınıza giriş yapın ve uygulamalarınızı kontrol edin. Uygulamalarınız arasında listelenmiş “günlük uygulaması” adlı bir uygulama bulmalısınız.

Eklentiyi kullanarak, günlük uygulamasında bir günlük sınıfı oluşturun.

Yukarıdaki resimde görüldüğü gibi, Back4app ChatGPT eklentisi günlük sınıfını oluşturur ve bir başlık, içerik ve tarih alanı ekler.

Back4app Uygulamasına Veri Ekleme

Back4app ChatGPT eklentisini kullanarak uygulamaya özel veriler de ekleyebilirsiniz. Örneğin, başlık ve içerik alanlarına özel metin ekleyebilirsiniz.

Metinleri ekledikten sonra, uygulama kontrol paneline gidin, günlük sınıfına tıklayın ve metnin eklendiğini onaylayın.

Back4app’e Bağlanma

Günlük uygulamanızı Back4app uygulamasına bağlamak için Parse JavaScript SDK’yı uygulamanıza yüklemeniz gerekir.

Bunu yapmak için terminalinizde aşağıdaki komutu çalıştırın:

npm install parse 

Parse JavaScript SDK’yı yükledikten sonra, Uygulama Kimliği ve Javascript KEY kimlik bilgilerine ihtiyacınız vardır.

Bu kimlik bilgilerini Back4app uygulamanızın kontrol panelindeki Güvenlik ve Anahtarlar bölümünde bulabilirsiniz. Uygulama Kimliğini ve Javascript Anahtarını uygulamanızda güvenli bir şekilde saklayın.

Uygulamadan Back4app’e Veri Ekleme

Makalenin önceki bölümlerinde Back4app ChatGPT eklentisini kullanarak Back4app’e nasıl veri ekleyeceğinizi öğrendiniz. Bunu günlük uygulama uygulamanızı kullanarak yapmak için Parse Javascript SDK’sını kullanacaksınız.

journal.astro dosyasına aşağıdaki kod bloğunu ekleyin:

Bu kod bloğu, günlük girişlerini oluşturmak ve kaydetmek için Parse ile entegre olan bir JavaScript komut dosyasını temsil eder. Parse ‘ın küçültülmüş sürümünü parse/dist/parse.min.js adresinden içe aktarır ve initialize yöntemini çağırır.

Bu yöntem, Application_ID ve Javascript_KEY kimlik bilgilerini bağımsız değişken olarak alır. Parse üzerinde initialize yöntemini çağırdıktan sonra, Parse üzerindeki serverURL özelliğini https://parseapi.back4app.com/ olarak ayarlayın.

Kod, DOM’dan input, textarea ve button öğelerini seçer ve bunları title, body ve button değişkenlerine atar.

Giriş alanı yevmiye defteri girişinin başlığını, textarea alanı ise yevmiye defteri girişinin gövdesini alır.

addJournal işlevi, Back4app veritabanınıza veri eklemek için gereken mantığı içerir. Journal nesnesinin yeni bir örneğini oluşturur, başlık ve içerik özelliklerini input ve textarea öğelerinin değerlerine ayarlar ve Back4app’e kaydeder.

addEventListener yöntemiyle, kod düğmeye bir olay dinleyicisi ekler ve tıklandığında addJournal işlevinin tetiklenmesini sağlar.

Back4app’ten Veri Getirme

Uygulamanızda görüntülemek üzere Back4app’den veri almak için bir React bileşeni kullanacaksınız. src/components dizininde bir Journal.tsx dosyası oluşturun. Dosyada, Parse kütüphanesini içe aktarın ve başlatın.

Bu şekilde:

Ardından, bileşenin JSX öğelerini tanımlayın:

Ardından, bir günlük durumu oluşturun ve Back4app’den veri alma mantığını içeren bir işlev tanımlayın.

Bu şekilde:

Parse.Query yöntemi ile fetchJournal işlevi, Journal sınıfından veri alan bir sorgu oluşturmak için Parse SDK’yı kullanır.

Sorgu nesnesinin find yöntemi sorgu sonuçlarını içeren bir dizi döndürür ve setJournal işlevi günlük durumunu alınan verilerle günceller.

Bu kod, bileşende yan etkileri çalıştırmak için useEffect kancasını kullanır. Bileşen bağlandığında verileri almak için fetchJournal öğesini çağırır. Şimdi, bileşende journal durumunun içeriğini görüntüleyin.

Bu şekilde:

Yukarıdaki kod bloğu, günlük girişlerinin listesini, her biri belirli içeriğe ve özel bir “Sil” düğmesine sahip bir div öğeleri koleksiyonu olarak oluşturur.

Her günlük girişinin başlığını ve içeriğini h3 ve p etiketi içinde görüntüler ve kullanıcıların girişleri kolayca kaldırmasına olanak tanıyan bir “Sil” düğmesine sahiptir.

Günlük bileşeninizde tanımlanan JSX öğelerine stil vermek için global.css dosyanıza aşağıdaki stilleri ekleyin:

Şimdi, dergi bileşenini ana sayfanızda görüntüleyin. Bunu yapmak için index.astro dosyasındaki mevcut kodu aşağıdaki kod bloğu ile değiştirin:

Bu kod bloğu journal bileşenini içe aktarır ve işler. client:load yönergesi, journal bileşeninin sayfa yüklendiğinde hemen yüklenmesini sağlayarak sorunsuz ve duyarlı bir kullanıcı deneyimi sunar.

Back4app’ten Veri Silme

Uygulamanızın her girişin yanındaki silme düğmesinin çalıştığından emin olmak için, seçtiğiniz bir girişi silen bir işlev tanımlamanız gerekir. Tıklama olayını kullanarak bu işlevi silme düğmesine bağlayacaksınız.

Bu şekilde:

deleteJournal fonksiyonu, Parse.Object.extend yöntemini kullanarak Journal nesnesinin yeni bir örneğini oluşturur. Nesneyi oluşturduktan sonra, nesnenin id özelliğini fonksiyona aktarılan id parametresine ayarlar.

Ardından, fonksiyon Back4app’ten verilen ID’ye sahip günlük girişini silmek için “Journal” nesnesinin asenkron destroy yöntemini çağırır.

Filtre yöntemiyle, işlev belirtilen kimliğe sahip günlük girdisini günlük durumundan filtreleyerek silinen girdiyi hariç tutan yeni bir dizi oluşturur.

Son olarak, setJournal yöntemiyle, işlev günlük durumunu bu yeni diziyle günceller.

Şimdi deleteJournal işlevini tıklama olay işleyicisini kullanarak "Sil" düğmesine bağlayın. Bu, Journal.tsx dosyasındaki JSX öğelerinizin aşağıdaki gibi görünmesine neden olacaktır:

Uygulamanın Test Edilmesi

Uygulamayı oluşturmayı tamamladığınıza göre, onu test etmeniz önemlidir. Bunu yapmak için terminalinize gidin, geliştirme sunucusunu çalıştırın ve uygulamayı web tarayıcınızda görüntüleyin.

Uygulama şu şekilde görünmelidir:

Uygulamanın günlük sayfasını ziyaret etmek için “Deneyiminizi kaydedin” seçeneğine tıklayın ve giriş alanlarını doldurun.

Giriş alanlarını doldurduktan sonra, verileri Back4app veritabanınıza eklemek için günlüğe tıklayın. Ana sayfanıza dönün.

Şimdi, bir girdiyi silip silemeyeceğinizi test etmek için “İlk Gün Günlüğüm” girdisinin sil düğmesine tıklayın. Ana sayfanız şimdi aşağıdaki resimdeki gibi görünmelidir.

Sonuç

Bu makalede, Astro.js çerçevesini inceleyerek avantajlarını ve potansiyel dezavantajlarını öğrendiniz. React kütüphanesi ile sorunsuz bir şekilde entegre edilmiş bir Astro uygulamasının nasıl oluşturulacağını öğrendiniz.

Astro.js, basit açılış sayfalarından karmaşık web uygulamalarına kadar çeşitli web siteleri oluşturmak için mükemmel bir seçimdir. Özellikle hızlı, hafif ve ölçeklenebilir olması gereken web siteleri için çok uygundur.

Daha fazla bilgi edinmek için lütfen Astro.js için bir arka uç nasıl oluşturulur eğitimini okuyun.