migeyel / ufscar-planner Goto Github PK

Nesse projeto estamos usando react native + expo, portanto, você deve instalar o expo-cli para poder fazer funcionar.

Primeiro, você deve ter o Node.js instalado, após isso, execute o seguinte comando

npm i -g expo-cli

Como estamos utilizando o yarn para poder gerenciar os pacotes, você também deve instalá-lo:

npm i -g yarn

Finalmente, podemos instalar as dependências...

Como se trata de um projeto expo, as dependências ficam armazenadas no arquivo package.json. O yarn utiliza o yarn.lock para poder controlar o que foi baixado na pasta node_modules.

Para instalar as dependências basta fazer:

yarn install

Para testar o app, deve-se instalar o aplicativo expo no seu smartphone (Android ou IOS), após isso, na pasta raiz deste projeto, deve-se digitar:

expo start

Isso abrirá uma aba no seu navegador, não se assuste. Após isso, terá três tipos de opção:

• Local
• Lan
• Tunnel

Normalmente utilizamos tunnel, para as outras pessoas do projeto poderem acessar. Dito isso, basta apenas escanear o qr code com o aplicativo expo em seu celular, e assim, começar a testar o app.

Estarei considerando que você saiba mais ou menos como funciona páginas estáticas em html.

Assim como html, react native também utiliza tags para poder construir o design a partir de uma hierarquia.

Em react native, chamamos de componentes, essas frações de design composta por tags. Cada componente pode ser composto de outros componentes e assim por diante.

Nesse aplicativo, estamos usando o que são chamados de componentes funcionais, são funcões que retornam um componente jsx (estilo tag).

Esse tipo de componente aceita os chamados hooks.

Exemplo:

function Comp1(props){

    /* Antes do return pode ser feito quase qualquer tipo de computação
    Tem basicamente esses dois tipos de variável
        let = pode mudar seu valor
        const = não pode mudar seu valor
        var = esquece, não usa isso */
    const a = props.value || 9;
    let b = 3;
    b += a;
    // Aqui está sendo retornado um texto com o que tem em b.
    return (<Text>{b}</Text>)
}

function Comp2(){
    // Aqui podemos usar o componente criado acima para criar outro
    return (
        <View>
            <Comp1 value={3}/>
        </View>)
    
    // Utilizando props, é possível pegar valores passados ao chamar o componente, 
    // exemplo: esse value={3} que pode ser acessado no Comp1 via props.value
}

Bom, você deve se lembrar que existia o CSS né? Infelizmente, você não será capaz de fugir dele. Aqui temos o StyleSheet (basicamente a mesma coisa do css só que em camelCase).

Exemplo:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fdfdfd"
  },
  text: {
    color: "red",
    textAlign: "center",
  }
});

Podemos utilizar esse estilo do seguinte modo:

function Comp3(){
    return (<View style={styles.container}>
        {/* também podemos sobrescrevê-lo  VV*/}
        <Text style={{...styles.text, color:'green'}}> 
        teste
        </Text>
        <Comp2/>
    </View>)
}

O básico é isso, qualquer coisa, utilize um motor de busca para sanar suas dúvidas.

Esse arquivo é basicamente a main, nele há o componente no topo da hierarquia. Algumas coisas são carregadas nele, como o tema, o redux, as notificações e os Navigators.

Esse arquivo contém algumas variáveis da release do aplicativo, como localização e cor da splashscreen, número da versão e etc.

Esta pasta contém o registro das rotas de cada fluxo de tela, exceto por aqueles registrados no App.js.

Estamos usando a versão 6.x do react navigation

Esta pasta contém arquivos com funções úteis e prontas para utilizar ao longo do app.

Esta pasta contém arquivos de imagem e etc.

Esta pasta contém arquivos que representam as telas mais importantes do app, basicamente a pasta principal do aplicativo.

Esta pasta contém arquivos com alguns componentes que utilizamos.

Por exemplo:

• A Agenda é o componente da tela do planner
• Gradient possui uns gradientes para usar
• EventCards contém a maioria dos cards que representam eventos

Este arquivo contém os temas do aplicativo.

Estamos seguindo o material 3 para isso.

Alguns temas foram construidos utilizando esse plugin do figma

Esta pasta está relacionada ao banco de dados não relacional utilizado.

O redux é divido em algumas etapas:

• Temos as actions, que são ações que podem ser disparadas usando o dispatch, e carregando informação como payload.
• Temos os reducers, que são os meios de tratamento para cada action em cada store, cada um possuindo um estado inicial.
• Temos o index, que organiza os reducers e decide quais serão persistentes.
• Temos a constants que serve para controlar a escrita dos actions, para não ocorrer mistyping.
• Por fim, temos a store que faz tudo funcionar junto.

Isso deve-se ao sistema do seu dispositivo estar limitando o app por economia de bateria. Para resolver, basta ir na Informações/Configurações do app e trocar a limitação da economia de bateria.

Primeiramente tentamos pegar os dados do site da ufscar, entretanto, caso o Restaurante Universitário não atualizar, fizemos um meio alternativo, um servidor que pega as informações de outros lugares.

O projeto desse servidor está disponivel aqui.

Caso as informações estejam erradas, a empresa do Restaurante Universitário mudou o modo de postar o cardápio e será necessário uma nova manutenção, no app ou no servidor.