DEV Community: Marcos Taylor

Prisma-ORM e NodeJS

Marcos Taylor — Wed, 06 Jul 2022 00:40:08 +0000

Iniciando com Prisma ORM

Introdução
Este é um documento para iniciantes conseguirem fazer a utilização de do ORM Prisma no dia a dia. Este documento terá um código simples que também estará disponível no github.

Início
Para iniciar com o prisma ORM é bem simple primeiro vamos colocar um yarn add prisma ou npm install prisma && yarn add @prisma/client ou npm install @prisma/client e depois só utilizar a linha de comando npx prisma init . esse comando irá criar alguns arquivos no seu projeto, sendo eles uma pasta chamada prisma (aqui irá ficar as migrations e o arquivos chamando schema.prisma)
No arquivo de schema que foi criado vamos iniciar os nossos schemas das tabelas do banco. Ex.

model Authors {
  id    String  @id @default(uuid())
  name  String  @db.Text
  email String  @db.Text
  books Books[]

  created_at DateTime @default(now())
  updated_at DateTime @default(now())

  @@map("authors")
}

model Books {
  id          String  @id @default(uuid())
  title       String  @db.Text
  description String? @db.Text

  created_at DateTime @default(now())
  updated_at DateTime @default(now())

  Authors   Authors @relation(fields: [author_id], references: [id])
  author_id String
  @@map("books")
}

O Relacionamento acima é feito de One to Many (um para muitos) ou seja 1 autor pode ter vários livros. Abaixo estarei mostrando como fazer a inserção de um autor criando 1 livro.
A parte de que coloquei no model de Author o books do Tipo Books[] significa que o author terá varios livro e abaixo coloquei @@map(“authors”) que será como nossa tabela sera chamada no banco de dados

Inserindo dados dados no banco
é muito fácil inserir só instanciar o PrismaCliente usando o new PrismaClient() usar o create como no exemplo a baixo

    async create(data: IData) {
        return await prisma.authors.create({ data })
    }

outro comando é o de find:

async findById(id: string) {
        return await prisma.authors.findFirst({
            where: {
                id
            }
        })
    }

aqui outros comando dos prisma na documentação click aqui pra ver o crud
inserindo uma example de projeto com node e prisma: Prisma e Nodejs

Animation with react-native-reanimated

Marcos Taylor — Tue, 10 May 2022 15:05:42 +0000

Documentation - Animation (Beginner)
React Native - CLI

Introduction
This is a document for beginners to be able to use simple animations in everyday life. This document will have a simple code that will also be available on github.

Installation
To install the animation package is simple:

yarn add react-native-reanimated
or
npm install react-native-reanimated

Use this command in your terminal.

Right after the installation it is necessary to install via cocoapods using the pods install command inside the /ios folder. After installation it is necessary to insert the plugin in the babel.config.js file:

module.exports = {
…
plugins: [
…
         'react-native-reanimated/plugin',
     ],  
};

possible error
When it was used, an error was installed when I was revived stating that the previous step occurred that being done, even if it is done, a cache error can occur, it is resolved yarn start --reset-cache

The code that was used to open the menu using Reanimated

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
 interpolate,
 runOnJS,
 useAnimatedStyle,
 useSharedValue,
 withSpring,
 withTiming,
} from 'react-native-reanimated';
import {
 Container,
 Content,
 Blackout,
 TopClose,
 CloseItem,
 Image,
} from './styles';

export const ModalSettings: React.FC<any> = ({setOpenModalFunction}) => {
 const offset = useSharedValue(900);

 const animatedStyles = useAnimatedStyle(() => ({
   transform: [{translateY: offset.value}],
   opacity: interpolate(offset.value, [0, -280], [1, 0.5]),
 }));

 offset.value = withSpring(20);

 const animatedAndClose = () => {
   offset.value = withTiming(
     1200,
     {
       duration: 800,
     },
     () => {
       'worklet';

       runOnJS(setOpenModalFunction)();
     },
   );
 };

 return (
   <Blackout>
     <Container>
       <Animated.View style={[animatedStyles, styles.animated]}>
         <Content>
           <TopClose onPress={animatedAndClose}>
             <CloseItem />
           </TopClose>
           <Image
             source={{
               uri: 'https://cdn.dribbble.com/users/745861/screenshots/7889509/media/5891d9d48179ca0b3a8fcdf178db8737.png',
             }}
           />
         </Content>
       </Animated.View>
     </Container>
   </Blackout>
 );
};

const styles = StyleSheet.create({
 animated: {
   flex: 1,
 },
});

Here is the github link with the complete application:

Open here github

Animação com react-native-reanimated

Marcos Taylor — Tue, 10 May 2022 14:45:56 +0000

Documentação - Animação (Iniciante)
React Native - CLI

Introdução
Este é um documento para iniciantes conseguirem fazer a utilização de animações simples no dia a dia. Este documento terá um código simples que também estará disponível no github.

Instalação
Para fazer a instalação do pacote de animação é simples:
yarn add react-native-reanimated
ou
npm install react-native-reanimated
Utilize esse comando no seu terminal.

Logo após a instalação é necessário instalar via cocoapods utilizando comando pods install dentro da pasta /ios. Após a instalação é necessário inserir o plugin no arquivo babel.config.js

module.exports = {
…
plugins: [
…
         'react-native-reanimated/plugin',
     ],  
};

Possível error
Quando estava instalando ocorreu um erro quando fui utilizar o reanimated informando que o passo anterior tem que ser feito, mesmo sendo feito pode ocorre um erro de cache, é simples resolver yarn start --reset-cache

O código que foi utilizado para abertura do menu utilizando o Reanimated

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
 interpolate,
 runOnJS,
 useAnimatedStyle,
 useSharedValue,
 withSpring,
 withTiming,
} from 'react-native-reanimated';
import {
 Container,
 Content,
 Blackout,
 TopClose,
 CloseItem,
 Image,
} from './styles';

export const ModalSettings: React.FC<any> = ({setOpenModalFunction}) => {
 const offset = useSharedValue(900);

 const animatedStyles = useAnimatedStyle(() => ({
   transform: [{translateY: offset.value}],
   opacity: interpolate(offset.value, [0, -280], [1, 0.5]),
 }));

 offset.value = withSpring(20);

 const animatedAndClose = () => {
   offset.value = withTiming(
     1200,
     {
       duration: 800,
     },
     () => {
       'worklet';

       runOnJS(setOpenModalFunction)();
     },
   );
 };

 return (
   <Blackout>
     <Container>
       <Animated.View style={[animatedStyles, styles.animated]}>
         <Content>
           <TopClose onPress={animatedAndClose}>
             <CloseItem />
           </TopClose>
           <Image
             source={{
               uri: 'https://cdn.dribbble.com/users/745861/screenshots/7889509/media/5891d9d48179ca0b3a8fcdf178db8737.png',
             }}
           />
         </Content>
       </Animated.View>
     </Container>
   </Blackout>
 );
};

const styles = StyleSheet.create({
 animated: {
   flex: 1,
 },
});

Segue o link do github com o aplicação completa:

Abrir aplicação no github