\documentclass[ignorenonframetext,]{beamer}
\setbeamertemplate{caption}[numbered]
\setbeamertemplate{caption label separator}{: }
\setbeamercolor{caption name}{fg=normal text.fg}
\beamertemplatenavigationsymbolsempty
\usepackage{lmodern}
\usepackage{amssymb,amsmath}
\usepackage{ifxetex,ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
\ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
  \usepackage[T1]{fontenc}
  \usepackage[utf8]{inputenc}
\else % if luatex or xelatex
  \ifxetex
    \usepackage{mathspec}
  \else
    \usepackage{fontspec}
  \fi
  \defaultfontfeatures{Ligatures=TeX,Scale=MatchLowercase}
\fi
% use upquote if available, for straight quotes in verbatim environments
\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
% use microtype if available
\IfFileExists{microtype.sty}{%
\usepackage{microtype}
\UseMicrotypeSet[protrusion]{basicmath} % disable protrusion for tt fonts
}{}
\newif\ifbibliography
\hypersetup{
            pdftitle={Web APIs},
            pdfborder={0 0 0},
            breaklinks=true}
\urlstyle{same}  % don't use monospace font for urls

% Prevent slide breaks in the middle of a paragraph:
\widowpenalties 1 10000
\raggedbottom

\AtBeginPart{
  \let\insertpartnumber\relax
  \let\partname\relax
  \frame{\partpage}
}
\AtBeginSection{
  \ifbibliography
  \else
    \let\insertsectionnumber\relax
    \let\sectionname\relax
    \frame{\sectionpage}
  \fi
}
\AtBeginSubsection{
  \let\insertsubsectionnumber\relax
  \let\subsectionname\relax
  \frame{\subsectionpage}
}

\setlength{\parindent}{0pt}
\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em}  % prevent overfull lines
\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
\setcounter{secnumdepth}{0}
%-----------------------------------------------------------------------

\usepackage[T1]{fontenc}

\usepackage[math]{iwona}
% \usepackage[math]{kurier}

% \usepackage[sfdefault]{roboto}
\usepackage[sfdefault, condensed]{roboto}
% \usepackage[default]{sourcesanspro}

% \usefonttheme[onlymath]{serif}
% \usefonttheme[onlymath]{sans}

\usepackage{csquotes}

% % Font for code. ----------------------------
% \usepackage{inconsolata}
\usepackage[scaled=0.8]{beramono}

%-----------------------------------------------------------------------

% \usepackage{lmodern}
\usepackage{amssymb, amsmath}
\setcounter{MaxMatrixCols}{20} % bmatrix, max number of columns.

% \usepackage{ifxetex, ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
\usepackage[utf8]{inputenc}
\usepackage[shorthands=off,main=brazil]{babel}
\usepackage{graphicx}

\usepackage{xcolor}
\usepackage{setspace}
\usepackage{xspace}
\usepackage{tabularx}

\setlength{\belowcaptionskip}{-0.5em}
\setlength{\parindent}{0pt}
\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em}  % prevent overfull lines
\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
\setcounter{secnumdepth}{0}

%-----------------------------------------------------------------------
% Definições de esquema de cores.

% Ubuntu.
% http://www.color-hex.com/color-palette/2018
\definecolor{ubuntu_purple}{HTML}{2CA05A} % Título.
\definecolor{ubuntu_orange}{HTML}{686868} % Estrutura.
\definecolor{gray_dark}{HTML}{333333}  % Texto.
\definecolor{gray_light}{HTML}{DDDDDD} % Faixa.

%-----------------------------------------------------------------------
% Bibliography.

% \usepackage[style=authoryear]{biblatex}
% Use:
%   \cite{<ref>}
%   \parencite{<ref>}
%   \fullcite{<ref>}
%   \footfullcite{<ref>}
% ATTENTION: Compilation = pdflatex > biber > pdflatex > pdflatex.
% Call refs.bib at preamble with: \addbibresource{refs.bib}
%
%-----------------------------------------------------------------------

\usepackage{caption}
\captionsetup{
  font=footnotesize,
  labelfont={color=ubuntu_orange},
  labelsep=period}
\usepackage{subfig}

\makeatletter
\let\@@magyar@captionfix\relax
\makeatother

\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}

%-----------------------------------------------------------------------

\usepackage{tikz}

\usebackgroundtemplate{
  \tikz[overlay, remember picture]
  \node[at = (current page.center),
        inner sep = 0pt] {%
          \includegraphics[keepaspectratio, height=\paperheight]{config/ufpr-fachada-baixo-1.jpg}
        };
}

%-----------------------------------------------------------------------

\hypersetup{
  colorlinks=true,
  linkcolor=ubuntu_orange,
  urlcolor=ubuntu_purple,
  citecolor=ubuntu_purple
}

%-----------------------------------------------------------------------
% ATTENTION: http://www.cpt.univ-mrs.fr/~masson/latex/Beamer-appearance-cheat-sheet.pdf

\usetheme{default}

\setbeamerfont{title}{series=\bfseries, size=\huge, parent=structure}
\setbeamerfont{subtitle}{series=\bfseries, size=\Large, parent=structure}
\setbeamerfont{frametitle}{series=\bfseries, size=\LARGE, parent=structure}

\setbeamertemplate{caption}[numbered]
\setbeamertemplate{caption label separator}{: }
\setbeamertemplate{caption}[numbered]{}
\setbeamertemplate{section in toc}[sections numbered]
\setbeamertemplate{subsection in toc}[subsections numbered]
\setbeamertemplate{sections/subsections in toc}[ball]{}
\setbeamertemplate{navigation symbols}{}
\setbeamertemplate{footline}{}
\setbeamertemplate{frametitle continuation}{\gdef\beamer@frametitle{}\vspace*{1ex}}

\setbeamertemplate{enumerate items}[default]
\setbeamertemplate{itemize items}{\scriptsize\raise1.25pt\hbox{\donotcoloroutermaths$\blacktriangleright$}}

% Rodapé.
\setbeamercolor{title in head/foot}{parent=subsection in head/foot}
\setbeamercolor{author in head/foot}{bg=ubuntu_orange, fg=white}
\setbeamercolor{date in head/foot}{parent=subsection in head/foot, fg=ubuntu_orange}

% Cabeçalho.
\setbeamercolor{section in head/foot}{bg=ubuntu_purple, fg=ubuntu_orange}
\setbeamercolor{subsection in head/foot}{bg=ubuntu_purple, fg=white}

\setbeamercolor{title}{fg=ubuntu_purple}       % Título dos slides.
\setbeamercolor{subtitle}{fg=ubuntu_orange}    % Subtítulo.
\setbeamercolor{institute}{fg=gray_dark}       % Instituição.
\setbeamercolor{frametitle}{fg=ubuntu_purple}  % De quadro.
\setbeamercolor{structure}{fg=ubuntu_orange}   % Listas e rodapé.
\setbeamercolor{item projected}{bg=gray_dark}
\setbeamercolor{normal text}{fg=gray_dark}     % Texto.

%-----------------------------------------------------------------------
% To remove empty brackets of \institution.

\makeatletter
\setbeamertemplate{footline}{
  \leavevmode%
  \hbox{%
    \begin{beamercolorbox}[
      wd=0.3\paperwidth, ht=2.25ex, dp=1ex, right]{author in head/foot}%
      \usebeamerfont{author in head/foot}\insertshortauthor{}\hspace*{1ex}
    \end{beamercolorbox}%
    \begin{beamercolorbox}[
      wd=0.6\paperwidth, ht=2.25ex, dp=1ex, left]{title in head/foot}%
      \usebeamerfont{title in head/foot}\hspace*{1ex}\bfseries\insertshorttitle{}
    \end{beamercolorbox}%
    \begin{beamercolorbox}[
      wd=0.1\paperwidth, ht=2.25ex, dp=1ex, right]{date in head/foot}%
      \bfseries\insertframenumber{}\hspace*{2ex}
    \end{beamercolorbox}
  }%
  \vskip0pt%
}
\makeatother

%-----------------------------------------------------------------------
%---- preamble-author.tex ----------------------------------------------

\author[Walmes Zeviani $\cdot$ UFPR]{%
      \href{http://leg.ufpr.br/~walmes}{Prof.~Walmes Zeviani} \\
      \href{mailto:walmes@ufpr.br}{\small\tt walmes@ufpr.br}
}

\institute[DEST/UFPR]{
  {Laboratório de Estatística e Geoinformação}\\
  {Departamento de Estatística}\\
  {Universidade Federal do Paraná}}

%-----------------------------------------------------------------------
%---- preamble-chunk.tex -----------------------------------------------

% Knitr.

% ATTENTION: this needs `\usepackage{xcolor}'.
\definecolor{color_line}{HTML}{333333}
\definecolor{color_back}{HTML}{DDDDDD}

% R input.
\ifcsmacro{Highlighting}{
  % Statment if it exists. ------------------
  \DefineVerbatimEnvironment{Highlighting}{Verbatim}{
    frame=lines,
    framesep=1ex,
    framerule=0.5pt,
    rulecolor=\color{color_line},
    numbers=right,
    fontsize=\footnotesize,
    baselinestretch=0.75,
    commandchars=\\\{\}}
  % Margens do ambiente `Shaded'.
  % \fvset{listparameters={\setlength{\topsep}{-1em}}}
  \renewenvironment{Shaded}{\vspace{-1ex}}{\vspace{-2ex}}
  }{
  % Statment if it not exists. --------------
}

% R output e todo `verbatim'.
\makeatletter
\def\verbatim@font{\linespread{0.75}\normalfont\ttfamily\footnotesize}
\makeatother

% Cor de fundo e margens do `vertabim'.
\let\oldv\verbatim
\let\oldendv\endverbatim

\def\verbatim{%
  \par\setbox0\vbox\bgroup
  \vspace{-1.5\topsep}
  \oldv
}
\def\endverbatim{%
  \oldendv
  \vspace{-0.9\topsep}
  \egroup\fboxsep0pt
  \noindent{\colorbox{color_back}{\usebox0}}\par
}

%-----------------------------------------------------------------------

\title{Web APIs}
\date{}

\begin{document}
\frame{\titlepage}

\begin{frame}{Introdução}

\begin{block}{Motivação}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  Web API é a forma padrão de conferir acesso para usuários e entre
  aplicações.
\item
  É usado por várias empresas:

  \begin{itemize}
  \tightlist
  \item
    Social: \href{https://cloud.google.com/apis/}{Google},
    \href{https://developers.facebook.com/docs/apis-and-sdks/}{Facebook},
    \href{https://developer.twitter.com/en/docs.html}{Twitter},
    \href{https://developer.spotify.com/documentation/web-api/}{Spotify},
    \href{https://rapidapi.com/deezerdevs/api/deezer-1}{Deezer},
    {[}Instragram{]}, etc.
  \item
    Esportes:
    \href{https://rapidapi.com/sportsop/api/soccer-sports-open-data}{Soccer},
    \href{https://rapidapi.com/montanaflynn/api/fifa-world-cup}{FIFA},
    \href{https://www.api-football.com/}{API-football},
    \href{https://docs.opendota.com/\#}{Dota},
    \href{https://xboxapi.com/}{Xbox}, etc.
  \item
    Outras:
    \href{https://rapidapi.com/stefan.skliarov/api/Coinbase}{Coinbase},
    \href{https://rapidapi.com/skyscanner/api/skyscanner-flight-search}{Skyscanner},
    \href{https://rapidapi.com/japerk/api/text-processing}{Text-processing},
    etc.
  \item
    Catálogo com milhares de APIs: \href{https://rapidapi.com/}{Rapid
    API}.
  \end{itemize}
\item
  Níveis de acesso variado: \emph{open \& free}, \emph{free} mas com
  registro, \emph{freemium}, registro, pagas, privadas, etc.
\item
  Resultados: em XML e JSON principalmente.
\item
  APIs podem ser REST ou SOAP.
\end{enumerate}

\end{block}

\end{frame}

\begin{frame}{Introdução}

\begin{block}{Objetivos}

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  Definir o que Web API.
\item
  Ilustrar o funcionamento.
\item
  Mostrar algumas APIs.
\end{enumerate}

\end{block}

\end{frame}

\begin{frame}{Exemplos de APIs}

\begin{itemize}
\tightlist
\item
  \href{https://nominatim.org/}{Nominatim}.

  \begin{itemize}
  \tightlist
  \item
    HTML:
    \url{https://nominatim.openstreetmap.org/search?city=Curitiba}.
  \item
    XML:\url{https://nominatim.openstreetmap.org/search?city=Curitiba\&format=xml}.
  \item
    JSON:
    \url{https://nominatim.openstreetmap.org/search?city=Curitiba\&format=json}.
  \end{itemize}
\item
  \href{https://earthquake.usgs.gov}{USGS Earth Quakes}.

  \begin{itemize}
  \tightlist
  \item
    XML:
    \url{https://earthquake.usgs.gov/fdsnws/event/1/query?format=xml}.
  \item
    GeoJSON:
    \url{https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson}.
  \end{itemize}
\end{itemize}

\end{frame}

\begin{frame}{Definição}

\begin{itemize}
\tightlist
\item
  API: \emph{Application Program Interface}.
\item
  Aplicação.

  \begin{itemize}
  \tightlist
  \item
    Web (site/url), móvel (app) ou software (pacote R/Python), etc.
  \item
    Envia os inputs e recebe os outputs.
  \item
    Parte executada no cliente.
  \end{itemize}
\item
  Programa.

  \begin{itemize}
  \tightlist
  \item
    Transforma os inputs recebidos em outputs.
  \item
    Parte executada no servidor.
  \end{itemize}
\item
  Interface.

  \begin{itemize}
  \tightlist
  \item
    Como que a aplicação se comunica com o programa.
  \item
    Forma de envio e conteúdo do input e retorno do output.
  \item
    Envolve rede, protocolos, transferência, encriptação, validação,
    etc.
  \end{itemize}
\end{itemize}

\end{frame}

\begin{frame}{Esquema de funcionamento geral}

\begin{figure}

{\centering \includegraphics[width=9cm]{./img/3h95bN2_xe-eitwHh_Ygvw} 

}

\caption{Como funciona uma API. Fonte: \url{https://medium.com/@ama.thanu/what-is-an-api-how-does-it-work-f4ea552d741f}.}\label{fig:unnamed-chunk-2}
\end{figure}

\end{frame}

\begin{frame}{Componentes de uma API}

\begin{figure}

{\centering \includegraphics[width=10.5cm]{./img/upwork-1} 

}

\caption{Aspectos gerais de uma API. O que é compartilhado entre cliente e servidor. Fonte: \url{https://www.upwork.com/hiring/development/intro-to-apis-what-is-an-api/}.}\label{fig:unnamed-chunk-3}
\end{figure}

\end{frame}

\begin{frame}{Modelo de negócio}

\begin{figure}

{\centering \includegraphics[width=10.5cm]{./img/upwork-2} 

}

\caption{Como uma API funciona em termos de modelo de negócio. Fonte: \url{https://www.upwork.com/hiring/development/intro-to-apis-what-is-an-api/}.}\label{fig:unnamed-chunk-4}
\end{figure}

\end{frame}

\begin{frame}{Anatomia da consulta}

\begin{figure}

{\centering \includegraphics[width=8.5cm]{./img/HSiyldPgmLzQv_rOd55inw} 

}

\caption{Anatomia de uma consulta a API. Fonte: \url{https://medium.com/@shivamdesai_65083/fetching-data-from-rest-apis-with-react-25a2f6db5d7a}.}\label{fig:unnamed-chunk-5}
\end{figure}

\end{frame}

\begin{frame}{Detalhes sobre o uso da API do Nominatim}

\begin{figure}

{\centering \includegraphics[width=8.5cm]{./img/openstreetmap-request} 

}

\caption{Aspectos da requisição a API do Nominatim para a consulta da localização de Curitiba. Fonte: o autor.}\label{fig:unnamed-chunk-6}
\end{figure}

\end{frame}

\begin{frame}{Tipos de resultado}

\begin{itemize}
\tightlist
\item
  XML.

  \begin{itemize}
  \tightlist
  \item
    \emph{eXtensible Markup Language}.
  \item
    Estrutura hierárquica.
  \item
    Campos de dados e metadados (atributos).
  \item
    Muito verboso mas boa taxa compreesão.
  \item
    Linaguem de consulta própria: XPath.
  \item
    Vários parsers.
  \end{itemize}
\item
  JSON: JSON ou GeoJSON.

  \begin{itemize}
  \tightlist
  \item
    \emph{JavaScript Object Notation}.
  \item
    Estrutura hierárquica.
  \item
    Campos para dados mas não tem atributos.
  \item
    Menos verboso.
  \item
    Vários parsers.
  \end{itemize}
\item
  Outros: CSV, texto pleno, etc.
\end{itemize}

\end{frame}

\begin{frame}{API tipo REST vs SOUP}

Aspectos bem técnicos mais voltados para o desenvolvedor de APIs.

\begin{enumerate}
\def\labelenumi{\arabic{enumi}.}
\tightlist
\item
  \url{https://www.youtube.com/watch?v=TvGLm7BijJY}.
\item
  \url{https://www.infoq.com/br/articles/rest-soap-when-to-use-each}.
\item
  \url{https://www.devmedia.com.br/web-services-rest-versus-soap/32451}.
\end{enumerate}

\end{frame}

\begin{frame}{Resumo}

\begin{itemize}
\tightlist
\item
  Web API é um mecanísmo comum para dar acesso a bases de dados e
  comunicar serviços.
\item
  XML e JSON são os formatos mais utilizados pelas Web APIs.
\item
  As APIs tem nível de acesso variado.
\end{itemize}

\end{frame}

\end{document}