Criando um app de comanda com React Native
Tags: reactnative, beginners
Published: 2023-10-05 01:43:22

#Apresentação 🎉

Pessoas desenvolvedoras tem a estranha mania ficar analisando programas de terceiros durante o dia-a-dia. Visitando uma padaria ou restaurante, é comum dar aquela "pescoçada" na tela do celular do atendente para conferir a usabilidade do software do estabelecimento.

Normalmente, o resultado é uma frustração em relação a qualidade e, consequentemente, um impulso de criar um app melhor.

Nesse contexto, nasce o projeto comanda, que será apresentado em 5 partes. Um app mobile para registro e controle de consumo de clientes.

#Protótipo 📱

Para guiar o desenvolvimento do app, vamos seguir o protótipo da interface no figma. Nessa primeira parte, vamos criar o projeto e a tela de login. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6s7zzw7pfinhy8z1u6n.png)

🔗 [acessar o protótipo completo](https://www.figma.com/file/NlIhSnJ5lgOliBS3rInVGy/comanda?type=design&node-id=0%3A1&mode=design&t=C2fPAbrRcd1wexfm-1)

#React Native e Expo 💜

Para a criação deste projeto, vamos utilizar o React Native com o Expo. Essas ferramentas juntas irão trazer um grande potencial de produtividade para a nossa experiência de desenvolvimento.

Nada substitui uma boa lida na documentação. Lá estará a resposta para todos os seus problemas.

[React Native](https://reactnative.dev/)
[Expo](https://expo.dev/)

# Criação do Projeto 🔥

## Requisitos 

- Node [https://nodejs.org/](https://nodejs.org/)
- VSCode [https://code.visualstudio.com/](https://code.visualstudio.com/) (ou outra IDE de sua preferência)

## Create Expo App

No terminal vamos executar o comando de criação do projeto

```
npx create-expo-app comanda
```

Após o processo de criação, podemos seguir as instruções do terminal para rodar o app. Mas antes, vamos abrir o app no VSCode.

```
cd comanda
code .
```

Para executar o app e testarmos através do navegador, sem depender de emuladores ou dispositivos físicos, vamos seguir os seguintes passos.

```
npm run start
```
Aperte `w` para rodar no navegador da web.

## Personalizar o página de login

No arquivo `app.js` vamos utilizar os componentes do React Native e formatar com StyleSheet.

```jsx
import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import Button from './components/button';
import Input from './components/input';

export default function App() {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require('./assets/home.jpg')} />
      <Text>Sistema</Text>
      <Text style={styles.title}>Comanda</Text>

      <Input placeholder='e-mail'/>
      <Input placeholder='senha' secureTextEntry/>

      <Button>Entrar</Button>
      
      <TouchableOpacity>
        <Text>criar conta</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FCFBFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: '#121A2C',
    fontSize: 34,
    fontWeight: 'bold',
  },
  input: {
    backgroundColor: '#FFF',
    borderColor: 'gray',
    borderWidth: 1,
    padding: 8,
    borderRadius: 4,
    marginTop: 16,
  }, 
  button:{
    backgroundColor: '#121A2C',
    color: '#FFBA26',
    paddingVertical: 8,
    paddingHorizontal: 48,
    borderRadius: 4,
    marginTop: 16,
    marginBottom: 16
  },
  image: {
    height: 200,
    width: '100%',
    position: 'absolute',
    top: 0,
  }
});
```

Ao salvar o arquivo o página é atualizada e podemos ver o resultado da alterações.

---


#Conclusão ✅

Nessa primeira parte realizamos a criação do projeto e a configuração da primeira tela do app. Nas próximas partes iremos implementar as demais funcionalidades.