30 Nisan 2020 Perşembe

React Native (4) - Hooks ve ClassComponent ile stateden değer yazmak ve okumak

Merhaba,
bu yazımda react native ile state'e değer set etmeyi ve bu değeri  stateten okumayı paylaşacağım.
ClassComponent yapısıyla ve Hooks yapısıyla state üzerindeki değeri hem  değiştirerek hem de okuyarak ekrana yazdıracağız.

Aşağıdaki adımları takip ederek sizde projenizde state set/get işlemlerini uygulayabilirsiniz.

ilk olarak react native ile bir proje oluşturun.
$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.
$ cd someProject

kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component, useState} from 'react';
import {StyleSheet, Text, TextInput, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Login />
        <LoginHooks />
      </View>
    );
  }
}

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.state.username}</Text>
        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({username: text})}
        />
      </View>
    );
  }
}

export const LoginHooks = props => {
  const [username, setUsername] = useState();
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{username}</Text>
      <TextInput
        style={styles.input}
        onChangeText={text => setUsername(text)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    margin: 20,
    backgroundColor: 'skyblue',
  },
  input: {height: 40, borderWidth: 1, marginBottom: 10},
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
  },
});


birkaç önemli kısım:

  • useState methodunu React tan import ederek bu method  aracılığıla hooks yapısında state değişikliği yapılır.
  • state'te tutulan değer yine useState methodu aracılığıyla alınır.
  • cons [x,y] = useState(); şeklindeki tanımda x değer y ise bu değeri güncelleyecek fonksiyondur.
  • ClassComponent yapısında ise yine constructor üzerinde state objesi oluşturulur.
  • const {x} = this.state ile ClassComponent'e tutulan state değerlerine erişilir.
  • state teki x değerini ClassComponent yapısında değiştirmek için ise this.setState({x:<VALUE>}) şeklinde  kodlama yapmak gerekir.


github(state) : https://github.com/lvntyldz/tutorials/tree/3-react-hooks-setstate/react-native-hooks-examples

github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples


React Native (3) - Hooks ve ClassComponent ile stateden değer almak

Merhaba,
bu yazımda react native ile state te değer tutmayı paylaşacağım. ClassComponent yapısıyla ve Hooks yapısıyla state üzerindeki değeri okuyarak ekrana yazdıracağız.

Aşağıdaki adımları takip ederek hem hooks tan hemde ClassComponent ten message içeriğini alarak ekrana yazdırmayı görebilirsiniz.

ilk olarak react native ile bir proje oluşturun.
$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.
$ cd someProject

kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
import React, {Component, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export const MessagesHooks = props => {
  const [message, setMessage] = useState(
    'Hello from MessagesHooks - This is state message',
  );

  return (
    <View style={styles.hook}>
      <Text style={styles.paragraph}>{message}</Text>
    </View>
  );
};

export class Messages extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Messages - This is state message',
    };
  }

  render() {
    return (
      <View style={styles.message}>
        <Text style={styles.paragraph}>{this.state.message}</Text>
      </View>
    );
  }
}
export default class App extends Component {
  render() {
    return (
      <View style={styles.main}>
        <Messages />
        <MessagesHooks />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
  },
  hook: {
    flex: 1,
    backgroundColor: 'skyblue',
  },
  message: {
    flex: 1,
    backgroundColor: 'steelblue',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
  },
});


birkaç önemli nokta:

  • ClassComponent ile state oluştururken bir constructor tanımlanır ve bu constructor içinde state oluşturulur.
  • ClassComponent'in içinden yada render methodundan this.state diyerek state teki değerler okunabilir.
  • Hooks yapısında state kullanabilmek için ilk olarak React tan useState methodunu import etmek gerekmektedir.
  • useState import edildikten sonra  hooks methodunun içinde const [message, setMessage] = useState(...); şeklinde tanımlamayla message değerinin state te tutulacağını ve bunun setMessage methoduyla güncelleneceği belirtilir.
  • Hooks ile state kullanımı yapılırken  useState fonksiyonuna verilen parametre state' in inital değeri olmaktadır. useState("varsayilan değer");

github(state) : https://github.com/lvntyldz/tutorials/tree/2-react-hooks-usestate/react-native-hooks-examples
github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples






React Native (2) - React Navigation ile Hooks ve ClassComponent ekranlarını gösterme

Merhaba,
bu yazımda react native ile geliştirdiğiniz uygulamalarınıza  react navigation'ı nasıl implemente edeceğinizi paylaşacağım.
React Navigation aracılığıyla ClassComponent ten Hooks ekranına, hooks ekranından da ClassComponent ekranına geçiş yapacağız.

ilk olarak react native ile bir proje oluşturun.
$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.
$ cd someProject

react navigation'ı projenize ekleyin
$ npm install @react-navigation/native
$ npm install @react-navigation/stack

react navigation kullanmak için gereken bağımlılıkları ekleyin.
$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

60 öncesi react native versiyon kullanıyorsanız aşağıdaki komutla linkleme yapın.
$ react-native link

MAC ve iOS ile çalışıyorsanız aşağıdaki komutla iOS bağımlılıklarını indirin.
$ npx pod-install ios

touch ile src dizininde bir wrapper component oluşturun. Bu componentin içinde diğer componentleri load edeceğiz.
$ touch src/wrapper/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

export default class Wrapper extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="HomeHooks" component={HomeHooks} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export const HomeHooks = props => {
  return (
    <View>
      <Text style={styles.paragraph}>Hello from HomeHooks</Text>
      <Button
        onPress={() => props.navigation.navigate('Home')}
        title="GoToHome"
      />
    </View>
  );
};

export class Home extends Component {
  render() {
    return (
      <View>
        <Text style={styles.paragraph}>Hello from Home</Text>
        <Button
          onPress={() => this.props.navigation.navigate('HomeHooks')}
          title="GoToHomeHooks"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
  },
});


ios simulatorü ile veya android emulatoru ile sonucu gözlemlemek için projeyi çalıştırın.

iOS
$ react-native run-ios

andorid
$ react-native run-android


github: https://github.com/lvntyldz/tutorials/tree/react-navigation-impl/react-native-hooks-examples

React Native (1) - Hooks ve ClassComponent ile ayrı ayrı HelloWorld uygulaması

Herkese merhaba,
bu yazımda react 16.8 ile birlikte gelen hooks yapısına kısa bir giriş yapacağız.
Önce ekrana "Hello World" yazan bir classComponent oluşturacağız ardından da aynı işi yapan Hooks fonksiyonunu yazacağız.

NOT: vakit bulursam hooks yapısıyla alakalı birkaç  yazı daha yazıp bir seri haline getirerek github üzerinde paylaşacağım.

Proje yapısı aşağıdaki şekilde olacaktır.
├── package.json
└── src
    ├── screens
    │   ├── Home
    │   │   ├── Class
    │   │   │   └── index.js
    │   │   └── Hooks
    │   │       └── index.js
    │   └── package.json
    └── wrapper
        └── index.js


ilk olarak react native ile bir proje oluşturun.
$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.
$ cd someProject

src/screens adında bir dizin oluşturun. Ardından burada bir package.json dosyası oluşturun.
$ mkdir src/screens/ && touch package.json

package.json dosyasının içeriğini aşağıdaki şekilde güncelleyin.
{
  "name": "appScreen"
}

touch ile HomeHooks fonksiyonunu tanımlamak için Hooks dizininde index.js adında bir dosya oluşturun
$ touch src/screens/Home/Hooks/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
import * as React from 'react';
import {StyleSheet, Text} from 'react-native';

export const HomeHooks = () => {
  return <Text style={styles.paragraph}>Hello from HomeHooks</Text>;
};

const styles = StyleSheet.create({
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
  },
});

touch ile Home class'ını  tanımlamak için Class dizininde index.js adında bir dosya oluşturun
$ touch src/screens/Home/Class/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
import React, {Component} from 'react';
import {StyleSheet, Text} from 'react-native';

export default class Home extends Component {
  render() {
    return <Text style={styles.paragraph}>Hello from Home</Text>;
  }
}

const styles = StyleSheet.create({
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
  },
});

touch ile src dizininde bir wrapper component oluşturun. Bu componentin içinde diğer componentleri load edeceğiz.
$ touch src/wrapper/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
import React, {Component} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Home from 'appScreen/Home/Class';
import {HomeHooks} from 'appScreen/Home/Hooks';

export default class Wrapper extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Home />
        <HomeHooks />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


Dikkat edilmesi gereken birkaç nokta:

  • Class olarak component tanımlaması yapılırsa bu class React.Componenti extend etmelidir. Hooks yapısında fonksiyon olarak tanımlandığı için extend yoktur.
  • Class olarak tanımlanan componentin render methodu olmalıdır. Hooks yapısında direk değer return edilmelidir.
  • src/screens/Home/Class/index.js dosyasında Class export edilerek ve React.Component'i extend ederek bir component oluşturuldu.
  • src/screens/Home/Hooks/index.js dosyasında ise fuction export edilerek bir component oluşturuldu.
  • Wrapper component içine import ederken Hooks ile oluşturulan component method tabanlı olması nedeniyle  direkt kullanım için süslü parantezler kullanılarak import edildi.  
  • Style tanımlama da dahil olmak üzere diğer kullanımların tamamı aynı şekildedir.

github: https://github.com/lvntyldz/tutorials/tree/1-react-hooks-hw/react-native-hooks-examples



28 Nisan 2020 Salı

Docker üzerinde wordpress kurulumu ve lokalden wordpress dosyalarının güncellenmesi

Merhaba,
bu yazımda sizlere docker üzerinde wordpress'in nasıl kurulacağını paylaşacağım.
Wordpress ile birlikte phpMyAdmin ve MySQL veritabanını da yine bir docker container'ı olarak çalıştıracağız. Wordpress'i çalıştıdığımız container da volume tanımlaması yaparak localden container üzerindeki dosyaları güncellemiş olacağız. Yani localinizde yaptığınız değşiklikler container üzerinde çalışan wordpress projesine yansımış olacak.

Terminali açıp aşağıdaki adımları takip ederek kurulumu gerçekleştirebilirsiniz.

ilk olarak kurulum için bir dizin oluşturun ve komut satırından bu dizine gidin
$ mkdir docker-wordpress-setup && cd  docker-wordpress-setup


Gerekli tanımlamaları yapmak için docker-compose.yaml adında bir dosya oluşturun.
$ touch docker-compose.yaml


DB(MySQL), phpMyAdmin ve Wordpress kurulumunu sırasıyla yapan aşağıdaki içeriği docker-compose.yaml dosyasına ekleyin.

version: '3.7'

volumes:
wpDbData:
networks:
wpNetwork:

services:
# DB Service
db:
image: mysql:5.7
volumes:
- wpDbData:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: a12345
MYSQL_DATABASE: wordpress
MYSQL_USER: wpuser
MYSQL_PASSWORD: wppassword
ports:
- 8889:3306
restart: always
networks:
- wpNetwork
# phpmyadmin
phpmyadmin:
depends_on:
- db
image: phpmyadmin/phpmyadmin:5.0.2
environment:
PMA_HOST: db
MYSQL_USER: wpuser
MYSQL_PASSWORD: wppassword
MYSQL_ROOT_PASSWORD: a12345
ports:
- 8081:80
restart: always
networks:
- wpNetwork
# wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- 8082:80
- 443:443
restart: always
environment:
WORDPRESS_DB_HOST: db
WORDPRESS_DB_USER: wpuser
WORDPRESS_DB_PASSWORD: wppassword
volumes: ['./:/var/www/html']
networks:
- wpNetwork
container_name: wordpress-site



docker-compose up komutuyla MySQL,phpMyAdmin ve wordpress'i ayağa kaldırın
$ docker-compose up -d

 -d: detach

 Bu işlemden sonra bilgisayarınızda docker-compose.yaml'ın yanında wordpress dosyalarını görebilirsiniz. Buradaki wordpress dosyalarında değişiklik yaptıkça container üzerinde de yansıdığını göreceksiniz.

phpMyAdmin erişimi için web browser dan   http://localhost:8081 adresini ziyaret edebilirsiniz.
WordPress'e erişerek Setup'ı başlatmak için http://localhost:8082 adresini ziyaret edebilirsiniz.

 NOT: Bir volume oluşturdukdan sonra DB connection parametrelerinde bir değişiklik yaparsanız bir önceki volume'ü aşağıdaki komutla tahliye edebilirsiniz.
$ docker-compose down --volumes


gitHub: https://github.com/lvntyldz/docker-wordpress-setup


25 Nisan 2020 Cumartesi

Terminal üzerinden Xcode'u sıfırlama yada tümüyle kaldırma işlemi

Merhaba,
bu yazımda sizlere xcode'u sıfırlamak ve tüm bileşenleriyle birlikte OSX üzerinden kaldırmayı paylaşacağım. Aşağıda paylaştığım komutları sıyasıyla terminal üzerinden çalıştırmanız durumunda işlem başarıyla gerçekleşecektir.

Aşağıdaki adımları takip ederek xcod'u ilk kurulum anına geri döndürebilirsiniz.

$ defaults delete com.apple.dt.Xcode

yada  (eski versiyonlar için)

$ defaults delete com.apple.Xcode

Eğer xcode sıfırlanmadıysa aşağıdaki adımlarla manuel resetleme yapabilirsiniz.
$ rm -rf  ~/Library/Developer/Xcode/DerivedData/ModuleCache
$ rm -rf $HOME/Library/Application Support/Developer/Shared/Xcode
$ rm -rf $HOME/Library/Saved\ Application\ State/com.apple.dt.Xcode.savedState
$ rm -rf $HOME/Library/Preferences/com.apple.dt.Xcode.*
$ rm -rf ~/Library/Developer/Xcode/DerivedData


Xcode'u tüm bileşenleri ve ayarlarıyla birlikte silmek için aşağıdaki adımları takip edebilirsiniz.
$ sudo rm -rf /Applications/Xcode.app
$ sudo rm -rf /Library/Preferences/com.apple.dt.Xcode.plist
$ sudo rm -rf ~/Library/Preferences/com.apple.dt.Xcode.plist
$ sudo rm -rf ~/Library/Caches/com.apple.dt.Xcode
$ sudo rm -rf ~/Library/Application Support/Xcode
$ sudo rm -rf ~/Library/Developer
$ sudo rm -rf ~/Library/MobileDevice
$ sudo rm -rf /System/Library/Receipts/com.apple.pkg.XcodeExtensionSupport.bom
$ sudo rm -rf /System/Library/Receipts/com.apple.pkg.XcodeExtensionSupport.plist
$ sudo rm -rf /System/Library/Receipts/com.apple.pkg.XcodeSystemResources.bom
$ sudo rm -rf /System/Library/Receipts/com.apple.pkg.XcodeSystemResources.plist
$ sudo rm -rf /private/var/db/receipts/com.apple.pkg.Xcode.bom


21 Nisan 2020 Salı

Docker üzerinde Postgresql çalıştırma ve yedekleme işlemi

Merhaba,
bu yazımda sizlere docker üzerinde postgresql'i ayağa kaldırmayı ve docker üzerinde çalışan DB'in verilerini kendi bilgisayarınıza kaydetmeyi paylaşacağım.

ilk olarak official postgres image'ını dockerhub tan çekip postgres1 adında bir container oluşturacağız.  postgres1'i container olarak çalıştırıp üzerinde çeşitli değişiklikler yaptıktan sonra container'a ait volume dosyalarını alıp  container'ı sileceğiz.

Daha sonra yeniden postgres image'ından postgres2 adında bir container oluşturacağız. 2. container'ı oluştururken  bir önceki container dan aldığımız volume dosyasını kullanacağız. Bu sayede eski kayıtların yeni container da başarılı bir şekilde erişilebilir olduğunu göreceğiz.

Aşağıdaki işlemleri terminal üzerinde yaparak adımları ve sonuçlarını gözlemleyebilirsiniz.

Docker hub üzerinden postgres image'ını çekerek postgres1 adında bir container oluşturun.
$ docker run -d -p 5432:5432 -v postgres-data:/var/lib/postgresql/data  --name postgres1 postgres 

  -v: parametresi ile oluturacağınız volume dosyasının adını ve adresini belirtin

postgres1'in loglarına bakarak container'ın son durumu hakkında bilgiler edinebilirsiniz
$ docker logs postgres1 

oluşturduğunuz container'ı çalıştırın
$ docker exec -it postgres1 sh 

-it : interactive terminal(çalıştırdığınız container'ın içinde sh komutlarını çalıştırmak için)

mydb adında bir veri tabanı oluşturun
 $ createdb -U postgres mydb

Bir postgres CLI(Command Line Interface) aracı olan psql ile oluşturduğunuz veritabanına bağlanın
 $ psql -U postgres mydb

bağlantı işleminden sonra list database anlamındaki \l komutunu çalıştırın
$ \l 

Veritabanı versiyonunu görmek için aşağıdaki komutu çalıştırabilirsiniz
 $ select version();

mydb içerisinde id ve name sütunları olan people adında bir tablo oluşturun
$ CREATE TABLE people (id int, name varchar(80));

Oluşturduğunuz tabloya name:mark ve id:1 olacak şekilde bir kayıt girin(insert).
$ INSERT INTO people (id,name) VALUES (1, 'Mark'); 

Aşağıdaki select cümlesini çalıştırarak insert ettiğiniz kaydı görebilirsiniz.
$ SELECT * FROM people; 

\q  komutunu çalıştırarak psql tool'undan çıkış yapın
$ \q 

exit komutuyla container dan da çıkış yapın
$ exit 

container'ı restart edin
$ docker stop postgres1 

$ docker start postgres1 

container'ı kapatıp tekrar ayağa kaldırdığımızda veriler kaybolmayacaktır.

volume inspect komutunu çalıştırarak oluşturduğunuz volume dosyasının bilgilerine erişilebilirsiniz
$ docker volume inspect postgres-data 

çıktı:
[
    {
        "CreatedAt": "2020-02-07T16:03:34+03:00",
        "Driver": "local",
        "Labels": null,
        "Mountpoint": "/var/lib/docker/volumes/postgres-data/_data",
        "Name": "postgres-data",
        "Options": null,
        "Scope": "local"
    }


Docker'ı host ettiğiniz(kişisel bilgisayarınız) makinenin terminalinden _data dizininin içeriğine ls komutuyla bakabilirsiniz
$ ls /var/lib/docker/volumes/postgres-data/_data/

Bilgisayarınızda oluşturduğunuz postgres1 adlı container'ı silin
$ docker rm -f postgres1 

bu durumda veriler kişisel bilgisayarınızda kalacaktır. Herhangi bir veri kaybı olmayacaktır.

Elinizde bulunan volume verisini attach ederek postgres2 adında bir container oluşturun.
$ docker run -d -p 5432:5432 -v postgres-data:/var/lib/postgresql/data --name postgres2 postgres 

oluşturduğunuz postgres2 adlı container'ı çalıştırıp ssh üzerinden bağlanın
 $ docker exec -it postgres2 sh

psql aracı ile tekrar veritabanına bağlanın
 $ psql -U postgres mydb

Aşağıdaki select sorgusunu çalıştırdığınızda Herhangi bir veri kaybı olmadığını görebilirsiniz.
 $ SELECT * FROM people;


kaynak:https://markheath.net/post/exploring-postgresql-with-docker