VUE ve Strapi, modern web uygulamaları geliştirmek için yaygın olarak kullanılan iki popüler teknolojik araçtır. VUE, özellikle single-page uygulamalarının geliştirilmesinde sıklıkla kullanılan açık kaynak bir JavaScript çatısıdır. Strapi ise, geliştiricilerin hızlı ve kolay bir şekilde RESTful API’ler oluşturmasına olanak tanıyan açık kaynak bir başlık yönetim sistemidir. Bu yazıda, VUE ve Strapi kullanarak basit bir “hello world” web uygulaması nasıl oluşturulacağını öğreneceğiz.
Adım 1: Çalışma ortamını hazırlayalım.
Bu projeyi yapmak için öncelikle VUE CLI ve Strapi CLI’nin yüklü olması gerekiyor. Yükleme işlemini tamamladıktan sonra, bir VUE projesi oluşturabilir ve Strapi’yi de yükleyebilirsiniz. Aşağıdaki komutları terminalde çalıştırarak işe başlayabilirsiniz:
# VUE CLI'yi yükleme
npm install -g @vue/cli
# Yeni bir VUE projesi oluşturma
vue create hello-world
# Strapi CLI'yi yükleme
npm install -g strapi
# Yeni bir Strapi projesi oluşturma
strapi new strapi-hello-world
Adım 2: Strapi API'yi ayarlayalım
Strapi projesi oluşturulduktan sonra, API’leri ayarlamak için bir veritabanı seçmeniz gerekiyor. Bu proje için SQLite kullanacağız. Aşağıdaki adımları takip ederek veritabanını ayarlayabilirsiniz:
- Strapi projesi klasörüne gidin:
cd strapi-hello-world
- SQLite veritabanı sürücüsünü yükleyin:
npm install --save sqlite3
- Veritabanını oluşturun ve gerekli tabloları ayarlayın:
npx strapi install graphql
npx strapi build
npx strapi generate:model message name:string content:string
npx strapi develop
Adım 3: VUE yapısını ayarlayalım
VUE projesini oluşturduktan sonra, Strapi API’ye bağlanmak için gerekli ayarları yapmanız gerekiyor. Bunun için, VUE CLI’yi kullanarak Axios kütüphanesini yükleyeceğiz. Aşağıdaki komutu çalıştırarak Axios’ı yükleyebilirsiniz:
npm install axios
VUE projesini ayarlamak için aşağıdaki adımları izleyin:
- src/views klasörüne MessageList.vue adlı bir dosya oluşturun.
- MessageList.vue dosyasına aşağıdaki kodu ekleyin:
<template>
<div>
<h1>Messages</h1>
<ul>
<li v-for="message in messages" :key="message.id">
{{ message.content }}
</li>
</ul>
</div>
</template>
- VUE projesinde, API’ye bağlanmak için Axios kullanacağız. Bunun için, src/services klasörüne api.js adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:
import axios from "axios";
export default axios.create({
baseURL: "http://localhost:1337",
});
- Son olarak, MessageList.vue dosyasında, API’den verileri getirerek uygulamayı tamamlayabilirsiniz. Aşağıdaki kodu MessageList.vue dosyasına ekleyin:
<script type="litespeed/javascript">import api from "../services/api";export default{name:"MessageList",data(){return{messages:[],}},async mounted(){try{const response=await api.get("/messages");this.messages=response.data}catch(error){console.error(error)}},}</script>
Bu kod, “messages” adlı bir veri nesnesi oluşturur ve API’den tüm mesajları çeker.
Adım 4: Uygulamayı çalıştıralım
Uygulamayı çalıştırmak için önce Strapi projesini başlatın:
cd strapi-hello-world
npx strapi develop
Daha sonra, VUE projesini başlatın:
cd hello-world
npm run serve
Tarayıcınızda “http://localhost:8080” adresini açarak uygulamayı görüntüleyebilirsiniz.
Adım 5: Sonuçtan keyif alalım 🙂
Bu yazımızda VUE ve Strapi kullanarak basit bir “hello world” uygulaması nasıl oluşturulacağını öğrendik. Öncelikle Strapi’nin nasıl kurulacağı ve yapılandırılacağı hakkında bilgi edindik, ardından basit bir mesajlaşma uygulaması için bir veritabanı modeli oluşturduk. Daha sonra, VUE.js kullanarak, basit bir web sayfası oluşturduk ve bu sayfada, oluşturduğumuz API’ye bağlanarak mesajların listelenmesini sağladık.
Bu örnek proje, VUE ve Strapi kullanarak nasıl hızlı ve kolay bir şekilde modern web uygulamaları geliştirilebileceğini göstermektedir. Bu teknolojilerin kolay kullanımı, geliştiricilerin daha fazla işlevselliği daha kısa sürede eklemelerine olanak tanır. Ayrıca, açık kaynaklı olmaları sayesinde, geliştiricilerin uygulamalarını özelleştirmek için kolaylıkla erişebilecekleri ve değiştirebilecekleri birçok kaynak vardır.
VUE ve Strapi gibi teknolojiler, web uygulamalarının geliştirilmesinde oldukça popüler hale gelmiştir. Bu yazıda ele aldığımız örnekte olduğu gibi, basit ve karmaşık projeler için birçok olasılık sunarlar. Umarız bu yazı, VUE ve Strapi kullanarak web geliştirme konusunda yeni başlayanlara yardımcı olmuştur.
