Widget de Previsão do Tempo Utilizando Web Component
Já pensou criar um componente e utiliza-lo em qualquer framework, biblioteca JavaScript ou até mesmo páginas sem qualquer tecnologia específica? Sem se preocupar com conflitos de CSS, replicando os comportamentos nativos dos componentes do browser? Aplicando as especificações utilizadas para construir web components tudo isso é possível. Nesta Live Coding você irá aprender de maneira prática a construção de um widget para exibir a previsão do tempo e como utiliza-lo nas principais tecnologias utilizadas no front-end. Serão abordados conceitos de Web components e suas especificações no React e VueJS, e será realizado consumo de APIs rest.
What you will develop </>
Objetivo: O objetivo deste projeto prático hands-on é criar um widget de previsão do tempo utilizando web components em JavaScript e aprender a utilizá-lo em diferentes frameworks e bibliotecas do front-end, como React e VueJS.
Descrição: Neste projeto, será construído um componente de previsão do tempo que poderá ser utilizado em diferentes tecnologias, independentemente do framework ou biblioteca utilizada. O foco será em utilizar as especificações de web components para replicar o comportamento nativo dos componentes do browser, sem preocupações de conflitos de CSS.
Durante a Live Coding, será demonstrada de maneira prática a construção do widget de previsão do tempo utilizando web components. Serão abordados conceitos de web components e suas especificações, como a criação de custom elements, shadow DOM e HTML templates.
Além disso, serão apresentadas as formas de utilização do widget em diferentes frameworks e bibliotecas, como React e VueJS. Serão mostradas as melhores práticas e as adaptações necessárias para integrar o componente em cada tecnologia.
Requisitos técnicos:
- Conhecimento intermediário de JavaScript
- Familiaridade com o desenvolvimento front-end
- Ambiente de desenvolvimento para JavaScript
- Acesso a uma API de previsão do tempo (exemplo: OpenWeatherMap)
Who will guide you in this project </>
EDUCAÇÃO
EMPREGABILIDADE
COMUNIDADE
Torne-se a opção Nº 1 dos recrutadores e conquiste as melhores vagas do mercado tech
Com o o DIO PRO você irá:
Acesso ilimitado a todos os bootcamps
E mais de 40 formações profissionais do zero ao avançado para você dominar as tecnologias nas carreiras front-end, back-end, data & analytics, mobile, cloud & DevOps e se preparar para trabalhar em grandes projetos nas empresas mais inovadoras do mundo
Mais de 180 projetos práticos para ganhar experiência
Libere acesso ilimitado a uma área com mais de 180 projetos e 650 cursos para você aprender, comprovar experiência prática e ter um portfólio de destaque no mercado
Fazer parte das maiores e mais inovadoras empresas do mundo
Certifique suas habilidades, ganhe experiência, suba no ranking de talentos e fique em destaque para recrutadores de empresas como iFood, Santander, Carrefour e outras dezenas que contratam profissionais na DIO.
About DIO
ACADEMIA PME EDUCACAO E CONSULTORIA EM NEGOCIOS LTDA.
CNPJ: 26.965.884/0001-02
DIO is the largest technology continuous learning community in Latin America, which connects the best talent with the most innovative companies in the world.
A complete educational ecosystem for learning in software development, data engineering, software quality and cloud computing.