Overflix

Projeto desenvolvido no Digital Maker Week na trilha de React Native

Tela dos Projetos

Telas no Figmar

Caso tenha baixado o repositório e deseje avançar para uma aula, basta executar os comandos para o dia específico:

git checkout --force dia1
expo install

Dia 1

O que veremos:

• Mercado Mobile
• Tecnologias Mobile
• React Native
• Expo
• Configurar Ambiente
• JavaScript e TypeScript
• Criando um projeto

Links importantes:

• NodeJS
• React Native
• Expo
• VS Code

OBS*: Caso o teu PowerShell tenha dado uma restrição ao usar o Expo, execute o seguinte comando como administrador dentro do PowerShell:

Set-ExecutionPolicy Unrestricted

Dia 2

O que veremos:

• Components de Interface do React Native
• StyleSheet
• FlexBox
• Criar nossos próprio components
• Props
• AppIntroSlider
• StatusBar

Bibliotecas:

LinearGradient:

expo install expo-linear-gradient

AppIntroSlider:

expo install react-native-app-intro-slider

Cores

• #e2306c (Cor Primaria)
• #320995 (Cor Secundaria)
• #f0f0f7 (Cor de Background)
• #6a617f (Cor de Texto)
• #dad9e3 (Cor de Texto Númerico)

Dia 3

O que veremos:

• React Native Elements
• State
• Formik
• Yup

Bibliotecas:

Floating label:

expo install react-native-floating-label-input react-native-reanimated

React Native Elements:

expo install react-native-elements

Formik + Yup:

expo install formik  yup @types/yup

Dia 4

O que veremos:

• React Navigation
• FlatList (Revisão)

Bibliotecas:

React Navigation:

expo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

expo install @react-navigation/stack

expo install @react-navigation/bottom-tabs

Cores

• #6363db (Cor React)
• #20b365 (Cor Figmar)
• #03ab4f (Cor NodeJS)

Dia 5

O que veremos:

• Modalize
• Vídeo
• WebService
• Axios
• useEffect

Bibliotecas:

Modalize:

expo install react-native-modalize react-native-gesture-handler

Vídeo:

expo install expo-av

Axios:

expo install axios

Async Storage:

expo install @react-native-async-storage/async-storage

Vídeo para teste

http://overflix.cwg.services/videos/flexbox.mp4

API

URL BASE: http://overflix.cwg.services/api

Usuários para teste:

carlos@teste.com - 123456

kaio@teste.com - 654321

POST /login

Parametros: {email: string, password: string}

Retorno:

{
    jwt:string, 
    user:{
        id: number
        name:string, 
        email: string
        avatar:string
    }
}

GET /projects

Autenticação Necessária*

Retorno:

[
    {
        id: number,
        image: string,
        text: string,
        favorite: boolean,
        category_id: number,
        total: number,
        videos: [
            {
                id: number,
                url: string,
                project_id: number,
                watched: boolean
            },
            ...
        ] 
    },
    ...
]

GET /projects/category/{categoria ID}

Autenticação Necessária*

Retorno:

[
    {
        id: number,
        image: string,
        text: string,
        favorite: boolean,
        category_id: number,
        total: number,
        videos: [
            {
                id: number,
                url: string,
                project_id: number,
                watched: boolean
            },
            ...
        ] 
    },
    ...
]

PUT /projects/videos/{video ID}/{1 = assistir | 0 = desmarcar}

Autenticação Necessária*

Créditos

Digital Maker Week 2021 (Site)

Professor: Carlos