Bir Nuxt uygulaması nasıl oluşturulur ve dağıtılır?

Türkçe

How to build and deploy a Nuxt application_

Nuxt.js, web uygulamaları geliştirmenize olanak tanıyan Vue.js, Nitro ve Vite üzerine yapılmış açık kaynaklı bir çerçevedir.

Next.js’den (Sunucu Tarafı Oluşturma için bir React çerçevesi) esinlenen Nuxt.js, geliştiricilerin farklı oluşturma modları uygulayarak hızlı web uygulamaları oluşturmalarını sağlar.

2016 yılında piyasaya sürülen Nuxt.js, geliştirici dostu felsefesi ve zengin özellikleri nedeniyle geliştiriciler arasında geniş bir kabul görmüştür.

Contents

1 Nuxt.js’nin Avantajları
2 Nuxt.js’nin Sınırlamaları
3 Back4app üzerinde Nuxt.js Uygulaması Oluşturma ve Dağıtma
4 Nuxt.js Uygulamanız için Arka Uç Oluşturma
5 Bulut Kodu Oluşturma
6 Uygulamanızın Ön Yüzünü Oluşturma
7 Uygulamanızın Ön Uç ve Arka Uç Bitlerini Bağlama
8 Tamamen Oluşturulmuş Web Uygulamasını Dağıtma
9 Sonuç

Nuxt.js’nin Avantajları

Nuxt.js, Vue.js geliştirme için cazip bir seçim olmasını sağlayan çeşitli avantajlar sunar:

Evrensel Rendering

Nuxt.js, web uygulamanızın kullanıcı tarafında nasıl görüntüleneceğini kontrol eder. İlk sayfayı sunucuda oluşturarak başlar ve özellikle daha yavaş internet bağlantısı olan kişiler için süper hızlı yüklenmesini sağlar.

Bu, arama motorlarının web sitenizi daha hızlı taramasına yardımcı olarak daha iyi SEO sağlar.

Nuxt.js daha sonra uygulamanızdaki sayfalar arasında gezinmek için sorunsuz bir şekilde istemci tarafı görüntülemeye (SPA) geçer. Bu, tıpkı modern bir web sitesinden beklediğiniz gibi işleri hızlı ve duyarlı tutar.

Hidrasyon ve Kod Bölme ile Optimize Edilmiş Performans

Nuxt 3 seçici hidrasyonu mümkün kılar, yani uygulamanın durum bölümleri daha hızlı bir ilk sayfa yüklemesi ve gelişmiş kullanıcı deneyimi için istemci tarafında hidratlanır, bu da büyük bir durum ağacı ve birçok parçası olan bir uygulama için çok kullanışlıdır.

Next.js’ye benzer şekilde Nuxt, rotalara bağlı olarak dosyaları otomatik olarak daha küçük paketlere böler.

Bu şekilde, tarayıcı sunucudan yalnızca mevcut görünümle ilgili kod ister ve kullanıcının sayfa yükleme süresini önemli ölçüde azaltır.

Bu da daha az bant genişliği kaynağının kullanılması ve daha iyi bir kullanıcı deneyimi anlamına geliyor.

Yerleşik Yönlendirme

Nuxt.js, varsayılan olarak, dosya tabanlı yönlendirme yoluyla rotaları işleyerek uygulamanızda gezinmeyi ve rota yönetimini basitleştirir.

Ayrıca, daha karmaşık yönlendirme senaryoları için rotalarınızı dinamik olarak yapılandırmayı seçmenize de olanak tanır.

API Rotaları

Nuxt.js, basit görevler için tamamen ayrı bir sunucu kurmayı atlamanızı sağlar! API rotaları adı verilen yerleşik kısayollara sahiptir.

API rotaları, RESTful ve GraphQL API’lerini destekleyerek sunucu tarafı oluşturma sırasında veri getirme işlemini gerçekleştirebilir. Bu, uygulamanızın hızlı hissetmesini sağlar ve arama motorlarının uygulamanızın içeriğini daha iyi anlamasına yardımcı olur.

Nuxt.js’nin Sınırlamaları

Nuxt.js güçlü bir geliştirme deneyimi sunarken, burada dikkate alınması gereken bazı sınırlamalar vardır:

Öğrenme Eğrisi

Nuxt.js, geleneksel Vue.js geliştirmeden farklı kavramlar sunar. Nuxt.js’de yeni olmak, kendine özgü mimarisine ve özelliklerine uyum sağlamak için zaman gerektirir.

Nuxt ayrıca geniş bir araçlar, kütüphaneler ve eklentiler ekosistemi sunar. Bu seçeneklere aşina olmak, ilk öğrenme eğrisine katkıda bulunabilir.

Sınırlı Ekosistem

React ve Angular gibi diğer büyük çerçevelerin aksine, Nuxt nispeten gençtir. Sonuç olarak, üçüncü taraf kütüphaneler ve eklentilerden oluşan ekosistemi hala büyümektedir.

Belirli durumlarda belirli gereksinimleri karşılamak için özel çözümler oluşturmanız gerekecektir.

Sunucu Tarafı Oluşturmada Karmaşıklık

Sunucu tarafı işleme (SSR) Nuxt.js’de güçlü bir özellik olsa da uygulama geliştirmeyi daha karmaşık hale getirebilir. Daha basit işleme yöntemleriyle karşılaştırıldığında, SSR daha dik bir öğrenme eğrisine sahiptir.

Ayrıca, SSR’nin etkili bir şekilde uygulanması, veri getirme ve uygulama durumunun dikkatli bir şekilde planlanmasını ve yönetilmesini gerektirir.

Bu, sunucuda ilk olarak işlenen içerik ile istemcide işlenen son, etkileşimli sürüm arasında potansiyel hatalara veya tutarsızlıklara yol açabilir.

Back4app üzerinde Nuxt.js Uygulaması Oluşturma ve Dağıtma

Back4App ile bir Nuxt uygulamasının nasıl oluşturulacağını ve dağıtılacağını daha iyi anlamak için bir kişi yönetimi uygulaması oluşturacağız.

Bu uygulama, kullanıcıların iletişim bilgilerini oluşturmalarına, görüntülemelerine ve silmelerine olanak tanıyarak ağ iletişim defterlerini düzenli ve kolay erişilebilir tutar.

Bu projenin arka ucunda, ad, e-posta, telefon numaraları ve şirket gibi iletişim bilgilerini depolamak için Back4app’in yerleşik PostgreSQL veritabanını kullanacağız.

Bu süreç Back4App’in AI Agent’ının yardımıyla daha kolay hale gelecektir.

Projenin ön ucunda, uygulamanın kullanıcı arayüzünü oluşturmak için Nuxt.js kullanacağız. Ardından, Nuxt ön ucunu Back4App Containers ile dağıtmadan önce Parse SDK’yı kullanarak ön ve arka ucu birbirine bağlayacağız.

Hadi başlayalım.

Nuxt.js Uygulamanız için Arka Uç Oluşturma

Bir Nuxt uygulaması oluşturmanın ilk adımı arka ucu hazır hale getirmektir.

Kişiler uygulamanızın arka ucunu oluşturmaya başlamak için Back4App web sitesine gidin, oturum açın ve “Yeni Uygulama Oluştur” seçeneğine tıklayarak yeni bir uygulama oluşturun.

Aşağıdaki resimde gösterildiği gibi yeni bir uygulama oluşturduktan sonra göreceğiniz “Backend as a Service” seçeneğini seçin.

Uygulamanıza bir isim verin ve veritabanı için kullanacağımız PostgreSQL seçeneğini seçin.

“CREATE” düğmesine tıkladıktan sonra Back4app, veritabanı da dahil olmak üzere uygulamanızı kurmak için biraz zaman ayıracaktır.

Her şey hazır olduğunda, aşağıdaki resimde gösterildiği gibi otomatik olarak başvurunuza yönlendirileceksiniz.

Uygulama için kullanacağınız PostgreSQL veritabanı tasarımını yapılandırmak için Back4app’in AI Agent’ına gidin ve aşağıdaki komut istemini yazın.

Create database tables in my Back4app app; do you need me to provide any information?

Veritabanınızı kurmak için AI Agent ihtiyaç duyduğu şeylerin bir listesini oluşturacaktır. Bu liste, uygulamanız için benzersiz anahtarlar ve verilerinizin nasıl yapılandırıldığı (şema) gibi ayrıntıları içerecektir.

AI Agent’a uygulama anahtarlarınızı verdikten sonra, AI Agent’a veritabanı şemanızın nasıl görünmesi gerektiğini bildirin. Oluşturmakta olduğumuz iletişim uygulaması için aşağıdakine benzer olmalıdır:

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

Yukarıdaki bilgileri temsilciye ilettikten sonra, kişi sınıfının ve ilgili alanların oluşturulup oluşturulmadığını görmek için veritabanında gezinerek onaylayabilirsiniz.

Ardından, aşağıdaki komut istemini kullanarak AI aracısından veritabanınızı test verileriyle doldurmasını isteyin.

Populate my contact database with some test data with around 10 test contacts with variations in their information.

Artık üzerinde çalışabileceğiniz test verileriniz var.

Bulut Kodu Oluşturma

Back4App’ın Bulut Kodu özelliği, özel JavaScript kodunu doğrudan Back4App’ın sunucularında çalıştırmanıza olanak tanır.

Bu özellik, mobil uygulamanız veya web siteniz üzerindeki işlem yükünü azaltmanıza yardımcı olur. Ayrıca, bulut kodu Back4App’in güvenli sunucularında çalıştırıldığı için verilerinizi ve uygulamanızı güvenlik açıklarından korumanıza yardımcı olur.

Artık kişilerle doldurulmuş bir test veritabanınız var, kişi yönetim sisteminiz için özellikleri uygulama zamanı geldi.

Bu bölümde, uygulamanız için belirli özellikleri uygulamak üzere bulut kodunu nasıl oluşturacağınızı öğreneceksiniz:

Tüm Kişileri Görüntüleme
Yeni Kişiler Oluşturma
Kişileri Silme

Bu özellikleri Back4App AI Agent ile uygulayacaksınız. Hadi başlayalım.

Kütüphaneden tüm kitapları almak için, Back4App AI aracısına gerekli bulut kodunu oluşturması için aşağıdaki istemi sağlayın.

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.

Ardından, Back4App AI Agent’a aşağıdaki komut istemini ileterek yeni kişiler oluşturma görevini de vereceksiniz:

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.

Son olarak, Back4App AI Agent’a kişileri veritabanından silmeye yönelik bir işlev oluşturmak için aşağıdaki istemi de sağlayacaksınız.

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.

Agent’ın bulut işlevlerinizi doğru şekilde oluşturup oluşturmadığını kontrol etmek için, bu gezinti yolunun sonunda bulunan main.js dosyasını inceleyin.

Back4app kontrol paneli → Bulut Kodu → İşlevler ve Web Barındırma → bulut → main.js.

Bulut işlevlerinizin doğru şekilde oluşturulduğundan emin olmak için aynı main.js dosyasında tanımladığınız üç işlevi görmelisiniz.

Uygulamanızın Ön Yüzünü Oluşturma

Oluşturduğumuz tüm bulut kodu işlevleriyle etkileşim kurmak için bir ön uç oluşturacağız. Ön ucu Nuxt.js ile oluşturacağız.

Ön uç geliştirmeye başlamak için aşağıdaki kodu tercih ettiğiniz dizinin terminalinde seri olarak çalıştırın:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

Bu kod satırları, adı b4a_nuxt_app olan bir Nuxt uygulamasını başlatacak ve ardından uygulamanızın düzgün çalışması için gerekli tüm paketler ve bağımlılıklar yüklenecektir.

Yukarıdaki komutları terminalinizde çalıştırdıktan sonra, uygulamanızı şekillendirmenize yardımcı olacak bazı npm paketlerini yüklersiniz. Bu paketleri yüklemek için aşağıdaki npm komutlarını terminalinizde seri olarak çalıştırın:

npm install sass
npm install -D tailwindcss postcss autoprefixer

Yukarıdaki kod satırları bir CSS önişlemcisi olan SASS‘ı ve bir yardımcı CSS çerçevesi olan TailwindCSS‘i yükleyecektir. Uygulamanızı hızlı bir şekilde şekillendirmek için bu paketleri kullanacaksınız.

Ardından, aşağıdaki komutu çalıştırarak TailwindCSS ‘i uygulamanızda yapılandıracaksınız:

npx tailwindcss init

Yukarıdaki kod, Nuxt uygulamanızın kök dizininde bir tailwind.config.js dosyası oluşturur.

Bu tailwind.config. js dosyası, Nuxt.js içindeki Tailwind CSS entegrasyonunuz için merkezi yapılandırma noktasıdır. Tailwind CSS’nin çeşitli yönlerini özel proje gereksinimlerinize uyacak şekilde özelleştirmenize olanak tanır.

Uygulamanızı tercih ettiğiniz metin düzenleyicide açın (VSCode, Eclipse, Sublime Text). Tailwind.config.js dosyasına gidin ve aşağıdaki kod bloğuna benzeyecek şekilde yapılandırın:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Yukarıdaki kod bloğundaki içerik dizisi, Tailwind CSS’in yardımcı sınıflarını oluşturmak için izleyeceği dosya yollarını barındırır.

Ardından, uygulamanızın kök dizininde bir assets klasörü oluşturun. Klasörde, uygulamanıza stiller eklemek için bir main.scss dosyası oluşturun. Aşağıdaki kodu main.scss dosyasına yapıştırın:

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

Yukarıdaki kod bloğu iki farklı Google Fonts Tipini içe aktarır, stil öğeleri için Tailwind CSS’yi entegre eder, web uygulamanız için açık gri bir arka plan rengi belirler ve içe aktarılan yazı tiplerini verimli bir şekilde uygulamak için özel sınıflar tanımlar.

Bu main.scss dosyası, web uygulamanızın görsel stilini oluşturmak için sağlam bir temel sağlar.

Nuxt uygulamanız için yapılandırmaları barındıran nuxt.config.ts dosyanıza aşağıdaki kodu yapıştırın:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

Nuxt yapılandırma dosyanızda, main.scss dosyasını Nuxt uygulamanızın kullanacağı tek CSS dosyası olarak tanımladınız. Ayrıca Nuxt uygulamanız için Sunucu Tarafı Oluşturmayı da devre dışı bıraktınız.

Nuxt, dosya tabanlı yönlendirme sistemi aracılığıyla yönlendirmeyi otomatik olarak gerçekleştirdiğinden ve uygulamayı yapılandırmayı tamamladığımızdan, farklı web sayfaları oluşturmaya geçebiliriz.

Bu uygulamanın kullanıcı arayüzünü oluşturmak için proje kök dizininde bir pages klasörü içinde üç sayfa oluşturacağız. Bu sayfalar şunlar olacaktır:

index.vue: Bu, uygulamanın amacını tanıtan ana sayfadır.
contactForm.vue: Bu sayfa, kullanıcıların yeni kişiler oluşturmasına ve veritabanına kaydetmesine olanak tanır.
contactsList.vue: Bu sayfa, veritabanında depolanan tüm kişileri listeler.

Şimdi, index.vue dosyanıza aşağıdaki kodu yapıştırın:

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

Bu kod bloğu, kişi yönetimi uygulamanız için karşılama sayfası oluşturur.

Bir başlık, uygulamanın amacına ilişkin bir açıklama ve iletişim formu sayfasına gitmek için bir düğme görüntüler. Kod bloğu ayrıca uygulamayı şekillendirmek için TailWind sınıflarını tanımladı.

Ayrıca, contactForm.vue dosyanıza aşağıdaki kodu yapıştırın:

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

Yukarıdaki kod bloğu, uygulama kullanıcılarının kişileri oluşturmak ve saklamak için kullanabileceği bir formun yapısını tanımlar. İşte önemli noktalar:

Bir form öğesi, çeşitli giriş alanlarını kullanarak iletişim bilgilerini (ad, e-posta, telefon, adres, şirket) yakalar.

Her giriş alanı, kişi nesnesindeki(v-model) bir özelliğe bağlanır ve doğrulama için uygun giriş türlerini kullanır.

Bir gönder düğmesi, bir sonraki bölümde uygulayacağımız createContact işlevini tetikleyecektir. Bir mesaj alanı da message ve isError değişkenlerine bağlı olarak geri bildirim (başarı veya hata) gösterecektir.

Kod bloğu, 3 reaktif değişken oluşturmak için Vue’nun ref özelliğini kullanır:

kişi: Girilen iletişim bilgilerini saklar.
mesaj: Kullanıcı için geri bildirim mesajlarını tutar.
isError: İletinin bir hatayı temsil edip etmediğini belirtir.

Basit bir stil kuralı, kod bloğundaki .error sınıfını kullanarak hata mesajlarının görünümünü tanımlar.

Ayrıca, contactsList.vue dosyanıza aşağıdaki kodu yapıştırın:

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

Yukarıdaki kod bloğu, uygulamanızdaki kişilerin bir listesini görüntüler. İşte önemli noktalar:

Kod bloğu “Kişileriniz” başlıklı bir bölüm oluşturur ve kişileri görüntülemek için duyarlı bir ızgara düzeni (3 sütun) kullanır.

v-for kullanarak bir kişiler dizisi boyunca döner ve her kişinin bilgilerini (ad, e-posta, telefon, adres, şirket) sunar.

Her kişi girişi, daha sonra uygulayacağımız deleteContact işlevini tetikleyecek bir “Sil” düğmesine sahiptir.

Kod bloğu, kişi listesini saklamak için reaktif bir dizi(kişiler) kullanır. Bu, veriler değiştikçe kullanıcı arayüzünün dinamik olarak güncellenmesini sağlar. Kişiler dizisi, Back4app veritabanından aldığınız verileri depolayacaktır

Tüm bu sayfaların rotalarını dahil etmek için aşağıdaki kodu kök dizindeki app.vue dosyanıza yapıştırın.

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

Kod bloğu, Nuxt uygulamasının genel düzenini şu şekilde tanımlar bileşen.

Kod bloğunda contactsList.vue ve contactForm.vue sayfalarına bağlantılar içeren yatay bir gezinme menüsü bulunmaktadır.

Kod bloğu ayrıca bileşeni, Nuxt.js’de geçerli sayfanın içeriğini dinamik olarak oluşturan önemli bir bileşendir.

Bu, uygulamanızın kullanıcının uygulama içindeki gezintisine göre uygun içeriği görüntülemesini sağlar.

Uygulamanızın Ön Uç ve Arka Uç Bitlerini Bağlama

Nuxt iletişim uygulamanızı Back4app veritabanınıza ve arka uç örneğinize bağlamak için Parse SDK‘yı yüklemeniz gerekecektir.

Parse SDK, ön uç uygulamanız (kullanıcı arayüzü) ile Back4App arka ucunuz arasında köprü kurarak Back4App veritabanları ve bulut işlevleriyle etkileşim kurmanızı sağlar.

Parse SDK’yı yüklemek için kök dizininizin terminalinde aşağıdaki komutu çalıştırın:

npm install parse

Kurulumdan sonra, aşağıdaki bilgileri alarak Parse’ı başlatmanız gerekir:

Uygulama Kimliği
JavaScript Anahtarı
Back4app Sunucu URL’si

Bu bilgileri Back4app uygulamanızın kontrol panelindeki Güvenlik ve Anahtarlar bölümüne giderek edinebilirsiniz. Uygulama Kimliğinizi ve JavaScript Anahtarınızı uygulamanızda güvenli bir şekilde saklayın.

Şimdi, uygulamanızda Parse’ı başlatmak için app.vue dosyanızı değiştirin:

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

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

Ayrıca, bulut kodu işlevlerinizi uygulamanızın ön ucuna bağlamak için contactForm.vue ve contactsList.vue dosyalarınızı değiştirin.

contactForm.vue sayfanıza aşağıdaki kodu yapıştırın:

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

Yukarıdaki kod bloğu, yeni bir kişi oluşturmanın arkasındaki mantık için bulut kodu işlevinizi Nuxt uygulamanıza bağlar.

İletişim bilgilerini saklamak için arka uç ile etkileşime girer ve işlemin başarısına veya başarısızlığına bağlı olarak kullanıcıya geri bildirim sağlar.

Kod bloğu, Parse SDK’yı kullanarak Back4App sunucusunda createContact adlı bir işlevi çalıştırmaya çalışır (try-catch bloğu ile)(await Parse.Cloud.run('createContact', {...contact.value})). Bu, kişi bilgilerini(contact.value) depolama için Back4App sunucusuna gönderir.

Başarılı bir depolama sonrasında “Kişi başarıyla oluşturuldu!” mesajı görüntülenir ve form temizlenerek kişi nesnesi sıfırlanır ve yeni girişlere izin verilir.

Bununla birlikte, bir hata ortaya çıkarsa, şablon değişmezleriyle(${error.message}) sunucudan gelen ayrıntıları içeren bilgilendirici bir hata mesajı görüntülenir.

Aşağıdaki kodu contactsList.vue dosyanıza yapıştırın:

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

Yukarıdaki kod, uygulamanız için kişileri getirmeyi ve silmeyi yönetir. Veri depolama ve alma işlemlerini gerçekleştirmek için Back4App Backend ile etkileşime girer.

Kod bloğu iki temel işlevi tanımlar:

fetchContacts: Bu asenkron fonksiyon, arka uçtan kişilerin listesini alır. Back4App sunucunuzdaki “getContacts” bulut kodu işlevini çağırarak Parse.Cloud.run('getContacts ') kullanır. Alınan kişiler, contacts adlı reaktif bir dizide saklanır.

deleteContact: Bu asenkron fonksiyon belirli bir kişinin silinmesini sağlar. Argüman olarak, arka uç veritabanındaki kişi için benzersiz bir tanımlayıcı olan bir objectId alır. İşlev, silinecek objectId'y i ileterek “deleteContact” adlı bulut kodu işlevini çağırmak için Parse.Cloud.run('delete Contact’ , { objectId }) kullanır. Başarılı olduğunda, kod silinen kişileri kaldırmak için yerel kişiler dizisini filtreler.

Artık uygulamanın ön ve arka ucunu bağladığınıza göre, aşağıdaki npm komutunu çalıştırarak uygulamanın önizlemesini yapabilirsiniz.

npm run dev

Nuxt Nitro sunucusunun yüklendiğini göreceksiniz. Yüklemeden sonra, uygulama http://localhost:3000/ URL adresinde kullanılabilir olmalıdır. URL’ye gittiğinizde aşağıdaki resme benzer bir ekran görmelisiniz.

Kişiler Sayfasına gittiğinizde, bir dizi kişi görmelisiniz. Bu kişiler, Back4app AI Agent’ın Back4app arka uç oluşturma sırasında sizin için oluşturduğu kukla verilerdir.

Kişi Ekle bağlantısına tıkladığınızda, yeni kişi için ayrıntıları girebileceğiniz bir form görmelisiniz. Örneğin:

“Gönder” düğmesine tıklayarak alanları net bir şekilde fark etmelisiniz. Kişiler sayfasına gittiğinizde, yeni oluşturulan kişiyi göreceksiniz.

Tamamen Oluşturulmuş Web Uygulamasını Dağıtma

Aşağıda bir Nuxt uygulamasını dağıtma adımları verilmiştir. Artık uygulamayı oluşturmayı ve test etmeyi tamamladığınıza göre, uygulamanızı herkese açık hale getirmek için Back4app kapsayıcılarını kullanarak Nuxt uygulamasını dağıtabilirsiniz.

Dağıtım sürecini hızlandırmak için Back4app AI Agent’ı aşağıdaki talimatlarla yönlendirin:

Give me simplified steps to deploy my Nuxt application with Back4app containers

Aşağıda özetlenenlere benzer adımlar görmelisiniz.

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

Uygulamanızı dockerize etmek için kök dizinde bir Dockerfile ve bir .dockerignore dosyası oluşturun ve aşağıdaki komut dosyalarını aşağıya yapıştırın.

Dockerfile içinde:

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

Ayrıca, .dockerignore dosyasında:

node_modules
.nuxt

Bir Dockerfile, bir Docker görüntüsü oluşturmak için talimatlar içerir. Dockerfile, gerekli uygulama bağımlılıkları için kurulum adımlarını içerir.

.dockerignore dosyası, Docker’a görüntüyü oluştururken hangi dosya ve klasörlerin hariç tutulacağı konusunda talimat vermek için kalıpları listeleyen basit bir metin dosyasıdır.

Şimdi, uygulamanızın docker imajını oluşturmak için terminalinizde aşağıdaki docker komutunu çalıştırın:

docker build -t b4a_contacts_app .

Uygulamayı Back4app’e dağıtmaya çalışmadan önce uygulamanızı GitHub hesabınıza aktardığınızdan emin olun. Uygulamayı gönderdikten sonra GitHub hesabınızı Back4app ile entegre edin.

Bunu Back4app Github uygulaması ile yapabilirsiniz. GitHub’ınızı Back4app ile entegre ettikten sonra artık uygulamanızı dağıtabilirsiniz.

Back4app kontrol panelinizden Containers sayfasına gidin.

Ardından ekrandaki “Create New App” butonuna tıklıyorsunuz. Daha sonra dağıtmak istediğiniz depoyu seçecek, b4a_contacts_app adını verecek ve uygulamayı oluşturacaksınız. Dağıtımın tamamlanması biraz zaman alacaktır.

Dağıtımdan sonra, canlı uygulamanız şu URL’de kullanılabilir olmalıdır: https: //b4acontactsapp1-5990olnw.b4a.run/.

Sonuç

Bu makalede, Back4app ekosistemi içinde PostgreSQL veritabanına sahip bir Nuxt.js uygulamasının nasıl oluşturulacağını ve dağıtılacağını öğrendiniz.

Ayrıca Nuxt.js ile web uygulamaları oluşturmanın avantajlarını ve dezavantajlarını da öğrendiniz.

Back4App’in AI Agent’ı ile bulut kodu işlevlerini oluşturmaktan ve veritabanını tasarlamaktan Back4App arka ucunun düşük kodlu, kullanıcı dostu arayüzünü anlamaya kadar.

Ayrıca Nuxt uygulamasını Back4App Containers ile dağıttınız ve Back4App’in uygulama geliştirmeyi kolaylaştırmak için sağladığı bir dizi araçla tanıştınız.

Bu araç kombinasyonu ile web uygulamalarını hızlı bir şekilde oluşturma ve dağıtma yolunda ilerleyebilirsiniz.

Uygulama geliştirmenizi kolaylaştırmaya aşina olmak için AI Agent’ın nasıl çalıştığı hakkında daha fazla bilgi edinebilirsiniz.