Skip to content

Latest commit

 

History

History
252 lines (179 loc) · 10.1 KB

LEIAME.md

File metadata and controls

252 lines (179 loc) · 10.1 KB

IG.NEWS

App

README.md

Índice

🧾 Sobre o projeto

IG.NEWS é uma newsletter sobre o mundo React. Nela foram implementadas:

  • Páginas que utilizam conceitos de SSR (Server Side Rendering) e SSG (Static Site Generation).
  • Autenticação via Github (OAuth authentication) utilizando NextAuth
  • Integração com o banco de dados NoSQL Fauna
  • Integração com o serviço de pagamentos online Stripe
    A aplicação também foi configurada para receber alguns webhooks disparados por esse serviço. Para ser mais específico, webhooks como: finalização de pagamento, atualização de assinatura e cancelamento de assinatura.
  • Integração com o headless CMS (Content Management System) Prismic.

🚀 Principais tecnologias utilizadas

(Você pode ver todas as dependências do projeto no arquivo package.json)

🔽 Como baixar o projeto

$ git clone https://github.com/victorbadaro/ignite-ignews

💻 Como executar o projeto

Os comandos abaixo utilizam o gerenciador de pacotes yarn. Execute-os no seu terminal.

  1. Instale as dependências do projeto

    $ yarn

  2. A aplicação também depende de outros serviços para funcionar. São serviços de pagamento, autenticação, banco de dados e CMS. Todos eles devem ser configurados antes da execução do app. Veja a seção Serviços

  3. A aplicação pode ser executada tanto no ambiente de produção como no ambiente de desenvolvimento:

    • Para executar a aplicação no ambiente de desenvolvimento:

      $ yarn dev

    • Para executar a aplicação no ambiente de produção:

      • Gere o build da aplicação:

        $ yarn build

      • Agora basta executar o projeto:

        $ yarn start

Se tudo for executado corretamente, uma mensagem será apresentada no terminal informando que o servidor foi iniciado:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Agora basta abrir o navegador e acessar: http://localhost:3000/

✅ Pronto! Se você seguiu corretamente os passos acima o projejto já estará sendo executado localmente em tua máquina.

👨‍🔧 Serviços

Antes de qualquer coisa, crie um arquivo na raíz do projeto com o nome .env.local. Insira as seguintes variáveis dentro do arquivo criado:

# Stripe
STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_SUCCESS_URL=http://localhost:3000/posts
STRIPE_CANCEL_URL=http://localhost:3000

# FaunaDB
FAUNADB_KEY=

# Github
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Prismic CMS
PRISMIC_ENDPOINT=
PRISMIC_ACCESS_TOKEN=

  1. Stripe
    Crie uma conta no Stripe e cadastre um produto. Para criar um produto, basta clicar em Products e depois em Add product. Deixe selecionada a opção Recurring. Stripe product

    Três chaves são necessárias para a integração correta com o serviço do Stripe.
    No dashboard do Stripe, clique no menu Developers e em seguida em API Keys para obter tanto a Publishable key como a Secret key.
    Copie as chaves para o arquivo .env.local:
    STRIPE_API_KEY=Secrect key
    NEXT_PUBLIC_STRIPE_PUBLIC_KEY=Publishable key Stripe keys

    Para obter a última chave do Stripe, baixe a CLI: Stripe CLI

    E execute os seguintes comandos no terminal:

    # Acesse o diretório onde está a CLI baixada
# Execute:
./stripe login

# Após confirmar no navegador a autenticação execute:
./stripe listen --forward-to http://localhost:3000/api/webhooks

    A chave irá aparecer na tela. Copie e cole ela dentro do arquivo .env.local na frente de STRIPE_WEBHOOK_SECRET= Stripe webhooks key

    Este último comando deve estar sendo executado durante toda a execução do proejto.

  2. FaunaDB Crie uma conta no Fauna e em seguida um Database. FaunaDB

    Após dar um nome para o Database criado, crie duas Collections: subscriptions e users Create collection Create collection

    Criadas as Collections, crie agora os Indexes abaixo seguindo o exemplo da imagem: FaunaDB Index

    Index Name: user_by_email
Source Collection: users
Terms: data.email
Unique

Index Name: user_by_stripe_customer_id
Source Collection: users
Terms: data.stripe_customer_id

Index Name: subscription_by_id
Source Collection: subscriptions
Terms: data.id

Index Name: subscription_by_status
Source Collection: subscriptions
Terms: data.status

Index Name: subscription_by_user_ref
Source Collection: subscriptions
Terms: data.userId

    Agora, depois que a estrutura do banco já estiver pronta (com as Collections e Indexes), gere uma Secret key. Para isso basta acessar o menu Security e dar um nome para a nova key: FaunaDB key

    A chave aparecerá na tela logo em seguida: FaunaDB key2

    Copie essa chave e cole dentro do arquivo .env.local na frente de FAUNADB_KEY.

  3. Github Crie uma conta no Github. Acesse as configurações da conta e clique em Developer settings. Github

    Dentro de OAuth Apps, crie um novo OAuth App: Github OAuth App

    Preencha os campos que irão aparecer na tela para registrar a aplicação OAuth. Em Homepage URL e Authorization callback URL preencha seguindo o modelo abaixo:
    Homepage URL = http://localhost:3000
    Authorization callback URL = http://localhost:3000/api/auth/callback OAuth register

    Após ter registrado a aplicação OAuth já será possível obter o Client ID e o Client Secret. O Client Secret será gerado clicando no botão Generate a new client secret.
    Copie o Client ID para dentro do arquivo .env.local, na frente de GITHUB_CLIENT_ID e o Client Secret na frente de GITHUB_CLIENT_SECRET.
    GITHUB_CLIENT_ID=Client ID
    GITHUB_CLIENT_SECRET=Client Secret OAuth secrets

  4. Prismic CMS Crie uma conta no Prismic e em seguida também um repositório: Prismic repository

    Para iniciar a crição de posts no Prismic CMS você deve, antes, criar um type de nome post: Prismic type

    Arraste os três itens destacados na imagem abaixo (UID, Title e Rich Text) para o a página em branco na esqueda.
    Preencha o campo API ID de cada item dessa forma: uid, title e content respectivamente. Prismic type post

    Com o type de post já criado acesse o menu Documents e cadastre os posts que irão aparecer na aplicação do IG.NEWS: Prismic Document

    Os campos necessários para a crição de um post são o title e o content: Prismic document 2

    Após a edição do documento é só clicar em Save e Publish: Prismic document GIF

    Agora que o conteúdo já está pronto, basta obter o Endpoint da API e o token de acesso do Prismic.
    Copie o API Endpoint e coloque na frente de PRISMIC_ENDPOINT no arquivo .env.local Prismic API endpoint

    Copie o Permanent access token gerado (depois de clicar em Add token) e coloque na frente de PRISMIC_ACCESS_TOKEN no arquivo .env.local Prismic access token

👌 Como usar o app

O uso do IG.NEWS é muito simples. Ele é uma Newsletter sobre o mundo React. Os posts nele disponibilizados podem ser visualizados por todos, mas somente os assinantes terão acesso aos textos completos dos artigos. Para ser assinante, deve-se ter uma conta no Github (para fazer a autenticação na plataforma do IG.NEWS) e realizar um pagamento mensal através do serviço de pagamentos online Stripe (valor informado na Homepage). Não se preocupe, para testar a aplicação você não precisará informar dados reais de algum cartão de crédito ou algo assim. Na tela de pagamentos do Stripe você pode utilizar o seguinte número de cartão de crédito:

4242 4242 4242 4242

Esse é um número de cartão de crédito pra testes do Stripe.
Veja abaixo o fluxo da aplicação: Ignews is running


Este projeto foi criado e desenvolvido com ❤ por Victor Badaró