IGNEWS

Aplicação para iscrição em newsletter com assinatura via stripe.

Sobre o projeto | Tecnologias | Configurações | Lincença | Autor

## Sobre --- Este projeto tem como objetivo de estudo o desenvolvimento de aplicações ReactJS com o framework [NextJS](https://nextjs.org/) (criado pela [Vercel](https://vercel.com/)) aplicado neste exemplo para controle de listagem de posts em um sistema de inscrição por assinatura.

Foi projeto usando a exemplo o consumo de API externas, API Root, Server Side Rendering (SSR), Static Site Generation (SSG), STRIPE (plataforma de pagamentos) para o gerenciamento das assinaturas, NextAuth.js para a autenticação com o Github, FaunaDB para armazenar informações dos usuários em banco de dados e Prismic CMS para gerenciar o conteúdo da newsletter.

Projeto desenvolvido na prática durante as aulas do Ignite da Rocketseat
Demo do projeto: https://ignews-andrelinos.vercel.app

Tecnologias

Abaixo está detalhado a lista das principais tecnologias usadas para a construção da aplicação:

Ferramenta	Leia mais
ReactJS	https://reactjs.org
NextJS	https://nextjs.org
TypeScript	https://www.typescriptlang.org
SASS	https://sass-lang.com
Next-Auth	https://next-auth.js.org
Stripe	https://stripe.com
FaunaDB	https://fauna.com
Prismic CMS	https://prismic.io

Requisitos do ambiente

Para executar o projeto você precisará ter instalado em seu sistema operacional as seguintes ferramentas:

Ferramenta	Leia mais
Git	Git
npm	npm ou yarn
Stripe CLI	Stripe CLI

Serviços externos

Você precisa ter uma conta ativa nos serviços usados neste projeto. Para criar a conta é bem simples, caso ainda não tenha uma.

Serviço	Leia mais
Stripe	Stripe
FaunaDB	FaunaDB
Prismic CMS	Prismic CMS

Fazendo o download do Stripe-CLI

Linux

Baixe o arquivo tar.gz com a última versão do stripe para linux em https://github.com/stripe/stripe-cli/releases/latest

Nota: Salve este arquivo dentro da pasta stripe-cli que está na raiz do projeto Ignews se desejar continuar usando o comando yarn stripe.

Descompacte o arquivo usando a seguinte linha de comando estando dentro da pasta onde você baixou o arquivo compactado:

$ tar -xvf stripe_X.X.X_linux_x86_64.tar.gz

Nota: A descrição do arquivo stripe_X.X.X_linux_x86_64.tar.gz, você deve substituir pelo nome correto do arquivo baixado (ex: stripe_1.7.0_linux_x86_64.tar.gz).

Microsoft Windows

Baixe o arquivo stripe_X.X.X_windows_x86_64.zip em sua última versão do stripe para Windows em https://github.com/stripe/stripe-cli/releases/latest

Nota: Salve este arquivo dentro da pasta stripe-cli que está na raiz do projeto Ignews se desejar continuar usando o comando yarn stripe.

Descompacte o arquivo dentro da pasta stripe-cli que está na raiz do projeto Ignews.

Mac-OS

Baixe o arquivo tar.gz com a última versão do stripe para mac-os em https://github.com/stripe/stripe-cli/releases/latest

Nota: Salve este arquivo dentro da pasta stripe-cli que está na raiz do projeto Ignews se desejar continuar usando o comando yarn stripe.

Descompacte o arquivo usando a seguinte linha de comando estando dentro da pasta onde você baixou o arquivo compactado:

$ tar -xvf stripe_X.X.X_mac-os_x86_64.tar.gz

Opcional: Você pode instalar o binário para ser executado de forma global copiando-o para a pasta de uso global (ex: /usr/local/bin).

Clonando o projeto Ignews

Vá até a pasta onde você quer baixar o prjeto.
Execute o comando abaixo para clonar o repositório:

$ git clone https://github.com/andrelinos/ignews.git && cd ignews

Para baixar as dependências necesárias do projeto, execute o comando abaixo:

# Para npm, mesmo procedimento, basta executar "npm" no lugar do yarn

$ yarn

Agora crie o arquivo de variáveis de ambiente com o comando abaixo:

$ cp .env.local.example .env.local

O que fazer no Prismic CMS

Criando estrutura dos posts no Prismic CMS

Crie um novo repository no Prismic CMS.
Informe no campo Respository name um nome para seu repositório (ex: meu-ignews).
Em Display name (optional) pode deixar como está.
Agora em What is your role/job title? escolha Developer.
No campo What technology do you plan to use in your repository? escolha Next.js
Escolha em Available plans o plano Free e clique no botão Create repository
Selecione o Respository que você acaba de criar clicando nele.
Na tela seguinte, escolha Portuguese - Brazil e clique no botão Define as the main language (esta parte é apenas relacionado a configurações para o idioma, não quer dizer que o prismic ficará em português).
Clique agora no botão Create custom type para criar o tipo de post para seu projeto.
Escolha agora Repeatable Type para continuar (formato selecionado para este projeto).
No campo Enter your type name, informe a palavra Post (nome usado neste projeto).
Na próxima página, arrast o item UID e no campo Field name* digite UID e clique no botão OK.
Em seguida, arraste o item Title e no campo Field name* digite Title e clique no botão OK.
Em seguida, arraste o item Rich Text field e no campo Field name* digite Content, no campo API ID* digite content e clique no botão OK.
Por fim, clique em Save para salvar seu projeto.

Criando seus posts

Clique no ícone Documents (na parte superior esquerda da tela abaixo do ícone do Prismic).
Agora clique no botão Create new localizado na parte superior direita da tela.
Então, informe o título (Title) para seu post e o conteúdo (Content).
Para finalizar clique em Save (na parte superior direita da tela).
Em seguida, no mesmo local estava Save, clique em Publish e em seguinte, clique em Publish novamente para publicar seu post.
Pronto!, está tudo certo no Prismic para você testar o projeto. Nota: Publique uns 5 posts para ter uma melhor experiencia na aplicação.

Executando o Stripe CLI

Digite no terminal estando dentro da pasta raiz do projeto Ignews o comando abaixo:

Linux

# ./stripe listen  --forward-to localhost:3000/api/webhooks

$ yarn stripe

Windows

# stripe.exe listen  --forward-to localhost:3000/api/webhooks

~ yarn stripe

Nota:

Este script executa o comando para escutar a api do stripe. O mesmo está alistado nos scripts do arquivo.package.json (./stripe listen --forward-to localhost:3000/api/webhooks).
Par executar comando acima, você precisa ter o arquivo stripe dentro da pasta stripe-cli que está na raiz do projeto Ignews.

Por fim, execute a aplicação usando o comando abaixo:

# Para o npm, basta executar da mesma forma, "npm dev"

yarn dev

Pronto, basta abrir a aplicação em seu navegador acessando o endereço http://localhost:3000 e testar suas funcionalidades.

Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Free Software, Hell Yeah!

Autor

Andrelino Silva 🚀

Sou apaixonado por tecnologias e quero muito criar coisas grandes e de ajudar as pessoas. Estou na luta para estudar e conciliar família, estudos, trabalho.

Rede social	Saiba mais
GitHub	https://github.com/andrelinos
Linkedin	https://linkedin.com// in/andrelinosilva
Twitter	https://twitter.com/ _andrelinosilva
Facebook	https://facebook.com/ andrelinossilva
Instagram	https://instagram.com/andrelinossilva
Youtube	https://youtube.com/ c/AndrelinoSilvas
Rocketseat	https://app.rocketseat.com.br/ me/andrelinosilva

Made with 💜 by Andrelino Silva