Google Sheets’i basit veritabanı olarak kullanmak

Google Sheets/E-tablolar Masaüstünde kullandığımız Microsoft Office benzeri ama daha fazlası. Google Drive içerisinde kullanılabilen bu uygulama ile birçok farklı uygulamalar geliştirilebiliyor.

Google Sheets verileri ile bir web sitesi bile kurmak mümkün, burada ben Vue.js ve Papa Parse JavaScript kütüphanelerini kullanarak bir Google e-tablosundan veri alarak tarayıcıda gösterebilmeyi deneyeceğim.

Öncelikle bu uygulamanın kaynağı @bornfight_(Alen Duda)’dır. Şimdi hemen onun yaptığı örneği görmek için CodePen’den bakabilirsiniz.

Yapmamız gerekenler:

Veri tabanı olarak kullanacağımız bir Google Sheets tablosu oluşturmak, bunu Google Drive’a giriş yapıp orada yeni bir Google Sheets dosyası oluşturarak ve o dosyayı “Web’de yayınla/Publish to the web” olarak paylaşıma açarak yapabilirsiniz. Ardından dosyanın URL’ini alın, uygulama için gerekecek.

Dosyamızın adresi(URL)’leri şu şekiklde JavaScript içerisine ekleyecceğiz:

const moviesUrl =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vTtKbv_S8Fdo3HLhm64Tc94WZ6FuqtzqePIjuejNFJxKkUvAE8JF8V2KgKoz1n5jQUDfL8A3F-QoDWk/pub?gid=0&single=true&output=csv";

const showsUrl =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vTtKbv_S8Fdo3HLhm64Tc94WZ6FuqtzqePIjuejNFJxKkUvAE8JF8V2KgKoz1n5jQUDfL8A3F-QoDWk/pub?gid=1364847678&single=true&output=csv";

Daha sonra Vue ile şu şekilde işleyebiliriz:

const app = new Vue({
  el: "#app",
  data: function (){
    return{
      movies: [],
      shows: []
   };
 },

Ve şöyle bir örnek dosyamız oluyor:

created: function (){
    this.fetchMovies();
    this.fetchShows();
 },
  methods:{
    fetchMovies(){
      Papa.parse(moviesUrl,{
        download: true,
        header: true,
        complete: (results) => this.movies = results.data
     });
   },
    fetchShows(){
      const _this = this;
      Papa.parse(showsUrl,{
        download: true,
        header: true,
        complete: function(results){_this.shows = results.data;}
     });
   }
 }

HTML’imiz ise aşağıdaki gibi:

<div id="app">
  <table v-if="movies.length">
    <thead>
      <tr>
        <th>Title</th>
        <th>Year</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="movie in movies">
        <td>{{movie.Title}}</td>
        <td>{{movie.Year}}</td>
        <td><a :href="movie.Url" target="_blank">{{movie.Url}}</a></td>
      </tr>
    </tbody>
  </table>

  <table v-if="shows.length">
    <thead>
      <tr>
        <th>Title</th>
        <th>Last watched season</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="show in shows">
        <td>{{show.Title}}</td>
        <td>{{show["Last watched season"]}}</td>
        <td><a :href="show.Url" target="_blank">{{show.Url}}</a></td>
      </tr>
    </tbody>
  </table>
</div>

Bu makalemizde amaçlı basittir ve yalnızca veri kaynağı olarak Google E-Tablolar kullanılarak nelerin mümkün olabileceğine giriş yaptık. İşbirliğine dayalı yapısı, her zamanki gibi okuma/yazma erişimini sınırlama yeteneğini korurken, ön uç güncellemesini (çok temel bir CMS’e benzer) yapan değişiklikler yapmayı kolaylaştırır.

Bununla birlikte, sınırlamalar vardır – hız, olası hız sınırlaması ve CSV seçeneğini gelecekte kullanılabilir durumda tutmak için Google’a bağımlılık. Bu nedenle, bu hiçbir zaman daha uygun bir veritabanı ve arka uç kombinasyonunun yerini almayacaktır, ancak yine de hızlı prototip oluşturma ve eğlenceli mini projeler için yararlı olabilir, özellikle de veriler zaten mevcutsa. Veriler zaten mevcutsa dedik çünkü örneğin Google Formlar ile bir anket oluşturdunuz ve form verilerini dinamik canlı olarak web sayfası veya uygulamanız içerisinde göstermek isterseniz bu yöntem harika bir seçim olabilir. Büyük projeler için yukarıda bahsettiğim sebeplerden ötürü önermiyorum.

Kolay gelsin.