Checklist antes de lançar aplicação
UI linda e core feliz não significam produção: faltam observabilidade, auth/billing edge cases e um checklist mínimo pré-prod.
Resposta direta
App pronto na UI ainda não está pronto pra lançar — o que falta. Então criamos uma sessão de check-out em nosso backend apenas para armazenar os dados em nosso database e então fazemos uma solicitação para Stripe e Stripe vai criar outra sessão de check-out e então Stripe retornará a sessão de check-out como resposta e esta sessão.
Ilusão do 'quase multimilionário'
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Ilusão do 'quase multimilionário'». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Então agora a pergunta é como exatamente o fluxo de contato do Stripe funciona e, mais importante, como simplificamos e streamlinhamos o pagamento sem reinventar o Bem, deixe-me te mostrar. Então, para o front-end, eu uso Next.js, mas isso pode literalmente ser qualquer coisa, React, Svelte, o que quer que os kids de cool usem. Porque, novamente, os kids legais agora usam Hono, mas em mais casos eu pessoalmente apenas uso Next.js com os operadores de ruta e ações do server para o meu fundo de conta.
E essa é a razão por que eu tenho que usar Stripe e também é a razão pela qual a maioria das pessoas usa Stripe. Então, primeiro de tudo, nosso usuário abrirá nossa página e verá, ei, esse usuário vende uma subscrição por, digamos, 20 dólares por mês para ter acesso à aplicação. Isso significa que o front-end então fará uma solicitação para o back-end e o back-end agora receberá a informação Hey, this user wants to buy access to our application, but again, our backend cannot handle.
Observabilidade e erros
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Observabilidade e erros». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Isso significa que vamos guardar a informação em nosso database, vamos fazer uma solicitação para o database, mas isso ainda não interage com o Stripe. Então criamos uma sessão de check-out em nosso backend apenas para armazenar os dados em nosso database e então fazemos uma solicitação para Stripe e Stripe vai criar outra sessão de check-out e então Stripe retornará a sessão de check-out como resposta e esta sessão de check-out é apenas um objeto de javascript estável com a few key details like what tier, what user, what preço, que plano anual, em outras palavras, e coisas do tipo. Então o back-end vai receber este objeto e a coisa mais importante é que este objeto também tem uma URL de checkout, porque queremos, claro, deixar o usuário pagar pela nossa aplicação e isso significa que vamos redirecionar o usuário para a página checkout do Stripe host, porque esta URL está lá para redirecionar o usuário para esta página.
E se um usuário clicar em Get Premium Access e clicar em Checkout Now, eu vou redirecionar o usuário, ou em outras palavras, meu backup, e vou redirecionar o usuário para esta página de checkout hostada. Então aqui eu posso dizer Stripe Checkout Page e então, uma vez que o usuário acessar sucessivamente os detalhes da sua carta de crédito e clicar em pagar agora, Stripe vai receber uma solicitação e então, é claro, processá-la e construir o usuário. Um usuário faz uma solicitação para o frontend, o frontend faz uma solicitação para o backend, o backend cria uma sessão de checkout, então o Stripe cria uma sessão de checkout, nós redirecionamos o usuário para a página de checkout do host, o usuário paga e é isso.
Na prática
App pronto na UI ainda não está pronto pra lançar — o que falta.
Auth, billing, edge cases
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Auth, billing, edge cases». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Se a pagina for sucessiva porque por exemplo se um usuário se inscreve pela primeira vez a pagina pode ser sucessiva mas se no próximo mês a pagina do usuário falhar porque a carta não tem o suficiente dinheiro nós queremos saber isso nós queremos então bloquear o usuário praticamente isso significa que aqui o Stripe agora também fará uma request to our backend and that's because we have to now implement a web pro candler Então aqui eu posso dizer Webhook e agora este vendedor Webhook vai ouvir muitos eventos, como em mais complexas aplicações você tem que ouvir cerca de 30 eventos, mas os mais básicos eventos estão lá para lidar com falhas, sucesso e também se nós não podemos rechargar o usuário. Então, esse é o set de funções-cores que você tem que enablar ou desenvolver como desenvolvedor, eu diria que algo assim provavelmente levaria 1 a 2 semanas se você é um bom desenvolvedor com muitos co-trabalhadores não é fácil você tem que testar tudo ver que tudo funciona e coisas assim então agora você pode dizer oi jan eu quero dizer sim esse diagrama parece legal mas por que você está me mostrando tudo isso aqui eu quero dizer que não há nada que podemos mudar sim O billiging é assustador, é assustador implementá-lo, é muito difícil, pode ficar muito complicado muito rápido, especialmente em um contexto B2B. Então, o billing é na verdade um layer construído em cima de Stripe, o que permite você, praticamente, streamlinhar e simplificar todo esse fluxo de checkout.
Então, como você vê aqui antes de começar, eu tenho que instalar a URL de recado e a URL de logout, então eu clico em set e também aqui em Set. Ambos esses componentes são sem cabeça, por isso adicionei um nome de classe aqui, que é igual a variança de botão para estilizar esse link como um botão do chat CNUI. Então, como você pode ver aqui, eu fui redirecionado para o dashboard, porque eu tenho esta URL de redireção de login que redireciona os usuários, os usuários autenticados, para a rota de dashboard.
Checklist mínimo pré-prod
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Checklist mínimo pré-prod». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Porque eu tenho uma sessão de usuários válidas, isso significa que aqui na barra de nav eu quero obter a sessão de usuários agora, como isso é um componente do server, eu farei isso no lado do server, mas em maioria dos casos você quer fazer isso no lado do cliente, então aqui abaixo do retorno eu posso criar uma constante destruturada e isso será igual ao hook de sessão de server de getkind. O hook de sessão de getkind expõe funções que só sejam feitas no lado do server e eu quero obter a função getuser e esta é a promessa, o que significa que eu tenho que esperar. Agora que eu tenho minha sessão de user, eu posso criar um turner, porque o user pode ser definido como você vê aqui ou pode ser zero se não há sessão de user válida.
Então se eu clicar no fundo, aqui na div, eu vou criar um ternário e se há um usuário, eu vou aqui apenas render esse link e se não há usuário, então eu vou render esses dois links. E então para as políticas, você pode atualizá-las se quiser, mas aqui tem uma coisa importante que eu quero permitir e é que eu quero mostrar a tabela de preço quando um cliente assina. Isso significa que uma vez que um usuário vai para a minha página de lançamento e vê, uau, essa software parece tão legal, deixe-me comprar, ele clica em assinar, registrar e antes de ser redirecionado de volta à minha página de lançamento, o usuário verá uma tabela de preços, então os detalhes de pagamento corentes estão finalizados, o que significa que eu posso voltar ao dashboard e eu posso ir para a seção de pagamento.
Sinais de que está funcionando
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E então para a corrente de default, isso será usd agora aqui você verá algo interessante este é agora o seu plano Mas antes de editarmos o plano, se voltarmos ao overview de planos, você verá que este criou um grupo, um grupo de usuários de default. Eu posso adicionar outra funcionalidade, esta será uma funcionalidade metade e neste caso, esta será esta 100 api calls anual, eu posso paste-a para a descrição e para a chave, esta é novamente o que você referirá no seu código, então eu vou apenas dizer api calls anual, eu posso também adicionar unidades máximas, novamente, qual foi a quantidade máxima? Então, novamente, se vamos voltar ao diagrama, esta tira Pro tem as mesmas funções que esta tira Free, o que significa que com o plano Pro, um usuário ainda pode acessar o dashboard, criar 100 chamadas de API anualizadas, mas há uma função adicional e é a Branding Custom.
E então quero adicionar mais uma funcionalidade e isso será aqui em Custom Branding, o que significa que quero adicionar uma funcionalidade não metadeada para o nome, isso será Custom Branding, e para a chave Custom-Branding. Aqui eu tenho que selecionar o grupo, como todos sabem, nós já temos um grupo, este é o grupo de planos do usuário, este é o grupo de default e eu vou clicar em salvar. Também você pode editar o conteúdo, então se você clicar em editar, então aqui você pode editar toda a informação, a descrição, o nome do display, o texto do botão CTA, mas aqui eu vou deixar como o default e clicar em salvar.
O que evitar na primeira semana
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Mas não há database, não há Stripe, não há página de checkout de Stripe, não há webhook handler, não há página de sucesso ou página cancelada. Então isso significa que se eu voltar para Kind e ir para os meus usuários, de fato, eu deveria agora novamente ter um usuário, sim, Jan Marshall, e aqui você vai ver algo interessante. Isso significa que eu também gostaria de mostrar aqui um pequeno padrão que diz, Hey, Jan está na tia Pro ou na tia Free ou talvez na tia Team Plan, quem sabe, talvez ele seja rico.
E também eu gostaria de receber os entitelmentos, porque, novamente, se eu for para os meus usuários e se eu for para Jan Marshall, como todos vocês sabem, eu tenho três entitelmentos, ou, neste caso, eu tenho dois entitelmentos, porque eu agora acabei de atualizar o plano rapidamente, então eu tenho 100 chamadas de API mensais. Então, em geral, eles têm a API de gestão e você pode ativar esse endereço de pagamento, esse endereço de endereço de endereço e isso retornará todos os as entidades que o usuário em geral tem acesso atualmente. Eu fiz isso aqui porque, novamente, no final do dia, na verdade, você deveria ter sua sessão de usuários no lado cliente, não no lado do server.
Como explicar isso para o time
Nesta parte do material sobre checklist lancamento aplicacao web, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
E aqui dentro eu agora tenho um toque de uso para literalmente apenas coletar este handler de rotas para fazer uma solicitação de get e então para obter esta data. E então aqui eu tenho minhas funções, primeiro de tudo acesso ao dashboard básico e então chamadas de api anual, então isso parece bom e também Então aqui eu tenho uma array de planos e essa array de planos tem um objeto que é o planos livre. Plano que eu sou e eu tenho que passar uma chave de condenação como por exemplo pro e se eu estou no plano pro então isso será verdade isso significa que aqui no baixo eu posso apenas criar um batch e criar alguns turneries que não amam turneries se o usuário está no plano pro eu vou render pro se o usuário está no plano de time eu vou render o time e se o usuário está no plano livre eu vou render livre isso significa que em teoria se eu voltar e fazer um forte refresh, deveria dizer right here Free!
E aqui para este link, ao invés de redirecionar o usuário para o dashboard, eu vou, ao invés, usar o link portal e o link portal vai redirecionar o usuário para o portal self-serve. E como você pode ver aqui, há muitas coisas que eu posso Apoio update first of all I can update profile data so I'm now called Jan Fischer Marshall and then I can also update my plan for example as you see right here I'm on the free plan so if I click on change plan I can either upgrade to the pro plan or to the team plan I want to upgrade to the team plan and as you see right here my plan has been updated I'm now on the team plan I now pay 500 per month E se eu voltar para minha aplicação, também está atualizado aqui, diz Team. Eu vou lançar um vídeo grande em breve, em que implementaremos o pagamento em um contexto B2B e eu vou criar muitas coisas legais, AI, B2B, pagamentos de pagamento.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.