Desenvolvimento web completo no Android: HTML, CSS e JavaScript

Desenvolvimento web completo no Android

O PocketCode transforma seu dispositivo Android em um ambiente completo de desenvolvimento web. Crie, visualize e publique sites sem precisar de um PC.

Configuração inicial

A visualização integrada

Não há comando de servidor para digitar. Toque no ícone de globo na barra superior do editor (ou em Abrir no DevBrowser no menu) e o PocketCode abre o arquivo no seu DevBrowser embutido, servido por um pequeno servidor estático no seu próprio celular. O DevBrowser é um navegador em tela cheia aberto a partir do editor, não um painel ao lado dele.

Criando um projeto web

1. Toque em Novo Projeto
2. Escolha um modelo: HTML, React, Vue, TypeScript, Next.js ou um full-stack como React + Node
3. O projeto é gerado com a estrutura completa

Todos os 15 modelos de projeto são grátis. Os modelos de React e Vue carregam suas bibliotecas de uma CDN (unpkg.com), então precisam de conexão; os de Next.js e os full-stack servem para escrever código no celular, não para compilá-lo.

Visualização

Layout

O DevBrowser ocupa a tela inteira. O painel de DevTools abre abaixo da página no modo retrato e à direita dela no modo paisagem (toque no botão </>), e você arrasta a alça para redimensioná-lo entre 25% e 80%. A visualização dividida do próprio editor (Ctrl+\) é um segundo painel somente leitura, não uma visualização ao vivo.

Recarregamento

Salvar um arquivo à mão não recarrega a página: toque em recarregar no navegador. A página só recarrega sozinha quando o agente de IA escreve um arquivo. Experimente com esta página:

<!DOCTYPE html>
<html>
	<head>
		<title>My App</title>
		<style>
			.hero {
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				background: linear-gradient(135deg, #1a1a2e, #16213e);
				color: white;
			}

			.title {
				font-size: clamp(2rem, 5vw, 4rem);
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="hero">
			<h1 class="title">Hello World!</h1>
		</div>
	</body>
</html>

Ferramentas para desenvolvedores

DevTools integrado

O DevBrowser tem sete abas de DevTools:

• Console: leia os logs da página e execute JavaScript
• Network: monitore as requisições HTTP
• Storage: os dados que a página guarda
• Elements: um instantâneo somente leitura do DOM; toque num elemento da página para localizá-lo. Aqui não dá para editar o DOM
• CSS: escreva CSS e aplique à página, ou veja as regras dela
• Perf: métricas de carregamento e lista de recursos
• Audit: uma heurística local de 47 verificações de desempenho, acessibilidade, boas práticas, SEO e PWA, não o Lighthouse

Testes responsivos

Escolha um perfil de dispositivo no menu do navegador (21 perfis mais Responsive). Um perfil muda só o user agent e o tamanho do viewport:

O lado maior do viewport é limitado a 1600 pixels CSS, então o perfil de 1920 × 1080 aparece em 1600 × 900.

Exemplos de código de frameworks

Estes exemplos usam imports do npm e etapas de build. O PocketCode não traz o npm, então você não consegue compilá-los no celular; os modelos de React e Vue usam builds de CDN (React 18 com Babel, Vue 3), e as classes do Tailwind abaixo precisam do script de CDN do Tailwind ou de um build.

React

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	return (
		<div className="p-4">
			<p className="text-2xl">{count}</p>
			<button
				onClick={() => setCount(count + 1)}
				className="px-4 py-2 bg-blue-500 rounded"
			>
				Increment
			</button>
		</div>
	);
}

Vue

<template>
	<div class="p-4">
		<p class="text-2xl">{{ count }}</p>
		<button @click="count++" class="px-4 py-2 bg-green-500 rounded">
			Increment
		</button>
	</div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

Vanilla + Tailwind

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
	<div class="bg-gray-800 rounded-xl p-8 shadow-2xl max-w-md w-full">
		<h2 class="text-2xl font-bold text-white mb-4">Login</h2>
		<input
			type="email"
			placeholder="Email"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-4"
		/>
		<input
			type="password"
			placeholder="Password"
			class="w-full p-3 rounded-lg bg-gray-700 text-white mb-6"
		/>
		<button class="w-full p-3 bg-blue-600 rounded-lg text-white font-semibold">
			Sign In
		</button>
	</div>
</div>

Fazendo deploy

npm e npx não vêm embutidos no PocketCode, então não existe um passo local de npm install -g vercel. Os deploys passam pelo Backend Manager: conecte sua conta de hospedagem (Vercel, Netlify, Cloudflare e mais — 33 serviços no total) e inicie e acompanhe deploys pelo celular. O plano Grátis roda um deploy por vez; rollback e logs ao vivo são Pro.

Se preferir empurrar pelo git, faça o commit com as ferramentas de Git integradas e deixe sua hospedagem fazer o build a partir do repositório, ou conecte-se a um servidor por SSH e faça o deploy de lá.

Dicas para desenvolvimento web no celular

1. Use unidades relativas: rem, em, %, vw/vh
2. Mobile-first: projete primeiro para o celular
3. Tailwind CSS: ideal para desenvolvimento em telas pequenas
4. Componentes pequenos: arquivos curtos e modulares
5. Salvamento automático: vem ativado por padrão (a cada 2 segundos), mas o DevBrowser não recarrega sozinho: toque em recarregar depois de salvar

---

Com o PocketCode você cria sites completos direto do seu Android. De uma landing page até uma aplicação web complexa, tudo é possível na palma da sua mão. Se preferir organizar o back-end e as APIs do seu projeto, explore também as ferramentas de backend e comece gratuitamente ao criar sua conta.