wi Brito < Notear €C50: Introdugéio & Ciéncia da Computacao - 0 Curso de Harvard, no Brasil [ORIGINAL] [LEGENDADO} 90 alas) no total > > Intvoaucso Médulo 0: Seratch Médulo tc Module 2: Arrays Médulo 3: Aigortmos Médulo 4: Meméria Modulo 5: Estruturas do Dados, modulo 6: Python Méduio 7: SOL Médulo 8: HTML, C58, Jeveserit \ Medulo 9: Fase \ Introduce ae Médulo 9 Introducio a Flask @ V Aula 9 B Aue Q oat < Anterior | Préximo > Anotacoes da Aula 9 Vocé esta quase finalizando o CC50. Que caminhada de aprendizado, ein? Diga ola para o Médulo 9! vga Uld para O wUUUIV 2: + Desenvolvimento WEB + Flask + Formularios + Post Loyouts Frosh IMs Sessdes + Amazenamento de dados + Aplicasdo Lojalshowe) Quero compartilhar meu aprendizado e/ou minha duvida... Desenvolvimento WEB Hoje vamos criar aplicativas da web mais avangacdles escrevendo cadigo que é executado no servi. No semana passed, usamos http-server no CS50 IDE como um servider web, un programa que escuta conexées e solicitaydes e responde com paiginas web ou outros Uma solictagio HTTP possui cabecalis, como: er / wTTP / 1.2 ses cabecalhos podem solictaralgum arquivo ou pagina ou enviar dados do\ Exercicios Dy instrugies para ox Dy. Exerecio C850 Fin > bebe > Médulo 10: ica > Encerramento do Curso navegador de vote a0 servidor Embora o servidor Into responda apenas com paginas estaticas, pademos usar outros servidores da web que “leem" ou analisam cabegalhos de solictaglo, como GET / search? Q = cats HITP / 1.1. para retomar es paginas dinamicamente Flask Usaremos Python © uma biblioteca chamada Flask pata escrever nosso proprio servidor ‘web, implementando recursos adicionais. O Flask também é um framewerk, onde a biblioteca de cédigo também vern com um conjunto de convengbes de como deve ser uusada, Por exemplo, coma outrasbiblotecas,o Flask inclu fungdes que podemos usar para analsarsolictagdes indivdualmente, mas como uma estrtura, também requer {que 0 e6digo do nosso programa seja organizado de uma determinada manetr: application. py requirements.txt static/ tenplates/ + application py ters o cécligo Python para nosso servidor web. + requirementsxt incu! uma lista de iblltecas necesséiias para nosso aplicatvo. + statie/& um diretrio de arqulves estacos, come arquives CSS e JavaScript ‘+ templates/é um ciretoio para aquivos que sero usados para criar nosso HTML fal Existem mutas estruturas de servidor web para cada uma das linguagens populares, © Flask serd um representante que usaremos hoje. 0 Flask também implementa um padre de design espectico ou a manetra como nosso programa e cédigo sto organizadios. Para Flask, 0 padi de design & geralmente MVC , ou Modll ~ view ~ controle: = ueonres sarees VIEW CONTROLLER \ 7 &, g NF USER ‘+ O controlador é nossa logica e cécigo que gerencia nossa aplicagéo de maneira ‘geral, com base na entrada do ususrio, No Flask, este sera o nosso c64tigonon + A visualizagso ¢ a interface do ususrio, como @ HTML e CSS que o usuario verd © com 05 quais rd Imeragir + Omodelo sio 0s dados de nosso aplcativo, como um banco de dados SQL ou arquivo CSV A aplicagto de Flask mais simples pode tera seguinte aparéncia from Flask import Flask ‘app = Flask(_nane_) Gapp.route("/") def index(): return "hallo, world” + Primeir,importaremos o Flak da biblioteca flaek, que usa uma letra malscula come nome principal, + Em segulda,claremos uma vatlvel de app atrbuindo © nome do nesso arquivo & votive Flask, + A seguir, identitcaremos uma fungo para a rota / ou URL com @ app.route simbolo @ em Python ¢ chamado de decorador, que aplica uma fungio @ out. + Chamaremos 0 index da fungio pots ele deve responder a uma solictago de /, ‘a pagina padido. E nossa fungo apenas responder com uma string por enquanto, No IDE $50, podemos ir para o ditetério com o céaligo do nesso aplicativo e digitar #lask run para inicélo. Veremos um URL © podemos abrilo para ver helo, word -rualzaremos nosso c6igo para realmente retornar HTML com a fungao render _tesplate, que encontia um arquivo fomnecido e retomna seu conteuide: from flask inport Flask, render template ‘app = Flask(_name_) app.route("/") def index<| return render_tenplate(" index.html") ‘+ Precisaremos criar um dretorio tenplates/ e criar um arquivo index.html com algum conteide dentro dele, + Agora, citar Flask run retomnaré esse arquivo HTML quando visitarmos a URL do nosso servidor. ‘Vamos passar um argumento para render_tenpLate em nosso cédige cle contralador: from flask inport Flask, render_tenplate, request ‘app = Flask(_name_) Gapp.route("/") def index(): return render_tenplate(""index.htmi", quest.args.get("name", "world”)) *+ Acontece que podemos fornecer a render_template qualquer aigumento rromeado, como name, ¢ ele rd substitutlo em nesso modelo ou em nosso arqulvo HTML. com marcadores de posiao. © Em indexheml substtuemos hello, word por helo, para dizer 20 Flask onde substiuir a varlivel de name ‘chead> hello, {{ name }) ‘+ Podemos usar a vaiavel de request da biblioteca Flask para obter um pardmetro da solctagdo de HTTP, neste caso também name, ¢ vlter para um padiio de ‘word se nenhum foi fornecid. + Agora, quando reiiciaimos nosso Servidor apés fazer essas alteragoes, € visitarmos a pagina padio com uma URL como /PramesDavid, veremos essa mesma entrada retomnada para nds no HTML gerado por nosso servidor. Podemos presumir que a consulta de pesquisa do Google, em /search?qreats, também € analisada por algum codigo para o parémetio qe passada para algum banco {e dados para obter todos os resultados relevantes,Esses resultados slo ento usados para gerar a p3gina HTML Anal Formularios Vamos mover nosso modelo original para greethiml, de forma que ele cumprimente 0 sudo com seu nome, Em index heml, criaremos um formulatio: ‘head “ceitlerhelloc/titley

“input nanes"name” type="text" «Herm *+ Envlaremos 0 formnuliro para a rota /greet .¢ teremos uma entrada para 0 pardmetro de nanee outra para o botao de envi, + Em nosso controlador appieations.py tamisém precisarernos adicionar uma fungi para arota /greet . que ¢ quase exatamente o que tintiamos para / app route("/") ‘def index(): return render_tenplate("index. html”) app route("/greet") def greet():‘return render_tenplate(“greet html", nane=request.args.get "name", "world")) ‘+ Nosso formulario em index.heml serd estatico, pols pode sero mesmo sempre Agora, podemos executar nosso Servidor, ver nosso formuléio na pagina padrlo ¢ us lo para gerar outa pagina POST NNosso formulario acima usou o método GET, que inclu os dados do nosso formulrio na URL, Vamos mudar 0 método em nosso HTML: <\fora actions”\greet™ inethod="post”\>. Nosso contiolador também precsara ser alterado para acettar 0 método POST e procurar o parsmetio em outro lugar Gapp.route("/greet", methods=["P0sT*]) def greet(): return render_tenplate(“greet html", amesrequest.form.get("name", “wor]d")) + Eimbora requestargs seja para parametios em uma solcitae0 GET, temos que sar request form no Flask para pardmetros em uma sollctaga0 POST, ‘Agora, quando relniclamos nosso aplicativo apes fazer essas ateracdes, podemos ver que 0 formulério nos leva a /greet, mas 0 contetido nfo esté mais incluido na URL. Layouts Em indexchaml¢ greet hemi, temos alguns céigos HTML repetidos, Com apenas HTML, no podemos compartinar codigo entre arquivos, mas com modelos Flask (& outras estuturas da wet), paclemos fatorar esse contesdo comum. CCraremos outro modelo, ayouttem head ctitlohelloc/tities “ body 4% block body ¥}{% endblock %} ‘+O Flask supora Jinja, uma linguagem de templates, que usa a sintaxe {% > para inlurblocos de espago reservado ou outros pedagos de edigo. Aqul ‘nomeamos nosso blaco bed, pois ele contém o HTML que deve ino elemento boa. Em Index him, usaremos o layout html come modelo © apenas definiremos 0 bloco do body com: {% extends “leyout.html” ¥} 4% block body 8} ‘meta nane="vieuport” content="initial-scale=t, widthedevice-width"> 4% block body %}(% endblock %) + Uma tag em nos permite aicionar mais metadados & nossa pagina, Neste caso, estamos adicionando um atibuto de eantent para os‘automaticamente o tamanho as fontes de nossa pagina para o dispositive, Em nosso application.py retornaremes nosso modelo indexchemnl para 0 padre de rota 1 ‘from flask import Flask, render_tenplate, request app = Flask(_name_) ‘SPORTS = [ "Dodgebsl1”, "Flag Football”, "soccer", "Volleyball", "untinate Frisbee” Gepp.route("/") def index(: return render_tenplate("index.htm1") Nosso modelo index.heml terd a seguinte aparéncia 4% extends “leyout.html” ¥} 4 block body %} “chivRegisterc/hi> ‘input autocomplete="off" autofocus name="name" placeholder="Name™ type="text"> Dodgebsll Flag Football Seccer 'Yoleybal1" »Volleyball 4% endblock %} ‘+ Teremos um formulétio como antes, eteremos um menu <\seleet> com opges: para cada espore, Em nosso applieation.py. permititemos POST para nossa rota /register: Gepp.route("/register", methods=["POST"]) def register() if not request.form.get("nane") or not request. form.get (sport! return render_tenplate("failure.html") return render_tenplate("success.html") «+ Verfcaremos s€ 0s valores do nosso formulario sao vals e, em seguida, retomnaremos um modelo dependendo dos resultados, embora nfo estejamosrealmente fazendo nada com os dads ainda Mas um usuirio pode alterar o HTML do formulliio em seu navegador ¢ enviar uma solctagio que contenha algum outio espoite como opgéo selecionada! Veriicaremos se o valor para spat é valde criando uma lista em applieation.py- from flask inport Flask, render_tenplate, request =F Flesk(_name_) ‘SPORTS = [ "Dodgebsl1", Flag Football” "soccer", Gapp.route("/") ‘ef index(): return render_tenplate("index.html", sportssSPORTS) Em seguida, passaremos essa lta para 0 modelo index. hem Em nosso madele, podemos até usar loops para gerar uma sta de opsées da lista de cords passadas como sport: {{ sport }} 4% endfor 8} Por fim, poclemos veiiar se 0 sport enviado na solcitacio POST esta na ista SPORTS em application py: Gapp.route("/register", methods=["POST"]) def cegister(): Af not requestform.get ("name") or request.form.get("sport”) not in SPORTS: return render_tenplate("failure.html") return render_tenplate(" success html") Podemos alterar 0 menu de selegio em nosso formulério para cabs de selec, para permit varios esportes: 4B extends “Layout.html" x} 4% block body %} “chiRegisterc/hi>  4% for sport in sports 8) 4h endblock %} + Em nossa fungio de regieter, podemos chamar request. form. getist para Dobter a lista cle opedes marcadas, Também podemos usar “radio buttons", 0 que permits que apenas uma oped sea escola por vez. Armazenamento de dados Vamos armazenar nossos alunos registrados, ou inscritos, em um diclondio na meméria se nosso servidor web: from flask import Flask, redirect, render_tenplate, request app = Flask(_nane_) REGISTRANTS = {3 Gepp.route("/register", methods=["P0ST"]) ef cegister(): ane = request. form. get(“nane") AF not name! return render tenplate(“error.htmi", message="Nissing name") sport = request. form.get("sport”) AF not spot return render_tenplate( Af sport not in SPORTS: return render_tenplate("error.htnl", message="Invalid sport") rror.html", messages"Kissing sport”) REGISTRANTS[name] = sport return redirect("/registrants") + Criaremos um dicionario chamado REGISTRANTS, e no register veriicaremos Drimeico o name © o sport. retornendo uma mensagem de eno diferente em cada caso. Assim, podemos armazenar com seguran¢a onome e © esporte em nosso Uicionério REGISTRANTS e redirecionar para outta rota que exibiré 0s alunos registrados. + Omodelo de mensagem de erro, por sua vez, exibié apenas a mensagem: 4% extends “Layout htm")4% block body} 4 mensagem 3} 4% endbdocks} ‘Vamos adicionar 2 rota /registrants © © modelo para mostrar aos alunos registrados: Gapp.route("/registrants*) ‘ef cegistrante(): return render_template(""registrants.htm", rregistrants-REGISTRANTS) ‘+ Em nossa roa, passaremos do dicionario REGISTRANTS ao template como um ppardmetro chamado regietrants: {8 extends “Layout. html” 3) (% block body X) tables ‘ethead> ery ‘tbody ( for name Sn registrants §) ctr td>({ ane Jers ‘tdb({ ropistrants[nane] }) ( endfor %) | endblock X) ‘+ Nosso modelo erd uma tabela, com uma linha de thulo € uma tinhe para cada have e valor armazenado nos regitrants, Se nosso servidor web parar de funciona, perderemos os dados atmazenados, entéo usaremos um banco de dedos SQLite cam a biblioteca SOL de e850: from cs5@ import SQL from flask import Flask, redirect, render_template, request: ‘app = Flask(_name_) db = SQL(“sqlite:///froshims.db") ‘+ No terminal do IDE, pocemos executar sqlite3. froshims.db para abrir obanco de dados © usar o comando .sehema para ver atabela com colunas de ‘eepor, que fol ria antecipadamente, Agora, em nossas rotas, pademos inser e selectonarlinhas com SOL Gapp.route("/register", methods=["P0ST"]) def register(): ane = request. form. get("name") Af not name:return render_tenplate("error.html", message="Miseing name”) sport = request. form.get("sport") Af not sport: return render_tenplate("error.htal", message="Missing sport") Af sport not in SPORTS: return render_tenplate("error.htnl", message="Invalid sport") 4. execute("INSERT INTO registrants (name, sport) VALUES(?, ?)"» rane, sport) return redirect("/registrants*) Gapp.route("/registrants*) def registrants(): registrants = db.execute("SELECT * FROM registrants”) return render_tenplate(“registrants.htm", registrantserogistrants) ‘+ Depols de valdar a soictaco, podemos usar INSERT INTO para acicionar uma linha e, ds mesma forma, em registrants(), poclemos SELECT todas as linhas © passlas para 0 modelo como uma lista de inhas NNosso modelo regitrants.heml também precisaré ser austad, pois cada tinh retorada de db.exeeute ¢ um dconario. Portart, posiemos usar registrantname c registrantspor para acessar 0 valor de cada chave em cada linha (% for registrant in ragistrants x) en ‘ ‘ ea {% endfor 8) Podemos até enviar e-mall aos usudrias com outa biblioteca, laek_mal: import os import re from flask inport Flask, render_tenplate, request from flask mail inport Wail, Message ‘app = Flask(_name_) app. config{"MATL_DEFAULT_SENDER"] = ‘os. getenv( "MATL_DEFAULT_SENDER") app. config{"MAIL_PASSWORD"] = os getenv("NATL_PASSHORD") app.config("MATL_PORT"] = 587 ‘app. config "NAIL, SERVER") = “smtp.gnail.con” app.config{*MAIL_USE_TLS"] = True ‘app. config "MATL_USERNAHE"] = os.getenv( "MATL_USERNANE")mail = Mail(app) ‘+ Definimos algumas varidveis sensiveis fora de nosso eddigo, no ambiente do IDE, para que possamos evita inclurlas em nosso cédigo. + Acontece que podemos fornecer detalhes de canfiguragle come nome de sudo e senha e Servidor de e-mail, neste caso o do Gmail, para a varvel M que enviars e-mail por nds. Finalmente, em nossa rota de regleter, podemos enviar um e-mall para usuatlo: Gapp.route("/register", methods=["P0ST"]) def register(): fenail = request.form.get(“enail") AF not email: return render tenplate(“error.htal", message="Nissing nail") sport = request. form.get("sport”) Af not spor return render_tenplate("error.htmi", messages"Nissing sport") if sport not in sPoRTs: return render_tenplate("error.htal", message="Invalid sport") message = Message(""You are registered!", recipiente-[enail]) nail. send(message) return render_template("success.html") ‘+ Em nosso formu, também precisaremos solicit um e-mail em vez de um ‘Agora, sereiniclarmos nosso servidor eusarmos 0 formulito para fomecer um e-mall, veremos que de fato recebemos um Sess6es [As eetsBor sto como os servores da web lembram as informacéies sobre cada Uusuéro, o que atva recursos como permit que os usustios permanegam logados AAcontece que os servdores posiem enviar outro cabecalho em uma resposta, chamado Set-Cookie WTTP/2.1 200 OK Content-Type: text/html Set-Cookie: sessionsvalue *+ Cookies s30 pequenios pedagos de dados de um servicor web que o navegador salva para nds. Em multos casos, eles so grandes nmeros aleatrios ou sequéncias usadas para identicare rastrear um usustio de maneita exclusiva centre as vistas, + Nesse caso, 0 Servidor esté pedindo ao nosso navegador para definir um cookie para esse serdar, chamado de eeesion para um valor de value Emo, quando 0 navegador fizer outa solicitag80 a0 mesmo servidor ele enviard de volta os cookies que o mesmo servider configurou antes:HTTP/1.1 200 OK Content-Type: text/html Set-Cookie: session=value No mundo real, 0s parques de dversdes podem dar 3 vocé um carimbe manual para ‘que voce possa voltar depots de sal, Da mesma forma, nosso navegador esta apresentando nossos cookies de volta ao servidor da web, para que ele possa se lembrar de quem somos. ‘As empresas de publicidade podem definir cookies de vérios sites im de rastrear 0s, Usudrios em todos eles, No modo de navegasao anénima, por outto lado, o navegador Io envia cookies definidos anteriormente, No Flask, podemos usar a biblioteca lask_session para gerenciar sso para nés: from Flask import Flask, redirect, render_tenplate, request, from Flask session inport Session ‘app = Flask(_name_) ‘epp. configi"SESSION_PERMANENT"] = False ‘app. configi"SESSION_TYPE"] = "filesysten" ‘Session(app) app route(") def index(): Af not session. get ("name") return redirect ("/login") return render_tenplate(" index.html") app route("/1ogi def Login(| if request method = "POST": session["name"] = request. form.get("nane") return redirect ("/*) return render_tenplate("login.htm2”) ", methods=["GET", "POST™]) app route("/Logout") def logout(): session{"“name"] = None return redirect("/*) Em nosso login hem, teremos um formule com apenas um nome: + Cookies s80 pequenas pedagos de dados de um servidor web que o navegador salva para nés. Em muitos casos, oles so grandes nimeros aleatérios ou ‘sequéncias usades para ienticare rastrear um ususrio de maneita exclusiva centre as vistas, + Nesse caso, o servdor ests pedindo ao nosso navegador para definir um cookie para esse servidor, chamado de session para um valor de value © Configuraremos a biblioteca de sesso para sar o sistema de arquivos do IDE € usaremos 2 session como um dicionéiio para armazenat o nome de um usuatio. Acontece que o Flask usard cookles HTTP para nos, para manter esta varisvel de eeeston para cade usuario vistando nosso servidor eb, Cada wisitante obters sua propria varlavel de session, emivora parecs ser global em nosso codigo. Para nossa rota / pada, remos redirecionar para /egin se nao houver lum nome definide na session para © ususro ala, e caso contraio‘mostiaremos um modelo index html pacio, © Para nossa rota /Login,definremos o name na session para o valor do formulatio enviado via POST e, em sequlda, reditecionaremos para a rota padido, Se vistamos a rota via GET, renderizaremos o formulio de login em login htm Para a ota /ogout, podemos impar o valor de name na session defnindo ‘como None © reirecionar para / novamente. © Geralmente, também precisaremos de um requirements. que Inclua 0s ‘nomes das bibliotecas que desejamos usar, para que possam serinstaladas em nosso apicatvo, mas as que usamos aqui foram pré-insaladas no IDE, Em nosso login.html,teremos um formula com apenas um nome: { extends “Layout.html” $ 4% block body %}

‘off" autofocus name="name” ‘text">

4% endblock *} E em nosso index.html, podemos veriicar se session.name exste © mostar contetido diferente: {% extends “Layout.ntml” x} { block body %} {h if session.name %} You are logged in as ¢{ session.name )}. Log out. else You are not logged in. ca href= {% endif 3) hee Alogin*>Log inc/a>. 4% endblock §} (Quando reiniclamos nosso server, vamos ao seu URL e logemos, pademos ver na aba Rede que nosso navegador est de fatoenviando um cabecalho Cookie: na salctacdo: x Headers Preview Response initiator Timing Cookies Carmenere Perens cetera User-Agent: Mozilla/5.0 (Macintosh; Intel Mac 0S X 10_15_7) foresee eee eC steya tee eee scare Pye ee Came ree eet ae, foo OC eee ae Te) eee eee eeeAplicacado Loja(shows) Veremios um exemplo, store: + application py incializa e configura nosso aplicatvo para usar um banco de dads sessdes. Em index(), a rota padio renderiza ume lista de ivios armazenados no banco de dados. + templates/books.heml mostia a isa de books , bem como um foxmuléio que permite elcar em “Adicionar ao cartinho” para cada um deles, + A rota ear, por sua vez, armazena um id de uma solctacio POST na variavel de se¢son em uma lista, Se a solctagio usasse um método GET, entretanto, /eart ‘mosrata uma sta de livros coms correspondend a lista de ids armazeniada ha session. ‘Assim, “cartinhos de compas” em sites podem ser implementados com cookies € varies de sesstio armazenadas no servidor. (Quando visuaizamos a fonte gerada por nossa rota pado, vemos que cada fio tem ‘21 proprio elemento <\form>, cada um com uma entrada de id ferente que é ocuita e cgerada. Este id ver do banco de dados Site em nosso servidor e € enviado de volta para a ota Jeart Veremios outro exemplo, shows, onde podemos usar JavaScript no front-end, ou lado {que 0 usuatio v8, e Python no back-end, ou lado do Servidor, Em applicationpy aqui, vamos abrir um banco de dados, show from cs5@ import SQL from flask import Flask, render_template, request app = Flask(_nane_) db = SQL("sqlite:///shows.db") opp route("/") def index(): return render templste("index.htn2”) app route("/search") def search(): shows = db-execute("SELECT * FROM shows KMERE title LIKE?" + request-args.get("q") + "X") return render_tenplate("search.html", shows=shows) + Arota padiéo / mostraré um formuléio, onde podemos digjitaralgum termo de pesquisa + 0 formularo usara o método GET para enviar 3 consulta de pesquisa para Fseareh que por sua ver usaré banco de dados para enconttar uma lista de programas correspondentes, Finalmente, um template seareh.html mostrar a Ista de programas. Com JavaScript, podemos mostrar uma lta parcial de resuitads a media que {ijtamos. Piero, usaremos um fungi chamada jsonify para retornar nossos programas no formato JSON, um formato pada que o JavaScript pode usar. app route("/search")"HT + request.args.get("") + "8") return jeonkfy( shows) ‘Agora podemos erwiar uma consulta de pesquisa e ver se obtemos uma lista de Sicionaiios: [{"id":108878, "title Day at the Office"}, {"id":112108,"title": "The Office"}, {"id":122441,"title d'office"}, Nice Entéo, nosso modelo indaxhtmnl pode converter essa lista em elementos no DOM: chem] Lange"en"> head ‘ ctitlershousc/title “input autoconpletes"off autofocus placeholders"Query" rch"> culs cseript> et input = document querySelector(*input'); Anput-addeventListener(*keyup', function() { S.get("/search?ge" + input.value, function(shows) { let hem = "5 for (let id in shows) { let title = shows{ia) title heml +2 "dip' + title + /1b"; ? document. querySelector( "ul" ys De nnerHT™M. = hems + Usaremes outta biblioteca, JQuery, pare fazer solictagbes com mais faciidade. + “Ouviremos" as mudancas no elemento de inpur e usaremas $ «get, ave chama uma fungao de biblloteca JQuery para fazer uma solicitago GET com 0 valor dePata ma de ensino pot dools entrada, Em seguida, 9 resposta seré passada para uma fungi anénima por meio da varivel shows, cue definira 0 DOM com os elementos «14> gerados com + $.get 6 uma chamade AJAX, que permite ao JavaSctipt fazer solicagBes HTTP Aadicionals apos o carregamento da pagina, para abter mals dados. Se abrrmos 3 ‘ula Rede novamente, podemos ver de fato que cada tela pressionada fez outra Name x Headers Preview Response Initiator Timi I 1978, "title":"The Office"), (°4d" 292829," search?q-ott search?gzottic search7q=ottice fe rede pode ser lenta a funcio anénima que passamos para S.get & uma funcko de retome de chemede, que sé ¢ chemada depois de utro codige JavaScript Por hoje sso! Vamos colocar em prética?