Sunucu Olmadan REST API Nasıl Oluşturulur?

Son Güncelleme tarihi 17 Temmuz 2024 by Teknoloji Haber

REST API nasıl oluşturulur sunucu olmadan yapılacak işlemler için uzun bir detayı sizlere anlatacağız.

Service Worker, tarayıcıda HTTP isteklerini yönetmek için kullanılan güçlü bir API’dir. Bu API, tarayıcıdan gelen HTTP isteklerini engelleme ve önbellekten sunma yeteneği sunar. İşte bu teknoloji sayesinde internet bağlantısı olmasa bile çalışan Progressive Web Apps (PWA) adı verilen uygulamalar geliştirilebilir.

Service Worker’ların en büyük avantajlarından biri, çevrimdışı çalışabilen uygulamalar oluşturmaya olanak tanımasıdır. Tren yolculukları gibi internet bağlantısının dengesiz olduğu durumlarda bile bu uygulamalar kullanılabilir. Çevrimdışı olduğunuzda, HTTP istekleri depolanır ve tekrar çevrimiçi olduğunuzda gerçek sunucuya gönderilir.

Service Worker’lar sadece çevrimdışı desteği sağlamakla kalmaz, aynı zamanda tarayıcıdan kaynaklanan HTTP isteklerini engelleyebilir ve yanıtları özelleştirebilir. Örneğin, yeni bir sekmede bir resim açtığınızda veya AJAX ile veri çektiğinizde (fetch API’si gibi), Service Worker bu istekleri engelleyebilir ve önbellekten bir yanıt sunabilir.

Service Worker’ların bir diğer önemli özelliği, hiç var olmamış HTTP isteklerini yaratabilmeleridir. Bu, geliştiricilere tamamen dinamik içerik oluşturma ve sunma olanağı sağlar. Örneğin, bir kullanıcı yeni bir sekmede bir resim açmak istediğinde, Service Worker bu isteği yakalayıp önceden belirlenmiş bir yanıt oluşturabilir.

Servis Elemanı Nasıl Kaydedilir?

Servis elemanları (Service Worker), web uygulamalarının performansını artırmak ve çevrimdışı çalışma yeteneklerini geliştirmek için kullanılan güçlü araçlardır. Servis elemanını kaydetmek ve kullanmaya başlamak için aşağıdaki adımları izleyin.

Adım 1: Servis Elemanı Dosyasını Oluşturun

Servis elemanının ayrı bir dosyada olması gerekir. Bu dosya genellikle sw.js olarak adlandırılır, ancak istediğiniz ismi verebilirsiniz.

sw.js:

javascriptKodu kopyalaself.addEventListener('install', function(event) {
  console.log('Service Worker installing.');
  // Kurulum adımları burada olabilir.
});

self.addEventListener('activate', function(event) {
  console.log('Service Worker activating.');
  // Aktivasyon adımları burada olabilir.
});

self.addEventListener('fetch', function(event) {
  console.log('Fetching:', event.request.url);
  // İstekleri ele alma adımları burada olabilir.
});

Adım 2: Servis Elemanını Kayıt Ettirin

Servis elemanını web uygulamanıza kaydetmek için aşağıdaki JavaScript kodunu kullanın. Bu kod, tarayıcıda servis elemanını kaydeder ve HTTP isteklerini yönetmeye başlar.

main.js (veya HTML dosyanızın <script> bloğunda):

javascriptKodu kopyalaif ('serviceWorker' in navigator) {
  var scope = location.pathname.replace(/\/[^\/]+$/, '/');
  navigator.serviceWorker.register('sw.js', { scope })
    .then(function(reg) {
      reg.addEventListener('updatefound', function() {
        var installingWorker = reg.installing;
        console.log('A new service worker is being installed:', installingWorker);
      });
      console.log('Registration succeeded. Scope is ' + reg.scope);
    }).catch(function(error) {
      console.log('Registration failed with ' + error);
    });
}

Dosyanın Konumu

Servis elemanının dosyası (sw.js), uygulamanızın kök dizininde bulunmalıdır. Bu, etki alanının kök dizini anlamına gelir. Örneğin:

cssKodu kopyalamy-web-app/
├── index.html
├── main.js
└── sw.js

Notlar

• HTTPS ve localhost Gereksinimi: Servis elemanları yalnızca HTTPS protokolü veya localhost üzerinden çalışır. Bu, güvenlik ve gizlilik sağlamak için gereklidir.

Basit Bir Kullanıcı Kimlik Doğrulamasıyla React Projesi Nasıl Oluşturulur

React ile kullanıcı kimlik doğrulaması içeren basit bir proje oluşturmak, bir API ile nasıl etkileşim kurabileceğinizi ve React’in temel işlevselliğini nasıl kullanabileceğinizi göstermek için harika bir yoldur. Bu örnekte, Vite ile bir React uygulaması oluşturacak ve basit bir kimlik doğrulama sistemi ekleyeceğiz.

1. Vite ile React Projesi Kurulumu

Öncelikle Vite ile basit bir React uygulaması kurmanız gerekiyor. Vite’ı kullanmak için Node.js’nin yüklü olması gerekir. Node.js yüklü değilse, Node.js resmi web sitesinden yükleyebilirsiniz.

Terminalden şu komutu çalıştırarak yeni bir Vite projesi oluşturun:

npm create vite@latest

Proje ismi, framework ve varyant olarak sırasıyla auth, React ve JavaScript seçin. Aşağıdaki çıktıyı görmelisiniz:

plaintextKodu kopyala✔ Project name: … auth
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/kuba/auth...

Done. Now run:

  cd auth
  npm install
  npm run dev

2. Vite Yapılandırma Dosyasını Düzenleme

Proje klasörüne gidin ve bağımlılıkları yükleyin:

cd auth
npm install
npm run dev

Sonraki adımda, Vite’ın oluşturduğu yapılandırma dosyasını (vite.config.js) değiştireceğiz. Bu, Vite’ın servis çalışanı dosyasını nasıl oluşturacağını belirtecektir.

Mevcut vite.config.js dosyası şu şekildedir:

javascriptKodu kopyalaimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Bu dosyayı şu şekilde güncelleyin:

javascriptKodu kopyalaimport { join } from "node:path";
import { buildSync } from "esbuild";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    {
      apply: "build",
      enforce: "post",
      transformIndexHtml() {
        buildSync({
          minify: true,
          bundle: true,
          entryPoints: [join(process.cwd(), "src", "sw.js")],
          outfile: join(process.cwd(), "dist", "sw.js"),
        });
      },
    },
  ]
});

3. React Uygulamasını Oluşturma

Projeyi oluşturduktan sonra, kimlik doğrulama işlemleri için bazı dosyalar oluşturacağız.

src klasöründe Login.js ve App.js dosyalarını oluşturun ve aşağıdaki kodları ekleyin:

src/Login.js:

javascriptKodu kopyalaimport React, { useState } from 'react';

function Login({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Basit bir doğrulama işlemi (gerçek bir API'ye bağlanmanız önerilir)
    if (username === 'user' && password === 'pass') {
      onLogin(true);
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input 
          type="text" 
          value={username}
          onChange={(e) => setUsername(e.target.value)} 
        />
      </div>
      <div>
        <label>Password:</label>
        <input 
          type="password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)} 
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

src/App.js:

javascriptKodu kopyalaimport React, { useState } from 'react';
import Login from './Login';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <div>
      {isAuthenticated ? (
        <h1>Welcome to the app!</h1>
      ) : (
        <Login onLogin={setIsAuthenticated} />
      )}
    </div>
  );
}

export default App;

4. Projeyi Çalıştırma

Tüm dosyalar tamamlandığında, projeyi çalıştırmak için terminalden aşağıdaki komutu kullanın:

npm run dev

Tarayıcınızda açılan sayfada kullanıcı adı ve şifre ile giriş yapabilirsiniz. Kullanıcı adı user ve şifre pass olarak ayarlandı. Bu, basit bir kullanıcı doğrulama örneğidir ve gerçek projelerde daha güvenli bir çözüm kullanılmalıdır.