Vue Composition API ile Yeniden Kullanılabilir Fonksiyonlar (Composables)

Vue Composition API Nedir?

Vue.js, modern web uygulamaları geliştirmek için oldukça popüler bir JavaScript çerçevesidir. Vue Composition API, Vue 3 ile birlikte gelen ve uygulama geliştiricilerine daha esnek ve güçlü bir yapı sunan bir özelliktir. Bu API, bileşenleri daha iyi organize etmenizi ve kodunuzu daha modüler hale getirmenizi sağlar. Özellikle yeniden kullanılabilir fonksiyonlar (composables) oluşturma konusunda büyük avantajlar sunar.

Yeniden Kullanılabilir Fonksiyonlar (Composables) Nedir?

Yeniden kullanılabilir fonksiyonlar veya composables, Vue bileşenleri içinde birden fazla yerde kullanılabilen ve belirli işlevleri yerine getiren fonksiyonlardır. Bu fonksiyonlar sayesinde, uygulamanızda tekrarlayan kodları ortadan kaldırabilir ve uygulamanızın bakımını daha kolay bir hale getirebilirsiniz.

Composables Kullanımının Avantajları

• Modülerlik: Composables, belirli işlevleri bağımsız birimlere ayırarak uygulamanızın modüler yapısını korur.
• Test Edilebilirlik: Fonksiyonlar tek başlarına test edilebilir, bu da yazılım kalitesini artırır.
• Paylaşılabilirlik: Aynı fonksiyonları birden fazla projede kullanarak geliştirme sürecini hızlandırabilirsiniz.
• Kodun Okunabilirliği: Kod yapısına katkıda bulunarak, ekip içinde iş birliğini artırır.

Vue Composition API İle Composables Nasıl Oluşturulur?

Composables, Vue Composition API kullanılarak oldukça basit bir şekilde oluşturulabilir. Aşağıda örnek bir kullanım gösterilmektedir:

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return { count, increment, decrement };
}

Yukarıdaki örnekte, useCounter adında bir composable fonksiyonu tanımladık. Bu fonksiyon, bir sayaç oluşturarak artış ve azalış işlemlerini gerçekleştirmektedir. ref kullanarak sayacın değerini reaktif hale getiriyoruz.

Composables Kullanarak Basit Bir Bileşen Oluşturma

Oluşturduğumuz composable fonksiyonunu kullanarak basit bir Vue bileşeni oluşturabiliriz:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Artır</button>
    <button @click="decrement">Azalt</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return { count, increment, decrement };
  }
};
</script>

Bu basit bileşende, oluşturduğumuz composable fonksiyonunu kullanarak sayacı artırıp azaltma işlemlerini gerçekleştirdik. Bu, Vue Composition API ile yeniden kullanılabilir fonksiyonlar oluşturarak nasıl etkili bir geliştirme süreci izleyebileceğimizi göstermektedir.

Sonuç

Composables kullanarak daha modüler, okunabilir ve yeniden kullanılabilir kod yapıları oluşturabilirsiniz. Vue Composition API’nin sağladığı esneklik sayesinde, uygulama geliştirme süreçlerinizde önemli bir avantaj elde edebilirsiniz.

Vue Composition API Nedir?

Vue.js, günümüzün web geliştirme dünyasında yaygın olarak tercih edilen bir JavaScript framework'üdür. 2019 yılında piyasaya sürülen Vue 3 ile birlikte gelen Composition API, geliştiricilere daha güçlü ve esnek bir yapı sunmaktadır. Composition API, özellikle büyük ve karmaşık uygulamalarda bileşenlerin organizasyonunu kolaylaştırarak, daha temiz ve modüler bir kod yazma imkanı sağlar. Bunun yanı sıra, composable adı verilen yeniden kullanılabilir fonksiyonlar aracılığıyla farklı bileşenler arasında işlevsellik paylaşımını da kolaylaştırır.

Composables Nedir ve Neden Kullanılır?

Composables, Vue Composition API’nin sağladığı en büyük avantajlardan biridir. Birden fazla bileşen içinde tekrar tekrar kullanabileceğiniz işlevselliği kapsayan fonksiyonlardır. Uygulamanızın donanımını basit, tutarlı ve yeniden kullanılabilir hale getirmek amacıyle oluşturulurlar. Örneğin, bir API çağrısı veya bir form yönetimi gibi belirli işlevlerin birden fazla bileşende gerektirilmesi durumunda, composables kullanmak kod tekrarını en aza indirir ve bakım yükünü hafifletir.

Composables Kullanmanın Nedenleri

• Tekrar Kullanılabilirlik: Bir defa yazılan bir composable, farklı bileşenlerde tekrar tekrar kullanılabilir, bu da geliştirme sürecini hızlandırır.
• Separation of Concerns (Endişelerin Ayrılması): İşlevselliği ayrı birimler olarak organize etmek, kodun okunabilirliğini artırır ve hata ayıklamayı kolaylaştırır.
• Kodun Yönetilebilirliği: Uygulamanızın karmaşıklığını azaltır ve sadece gerekli olan bileşenleri etkileyerek yönetilebilirliği artırır.
• Performans İyileştirmeleri: Composables, yalnızca ihtiyaç duyulan bileşenlerde kullanılabilir, bu da gereksiz işleme yükünü azaltır.

Yeniden Kullanılabilir Fonksiyonların Avantajları

Composables, yalnızca işlevsel bir açıdan değil, birçok yönüyle yazılım geliştirme süreçlerine katkıda bulunur. Özellikle ekip içinde iş birliğini artırarak, ortak standartlar oluşturulmasını sağlar. İşte bu avantajların detayları:

Modüler Yapı ve Kodun Okunabilirliği

Composables, belirli bir işlevi gerçekleştiren kod parçalarını modüler hale getirir. Bu, kodun daha temiz ve okunaklı olmasını sağlar. Örneğin, bir kullanıcı oturumu yönetimi için bir composable oluşturduğunuzda, bu fonksiyonu tüm uygulamanızda kullanabilirsiniz; böylece kullanıcı oturumu ile ilgili kod parçalarını tek bir yerde bulundurmuş olursunuz.

Test Edilebilirlik ve Hata Ayıklama

Fonksiyonel testler, uygulama geliştirme sürecinin önemli bir parçasıdır. Composables, bağımsız fonksiyonlar olduğundan dolayı, her bir fonksiyonu kendi başına test etme imkanı sunar. Bu, yazılım kalitesini artırır ve hata ayıklama süreçlerini kolaylaştırır. Bir composable içindeki hata, diğer bileşenleri etkilemeden çözüme kavuşturulabilir.

Paylaşım ve İşbirliği

Birden fazla proje geliştiriyorsanız veya bir ekip halinde çalışıyorsanız, composables kullanmak işbirliği açısından büyük kolaylık sağlar. Ekip üyeleri, içeriklerini ve işlevselliklerini paylaşan ortak kod parçaları üzerinde çalışabilir, bu da geliştirme sürecini daha verimli hale getirir. Ayrıca, açık kaynak projeleri veya kütüphaneler geliştirmek istediğinizde de reusable fonksiyonlar sayesinde işlerinizi hızlandırabilirsiniz.

Vue Composition API ile Basit Bir Composable Örneği

Vue Composition API kullanarak basit bir composable oluşturmak, uygulama geliştirme sürecinizi daha pratik ve etkili hale getirebilir. Composables, Vue bileşenlerinizde tekrar eden işlevlerinizi merkezi bir noktada toplayarak kodunuzun tekrar kullanabilirliğini artırır. Aşağıdaki örnek, basit bir sayacın nasıl oluşturulacağını ve bu sayacın nasıl kullanılacağını göstermektedir.

import { ref } from 'vue';

export function useSimpleCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function reset() {
    count.value = 0;
  }

  return { count, increment, reset };
}

Yukarıdaki örnekte, useSimpleCounter adında bir composable fonksiyonu tanımladık. Bu fonksiyon, bir sayaç (count) oluşturuyor ve iki temel işlev (increment ve reset) sunuyor. ref kullanarak sayacın değerini reaktif hale getiriyor ve bu sayede bileşenlerimizde dinamik bir şekilde değişikliklerin görünmesini sağlıyoruz.

Composable Fonksiyonunun Kullanıldığı Bileşen

Oluşturduğumuz composable fonksiyonunu kullanarak bir bileşen tasarlayalım:

<template>
  <div>
    <p>Sayac: {{ count }}</p>
    <button @click="increment">Arttır</button>
    <button @click="reset">Sıfırla</button>
  </div>
</template>

<script>
import { useSimpleCounter } from './useSimpleCounter';

export default {
  setup() {
    const { count, increment, reset } = useSimpleCounter();
    return { count, increment, reset };
  }
};
</script>

Bu bileşende, useSimpleCounter fonksiyonunu kullandık. Kullanıcı sayacı artırabilir veya sıfırlayabilir. Bu, Vue Composition API ile composable fonksiyonları kullanarak nasıl verimli bir şekilde gelişim yapabileceğimizi gösteriyor.

Reaktif Veriler ile Composables Tasarlamak

Reaktif veriler, Vue'un en güçlü yönlerinden biridir. Composables'ınızı reaktif verilerle destekleyerek, dinamik karşılıklı etkileşimleri ve bileşenlerin güncellenmesini kolayca yönetebilirsiniz. Reactive veya ref kullanarak oluşturduğunuz verileri, UI bileşenlerinizle entegre etmek, kullanıcı deneyiminizi büyük ölçüde iyileştirir.

Reaktif Bir Örnek

Şimdi, bir form yöneticisi composable'ı oluşturalım:

import { reactive } from 'vue';

export function useForm() {
  const formData = reactive({
    name: '',
    email: '',
  });

  function updateField(field, value) {
    formData[field] = value;
  }

  return { formData, updateField };
}

Yukarıdaki örnekte, useForm fonksiyonu, form veri yapısını oluşturmakta ve alan güncellemeleri yapmak için bir işlev sunmaktadır. reactive ile oluşturduğumuz formData, bileşenlerin görünümünde anında değişikliklere olanak tanır.

Form Bileşeninin Kullanımı

Bu composable fonksiyonunu nasıl kullanacağımıza dair basit bir form bileşeni örneği:

<template>
  <div>
    <label>Ad:</label>
    <input type="text" v-model="formData.name" @input="updateField('name', formData.name)" />
    <br/>
    <label>E-posta:</label>
    <input type="email" v-model="formData.email" @input="updateField('email', formData.email)" />
    <br/>
    <p>Ad: {{ formData.name }} - E-posta: {{ formData.email }}</p>
  </div>
</template>

<script>
import { useForm } from './useForm';

export default {
  setup() {
    const { formData, updateField } = useForm();
    return { formData, updateField };
  }
};
</script>

Bu örnekte, kullanıcıdan ad ve e-posta bilgilerini alıyoruz. Kullanıcı her iki alanda değişiklik yaptığında, reaktif formData anında güncellenir ve bileşenimizin görünümünde değişiklikler hemen yansır.

Lifecycle Hooks ve Composables İlişkisi

Lifecycle hooks (yaşam döngüsü kancaları), Vue bileşenlerinin yaşam döngüsünün çeşitli aşamalarında belirli işlevlerin çalıştırılmasına olanak tanır. Composables ile birlikte lifecycle hooks kullanmak, uygulamanızın performansını ve işlevselliğini artırır. Composables içindeki hooks kullanarak, bileşenleriniz yüklenirken veya güncellenirken düzgün bir şekilde işlem yapabilirsiniz.

Örnek: Mounted Kancası ile Composable Kullanımı

Aşağıdaki örnekte, bir API'den veri çekmek için mounted kancasını kullanarak bir composable oluşturacağız:

import { onMounted, ref } from 'vue';

export function useFetchData(apiUrl) {
  const data = ref(null);
  const error = ref(null);

  onMounted(async () => {
    try {
      const response = await fetch(apiUrl);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  });

  return { data, error };
}

Bu örnekte, useFetchData ile mutlak bir API çağrısı yapıyoruz. onMounted kullanarak bileşen yüklendiğinde çağrıyı gerçekleştiriyoruz. Bu sayede, kullanıcıya gereken verileri zamanında gösterebiliyoruz.

Vue'da State Management için Composables Kullanımı

Vue.js, bileşen tabanlı mimarisi sayesinde güçlü bir yapı sunarken, state management da bu yapının önemli bir parçasını oluşturur. Vue Composition API, state management işlemlerini daha etkili bir şekilde yönetebilmek için composables kullanma imkanı sunar. State management, uygulamanızın veri akışını kontrol etmenize yardımcı olurken, composables bu verileri yönetmek için esnek bir yol sağlar.

Composables İle State Yönetimi

Uygulamalarınızda birden fazla bileşen arasında veri paylaşmanız gerektiğinde, state management oldukça önemlidir. Composables, birden fazla bileşenin erişebileceği merkezi bir veri yapısı sunmak için mükemmel bir yol sağlar. Bu yöntemle, bileşenlerinizde tekrarlayan veri yönetimi kodlarını ortadan kaldırarak, kodunuzu modüler hale getirebilirsiniz. Aşağıda basit bir state management composable örneği verilmiştir:

import { reactive } from 'vue';

export function useGlobalState() {
  const state = reactive({
    user: null,
    isAuthenticated: false,
  });

  function login(user) {
    state.user = user;
    state.isAuthenticated = true;
  }

  function logout() {
    state.user = null;
    state.isAuthenticated = false;
  }

  return { state, login, logout };
}

Yukarıdaki örnekte, useGlobalState fonksiyonu, kullanıcı bilgilerini ve kimlik doğrulama durumunu takip etmek için bir reactive nesne oluşturur. Böylelikle, bileşenleriniz bu state bilgilerine erişebilir ve değiştirebilir. Örneğin:

<template>
  <div>
    <p v-if="state.isAuthenticated">Hoş geldin, {{ state.user.name }}!</p>
    <button v-if="!state.isAuthenticated" @click="login({ name: 'Ahmet' })">Giriş Yap</button>
    <button v-if="state.isAuthenticated" @click="logout">Çıkış Yap</button>
  </div>
</template>

<script>
import { useGlobalState } from './useGlobalState';

export default {
  setup() {
    const { state, login, logout } = useGlobalState();
    return { state, login, logout };
  }
};
</script>

State Management için En İyi Uygulamalar

• Yalnızca Gerekli Verileri Saklayın: State içerisinde yalnızca gerekli olan bilgileri tutmak, uygulamanızın performansını artıracaktır.
• Fonksiyonlarınızı Temiz ve Anlaşılır Tutun: Composable fonksiyonlarınızı kısa ve anlaşılır tutarak, ekip üyeleri arasında iş birliğini kolaylaştırabilirsiniz.
• Reaktif Yapılar Kullanın: Reactive ve ref kullanarak veri yönetimini daha etkili bir hale getirin.

Composables ile Performansı Artırmanın Yolları

Uygulama performansını artırmak, kullanıcı deneyimini iyileştirmenin en kritik yollarından biridir. Composables, performansı direkt olarak etkileyen bir dizi avantaj sunmaktadır. Bu bölümde, Vue.js ile geliştirilen uygulamalarda performansın nasıl artırılacağını ele alacağız.

Sağlam bir Modüler Yapı Oluşturma

Composables, kodunuzu modüler hale getirerek, yalnızca ihtiyaç duyulan bileşenleri yüklemenize olanak tanır. Bu, gereksiz verilerin ve bileşenlerin yüklenmesini engelleyerek uygulamanızın hızını artırır. Örneğin, lazy loading (tembel yükleme) ile bileşenlerinizi ihtiyaç duyulduğunda yükleyerek, başlangıçtaki yükleme süresini önemli ölçüde azaltabilirsiniz.

Reaktif Veri Yönetimi ile Performans İyileştirmeleri

Reaktif veri yapıları kullanmak, uygulamanızda veri değişiklikleri olduğunda yalnızca etkilenen bileşenlerin güncellenmesini sağlar. Bu durum, uygulamanızın hızlı yanıt vermesine yardımcı olur ve gereksiz yeniden render işlemlerini önler. Composables kullanarak bu reaktif yapıları uygulamak, performansı artırmak için harika bir stratejidir.

Cache Kullanımı ile Yanıt Sürelerini Kısaltma

Bazı durumlarda, bir API çağrısının sonucunu önceden almak ve bunu tekrar kullanmak performansı artırabilir. Composables ile veri önbellekleme mekanizmaları oluşturmak, tekrarlayan API çağrılarını ortadan kaldırmanın yanı sıra, kullanıcı deneyimini de iyileştirir. Örneğin, bir API'den gelen liste verilerini bir cache yapısında saklayabilirsiniz:

const cache = new Map();

export function useFetchWithCache(apiUrl) {
  const data = ref(null);
  const error = ref(null);

  async function fetchData() {
    if (cache.has(apiUrl)) {
      data.value = cache.get(apiUrl);
      return;
    }
    try {
      const response = await fetch(apiUrl);
      data.value = await response.json();
      cache.set(apiUrl, data.value);
    } catch (err) {
      error.value = err;
    }
  }

  onMounted(fetchData);

  return { data, error };
}

Uygulama İçi Event Yönetimi için Composables

Uygulamanızda kullanıcı etkileşimlerini yönetmenin etkili bir yolu da composables kullanmaktır. Event yönetimi, bileşenler arasındaki etkileşimleri düzenlemek ve kullanıcı deneyimini sürekli hale getirmek için gereklidir. Composables ile, olayları merkezi bir yere toplayarak yönetmek mümkündür.

Event Emit ve Handlers Kullanımı

Vue bileşenleri arasında veri iletimi, $emit ile gerçekleşir. Composables, bu emit işlemlerini yönetmek için etkili bir yöntem sunar. Örneğin, bir bileşenin tetiklediği olayları yönetmek için bir composable oluşturabilirsiniz:

import { ref } from 'vue';

export function useEventEmitter() {
  const events = ref({});

  function emit(eventName, data) {
    if (!events.value[eventName]) { events.value[eventName] = []; }
    events.value[eventName].forEach(callback => callback(data));
  }

  function on(eventName, callback) {
    if (!events.value[eventName]) { events.value[eventName] = []; }
    events.value[eventName].push(callback);
  }

  return { emit, on };
}

Yukarıdaki örnekte, kullanıcının tetiklediği olayları yakalamak ve işlemek için bir composable yapı oluşturduk. Bu sayede, olay yönetimini basit bir hale getirerek kodun okunabilirliğini artırabiliriz.

Test Edilebilirlik: Composables Nasıl Daha Kolay Test Edilir?

Composables, Vue.js uygulamalarında modüler ve işlevsel kod yapıları oluşturarak test edilebilirliği önemli ölçüde artırır. Geliştiriciler, composables kullanarak belirli işlevleri tek başlarına test edebilir, böylece yazılımın genel kalitesini artıracak şekilde etkili bir test süreci yürütebilir.

Bağımsız Fonksiyonlar ile Test Süreci

Composables, yazılım geliştirmenin test edilmesi gereken bölümleri olan bağımsız fonksiyonlar olarak tanımlanabilir. Her bir fonksiyon, belirli bir işlevi yerine getirdiği için, bu fonksiyonlar üzerinde birim testleri (unit tests) gerçekleştirilebilmektedir. Örneğin, bir kullanıcı girişi işlemini yöneten useAuth fonksiyonu yazdığınızda, bu fonksiyona ait giriş ve çıkış işlemlerini test edebilirsiniz.

Jest ile Test Edilebilirlik

Test sürecini kolaylaştırmak adına, populär bir test kütüphanesi olan Jest ile composables test edilebilir. Jest kullanarak her bir fonksiyonun istediğiniz gibi çalışıp çalışmadığını kontrol edebilirsiniz. Aşağıdaki örnek ile composables üzerine nasıl basit testler yazabileceğinizi gösterelim:

import { useAuth } from './useAuth';

test('User Login', () => {
  const { login } = useAuth();
  const result = login('[email protected]', 'password123');
  expect(result).toBe(true);
});

Mocking ile Test Sürecini Kolaylaştırma

Dış bağımlılıkları azaltmak için mocking yöntemlerini de kullanabilirsiniz. Örneğin, bir API çağrısını test etmek istiyorsanız, API'yi taklit ederek testlerinizi daha kontrollü hale getirebilirsiniz. Bu sayede, composable fonksiyonlarınızın yalnızca iç işleyişine odaklanarak test edebilirsiniz.

Composables ile Daha Temiz ve Modüler Kod Yazma

Vue Composition API ile composables kullanmanın en büyük avantajlarından biri, daha temiz ve modüler bir kod yapısı oluşturmaktır. Geliştiriciler, belirli işlevleri modüler hale getirerek kodlarının okunabilirliğini artırabilir.

Modüler Yapının Sağladığı Avantajlar

Composables, belirli işlevselliği kapsadığı için uygulamanızın yapı taşlarını düzenlemeye yardımcı olur. Bu modüler yapı, kodun yeniden kullanılabilirliğini artırırken, aynı zamanda ekip içinde iş birliği yapılmasını kolaylaştırır. Örneğin, bir form yönetimi için oluşturduğunuz bir composable, birkaç bileşen içinde aynı şekilde kullanılabilir.

Fonksiyonlar ile Kodun Temizliği

Her bir composable, bir işlevi ilk başta ortadan kaldırarak, kodun daha sade bir şekilde yazılmasını sağlar. Aynı fonksiyonların birden çok kez yazılması yerine, tek bir yerde toplanarak bakımı ve güncellemeyi kolaylaştırır. Bu, yazılım geliştirme sürecinde zaman kaybını önler ve verimliliği artırır.

Projelerde Composables Kullanımı İle İlgili En İyi Uygulamalar

Composables, Vue 3 ile birlikte modern geliştiricilere önemli bir araç sunmaktadır. Ancak, doğru şekilde kullanılmadığında karmaşık yapılar oluşturma riski taşımaktadır. İşte projelerinizde composables kullanırken dikkate almanız gereken en iyi uygulamalar:

• İyi Belgelendirme: Composables'larınızı kullanırken, her bir fonksiyon hakkında detaylı belgeler ve açıklamalar sunmalısınız. Bu, ekip üyelerinin fonksiyonları anlamasını ve kullanımını kolaylaştırır.
• Üst Düzey Modülerlik: Composables içindeki işlevselliği daha genel hale getirin ki geniş kapsamlı projelerde kullanılabilsin. Bu sayede, farklı bileşenlerin ihtiyaçlarını karşılayabilirsiniz.
• Performansa Dikkat: Reaktifleştirdiğiniz verilerin büyük veri setlerine sahip olabilen fonksiyonlarda performansı artırmak önemlidir. Gereksiz yeniden işleme veya yüklemelerden kaçının.
• Hata Yönetimi: Composables fonksiyonlarında hata yakalama mekanizmaları ekleyin. Bu, uygulamanızın daha sağlam olmasına olanak tanır. Geliştirici ve kullanıcı deneyimini iyileştirir.

Bu uygulamalar, yapılandırmalarınızı optimize eder ve ekip içindeki projelerde tutarlılığı artırır. Composables, düzgün bir şekilde kullanıldığında, yazılım geliştirme sürecinde önemli bir görev üstlenir ve projenizin genel kalitesini artırır.

Sonuç

Vue Composition API, modern web geliştirme süreçlerinize esneklik, modülerlik ve yeniden kullanılabilirlik kazandırarak uygulama geliştirme sürecini önemli ölçüde iyileştirir. Composables kullanarak, kodunuzu daha temiz ve modüler hale getirirken, ekip içindeki iş birliğinizi ve geliştirme hızınızı artırabilirsiniz. Reaktif veri yönetimi, yaşam döngüsü kancaları ve state management gibi özelliklerle zenginleştirilmiş composables, uygulamanızın performansını ve kalitesini doğrudan etkileyen güçlü araçlardır.

Özet

Bu makalede, Vue Composition API'nin sunduğu composables kavramını detaylı bir şekilde inceledik. Composables, belirli işlevleri kapsayan ve yeniden kullanılabilir yapı taşları olarak işlev görür. Uygulamalarınızda bunları kullanarak, modüler bir yapı elde edebilir, kod tekrarını azaltabilir, test edilebilirliği artırabilir ve performansı optimize edebilirsiniz. İyi belgelenmiş ve modüler bir yapı ile composables, geliştiricilerin daha verimli çalışmasına olanak tanır. Sonuç olarak, Vue.js ile uygulama geliştirme süreçlerinizi güçlendirmek için composables'ı etkili bir şekilde kullanmanızı öneririz.