Workshop Hands-On APIX 2018 - Trilha Básica
1 gostou352 visualizações
O documento apresenta a agenda do evento APIX 2018, com palestras sobre tópicos relacionados a APIs, como Progressive Web Apps, GraphQL, Design de APIs, Mock Dinâmico de APIs REST, Detecção de Fraudes e Composição de Serviços. A agenda inclui os nomes dos palestrantes de cada sessão. Os gráficos mostram o crescimento anual de casos na plataforma SenseDIA e a interface do game APIXPay.
![JSON Server - package.json
● Alterar o packge.json
{
"name": "APIX2018 - Mock Server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "json-server --watch db.json --port 8080 --host
0.0.0.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"json-server": "^0.14.0"
}](https://image.slidesharecdn.com/workshophands-onapix2018-180816191050/85/Workshop-Hands-On-APIX-2018-Trilha-Basica-57-320.jpg)
Workshop Hands-On APIX 2018 - Trilha Básica
- 2. #APIX2018
- 3. APIX 2018 CASES SENSACIONAIS CRESCIMENTO ANO APÓS ANO 2015 2016 20182017 269 501 668 750 SENSEDIA A REFERÊNCIA EM APIS NO BRASIL "Visionary" "Strong performer"
- 4. APP APIXPay PRESS START TO CONTINUE...
- 5. AGENDA : SCORE: 28567 CREDITS 004 Progressive Web Apps GraphQL Design de APIs Mock Dinâmico de APIs REST APP Engine Detecção de Fraudes 1 2 3 4 5 6 Composição de serviços7
- 6. GET READY! PABLO DIOGO ANA PAULA GULE CAMILA JULIO CARLOS DIEGO MAIARA TIAGO YAGO TIAGO
- 8. PWA - Progressive Web Apps index.html Corpo do documento, contém os campos a serem preenchidos, botões e referências para outros arquivos necessários do projeto. meta name="theme-color": Define a cor tema do APP, que será utilizada na barra superior do navegador. meta name="viewport": Define o tamanho de visualização da tela, garantindo o melhor experiência de usuário através de dispositivos de tamanhos diferentes. manifest.json: Arquivo contendo informações sobre o APP. Permite que a aplicação web seja tratada com um mobile app.
- 9. PWA - Progressive Web Apps sw.register.js: Javascript utilizado para registrar o service worker, caso ainda não tenha sido registrado. sw.js: Service worker. Permite que o APP seja utilizado offline. Neste caso, a funcionalidade offline é garantida através do salvamento em cache dos arquivos necessários para o funcionamento, mas poderia também, por exemplo, linkar para um segundo arquivo HTML caso não haja conectividade. stylesheet.css: Responsável por estilizar os elementos do arquivo HTML, auxiliando na parte visual e na responsividade.
- 10. PWA - Progressive Web Apps APP .https://apix-pay.sensedia.com/
- 11. GRAPHQL DIOGO
- 12. GraphQL O que é GraphQL? GraphQL é uma especificação de consulta É intuitiva e bem flexível para requisições e interações de dados Fornece uma sintaxe simples para client-side Não tem dependência de banco de dados Trafega sobre protocolo HTTP Normalmente utiliza apenas um endpoint /graphql
- 13. GraphQL Por que utilizar GraphQL? Schema GraphQL é fortemente tipado. Sem consumo excessivo, entrega exatamente o que você solicitou! Requisições são verificadas contra o Schema Interface web para testes, não necessário a instalação de um client Possibilidade de criar uma camada GraphQL sobre: APIs Rest SOAP Banco de Dados etc
- 14. GraphQL Recursos do GraphQL? Query - Consultas! Mutation - Operações para alteração de dados. Resolvers - Responsável por resolver cada campo com sua origem de dados. Interfaces - Forma de reutilizar estruturas no Schema.
- 15. GraphQL Recursos do avançados do GraphQL? Composição de GraphQL utilizando o Stitching Whitelist Querys with Persisted Queries Caching
- 19. APIs & API Frist
- 20. Let’s Design! URI Produção: https://api.mycompany.com/name-of-api/resource HTTPS Seu domínio Nome da API (opcional) Recursos e Parâmetros Versionamento: /v1/ /v2/ /v3/ /name-of-api/v1/resource /2016-03-02/Accounts/ /services/data/v20.0/limits Sandbox: https://api.sandbox.mycompany.com/ Dev Portal: https://developers.mycompany.com/
- 21. Let’s Design! URI Produção: https://api.mycompany.com/name-of-api/resource HTTPS Seu domínio Nome da API (opcional) Recursos e Parâmetros Versionamento: /v1/ /v2/ /v3/ /name-of-api/v1/resource /2016-03-02/Accounts/ /services/data/v20.0/limits Sandbox: https://api.sandbox.mycompany.com/ Dev Portal: https://developers.mycompany.com/
- 22. Let’s Design! Filters GET /cart/v2/cards?status=actives GET /orders/123AF15J?_fields=item,date,value Filter search: Parcial responses: GET /search?q=apix+2018 Global search:
- 24. Let’s Design! HTTP Status Codes
- 25. Let’s Design! HTTP Status Codes
- 26. Let’s Design! HTTP Status Codes ● 1×× Informational ● 100 Continue ● 101 Switching Protocols ● 102 Processing ● 2×× Success ● 200 OK ● 201 Created ● 202 Accepted ● 203 Non-authoritative Information ● 204 No Content ● 205 Reset Content ● 206 Partial Content ● 207 Multi-Status ● 208 Already Reported ● 226 IM Used ● 3×× Redirection ● 300 Multiple Choices ● 301 Moved Permanently ● 302 Found ● 303 See Other ● 304 Not Modified ● 305 Use Proxy ● 307 Temporary Redirect ● 308 Permanent Redirect ● 4×× Client Error ● 400 Bad Request ● 401 Unauthorized ● 402 Payment Required ● 403 Forbidden ● 404 Not Found ● 405 Method Not Allowed ● 406 Not Acceptable ● 407 Proxy Authentication Req. ● 408 Request Timeout ● 409 Conflict ● 410 Gone ● 411 Length Required ● 412 Precondition Failed ● 413 Payload Too Large ● 414 Request-URI Too Long ● 415 Unsupported Media Type ● ... ● 5×× Server Error ● 500 Internal Server Error ● 501 Not Implemented ● 502 Bad Gateway ● 503 Service Unavailable ● 504 Gateway Timeout ● 505 HTTP Version Not Supp. ● 506 Variant Also Negotiates ● 507 Insufficient Storage ● 508 Loop Detected ● 510 Not Extended ● 511 Network Authentication Required ● 599 Network Connect Timeout Error
- 29. API Plataform!
- 30. API Plataform!
- 31. API Plataform!
- 32. API Plataform!
- 33. API Plataform!
- 34. API Plataform!
- 35. API Plataform!
- 36. API Plataform!
- 37. API Plataform!
- 38. API Plataform!
- 39. API Plataform!
- 40. API Plataform!
- 45. API Plataform! POS T https://api-apix.sensedia.com/oauth/access-token -H 'Content-type:application/json' -H 'Authorization:Basic ZjUxMDM5NGQtNjk5Ny0zN2I2LWFhZmMtZGU5MTE0Nzk1ZjBi OjIyMTA4YzVhLTQ2NmEtM2E5Mi05NDdiLTQ1NzJlMmUzMjIz Mw=='
- 46. API Plataform! POS T https://api-apix.sensedia.com/oauth/access-token -H 'Content-type:application/json' -H 'Authorization:Basic ZjUxMDM5NGQtNjk5Ny0zN2I2LWFhZmMtZGU5MTE0Nzk1ZjBi OjIyMTA4YzVhLTQ2NmEtM2E5Mi05NDdiLTQ1NzJlMmUzMjIz Mw==' -d '{"grant_type" : "client_credentials"}'
- 48. API Plataform! curl -XGET 'https://api-apix.sensedia.com/apix/v18/cards' -H 'client_id:f510394d-6997-37b6-aafc-de9114795f0b' -H 'access_token:fd2c3b24-d608-3a03-808d-8108c8963177'
- 49. MOCK DINÂMICO DE APIS REST ANA PAULA
- 50. Mockar Por que Mockar APIs? Mostrar valor para o cliente. Agilizar o processo de desenvolvimento do Front-End. Identificar possíveis falhas de modelagem.
- 51. Mock Estático No Mock Estático não importa o filtro aplicado, sempre será obtido o mesmo retorno. GET /users/123 GET /users/321
- 52. Mock Dinâmico No Mock Dinâmico as informações mudam de acordo com o filtro aplicado. GET /users/123 GET /users/321
- 53. JSON Server JSON Server Auxilia desenvolvedores de front-end que precisam de um back-end rápido para prototipagem e simulação. Repositório do Projeto > https://github.com/typicode/json-server
- 54. JSON Server - Mão na massa ● Instalar o NodeJS ○ Ubuntu ■ sudo apt update ■ sudo apt install nodejs ■ sudo apt install npm ○ Windows ■ https://nodejs.org/en/download/ ● Instalar o JSON Server ○ npm install -g json-server
- 55. JSON Server - Mão na massa ● Criar um repositório NodeJS ○ npm init -y ● Criar um arquivo chamado db.json ● Gerar uma massa de dados ○ GET /cards ■ 6516536055739210 ■ 6516536055739210 ■ 6516531444344590 ○ GET cards/{id}/transactions ■ Utilizaremos o Json Generator -> https://next.json-generator.com/
- 56. JSON Server - db.json https://next.json-generator.com/EJhKfZfHS
- 57. JSON Server - package.json ● Alterar o packge.json { "name": "APIX2018 - Mock Server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "json-server --watch db.json --port 8080 --host 0.0.0.0" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "json-server": "^0.14.0" }
- 58. JSON Server ● Iniciar o JSON Server -> npm start ○ GET /cards ○ GET /cards/{id} ○ GET /cards/{id}/transactions ○ GET /cards?portador.cpf=29721580406 ○ GET /cards/6516536822602139/transactions?_page=2&_limit=4 ○ GET /cards/6516536822602139/transactions?_sort=data&_order=desc ○ e muito mais…..
- 60. APP Engine ● PaaS ● Deploy Blue-Green nativo ● AutoScaling ● Disponibilidade de versão ● Gerenciamento de SSL ● Blobstore ● Mencache ● Gerenciamento de Fila ● Firewall ● Standard, Flex(+Custom) file: app.yaml runtime: nodejs env: flex service: apix-2018
- 61. DETECÇÃO DE FRAUDE ANA PAULA GULE
- 62. Detecção de Fraude Como identificar uma fraude? Informações fornecidas na compra divergem das informações do cartão. A compra está em uma localidade diferente do local de compra do cliente e não houve notificação de viagem. Padrão de compra está diferente do que o de costume.
- 63. Detecção de Fraude Informações fornecidas na compra divergem das informações do cartão. Nome no cartão. Código de Verificação Data de Validade
- 65. Composição de Serviço Composição Na operação POST /payments iremos incluir uma chamada para a operação GET /cards/{id} Validar as opções de fraude com informações divergentes do cartão.
- 68. OBRIGADO