Acelerador SaaS

Visão do Curso

O Acelerador SaaS foi desenvolvido com um propósito claro: capacitar empreendedores e gestores a criarem e publicarem aplicações web sem precisarem se tornar programadores profissionais.

Diferente dos cursos tradicionais de programação, nosso foco não é ensinar a escrever código linha por linha — a Inteligência Artificial fará esse trabalho. Nosso objetivo é que você compreenda:

A anatomia e funcionamento de aplicações modernas
Como estruturar projetos seguindo boas práticas
Quando e como utilizar frameworks e bibliotecas
Como integrar soluções de backend e APIs externas
O processo completo de publicação e manutenção

Para Quem é Este Curso?

Desenvolvido especialmente para empreendedores, gestores e profissionais que precisam criar soluções digitais de forma rápida e eficiente, aproveitando o potencial da IA como ferramenta de produtividade.

Se você quer transformar ideias em produtos digitais sem depender de equipes de desenvolvimento ou longos ciclos de aprendizado técnico, este curso é para você.

Metodologia de Ensino

O diferencial deste curso está na metodologia exclusiva desenvolvida para garantir que você tenha total controle sobre seu código, mesmo usando IA como ferramenta de desenvolvimento.

Criação do Setup

Trabalharemos principalmente com Vue.js, um framework mais simples e fácil de aprender. Instalaremos todas as dependências necessárias sempre visando o roteamento adequado da aplicação.

Para sites e landing pages mais simples, não utilizaremos frameworks, trabalhando diretamente com HTML, CSS e JavaScript na raiz do projeto.

Esquemas de Cores e Estilos

Sempre no início do projeto, definiremos um esquema de cores, fontes e estilos para garantir consistência visual em toda a aplicação. Isso facilita o desenvolvimento e melhora a experiência do usuário final.

Método Código Sob Controle

Quando usamos IA para criar aplicativos, podemos nos perder, pois a IA pode criar códigos que não pedimos ou fazer alterações escondidas. Nossa metodologia consiste em criar um código onde temos total controle.

Trabalharemos sempre com componentização - cada página e cada elemento será transformado em componentes independentes, que depois juntamos em uma página. Assim, não corremos o risco da IA fazer coisas sem nossa ordem.

Controle de Versão com Git

A cada atualização importante, salvaremos o código no Git para não correr o risco de perder todo o trabalho. Isso também permite voltar a versões anteriores caso algo dê errado.

Publicação com Cloudflare Pages

O último passo da nossa metodologia é a publicação do aplicativo. Utilizaremos exclusivamente o Cloudflare Pages como plataforma de hospedagem, aproveitando sua velocidade global, facilidade de uso e recursos gratuitos.

Você aprenderá a configurar o processo de publicação contínua, conectando seu repositório Git ao Cloudflare Pages para que cada atualização seja automaticamente publicada.

Escolhemos o Cloudflare Pages por sua integração perfeita com GitHub, permitindo implantações automáticas a cada commit. Além disso, oferece hospedagem gratuita com desempenho global e gerenciamento simplificado de domínios personalizados, eliminando a necessidade de configurações complexas.

Por que esta metodologia funciona?

Ao combinar a eficiência da IA com práticas estruturadas de desenvolvimento, você consegue o melhor dos dois mundos: a velocidade da geração de código por IA e o controle total sobre o que está sendo criado.

Esta abordagem é especialmente eficaz para quem está começando, pois permite entender cada parte do código enquanto aproveita os benefícios da IA para acelerar o desenvolvimento.

Bem-vindo ao curso

Aqui você vai aprender a utilizar o WindSurf/Cascade para desenvolver aplicações de forma eficiente.

Módulo 1: Introdução à criação de Apps

Neste módulo, você aprenderá os fundamentos para começar a criar seus próprios aplicativos usando WindSurf/Cascade.

O que são Frameworks?

Frameworks são como "kits de ferramentas" prontos para desenvolvedores. Imagine que você quer construir uma casa: em vez de fabricar cada tijolo, porta e janela do zero, você usa peças pré-fabricadas. Frameworks funcionam da mesma forma para programação!

Em termos simples, um framework é um conjunto de códigos prontos que ajudam os desenvolvedores a criar aplicações mais rapidamente, sem precisar "reinventar a roda". Eles fornecem estruturas, componentes e regras que facilitam o desenvolvimento.

Tipos de Frameworks

Frameworks para Web (Frontend)

São frameworks focados na interface do usuário - a parte do aplicativo que o usuário vê e interage diretamente no navegador.

React.js

Criado pelo Facebook, o React é uma biblioteca JavaScript para construir interfaces de usuário. Sua principal característica é trabalhar com componentes reutilizáveis, como se fossem peças de Lego que você pode combinar para criar interfaces complexas.

Exemplo: O Facebook, Instagram e WhatsApp Web são construídos com React.

Angular

Desenvolvido pelo Google, o Angular é um framework completo para criar aplicações web. Diferente do React, o Angular vem com "tudo incluído" - desde ferramentas para navegação entre páginas até soluções para formulários e comunicação com servidores.

Exemplo: Gmail, Google Cloud Platform e JetBlue utilizam Angular.

Vue.js

O Vue combina características do React e do Angular, buscando oferecer o melhor dos dois mundos. É conhecido por sua curva de aprendizado suave - é relativamente fácil de aprender mesmo para iniciantes.

Exemplo: Alibaba, Xiaomi e GitLab são exemplos de sites que usam Vue.js.

Next.js

O Next.js é um framework construído sobre o React que adiciona recursos como renderização do lado do servidor (SSR) e geração de sites estáticos (SSG). Em termos simples, ele ajuda a criar sites React que carregam mais rapidamente e são melhores para SEO.

Exemplo: TikTok, Twitch e sites da Netflix utilizam Next.js.

Frameworks para Backend

São frameworks que lidam com a lógica de negócios, banco de dados e processamento que acontece no servidor - a parte "invisível" para o usuário final.

Node.js (Express)

Express é um framework minimalista para Node.js que simplifica a criação de APIs e aplicações web no backend. É conhecido por sua flexibilidade e simplicidade.

Exemplo: LinkedIn, Netflix e Uber utilizam Express.js em partes de suas aplicações backend.

Django (Python)

Django é um framework de alto nível para Python que incentiva o desenvolvimento rápido e limpo. Vem com um ORM poderoso, sistema de administração automático e muitos recursos de segurança.

Exemplo: Instagram, Spotify e Dropbox são construídos com Django.

Ruby on Rails

Rails é um framework que segue a filosofia "convenção sobre configuração", o que significa que ele faz suposições sobre o que você precisa para começar, permitindo que você escreva menos código.

Exemplo: Airbnb, GitHub e Shopify são exemplos de aplicações construídas com Ruby on Rails.

Spring Boot (Java)

Spring Boot simplifica o desenvolvimento de aplicações Java, fornecendo configurações padrão para começar rapidamente, mas permitindo personalizações quando necessário.

Exemplo: Netflix, Amazon e muitas instituições financeiras utilizam Spring Boot.

Com o WindSurf/Cascade, você pode trabalhar com qualquer um desses frameworks de forma mais eficiente, aproveitando o poder da IA para acelerar seu desenvolvimento, seja no frontend ou no backend.

Módulo 2: Estrutura e Fluxo de Desenvolvimento

Neste módulo, você aprenderá como organizar seu projeto e o fluxo de trabalho desde o desenvolvimento local até a publicação.

Estrutura de Pastas do Projeto

Quando criamos um aplicativo, o primeiro passo é criar uma pasta dedicada no nosso computador. Esta pasta será o "lar" do nosso projeto, onde todos os arquivos e subpastas relacionados ao código ficarão organizados.

Exemplo de estrutura básica:

meu-projeto/
├── src/            # Código-fonte principal
│   ├── components/ # Componentes reutilizáveis (para projetos frontend)
│   ├── pages/      # Páginas da aplicação
│   └── styles/     # Arquivos CSS ou estilos
├── public/         # Arquivos estáticos (imagens, fontes, etc.)
├── tests/          # Testes automatizados
├── package.json    # Dependências e scripts (para projetos JavaScript)
└── README.md       # Documentação do projeto

Esta organização facilita encontrar e manter o código, especialmente quando o projeto cresce. Cada framework pode ter convenções específicas de estrutura, mas o princípio é o mesmo: manter tudo organizado de forma lógica.

Desenvolvimento Local

Após criar a estrutura do projeto, desenvolvemos e testamos o aplicativo localmente no nosso próprio computador. Isso permite:

Desenvolvimento rápido: Você pode ver as mudanças imediatamente sem precisar publicar nada.
Testes em ambiente controlado: Encontre e corrija erros antes de disponibilizar para outros usuários.
Experimentação: Teste novas funcionalidades sem afetar usuários reais.

A maioria dos frameworks modernos inclui servidores de desenvolvimento local que atualizam automaticamente o navegador quando você faz alterações no código.

Controle de Versão com GitHub

Depois que o código estiver funcionando localmente, o próximo passo é enviá-lo para um repositório no GitHub (ou outro serviço de controle de versão). Isso oferece:

Backup seguro: Seu código fica armazenado na nuvem, protegido contra perda de dados.
Histórico de alterações: Você pode voltar a versões anteriores se algo der errado.
Colaboração: Várias pessoas podem trabalhar no mesmo projeto sem conflitos.
Ponto de partida para publicação: Muitos serviços de hospedagem se integram diretamente ao GitHub.

Comandos básicos do Git:

# Inicializar um repositório Git
git init

# Adicionar arquivos para commit
git add .

# Criar um commit com mensagem
git commit -m "Primeira versão do projeto"

# Conectar ao repositório remoto
git remote add origin https://github.com/seu-usuario/seu-repositorio.git

# Enviar código para o GitHub
git push -u origin main

Com o código no GitHub, você estará pronto para o próximo passo: a publicação do seu aplicativo, que veremos no Módulo 3.

Módulo 3: Publicação de Aplicativos

Neste módulo, você aprenderá como publicar seu aplicativo na internet usando diferentes plataformas de hospedagem.

Plataformas de Hospedagem

Depois de desenvolver seu aplicativo e enviá-lo para o GitHub, o próximo passo é torná-lo acessível na internet. Existem várias plataformas que facilitam esse processo:

Netlify

O Netlify é uma plataforma especializada em hospedagem de sites estáticos e aplicações frontend. É extremamente popular entre desenvolvedores React, Vue e Angular.

Implantação contínua diretamente do GitHub
Certificados SSL gratuitos
Funções serverless para pequenas operações de backend
Preview de branches para testar alterações antes de publicar
Plano gratuito generoso para projetos pessoais

Vercel

Criada pelos desenvolvedores do Next.js, a Vercel é especializada em aplicações React, mas suporta praticamente qualquer framework frontend.

Otimizada para aplicações Next.js
Edge Functions para processamento rápido
Analytics integrado
Ambientes de preview para cada commit
Integração nativa com CMS headless

VPS com Easypanel

Para aplicações mais complexas que exigem um servidor completo, uma VPS (Servidor Privado Virtual) com Easypanel oferece mais controle.

Controle total sobre o ambiente do servidor
Interface gráfica para gerenciar aplicações (Easypanel)
Suporte a Docker para isolamento de aplicações
Capacidade de hospedar múltiplos projetos no mesmo servidor
Ideal para aplicações full-stack com necessidades específicas

Usado no curso

Cloudflare Pages

O Cloudflare Pages é um serviço de hospedagem JAMstack que combina a rede global da Cloudflare com um fluxo de trabalho de desenvolvimento moderno.

Rede de distribuição global para carregamento rápido em qualquer lugar
Integração com Workers para funcionalidades de backend
Proteção contra DDoS e outros ataques
Builds ilimitados e colaboradores ilimitados
Suporte a praticamente qualquer framework frontend

No decorrer deste curso, utilizaremos o Cloudflare Pages para publicar nossas aplicações, aproveitando sua facilidade de uso e recursos avançados.

Processo de Publicação

Embora cada plataforma tenha suas particularidades, o processo geral de publicação segue estes passos:

Preparação do Projeto

Certifique-se de que seu projeto está funcionando localmente e que possui um arquivo de configuração adequado (como package.json para projetos JavaScript).
Conexão com o Repositório

Conecte a plataforma de hospedagem ao seu repositório GitHub, dando permissão para acessar o código.
Configuração da Build

Configure os comandos de build e outras configurações específicas da plataforma (variáveis de ambiente, etc.).
Implantação

Inicie a implantação e aguarde o processo de build e publicação ser concluído.
Configuração de Domínio

Opcionalmente, configure um domínio personalizado para seu aplicativo.

Dica para o Cloudflare Pages:

Ao usar o Cloudflare Pages, você pode aproveitar as Cloudflare Workers para adicionar funcionalidades de backend sem precisar de um servidor separado. Isso é especialmente útil para APIs simples e processamento de formulários.

Módulo 4: Supabase como Backend

Neste módulo, você aprenderá a utilizar o Supabase como solução de backend para suas aplicações.

O que é o Supabase?

O Supabase é uma alternativa de código aberto ao Firebase, oferecendo um conjunto completo de ferramentas para criar o backend de aplicações web e mobile de forma rápida e eficiente.

Principais Recursos do Supabase

Banco de Dados PostgreSQL

Banco de dados relacional completo e poderoso, com suporte a SQL e extensões avançadas.

Autenticação e Autorização

Sistema completo de gerenciamento de usuários, com login social, MFA e controle de permissões.

API Instantânea

APIs RESTful e GraphQL geradas automaticamente a partir da estrutura do seu banco de dados.

Armazenamento de Arquivos

Sistema para upload, organização e distribuição de arquivos, com políticas de acesso personalizáveis.

Edge Functions

Funções serverless para executar lógica personalizada no backend, próximo aos usuários.

Realtime

Atualizações em tempo real via websockets, permitindo criar aplicações colaborativas.

Por que usar o Supabase?

Desenvolvimento Rápido: Reduza significativamente o tempo de desenvolvimento do backend.
Código Aberto: Sem lock-in de fornecedor, você pode até mesmo hospedar sua própria instância.
Escalabilidade: Construído sobre PostgreSQL, pode escalar de projetos pessoais a aplicações empresariais.
Segurança: Políticas de segurança em nível de banco de dados e integração com provedores de identidade.
Experiência de Desenvolvimento: Ferramentas e documentação excelentes para desenvolvedores.

Integração com Cloudflare Pages

Uma das grandes vantagens de usar o Supabase com Cloudflare Pages é a combinação de um frontend rápido e distribuído globalmente com um backend poderoso e flexível. Neste curso, você aprenderá como:

Configurar variáveis de ambiente no Cloudflare Pages para se conectar ao Supabase
Implementar autenticação de usuários usando Supabase Auth
Criar e consumir APIs usando o banco de dados PostgreSQL do Supabase
Gerenciar uploads de arquivos com Supabase Storage
Implementar funcionalidades em tempo real nas suas aplicações

Dica:

O Supabase oferece um plano gratuito generoso, perfeito para aprendizado e desenvolvimento de projetos pessoais. Você pode começar a usar imediatamente sem precisar de cartão de crédito.