2e:null 2f:["$","title",null,{"children":"Tutorial 1: Calculadora de almoço | Radamés Ajna | Observable"}] 34:[] 32:{"id":"97082ce6d94972ee","slug":"tutorial-1-calculadora-de-almoco","title":"Tutorial 1: Calculadora de almoço","thumbnail":"722d9d20d2027101ed3a29ee7c3ae01aea293f89b5c56a1b6c5bbe1123069ef4","access_level":"public","create_time":"$D2020-08-12T22:26:45.451Z","update_time":"$D2020-08-13T04:08:48.002Z","view_time":null,"first_public_time":"$D2020-08-30T07:06:27.824Z","has_unpublished_edits":null,"fork":{"id":"5e22dceefd4e226f","slug":"tutorial","title":"Exercise: Lunch calculator","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":335,"publish_version":335,"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 1: Calculadora de almoço","cells":[{"id":0,"value":"md`# Tutorial 1: Calculadora de almoço\n\n${signinNote}\n\nVamos escrever o seu primeiro notebook. Um notebook é ao mesmo tempo é legível e funcional: uma mistura entre composição e programa. Este tutorial irá apresentá-lo aos princípios de como escrever e executar código em um notebook, e é um ótimo lugar para começar se você está apenas aprendendo Observable.\n\n### Steps\n\n1. Definir um título\n2. Criar uma célula\n3. Referenciar uma célula\n4. Manter a célula aberta\n5. Usar o viewof para adicionar um slider\n6. Usar uma declaração em block para os cálculos`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"step1 = md`---\n\n## Definir um título\n\nConteúdo de texto como este é normalmente escrito em Observable usando [Markdown](https://guides.github.com/features/mastering-markdown/), e o título de um notebook é retirado do seu primeiro cabeçalho. Portanto, seu novo notebook é intitulado _Untitled_. Vamos substituir essa célula por _Calculadora de almoço_.\n\nSelecione o texto, digite 'Calculadora de almoço' e pressione a tecla ${key(\n \"Shift-Enter\"\n)} para executar o código.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"video(\"tutorial-1/1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"step2 = md`---\n\n## Criar uma célula\n\nA seguir, vamos criar uma nova célula e adicionar um nome e valor. Clique no botão + abaixo da célula da calculadora de almoço e digite este código:\n\n\\`\\`\\`js\nsandwiches = 10\n\\`\\`\\`\n\nA linguagem no Observable é JavaScript, com algumas pequenas diferenças, o que torna-a melhor para interfaces interativas e criativas. Esta nova célula tem o nome de \\`sandwiches\\`, e valor attribuído \\`10\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"video(\"tutorial-1/2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"step3 = md`---\n\n## Referenciar uma célula\n\nDigamos que cada sanduíche custe $5. Vamos calcular o custo total deste almoço com uma nova célula chamada \\`total\\`.\n\nEsta é a sua chance de usar o preenchimento automático integrado ao Observable, para que você não precise digitar a palavra \"sandwiches\" inteira. Tente apenas tentar \\`total = sa \\` e depois pressione ${key(\n \"Tab\"\n)} - Observable irá completar a palavra \"sandwiches\" para você.\n\n\\`\\`\\`js\ntotal = sandwiches * 5\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"video(\"tutorial-1/3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"step4 = md`---\n\n## Manter a célula aberta\n\nNotebooks são compostos de células como essas, que geram um resultado. Você pode ver o código que produz cada célula - clicando no ícone ${menu} à sua esquerda. Você pode querer manter uma célula aberta, para aqueles que lêem o notebook possam ver o código por trás dele. Vamos manter a célula \\`total\\` aberta, para que todos vejam como esse valor é calculado.\n\nAbra a célula total, se ainda não estiver aberta, e clique no ícone pin ${pin.cloneNode(\n true\n)} para mantê-la aberta.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"video(\"tutorial-1/4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"step5 = md`---\n\n## Usar o viewof para adicionar um slider\n\n\nEste notebook calcula o custo de um certo número de sanduíches, mas seria melhor se qualquer leitor pudesse interagir com ele sem ter que alterar o código. Vamos tornar o número de sanduíches interativo usando \\`viewof\\`, uma funcionalidade do Observable que permite que uma célula exponha o valor de um input.\n\nSubstitua o conteúdo da célula de \\`sandwiches \\` por:\n\n\\`\\`\\`js\nviewof sandwiches = html \\` \\`\n\\`\\`\\`\n\nCom esta mudança, a célula \\`sandwiches\\` agora mostrará um slider, e movendo esse slider atualizará o valor \\`total\\`. Essa é a mágica dos notebooks reativos Observable!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"video(\"tutorial-1/5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"step6 = md`---\n\n## Usar uma declaração em block para os cálculos\n\n\nAté agora, usamos células simples - atribuindo o nomde de uma célula a um valor ou a um cálculo simples. E se você quiser fazer mais, como usar \\`for \\` loops, declarações \\`if \\` e outros recursos do JavaScript? Você pode fazer isso com uma declaração em bloco: uma célula entre chaves \\`{\\` e \\`}\\`.\n\nSe você quiser que um bloco retorne um valor, você terá que usar a declaração \\`return\\`, assim como em uma função JavaScript.\n\nPor exemplo, vamos supor que o restaurante dê um desconto de 10% em pedidos de 51 ou mais sanduíches.\n\n\\`\\`\\`js\ntotal = {\n let total = sandwiches * 5;\n if (sandwiches > 50) {\n total * = 0,9;\n }\n return total;\n}\n\\`\\`\\`\n\nOs blocos são como funções, mas são executados imediatamente e não têm parâmetros. Assim como antes, quando você mudar o valor do slider, o valor \\`total\\` é automaticamente recalculado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"video(\"tutorial-1/6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`---\n\n## Recapitulando\n\n\n- Notebooks são compostos de células, que podem ter nomes\n- O título de notebook é retirado de sua primeira célula\n- A maioria dos notebooks usa Markdown para seu conteúdo de texto\n- Você pode pressionar a tecla ${key(\n \"Shift-Enter\"\n)} para avaliar uma célula e a tecla ${key(\"Tab\")} para autocompletar um nome.\n- Clicar no ícone ${pin.cloneNode(true)} mantém uma célula aberta.\n\n## Leitura adicional\n\n- [Getting started Markdown](https://guides.github.com/features/mastering-markdown/)\n- [Uma breve introdução ao Viewof](https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof)\n\n## Obtendo ajuda\n\nEstá tendo problemas com este tutorial? Estamos felizes em ajudá-lo: poste no [Forúm do Observable](https://talk.observablehq.com/) e nós podemos ajudar.\n\n## No próximo tutorial\n\nA seguir, [aprenderemos como fazer uma requisição a uma API e importar células de outros notebooks. 👉 ](https://observablehq.com/d/c5bafacee4db25af)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"seriesNavigation(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"import {\n toggle,\n pin,\n menu,\n video,\n key,\n signinNote,\n seriesNavigation\n} from \"c71877d1b4004ee1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"