Início › Etapa 2 - Mobile › Configuração
📱
ETAPA 2 - MOBILE

Bem-vindo ao Expo 🚀

Aprenda a criar aplicativos mobile que controlam seu ESP32!

🎉 Novidade: Programação Mobile!

Na Etapa 1 você aprendeu a programar o ESP32 usando a Arduino IDE. Agora, na Etapa 2, você vai criar aplicativos para celular que se comunicam com o ESP32 via WiFi!

🔧

Arduino IDE

Você já conhece!

🖥️

VS Code + PHP

Backend da API

📱

Expo Snacks

NOVO! App Mobile

📚 O que é o Expo?

O Expo é uma plataforma que permite criar aplicativos para Android e iOS usando JavaScript e React Native - tudo isso diretamente no navegador!

🎯 Vantagem: Você não precisa instalar Android Studio (que ocupa 10GB+). Basta usar o site snack.expo.dev e testar no seu celular!

✅ O que você VAI usar

  • • Navegador (Chrome, Edge, Firefox)
  • • Site snack.expo.dev (gratuito)
  • • App "Expo Go" no celular
  • • Conta gratuita no Expo

❌ O que você NÃO precisa

  • • Android Studio
  • • Xcode (Mac)
  • • Node.js no seu computador
  • • Configurações complexas
1

Criar Conta no Expo

  1. 1

    Acesse o site do Expo

    https://expo.dev/signup ↗
  2. 2

    Clique em "Sign Up" (Cadastrar)

    Você pode usar sua conta do Google ou GitHub

  3. 3

    Confirme seu email

    Verifique sua caixa de entrada

⚠️ Importante: Guarde seu usuário e senha! Você vai precisar para acessar o app Expo Go no celular.

2

Instalar o Expo Go no Celular

O Expo Go é o aplicativo que vai rodar seu código no celular. Instale no seu smartphone:

🤖

Android

Google Play Store

Clique para abrir ↗
🍎

iPhone

App Store

Clique para abrir ↗

💡 Dica: Após instalar, abra o app e faça login com a mesma conta que você criou no passo anterior!

3

Seu Primeiro Snack - Hello World! 👋

Um "Snack" é como chamamos um projeto no Expo. É um ambiente completo de desenvolvimento que roda no navegador!

  1. 1

    Acesse o Expo Snack

    https://snack.expo.dev/ ↗
  2. 2

    Faça login (canto superior direito)

    Use a conta que você criou

  3. 3

    Você verá um código de exemplo

    Vamos substituir pelo nosso Hello World!

App.js (Expo Snack) 
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// Este é o componente principal do app
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>
        🚀 Olá, Mundo!
      </Text>
      
      <Text style={styles.subtitulo}>
        Meu primeiro app com React Native
      </Text>
      
      <Text style={styles.emoji}>
        📱 ↔️ 🔌
      </Text>
      
      <Text style={styles.rodape}>
        Tutorial do Prof. Reginaldo
      </Text>
      
    </View>
  );
}

// Estilos do app (similar ao CSS)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#1e293b', // Fundo escuro
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  titulo: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#22d3ee', // Ciano
    marginBottom: 10,
  },
  subtitulo: {
    fontSize: 18,
    color: '#94a3b8', // Cinza claro
    marginBottom: 30,
  },
  emoji: {
    fontSize: 48,
    marginBottom: 30,
  },
  rodape: {
    fontSize: 14,
    color: '#64748b',
    position: 'absolute',
    bottom: 50,
  },
});

import { View, Text, StyleSheet }

Importamos os componentes básicos do React Native: View (container, como uma div), Text (texto) e StyleSheet (para criar estilos).

export default function App()

Todo app React Native tem um componente principal chamado App. Ele retorna o que será exibido na tela.

StyleSheet.create({ ... })

Diferente do CSS tradicional, no React Native usamos objetos JavaScript para definir estilos. Propriedades como backgroundColor são em camelCase.

4

Testar no Celular 📲

  1. 1

    Cole o código acima no editor do Snack

    Substitua todo o conteúdo do arquivo App.js

  2. 2

    Clique na aba "My Device" no painel direito

    Vai aparecer um QR Code

  3. 3

    Abra o Expo Go no celular e escaneie o QR Code

    O app vai carregar automaticamente!

🎉 Parabéns! Se você viu a tela "🚀 Olá, Mundo!" no seu celular, você acabou de criar seu primeiro app mobile!

🔄 HTML vs React Native

Se você conhece HTML, vai se sentir em casa! Veja as equivalências:

HTML React Native Uso
<div> <View> Container/Caixa
<p>, <span>, <h1> <Text> Qualquer texto
<img> <Image> Imagens
<button> <TouchableOpacity> Botão tocável
<input> <TextInput> Campo de texto
<ul><li> <FlatList> Lista de itens

📝 Teste seus Conhecimentos

🎮

Quiz Gamificado

Responda às perguntas para ganhar XP e desbloquear a primeira atividade mobile!

⏳

Carregando quiz...

🎯 O que vem a seguir?

ATIVIDADE 8

LED via Mobile 💡

Crie um app para ligar/desligar o LED do ESP32 usando um botão no celular!

EM BREVE

Mais atividades...

Monitor de luminosidade, estação meteorológica e mais!

← Etapa 1: Atividade 7 Próximo: Atividade 8 - LED Mobile →