2e:null 2f:["$","title",null,{"children":"Tutorial 2: Fotos de Cachorros | Radamés Ajna | Observable"}] 34:T4d5,md`--- ## Revisando - Usando o import, você pode pegar células de outros notebooks e reutilizar no seus próprios - Observable foi feito para funcionar bem com códigos assíncronos, como por exemplo as Promises retornadas por um fetch(). Você pode usar await com essas Promises para executar várias etapas assíncronas na mesma célula. - Podemos usar o viewof com muitos tipos diferentes de input para tornar os notebooks interativos, como fizemos aqui usando o viewof e uma lista de tipos de cachorros. - Você pode clicar nos dados de saída ${caret.cloneNode( true )} na célula no Observable para ver seus detalhes. ## Leitura adicional - [Introdução às Promise](https://beta.observablehq.com/@mbostock/introduction-to-promises) - [Introdução aos Imports](https://beta.observablehq.com/@mbostock/introduction-to-imports) ## Obtendo ajuda extra Está tendo problemas com este tutorial? Estamos felizes em ajudá-lo: poste no [Forum do usuário Observable](https://talk.observablehq.com/) e podemos ajudar. ## No próximo tutorial A seguir, aprenderemos como [incluir uma biblioteca JavaScript em um notebook e criar uma visualização👉](https://beta.observablehq.com/@observablehq/tutorial-3-visualizing-data)`35:[] 32:{"id":"c5bafacee4db25af","slug":"tutorial-2-fotos-de-cachorros","title":"Tutorial 2: Fotos de Cachorros","thumbnail":"d069a4856bb1e8f4068fa63689cea8a3afe33c35036a4f0da9051cbbad6d7f51","access_level":"public","create_time":"$D2020-08-12T23:22:52.637Z","update_time":"$D2020-08-13T05:29:12.746Z","view_time":null,"first_public_time":"$D2020-08-30T07:06:31.430Z","has_unpublished_edits":null,"fork":{"id":"ab57f07fbf354579","slug":"tutorial-2-dog-pictures","title":"Exercise: Dog pictures","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":226,"publish_version":226,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4f031a62e4e2db2a","slug":"documentacao-em-portugues","title":"Documentação em Português","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"title":"Tutorial 2: Fotos de Cachorros","cells":[{"id":0,"value":"md`# Tutorial 2: Fotos de Cachorros\n\n${signinNote}\n\n\nNo último tutorial, construímos uma calculadora de sanduíches e aprendemos o básico sobre as células em notebooks Observable. Agora, vamos aprender sobre a abordagem única do Observable para códigos assíncronos e como importar códigos de outros notebooks para construir um navegador de imagens de cachorro.\n\n### Passos\n\n1. Requisitando uma foto de cachorro \n3. Exibindo a foto do cachorro \n4. Requisitando uma lista e explorando os dados \n6. Importando de outro notebook\n6. Organizando seu notebook\n6. Personalizando os cachorros `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"step1 = md`---\n\n## Passo 1: Requisitando uma foto de cachorro \n\nEstaremos usando [dog.ceo](https://dog.ceo/) para este exemplo, uma API que permite que você busque fotos gratuitas de cachorros. Como uma API web, este serviço responde a requisições web com um formato padrão, neste caso JSON. Podemos usar a API [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) padrão para requisitar cada foto de cachorro.\n\n\\`\\`\\`js\ndog = (await fetch(\\`https://dog.ceo/api/breeds/image/random\\`)).json()\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"video(\"tutorial-2/1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"step2 = md`---\n\n## Passo 2: Exibindo a foto do cachorro \n\nOk, agora temos um objeto da resposta da API, no qual podemos obter a imagem do cachorro. Vamos pegar a imagem do cachorro e exibi-la em uma tag img, usando o html built-in [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).\n\n\n\\`\\`\\`js\nhtml\\`

\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"video(\"tutorial-2/2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"step3 = md`---\n\n## Passo 3: Requisitando uma lista e explorando os dados \n\nEm seguida, vamos facilitar a seleção de uma raça específica de cachorro. dog.ceo tem uma API que [lista todas as raças disponíveis](https://dog.ceo/dog-api/documentation/). Obter a lista de raças de cães é como buscar uma imagem de cachorro: também usaremos o método fetch(), await e .json().\n\n\\`\\`\\`js\nbreeds = (await fetch(\\`https://dog.ceo/api/breeds/list/all\\`)).json()\n\\`\\`\\`\n\nEste é um bom momento para verificar o Inspector built-in do Observable. Sempre que você ver uma célula com dados e um ${caret}, você pode clicar e expandir seus items.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"video(\"tutorial-2/3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"step4 = md`---\n\n## Passo 4: Importando de outro notebook\n\nAssim como o slider que adicionamos no último tutorial, iremos adicionar um input usando o viewof para obter seu valor. Poderíamos construir um select box do zero, mas já existe um notebook que tem muitos tipos de inputs prontos para usar: [Notebook de Inputs](https://beta.observablehq.com/@jashkenas/inputs) por Jeremy.\n\nEntão, vamos importar o tipo de entrada 'select' desse notebook e usá-lo para mostrar raças de cães.\n\n\\`\\`\\`js\nimport {select} from \"@jashkenas/inputs\"\n\\`\\`\\`\n\nEm seguida, crie uma nova célula e use este novo método 'select', combinado com as raças buscadas, para adicionar à lista de seleção.\n\n\\`\\`\\`js\nviewof breed = select(Object.keys(breeds.message))\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"video(\"tutorial-2/4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"step5 = md`---\n\n## Passo 5: Organizando seu notebook\n\n\nEstamos escrevendo neste notebook célula por célula, mas para torná-lo apresentável, as células mais importantes devem ficar no topo. Então, vamos reordenar as células, movendo nosso novo seletor de cães para o topo. \t~~Você pode fazer isso com os botões à direita da célula ou, se clicar no ícone do usuário no canto superior direito e clicar em \"Help\"~~, clique no botão ${help} no canto direito inferior para poder acessar uma lista de atalhos de teclado que incluem como mover células.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"video(\"tutorial-2/5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"step6 = md`---\n\n## Passo 6: Personalizando os cachorros \n\nAgora, vamos adicionar uma opção para o usúario selecionar a raça na célula que requisita a imagem do cachorro. Encontre a célula do cachorro e atualize seu código para usar o endpoint [por raça](https://dog.ceo/dog-api/documentation/breed).\n\n\n\\`\\`\\`js\ndog = (await fetch(\\`https://dog.ceo/api/breed/$\\{breed}/images/random\\`)).json()\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"video(\"tutorial-2/6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"seriesNavigation(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {\n key,\n toggle,\n pin,\n caret,\n menu,\n video,\n signinNote,\n seriesNavigation,\n help\n} from \"c71877d1b4004ee1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"