Ümit Ünver

Merhaba, eğer bir front-end geliştirici iseniz ve back-end bilginiz az ise muhtemelen kendi projelerinizi geliştirirken zorlanıyor olabilirsiniz. Bu yazımda sizlere birçok geliştiricinin hayat kurtarıcısı açık kaynak veri yönetimi sağlayan Directus Api’nin kurulumu hakkında bilgi vereceğim.

Directus Api ile birçok proje geliştirebilirsiniz, mesela ben e-ticaret uygulaması geliştirdim. İstediğim endpointi oluşturabiliyorum. Authentication sisteminin olmasıda zaten baya bir yük alıyor üzerimden. Belki diğer yazılarımda Directus Api hakkında daha detaylı bilgi veriririm fakat şu anda sadece DigitalOcean’dan almış olduğumuz droplete Directus Api’yi nasıl kuracağımızı anlatacağım.

1. İlk olarak DigitalOcean’dan yeni bir proje oluşturuyoruz.
Sol menüden ‘New Project’

2. ‘Skip For Now’ diyoruz.

3. Yeni bir Droplet oluşturuyoruz.

Yeni Droplet oluşturma sayfası;

İlk olarak sunucunun nerede olacağını belirliyoruz. Konumunuza en yakın yeri seçmeniz en mantıklı olanı. O yüzden ben Frankurt‘u seçiyorum.

Sunucunun işletim sitemini Ubuntu olarak seçiyoruz.

Choose Size’ı başlangıç olarak Basic plan seçebilirsiniz. İleride projeniz tutarsa sunucu için tekrardan bilgisi olan birisinden destek alabilirsiniz.

Regular ve Aylık 6 dolar ödeyeceğim paketi seçiyorum. Özellikleri geliştirme aşamasında gayet yeterli performans sunuyor. Fakat şöyle bir önemli nokta var; bunu dikkate alın!

Directus Api projeyi ayağa kaldırırken Ram yetersiz kalıyor, o yüzden 6 Dolar paketi satın aldıktan sonra Directus Api’yi kurana kadar Sunucu özelliklerini aylık 12 Dolara satılan pakete yükseltiyorum. Bunu neden baştan almıyorsun diyebilirsiniz.. çünkü bir kere böyle yaptığımda tekrardan aylık 6 dolara düşürmeme izin vermemişti. Ama 6 dolara alınca 12’ye çıkarıp tekrardan 6’ya rahatlıkla düşürebiliyorsunuz. Umarım anlatabilmişimdir 🙂

Sunucu şifremizi belirliyoruz.

Sunucu kurulumu sırasında son aşamaya geldik, burada hostname kısmında sunucunuza ait özellikler yazmaktadır oraya istediğiniz anahtar kelimeleri yazabilirsiniz. Daha sonrasından Create Droplet butonuna basıp sunucunuzun kurulmasını bekleyin.

metro-file-map: Watchman crawl failed. Retrying once with node crawler.

Usually this happens when watchman isn’t running. Create an empty .watchmanconfig file in your project’s root folder or initialize a git or hg repository in your project.

Böyle bir hata alıyorsanız çözümü basit;

Terminali açıyorsunuz..
1. watchman watch-del-all
2. watchman shutdown-server

Sorun çözüldü!

react-native.config.js dosyamızı ana dizine oluşturuyoruz ve aşağıdaki kodu yazıyoruz.

module.exports = {
    project: {
      ios: {},
      android: {},
    },
    assets: ['./assets/fonts/'],
  };
  
Ana dizine assets/fonts klasörü açıyoruz ve fontları assets/fonts klasörünün içerisine yüklüyoruz. Örnek;

Daha sonra src klasörün içerisinde constants klasörü açıp Fonts.js dosyasını oluşturuyoruz ve fontlarımızı typelara karşılık gelecek şekilde ayarlıyoruz..

src/constants/Fonts.js

const Fonts = {
  regular: 'Poppins-Regular',
  bold: 'Poppins-Bold',
  light: 'Poppins-Light',
  medium: 'Poppins-Medium',
};

export default Fonts;

Projemizin terminaline npx react-native-asset komutu çalıştırıyoruz ve projeyi cihazdan silip tekrar npx react-native run-android yapıyoruz.

Kullanımı

Burada CustomText componenti oluşturdum. Dışarıdan props vererek fontWeight gibi değişiklikleri yapabilirsiniz.

import React from 'react';
import {StyleSheet, Text} from 'react-native';
import Fonts from '@src/constants/Fonts'; 

const CustomText = props => {
  return (
    <Text {...props} style={[styles.default, props.style]}>
      {props.children}
    </Text>
  );
};

const styles = StyleSheet.create({
  default: {
    fontFamily: Fonts.bold, // default olarak bold gelsin istiyorum.
  },
});

export default CustomText;

Not: en son npx react-native-asset yapmayı unutmayın.