Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/am-matheusoliveira/teste-pratico-mercado-livre
Integração API Mercado Livre - Cadastro Produto
https://github.com/am-matheusoliveira/teste-pratico-mercado-livre
aws bootstrap laravel laravel-framework mercadolibre mysql ngrok php tailwindcss
Last synced: 22 days ago
JSON representation
Integração API Mercado Livre - Cadastro Produto
- Host: GitHub
- URL: https://github.com/am-matheusoliveira/teste-pratico-mercado-livre
- Owner: am-matheusoliveira
- Created: 2024-10-20T01:25:49.000Z (25 days ago)
- Default Branch: main
- Last Pushed: 2024-10-21T01:32:46.000Z (24 days ago)
- Last Synced: 2024-10-22T05:38:47.165Z (23 days ago)
- Topics: aws, bootstrap, laravel, laravel-framework, mercadolibre, mysql, ngrok, php, tailwindcss
- Language: PHP
- Homepage: https://501d-2804-18-89d-1914-202c-6fce-50f0-fabd.ngrok-free.app
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Integração API Mercado Livre
## Objetivo
Este projeto realiza a integração com a API do Mercado Livre, permitindo ao usuário cadastrar produtos em uma aplicação criada na plataforma Mercado Livre Developer.
## Deploy do projeto em produção
Este projeto está hospedado no serviço EC2 da AWS. Você pode acessá-lo e testá-lo agora mesmo clicando no link: [Deploy do Projeto no EC2](https://501d-2804-18-89d-1914-202c-6fce-50f0-fabd.ngrok-free.app)
## Funcionalidades desta Aplicação
Todas as funcionalidades exigidas no **enunciado** foram desenvolvidas, inclusive as **funcionalidades bônus.** Abaixo seguem as principais funcionalidades deste projeto:
1. Principais Funcionalidades
- Formulário para cadastro de um novo produto.
- Envio das informações do produto para a API do Mercado Livre.
- Exibição da resposta retornada pela API (se o produto foi criado com sucesso ou se houve algum erro).
2. Funcionalidades Bônus
1. Implementação de um sistema de autenticação no Laravel para proteger o acesso ao formulário de cadastro de produtos.
- Login do Usuário
- Cadastro de novo Usuário
- Edição do cadastro do Usuário
- Recuperação de Senha do Usuário
- Validação de dados no formulário (ex: preços negativos, descrição vazia, etc.).
- Utilização de um framework CSS (ex: Bootstrap ou Tailwind) para melhorar a interface.
## Imagem - Formulário de Cadastro de Produtos
Esta é a tela principal do nosso sistema. Nela, temos a criação do nosso token, o cadastro de produtos e as respostas retornadas pela API.
## Informações adicionais
Nesta seção, gostaria de informar alguns detalhes sobre este projeto!
Sistema Operacional: Este projeto foi desenvolvido no Windows 11.
Mercado Livre HTTPS: Durante o desenvolvimento deste projeto, foram identificados alguns empecilhos devido às exigências do Mercado Livre. Por exemplo, o protocolo HTTPS: o Mercado Livre não permite o cadastro de produtos se o parâmetro REDIRECT_URI não utilizar o protocolo HTTPS.
Mercado Livre Imagens: Outra questão é sobre as imagens que você salva no cadastro de produtos. O Mercado Livre não armazena as imagens em seus servidores. Para cadastrar uma imagem no produto, você precisa de um serviço que hospede a imagem e, em seguida, gere a URL que será salva nesse cadastro.
Foi utilizado o serviço de hospedagem do ImgBB, um serviço web para hospedagem de imagens.
nGrok: Qual é o papel desta ferramenta? com o nGrok, esse problema com o protocolo HTTPS foi resolvido, com ele conseguimos criar um Tunnel HTTPS que simula um endereço REAL na internet com o protocolo HTTPS, essa foi a solução mais adequada que encontrei para atender a exigencia do Mercado Livre em usar somente o HTTPS no Cadastro.
Todo esse fluxo foi implementado no sistema. No formulário de cadastro, o usuário escolhe a imagem e envia. Produto cadastrado!
## Disclaimer
Quero pedir desculpas por toda essa explicação, mas, infelizmente, ela é essencial para que você entenda perfeitamente como executar este projeto em sua máquina de desenvolvimento.
## Ferramentas utilizadas
- Linguagem PHP v8
- Laravel Framework v11
- Laravel Breeze (Scaffold completo para as telas de usuário, login, register, etc.)
- Lucascudo (Biblioteca de tradução de textos do Laravel para o PT-BR)
- MySQL v8
- Tailwind CSS v3
- Bootstrap v5
- API Mercado Livre
- nGrok (Ferramenta usada para criar Tunnels com HTTPS)
## Requisitos essenciais
Para executar este projeto em sua máquina, é essencial que você tenha instaladas todas as ferramentas listadas abaixo, pois, sem elas, o projeto pode não funcionar corretamente.
- Servidor Web HTTP(WampServer, Xampp, etc.)
- Linguagem PHP (Se você instalou o WampServer ou Xampp o PHP já vem instalado junto)
- MySQL (Novamente se você instalou o WampServer ou Xampp o MySQL já vem instalado junto)
- nGrok (A necessidade desta ferramenta surgiu por causa das exigências da API do Mercado Livre, que não permite o cadastro de URLs com o protocolo HTTP, somente HTTPS.)
## Instalação dos requisitos essenciais
Nos links abaixo, você pode realizar o download das ferramentas informadas acima.
WampServer: [Página de Download](https://wampserver.aviatechno.net/)
Xampp: [Página de Download](https://www.apachefriends.org/pt_br/index.html)
nGrok: [Página de Download](https://ngrok.com/download)
## Vamos começar? Instalação do projeto
Vamos agora dar início à instalação deste projeto em sua máquina de desenvolvimento. Siga os passos abaixo.
### 1. Clonar o Repositório
```
git clone https://github.com/am-matheusoliveira/teste-pratico-mercado-livre.git
cd teste-pratico-mercado-livre
```
### 2. Instalar Dependências
```
composer install
```
### 3. Configurar o Arquivo `.env`
Crie um arquivo `.env` a partir do `.env.example` e configure as variáveis de ambiente.
```
cp .env.example .env
```
Edite o arquivo `.env` para incluir suas configurações de banco de dados, use este exemplo:
```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=seu_banco_de_dados - para este aplicativo o nome é: db_produtos
DB_USERNAME=seu_usuario - para este aplicativo o usuário é: root
DB_PASSWORD=sua_senha - para este aplicativo a senha é:
```
### 4. Gerar a Chave da Aplicação
```
php artisan key:generate
```
### 5. Criar o Banco de Dados e as Tabelas do Sistema
O comando abaixo deve funcionar tanto no PowerShell quanto no CMD e no Bash do Linux! Ele automatiza a resposta 'yes'.
```
echo "yes" | php artisan migrate
```
>Com a execução deste comando, o banco de dados `db_produtos` é automaticamente criado, assim como a tabela `produto`, que armazena todo o histórico dos produtos cadastrados no sistema.
## Configuração do ambiente .env e Mercado Livre
Agora que você já executou todos os passos acima, vamos dar início à configuração dos parâmetros obrigatórios do sistema e do Mercado Livre.
### 1. Arquivo `.env`
Neste arquivo, temos 4 parâmetros obrigatórios que devem ser preenchidos. São eles:
```
APP_URL= -> URL Da Aplicação
CLIENT_ID=
SECRET_KEY=
REDIRECT_URI=/produto/gerar-token
```
> Os parâmetros `` e `` podem ser obtidos no painel de controle das suas aplicações criadas no Mercado Livre. No caso do parâmetro ``, ele deve ser fornecido no momento em que você está criando uma nova aplicação. Siga as instruções abaixo para obter e fornecer este parâmetro.
Imagens de como obter esses dois parâmetros
### 1. Tela de listagem das aplicações do Mercado Livre
> Aqui você visualiza todas as aplicações criadas por você no Mercado Livre. Basta editar uma delas e obter esses parâmetros.
### 2. Parametros
> Aqui você pode ver, marcado em vermelho, os parâmetros mencionados acima. Agora, basta copiá-los e atualizar o seu arquivo `.env` com esses valores.
### Mercado Livre - Parametros
Quais são os parâmetros que devem ser fornecidos no Mercado Livre? Quando você cria uma nova aplicação, o Mercado Livre exige que dois parâmetros sejam informados. São eles: `REDIRECT_URI` (a URL que retorna o usuário para a aplicação após obter o Token de Acesso) e a URL de retorno para as notificações do Mercado Livre (este não é exatamente um parâmetro, mas sim a mesma URL que redireciona o usuário para sua aplicação. Obs: se preferir, pode fornecer outra URL).
> Mais abaixo temos instruções de como preencher esses dois campos, pois para obter este valor precisamos antes executar o nGrok e pegar sua URL
Imagens do formulário da edição de uma aplicação no Mercado Livre
### 1. Formulário de Edição do Parâmetro `REDIRECT_URI`
### 2. Formulário de Edição do Campo para a URL de Notificações
> Esses são os parâmetros obrigatórios que devemos preencher na criação de uma aplicação no Mercado Livre.
## Como obter a URL do sistema e incluí-la no nosso arquivo `.env` e no cadastro de uma nova aplicação no Mercado Livre
Agora vamos executar nossa aplicação, obter sua URL, atualizar o arquivo `.env` e criar uma nova aplicação no Mercado Livre com a URL gerada.
### 1. Executando o Servidor do Laravel
```
php artisan serve --host=localhost --port=8000
```
> Para que tudo corra perfeitamente bem, neste projeto usamos o servidor do próprio Laravel. É nele que o nGrok irá responder às requisições na porta 8000.
### 1. Executando o nGrok para obter a URL com o HTTPS
OBS: É importante que o servidor do Laravel esteja em execução antes do nGrok!
```
ngrok http 8000 --authtoken=2nalCZo5ID6B5IhHLuMDu3BZzy0_2p7RTAavPoU33r9aF5Sn1
```
> Como você pode ver, há um token neste comando. Não se preocupe, este token é da minha conta do nGrok, mas ele irá expirar em 30 dias.
Após executar o comando acima, você terá a seguinte saída:
Nesta saída, temos a nossa URL gerada. Você pode vê-la no destaque em vermelho, veja abaixo:
Copie essa URL, pois será ela que usaremos para criar a aplicação no Mercado Livre e atualizar nosso arquivo `.env`.
### Atualizando o arquivo `.env`
Agora que você já tem a URL gerada, atualize o arquivo `.env`. Como visto nas instruções acima, atualize os parâmetros.
```
APP_URL=
REDIRECT_URI=/produto/gerar-token
```
### Criar a aplicação no Mercado Livre DevCenter
Acesse o site do Mercado Livre DevCenter [ML DevCenter](https://developers.mercadolivre.com.br/devcenter) e faça login em sua conta. Depois, crie uma nova aplicação. No formulário de cadastro, nos campos 'URIs de redirect' e 'URL de retornos de chamada de notificação', informe a URL que você copiou anteriormente gerada pelo nGrok.
Após criar a aplicação, você terá acesso aos dois parâmetros do Mercado Livre.
```
CLIENT_ID=
SECRET_KEY=
```
> Como você viu nos passos acima, após criar a aplicação, basta copiar esses parâmetros gerados pelo Mercado Livre e atualizar o seu arquivo `.env` com esses valores.
### Finalmente! Executando a Aplicação
Se todos os passos acima foram seguidos corretamente, não teremos nenhum problema para executar nossa aplicação.
Como executar nossa aplicação? Para executar esta aplicação, basta abrir o seu navegador e colar a URL gerada pelo nGrok. Se tudo estiver correto, você verá a seguinte página:
## Imagens
### 1. Página inicial do nGrok:
>Se você se deparar com esta página, está tudo bem! Clique no botão 'Visit Site' e você será redirecionado para a página inicial da nossa aplicação.
### 2. Tela de Login da Aplicação:
> Essa é a página inicial da nossa aplicação. Caso você não tenha um usuário, clique no link 'Não tem uma conta?'.
### 3. Tela de Cadastro de Usuário da Aplicação:
> Essa é a tela de cadastro de novos usuários.
### 4. Dashboard da Aplicação:
> Esse é o dashboard da aplicação. Aqui é onde os menus são listados. Clique na opção 'Integração Mercado Livre'.
### 5. Cadastro de Produtos e Obtenção do Token de Acesso à API:
Como você pode ver nesta página, temos um botão para realizar login. Esse login se refere ao Mercado Livre e será através dele que iremos obter o token. Caso o login não seja feito, o formulário de cadastro de produtos não será habilitado, e, com isso, não será possível cadastrar nenhum produto.
É neste botão que a autenticação via OAuth entra em ação.
> Essa é a tela principal da nossa aplicação. Será aqui que iremos cadastrar os produtos no nosso banco de dados e no Mercado Livre.
## Não conseguiu rodar o projeto?
Se, após a execução de todas as etapas anteriores, você ainda não conseguir rodar este projeto, não se preocupe! Você ainda pode acessá-lo e testá-lo através do deploy de produção. Acesse o link deste projeto, que está rodando no AWS EC2: [Deploy do Projeto no EC2](https://501d-2804-18-89d-1914-202c-6fce-50f0-fabd.ngrok-free.app)
## Considerações Finais
Foi realmente muito desafiador criar esta solução, devido às regras do Mercado Livre. Mas boa parte de tudo o que eu expliquei poderia ter sido evitada se houvesse um domínio na web com HTTPS e SSL. Não seria necessária toda essa explicação.
---
### Referências
- **PHP 8.0**
[documentação oficial do PHP 8.0](https://www.php.net/releases/8.0/).
- **Laravel 11**
[documentação oficial do Laravel](https://laravel.com/docs).
- **nGrok**
[nGrok - Docs](https://ngrok.com/docs/).
- **API do Mercado Livre**
[Documentação da API do Mercado Livre](https://developers.mercadolivre.com.br/pt_br/itens-e-buscas).
- **Autenticação OAuth Mercado Livre**
[Autenticação OAuth](https://developers.mercadolivre.com.br/pt_br/autenticacao-e-autorizacao).
---
Sinta-se à vontade para explorar o código e fazer melhorias.
Se tiver alguma dúvida, entre em contato.