caylakyazilimci

[caylakyazilimci]

typescript nedir? nasıl kullanılır ?

TypeScript, JavaScript'in tüm özelliklerini içerirken, statik tip tanımlamaları ekleyerek kodun daha okunabilir, anlaşılabilir ve güvenli olmasını sağlar. Derleme anında ve idenizde kullanırken hatalı tanımlamalarda hata gösterir. Öncesinde yanlış yapmanızı engeller.

///// örnek 1

interface someValue{

name: string;

id: number;

}

let someObj :someValue = {

name:"random",

id:12

}

console.log(someObj)

/// örnek 2

let awesomeName : string = "caylak"

awesomeName = "example"

awesomeName = awesomeName.toUpperCase()

console.log(awesomeName)

örnegin burada awesomeName = 20 dersek kod editörümüzde kırmızı uyarı cıkacak cunku benim beklediğim tür number değil string diyor. Yukarda tanımı öyle yaptık

//örnek 3

let amount: number = 20

amount = 12-1

// örnek 4

let isAwesome :boolean = true

isAwesome = false

// örnek 5

let tax: number | string = 10

tax = 10

tax = "$10"

burada tanımda hem number hem string yaptıgımızdan ikiside olabilir hata olmaz.

//örnek 6

let requestStatus : 'pending' | 'success' | 'error' = "pending"

requestStatus = "error" // bu hatasız

requestStatus = "deneme" // bu tanım yukarıda olmadıgından hata verir

//örnek 7

let notSure : any = 5

notSure = " başka değer gelebilir bilmiyorum "

notSure =false

yukarıdaki any örnegi yazarsak tür kontrolü yapmaz . hepside calısır

// örnek 8

const books = ["1923", "caylak", "yazılımcı"]

let foundBook: string | undefined ;

for( let book of books){

if(book ==='1926'){

foundBook = book

break

}

}

console.log(foundBook)

// örnek 9

let prices: number[] = [100,122,'eere'] buradaki eere tanımı yapamazsın

// örnek 10

let array: (string | boolean) [] = ['apple', true, 'orange',false] hatasız calısır

//örnek 11

let car :{brand: string, year:number} = {

brand: "fiat", year: 100

}

car.brand= "ford"

//örnek 12

function sayHi (name:string){

console.log(`hello ${name}`)

}

sayHi("Caylak")

[caylakyazilimci]

Proje yönetimi için hangi yazılım dillerini bilmek gereki?

proje yönetiminde pm olarak mı calısacaksın. Anladıgım kod yazmayacaksın ama yazılım süreçlerini öğrenmende fayda var. her hangi bir dilden baslayabilirsin bence udemyde bununla ilgili eminim kurslar vardır. Pek anladıgım bir alan degil. Düz developer oldum maalesef

[caylakyazilimci]

vite nedir?

Vite, modern web projeleri geliştirmek için hızlı ve minimalist bir yapı sunan bir JavaScript aracıdır. Vue.js ve React gibi popüler JavaScript kütüphaneleri veya framework'lerini kullanarak web uygulamaları geliştirmek için yaygın olarak tercih edilir.

Vite, geliştirme sürecini hızlandırmak için geliştirilmiş bir geliştirme sunucusu ve hızlı bir derleme aracı sunar. Proje dosyalarını değişiklikleri anında algılayarak anlık yeniden yükleme yapar ve hızlıca güncellenmiş bir önizleme sunar. Bu, geliştiricilerin kodlarını yazarken anlık geri bildirim almasını sağlar ve geliştirme sürecini daha verimli hale getirir.

Ayrıca, Vite, modüler bir mimariye dayanarak yalnızca ihtiyaç duyulan modülleri (örneğin, Vue bileşenleri) derler ve bunları tek bir dosyada bir araya getirir. Bu da geliştirme sürecini hızlandırır ve son kullanıcıya daha hafif ve daha hızlı bir uygulama sunar.

Genel olarak, Vite, modern web uygulamaları geliştirmek için hızlı, verimli ve kullanımı kolay bir araç olarak öne çıkar.

ite'ı kullanmak oldukça kolaydır. İşte Vite'ı kullanarak bir Vue.js projesi oluşturmanın temel adımları:

Proje Dizinini Oluşturun: Öncelikle bir proje dizini oluşturun veya var olan bir dizine gidin.

Proje İçin Bir Paket Yöneticisi Seçin: Projenizde npm veya Yarn gibi bir paket yöneticisi kullanın. Proje dizininde bir paket.json dosyası oluşturmak için aşağıdaki komutlardan birini çalıştırın:bashCopy codenpm init -y veyabashCopy codeyarn init -y

Vite'ı Yükleyin: Vite'ı proje bağımlılıklarına ekleyin. Vue.js projesi oluşturacaksanız, aşağıdaki komutu çalıştırın:bashCopy codenpm install vite @vitejs/plugin-vue veyabashCopy codeyarn add vite @vitejs/plugin-vue

Vite Config Dosyasını Oluşturun (Opsiyonel): Vite, varsayılan ayarlarla çalışır, ancak gerektiğinde bir Vite yapılandırma dosyası oluşturabilirsiniz. Bu dosyayı oluşturmak için projenizin kök dizininde vite.config.js adında bir dosya oluşturun.

Uygulamanızı Oluşturun: Vue.js kullanarak bir uygulama oluşturmak için, projenizin kök dizininde bir index.html dosyası ve src altında bir main.js dosyası oluşturun. İlgili kütüphaneleri ve bileşenleri bu dosyalara ekleyin.

Geliştirme Sunucusunu Başlatın: Vite, geliştirme sunucusunu başlatmak için kullanılabilir. Aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatın:bashCopy codenpm run dev veyabashCopy codeyarn dev Bu komut, geliştirme sunucusunu başlatır ve tarayıcıda uygulamanızın çalışan bir önizlemesini sağlar. Geliştirme süreci boyunca, kod değişiklikleriniz anında algılanır ve tarayıcıda canlı olarak yeniden yüklenir.

Uygulamanızı Derleyin ve Dağıtın (Opsiyonel): Uygulamanızı derlemek ve dağıtmak için Vite'ın sağladığı komutları kullanabilirsiniz. Örneğin, uygulamanızı derlemek için aşağıdaki komutu çalıştırabilirsiniz:bashCopy codenpm run build veyabashCopy codeyarn build Bu komut, uygulamanızı optimize edilmiş bir şekilde derler ve genellikle dağıtıma hazır bir paket oluşturur.

Bu adımları takip ederek Vite'ı kullanarak Vue.js veya başka bir JavaScript projenizi kolayca oluşturabilir ve geliştirebilirsiniz.

[caylakyazilimci]

Pinia nedir? Ne için kullanılır?

Bir süre önce iş değiştirdim ve burada kullanılan teknoloji vue js. Bende seneler öncesinde merak edip biraz bakmıştım. Bu vesileyle tekrardan vue yazmaya baslayacağım. Yeni projeye baslarken state management için çözüm ararken artık vuex degil pinia diye bir çözüm olduğunu gördüm. özetle geçelim.

Vue js state management çözümüdür.

Vue js core ekibinin bir üyesi tarafından geliştirilmiştir.  

Bu kişi aynı zamanda vue routerda geliştirmiş. Vuex resmi önerilen bir çözümmüş.  Şimdi işe vur js documenlarında bu çözüm öneriyor.

5-10 komponentlik bir projeniz varsa bu gerekli değil yani kucuk uygulamaysa state managenment gerek yok 

Projenizin büyüme ihtimali varsa önerilir.

kurulum ---

yarn add pinia yada npm install pinia diyerek kuruyorsunuz.

sonrasında main.js de

import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App)

app.use(pinia) app.mount('#app')

sonra store.js diye bir dosya oluşturup . şunları ekliyoruz

import { defineStore } from 'pinia' //burada kütüphaneyi dahil ediyoruz

export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'Eduardo' }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++ }, }, })

burada bir counter state oluşturduk .

sonra bunu kullanacagımız komponente store.js import edelim

import { useCounterStore } from 'store.js'

const store = useCounterStore() //proda tanımladıgımız magazayı cagırdık.

<template> <h1>{{ counter.count }}</h1>

yukarıda da degeri basmıs olduk. Bu kücük bir örnek. Burada amac bunun bir state yönetim çözümü oldugunu bilmekte. Daha fazlasını dokumanlardan bakın https://pinia.vuejs.org/

[caylakyazilimci]

react native expo firebase authenticate ile login ve register örneği

firebase authenticate kullanarak login ve register işlemi yapacağız. Firebase panelinden authanticate kısmını seçip gerekli import linklerini oradan aldıktan sonra

expo so react native tarafı şöyle

app.js sayfasına home ve login sayfalarını ekleyin

--------

<NavigationContainer> <Stack.Navigator> <Stack.Screen options={{ headerShown: false }} name="Login" component={LoginScreen} /> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer>

login.js sayfası

-----

import React, { useEffect, useState } from 'react' import { KeyboardAvoidingView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native' import { getAuth, createUserWithEmailAndPassword,signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth();

const LoginScreen = ({ navigation }) => { const [email, setEmail] = useState('') const [password, setPassword] = useState('')

useEffect(() => { const unsubscribe = auth.onAuthStateChanged(user => { if (user) { navigation.navigate("Calender") } })

return unsubscribe }, [])

const handleSignUp = () => { createUserWithEmailAndPassword(auth,email, password) .then(userCredentials => { const user = userCredentials.user; console.log('Registered with:', user.email); }) .catch(error => alert(error.message)) }

const handleLogin = () => { signInWithEmailAndPassword(auth,email, password) .then(userCredentials => { const user = userCredentials.user; console.log('Logged in with:', user.email); }) .catch(error => alert(error.message)) }

return ( <KeyboardAvoidingView style={styles.container} // behavior="padding" >

<View style={styles.inputContainer}>

<Text style={styles.logo}>Hr Calender</Text>

<TextInput placeholder="Email" value={email} onChangeText={text => setEmail(text)} style={styles.input} /> <TextInput placeholder="Password" value={password} onChangeText={text => setPassword(text)} style={styles.input} secureTextEntry /> </View>

<View style={styles.buttonContainer}> <TouchableOpacity onPress={handleLogin} style={styles.button} > <Text style={styles.buttonText}>Login</Text> </TouchableOpacity> <TouchableOpacity onPress={handleSignUp} style={[styles.button, styles.buttonOutline]} > <Text style={styles.buttonOutlineText}>Register</Text> </TouchableOpacity> </View> </KeyboardAvoidingView> ) }

export default LoginScreen

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, inputContainer: { width: '80%' }, input: { backgroundColor: 'white', paddingHorizontal: 15, paddingVertical: 10, borderRadius: 10, marginTop: 5, }, buttonContainer: { width: '60%', justifyContent: 'center', alignItems: 'center', marginTop: 40, }, button: { backgroundColor: '#0782F9', width: '100%', padding: 15, borderRadius: 10, alignItems: 'center', }, buttonOutline: { backgroundColor: 'white', marginTop: 5, borderColor: '#0782F9', borderWidth: 2, }, buttonText: { color: 'white', fontWeight: '700', fontSize: 16, }, buttonOutlineText: { color: '#0782F9', fontWeight: '700', fontSize: 16, }, logo: { fontSize: 30, color: 'black', paddingBottom: 15, textAlign: 'center' },

})

home.js sayfası

-------------

import { useNavigation } from '@react-navigation/core' import React from 'react' import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); console.log("auth",auth)

const HomeScreen = () => { const navigation = useNavigation()

const handleSignOut = () => { signOut(auth) .then(() => { navigation.navigate("Login") }) .catch(error => alert(error.message)) }

return ( <View style={styles.container}> <Text>Email: {auth.currentUser?.email}</Text> <TouchableOpacity onPress={handleSignOut} style={styles.button} > <Text style={styles.buttonText}>Sign out</Text> </TouchableOpacity> </View> ) }

export default HomeScreen

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, button: { backgroundColor: '#0782F9', width: '60%', padding: 15, borderRadius: 10, alignItems: 'center', marginTop: 40, }, buttonText: { color: 'white', fontWeight: '700', fontSize: 16, }, })

daha fazlasına bu elemanın repodan bakabilirsini https://github.com/mattfrances/FirebaseExpoAuthentication

[caylakyazilimci]

firebase documanda veri güncelleme

var users collectionda yer alan 123 id kullanıcının dökümanının içindeki collectiona token bilgisi varsa günceller yoksa ekleyen kod

async function saveTokenToDatabase(token) { console.log("token kayıt eder") const userId = "123"; const firestore = getFirestore(); const user = await doc(firestore, 'users', userId)

//token güncelle await updateDoc(user, { token: token, notificationPermission:true }).then(docRef => { console.log(userId + " -> userid için token kaydedildi "); }) .catch(error => { console.log(error); }); }

[caylakyazilimci]

json içerisinde kopya değerlerden büyük olanın kalması

json içerisinde duplicate, kopya olan değerleri filtrelemek isteyebiliriz. Hatta bunun içerisinden kopyalardan büyük olanın kalmasını istediğimizde aşağıdaki örnek kullanılabilir

let users = [ {name:“sandy” ,age: 27}, {name:“sandy” ,age: 25}, {name:“sandy” ,age: 30}, {name:“john” ,age: 25}, {name:“shivia”,age: 35}, {name:“shivia”,age: 25}, ]

var obj = users.reduce((r, o) => (o.age < (r[o.name] || {}).age || (r[o.name] = o), r), {});

console.log(“--” ,Object.values(obj) );

[caylakyazilimci]

react useState iç içe json dosyasında güncelleme işlemi

şöyle bir json datası örneği düşünün. Biz burada files içine dosya ekleme çıkarma yapmak istiyoruz. Gördüğünüz gibi nested iç içe şekilde.

ben şöyle yaptım. Bunu bir list componenti düşünün 2. komponent grubuna dosya ekleyeceksek örneğin onun yolu bana lazım. Bunu bulmak içinde calenderID dediğim bu ilk jsondaki obje oluyor örneğin example 2 yazan obje. field lanı ise requiredFiles içerisindeki hangi obje olduğu. Bunlar lazım ki doğru dosya files güncelleyelim.

şöyle bir method yazdım

const uploadFileForCalenderItem = (calenderID, fileId, file) => { setCalenderItems(resultList => { const copy = [... resultList] const updateFiles = copy[calenderID].requiredFiles[fileId].files copy[calenderID].requiredFiles[fileId].files = [... updateFiles,file]

return copy }) }

[caylakyazilimci]

İç içe nesneler nasıl filtrelenir? ReactJS

örnek datamız

let reportData = [{ label:"Özel Raporlar", reports:[ { reportName:"Deneme Özel Rapor", description: "Özel raporu acıklaması", favorite:false }, { reportName:"Deneme Özel Rapor 2", description: "Özel raporu acıklaması", favorite:false }, ] }, { label:"Favoriler", reports:[ { reportName:" Zarf", description: "rapor acıklaması", favorite:true }, ] }]

const result = reportData .map(item => ({ ...item, reports: item.reports .filter(child => child.reportName.toLowerCase().includes(query.toLowerCase()) ) }))

.filter(item => item.reports.length > 0)

console.log("result",result)

[caylakyazilimci]

iç içe obje içerisinden key değerine göre filtre yapmak js

let a = { "employments": { "38": { "type": "EMPLOYMENT", "id": 38, "name": "deneme", "type": "deneme", "employer": 12, } } }

yukarıdaki employer yani 12 değerine ulaşmak istiyorum

Object.values(a.employments).map(value => value.employer) //burasi [12] şeklinde sonuc veriyor

Object.values(a.employments).map(value => value.employer)[0] // 12 şeklinde ulaşıyorum

[caylakyazilimci]

react native responsive layout example

import {Text, TouchableOpacity,SafeAreaView, View,StyleSheet} from "react-native"; import * as React from "react"; const Game1 = ({ navigation })=> {    const Header =() =>{        return (            <View  style={styles.header}>                <Text>                    Header App                </Text>            </View>        )    }    const Boxes = () => {        return (            <View style={styles.boxContainer}>                <View style={styles.box}>                    <View style={styles.inner}>                        <Text>                            deneme                        </Text>                    </View>                </View>                <View style={styles.box}>                    <View style={styles.inner}>                        <Text>                            deneme                        </Text>                    </View>                </View>                <View style={styles.box}>                    <View style={styles.inner}>                        <Text>                            deneme                        </Text>                    </View>                </View>                <View style={styles.box}>                    <View style={styles.inner}>                        <Text>                            deneme                        </Text>                    </View>                </View>            </View>        )    }    return (        <SafeAreaView style={styles.container}>            <Header/>            <Boxes/>        </SafeAreaView>    ); }; const styles = StyleSheet.create({    container: {        flex: 1    },    header: {        width:'100%',        height:'15%',        backgroundColor:'#c8c8c8',        justifyContent:'center',        alignItems:'center',    },    boxContainer: {        width:'100%',        height: '85%',       // backgroundColor: 'red',        padding: 5,        flexDirection:'row',        flexWrap:'wrap'    },    box:{        width:'50%',        height: '50%',        padding: 5,        //backgroundColor:'green'    },    inner:{        flex: 1,        backgroundColor: '#c8c8c8',        alignItems:'center',        justifyContent:'center',    } }) export default Game1

[caylakyazilimci]

web3 nedir ?

Web3 teknolojisine merak saldım. Bu bloga öğrendiklerimi not olarak ekleyeceğim. Gelişi güzel yazıcam o yüzden anlamazsanız normal.

Web3 terimi 2014 yılında Ethereum’un kurusu ortağı Gavin Wood tarafından ortaya atılmış ve fikir 2021 de kripto camiasında ilgi duymus. 

Bazı uzmanların söylediğine göre web3 veri güvenliği, ölçeklenebilirlik ve gizlilik sağlayacağı ve büyük teknoloj şirketlerinin etkisiyle mücadele edeceğini savunuyormus.  

web1 : statik sayfalardan oluşan websiteleri, giriş,üye ol vs yok

web2: kısaca kullanıcılarında etkileşimde bulunabileceği, yorum yazabileceği, facebook,twitter,bloglar içerik üreticileri gibi platformların olduğu yapı. Hem bilgi aldığınız hem sizinde bilgi verdiğiniz sistem bir nevi. Senin bilgini reklam verenlere satıp para kazanıyor bir nevi. Gizlilik yok. Facebookta ana sayfayı acarsan herkes farklı ilgi alanına göre içerikler ,reklamlar görür. 

web3: web2 de ürün sizdiniz. Şirket sizin datanız üzerinde para kazanıyordu. Web3′de bu içeriğin sahibinin siz olduğunuza inanılıyor. WEb3 merkezi olmayan ve block zincire dayalı bir sürüm için fikirdir. Doğrulanabilir, okuma-yazma, güvenlik daha fazla.  web2nin sorunu büyük şirketler veri ve gizliliği yönetiyordu. Web3 bunu çözmeyi vaat ediyor. 

[caylakyazilimci]

kelime ayrıştırma işlemi js split örnek

bazen gelen yanıtları ayrıştırmak gerekir. Backenden temiz data gelmez. Örneğin bir filtre uygulayacağız ve o kurallarda bize string gelsin. Gelen yanıt söyle olsun deneme = “araba-2|ucak-3″ 

bundanda biz istiyoruz şöyle hale getirmek isteyelim . İstediğimiz sonuc görüntüsü

 let result =[      {"type": "araba", "limit":2,},      {"type": "ucak", "limit":3,}  ];

Bunu şöyle yaparız

let deneme1= "araba-2|ucak-3" let result1 = [] result1 = deneme1.split("|").map(function (costType) {  costType = costType.split("-")  let costTypeValue = costType.shift();  let limit = costType.pop();  return {    type: costTypeValue,    limit: parseInt(limit)  } }) console.log("result",result1)

[caylakyazilimci]

react ile sitede kar yagdırmak

Sitemizde yılbası konsepti yapmak istediysek bu eklendi tam bize göre.

1. adım şunu npm ile yükle “npm i react-snowfall”

2. adım anasayfana import et

import Snowfall from 'react-snowfall'

<Snowfall  style={{zIndex:"9999999"}} />

ve kar yağmaya başlar. Detaylı özellikleri var. Kar büyüklüğü, hızı,rengi vs onuda kütüphanenin sayfasından inceleyebilirsiniz  https://github.com/cahilfoley/react-snowfall

şuda sitesi https://cahilfoley.github.io/react-snowfall/

[caylakyazilimci]

json nesnesi içerisinde toplama yaptırmak

aşağıdaki örnek json dosyasında expense olanları ayrı, income olanların amount değerlerini type alanlarına göre ayı olarak toplamak istiyorum. Şöyle yapıyoruz

getListOfBudget :{  budgetData: [    {      amount: 1,      category: 'house',      budgetDate: 2021-09-21T21:00:00.000Z,      description: '123',      type: 'expense',      createdDate: 2021-09-22T07:39:13.002Z,      budgetId: 123123    },    {      amount: 2,      category: 'house',      budgetDate: 2021-09-17T21:00:00.000Z,      description: '123123',      type: 'expense',      createdDate: 2021-09-22T07:39:13.002Z,      budgetId: 123123    },    {      amount: 91,      category: 'life',      budgetDate: 2021-09-17T21:00:00.000Z,      description: '123123',      type: 'income',      createdDate: 2021-09-22T07:39:13.002Z,      budgetId: 3123123    }  ],  _id: 61489f246cf7653d286ac26b,  userID: 124124,  __v: 0 }

Kod şu şekilde

let r = getListOfBudget.budgetData.reduce((pv,cv) => {  if(pv[cv.type]){    pv[cv.type] += cv.amount;  } else {    pv[cv.type] = cv.amount;  }  return pv; }, {})

çıktısı

{ expense: 3, income: 91 }

[caylakyazilimci]

Vs code es7 otomatik tanımlamalar

vs code editöründe react yazarken örneğin funksiyonel komponent olusturuyoruz. Kalıp belli olunca tek tek yazmaya gerek yok şöyle bir plugin indirerek kısayolla yazabiliriz. 

vs code programından eklentilerden bunu ekleyin 

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 

sonra editörde örneğin fonksiyonel komponent yapmak istiyorsunuz.

rafce + tab tuşuna basarsanız aşağıdaki kalıp hazır gelecektir. 

export const index = () => {     return (         <div>                      </div>     ) } 

bunun gibi bir çok komutu basitçe kısayollarla yapabilirsiniz

[caylakyazilimci]

json dublicate alanları filtrelemek

let data = [    { managerLevel: '1', active: true, managerID: "ali" },    { managerLevel: '1', active: true, managerID: "ali" },     { managerLevel: '1', active: false, managerID: "ali" },    { managerLevel: '1',active: false, managerID: "veli" },    { managerLevel: '1',active: false, managerID: "veli" },    { managerLevel: '1',active: false, managerID: "ahmet" },    { managerLevel: '1',active: true, managerID: "ahmet" }   ]

const filtered = data.reduce((acc, item) =>{    const found = acc.find( i => i.managerID === item.managerID && i.active === item.active)    return found ? acc : [...acc, item] }, [])

console.log("filtered",filtered)

https://jsfiddle.net/emhufnv9/1/