Reserva de Laboratório com React Native e Expo Snack

Por que trocar Android Studio por Expo Snack?

Desenvolver para Android com Android Studio é tecnicamente legítimo. Mas no contexto da escola pública, enfrenta uma barreira imediata: infraestrutura. Instalação de 8 GB de SDK, emuladores que exigem virtualização ativada na BIOS, conexão de internet lenta, computadores com 4 GB de RAM. A aula começa antes mesmo de o ambiente estar pronto.

O Expo resolve esse problema estruturalmente. Com o Expo Snack, o aluno abre o navegador, acessa snack.expo.dev e já está escrevendo código React Native que roda em tempo real no celular via app Expo Go. Zero instalação. Zero configuração de ambiente. Foco imediato no que importa: a lógica do aplicativo.

Qual é a nova arquitetura do sistema?

A arquitetura mantém as mesmas responsabilidades funcionais da versão original, com mapeamento direto entre os componentes Android e seus equivalentes React Native.

Quais tecnologias compõem o projeto?

Como estruturar o projeto do início ao fim?

Passo 1 — Configurar o ambiente no Expo Snack

Nenhuma instalação é necessária. O fluxo de início é o seguinte:

Passo 2 — Estrutura de componentes e interface

Em React Native, a interface é construída com componentes JavaScript, não com XML. A lógica e a apresentação coexistem no mesmo arquivo, o que reduz a fragmentação e facilita o aprendizado inicial.

import React, { useState } from 'react';
import { View, Text, StyleSheet, FlatList, Alert } from 'react-native';
import { Calendar } from 'react-native-calendars';

export default function App() {
  const [reservas, setReservas] = useState({});
  const [dataSelecionada, setDataSelecionada] = useState(null);

  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>Reserva do Laboratório</Text>

      <Calendar
        onDayPress={dia => {
          setDataSelecionada(dia.dateString);
          handleReserva(dia.dateString);
        }}
        markedDates={reservas}
        theme={{ todayTextColor: '#ff6b35' }}
      />

      <FlatList
        data={Object.entries(reservas)}
        keyExtractor={([data]) => data}
        renderItem={({ item: [data, info] }) => (
          <View style={styles.itemReserva}>
            <Text style={styles.itemData}>{data}</Text>
            <Text style={styles.itemProf}>{info.professor}</Text>
          </View>
        )}
      />
    </View>
  );
}

Passo 3 — Lógica de reserva com verificação de conflito

A função central do sistema é registrar uma reserva e impedir que duas reservas ocupem o mesmo dia. Em JavaScript, essa lógica é direta e mais legível do que o equivalente em Kotlin.

const handleReserva = (data) => {
  // Verifica se a data já possui reserva
  if (reservas[data]) {
    Alert.alert(
      'Conflito de Horário',
      `${data} já está reservado por ${reservas[data].professor}`
    );
    return;
  }

  // Solicita nome do professor via prompt nativo
  Alert.prompt(
    'Nova Reserva',
    'Nome do professor responsável:',
    (nome) => {
      if (!nome || nome.trim() === '') return;

      const novasReservas = {
        ...reservas,
        [data]: {
          marked: true,
          dotColor: '#ff6b35',
          professor: nome.trim()
        }
      };

      setReservas(novasReservas);
      salvarLocal(novasReservas); // persiste no AsyncStorage
    }
  );
};

Passo 4 — Persistência com AsyncStorage

O AsyncStorage é o equivalente ao SharedPreferences do Android. A diferença fundamental é que as operações são assíncronas — um conceito-chave em JavaScript que os alunos precisarão dominar.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Salvar reservas no armazenamento local
const salvarLocal = async (dados) => {
  try {
    const json = JSON.stringify(dados);
    await AsyncStorage.setItem('reservas', json);
  } catch (e) {
    console.error('Erro ao salvar:', e);
  }
};

// Carregar reservas ao abrir o app
const carregarLocal = async () => {
  try {
    const json = await AsyncStorage.getItem('reservas');
    if (json !== null) {
      setReservas(JSON.parse(json));
    }
  } catch (e) {
    console.error('Erro ao carregar:', e);
  }
};

// Chamar ao iniciar o componente
useEffect(() => {
  carregarLocal();
}, []);

Passo 5 — Estilização com StyleSheet

No React Native, não existe CSS. A estilização usa um objeto JavaScript que imita a sintaxe do CSS, mas com regras específicas da plataforma mobile. É uma oportunidade de conectar o conhecimento de CSS dos alunos a um novo paradigma.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f9f7f4',
    paddingTop: 48,
    paddingHorizontal: 16
  },
  titulo: {
    fontSize: 22,
    fontWeight: '700',
    color: '#0f0e17',
    marginBottom: 20,
    textAlign: 'center'
  },
  itemReserva: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 14,
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 6
  },
  itemData: { fontWeight: '600', color: '#1a1a2e' },
  itemProf: { color: '#888', fontSize: 14 }
});

Como publicar o projeto no GitHub sem usar a linha de comando?

O Expo Snack oferece exportação direta para o GitHub. O processo é didaticamente importante: o aluno cria o repositório antes de entender profundamente como o Git funciona, o que reduz a barreira de entrada sem sacrificar a cultura de versionamento.

Qual é a estrutura final do projeto?

ReservaLaboratorio/
│
├── App.js                   ← componente principal
├── app.json                 ← configuração do Expo
├── package.json             ← dependências
│
└── assets/
    └── icon.png             ← ícone do app (opcional)

Dependências principais:
├── react-native-calendars
└── @react-native-async-storage/async-storage

Como isso se aplica na rotina escolar real?

O contexto do projeto não é fictício. Laboratórios de informática, salas de maker, laboratórios de ciências — qualquer espaço compartilhado na escola sofre com o problema de sobreposição de reservas, controle por papel ou planilha desatualizada, sem visibilidade para professores de outras disciplinas.

O app que os alunos constroem resolve um problema que seus próprios professores enfrentam. Esse detalhe não é trivial: ele transforma o projeto de exercício acadêmico em produto com destinatário real. A motivação muda. A responsabilidade muda.

Quais são as versões evolutivas do projeto?

Quais competências técnicas o projeto desenvolve?

Qual é o potencial estratégico desse projeto no curso técnico?

O projeto de Reserva de Laboratório tem uma característica rara em projetos didáticos: ele é ao mesmo tempo simples o suficiente para iniciantes e extensível o suficiente para se tornar um TCC de curso técnico em Desenvolvimento de Sistemas.

A escolha de React Native com Expo tem implicações que ultrapassam a sala de aula. O aluno que domina esse ecossistema pode publicar aplicativos reais na Play Store, construir portfólio técnico relevante para o mercado de trabalho e ingressar em processos seletivos com um projeto concreto para apresentar — não apenas um diploma.

Perguntas frequentes sobre o projeto