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.

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

7. PROGRESSIVE
WEB APPS
PABLO

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

16. GraphQL
Comunidades GraphQL

17. GraphQL
Portal de desenvolvedor
https://dev.elo.com.br
/

18. DESIGN
DE APIS
GULE

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:

23. Let’s Design!
Verbs

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

27. Let’s Design!
/cards

28. Let’s Design!
/cards
/cards
/cards/{id}
/cards/{id}/transactions
Verbs: GET

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!

41. API Plataform!
ACCESS
TOKEN

42. API Plataform!
POS
T

43. API Plataform!
POS
T
https://api-apix.sensedia.com/oauth/access-token

44. API Plataform!
POS
T
https://api-apix.sensedia.com/oauth/access-token
-H 'Content-type:application/json'

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"}'

47. API Plataform!
{"access_token":"fd2c3b24-d608-3a03-808d-810
8c8963177","token_type":"access_token","expire
s_in":3600}

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…..

59. APP Engine
JÔNATAS

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

64. COMPOSIÇÃO DE
SERVIÇOS
GULE
ANA PAULA

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