Previsão do Tempo no app
Caso deseje inserir a previsão do tempo de uma cidade no app você precisará usar uma aba que tenha um espaço em branco para inserção de texto, para que seja possível usar o Código Fonte.
Obs: usaremos uma plataforma embedada em um código html. Portanto estamos limitados às cidades cobertas por essa plataforma.
Veja como a previsão ficará no app.
Colocando no app:
Abra uma aba Lista ou Página em Branco e clique no campo "Código-Fonte";
Em outra aba busque no navegador por Forecast7 + o nome da sua cidade e entre no resultado do Forecast7;
Copie o código do navegador correspondente a previsão do tempo liberada pelo Forecast7 para a sua cidade;
Copie o código abaixo e cole na aba de Código-Fonte dentro do editor da Fabapp:
<style type="text/css">.botoes{
top: 100%;
position: fixed;
z-index: 999;
display:flex;
margin:0 auto;
left:0; right:0;
width: 242px;
text-align:center;
background-color: #f8bc62;
box-shadow: 0 1px 3px #00000033;
max-width: calc(100% - 46px);
min-height: 42px;
justify-content: center;
align-items: center;
border-radius: 24px;
font-size: 14px;
font-weight: 600;
margin-bottom: 22px;
font-family: "Open sans", sans-serif;
color: #2a140b;
}
</style>
<iframe srcdoc="<a class='weatherwidget-io' data-cke-saved-href='https://forecast7.com/pt/n23d55n46d63/sao-paulo/' href='https://forecast7.com/pt/n23d55n46d63/sao-paulo/' data-label_1='Sao Paulo' data-label_2='Meteorologia' data-theme='pure' >São Paulo Clima</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>" style="position:fixed; top:0; left:0; bottom:0; right:0; max-width:315px; height:100%; border:none; margin:0 auto; padding:0; overflow:hidden; z-index:999999;">Your browser doesn't support iframes</iframe>
Agora você deverá alterar os 2 links do código HTML copiado, substituindo pelo link que você obteve na plataforma da Forecast7. Veja a imagem abaixo:
Importante: Quando for substituir os links não altere mais nada no código! Somente substitua os links, sem retirar as aspas.
Se quiser, altere também o nome da cidade de São Paulo que aparece mais abaixo no código. Como mostra a imagem abaixo:
Agora clique sobre o botão de Código-Fonte no editor novamente para fechar o campo de edição HTML e clique em salvar. Nesse momento você verá o resultado do seu trabalho no pré visualização do celular que aparece na tela.
Utilizando outra plataforma de previsão de tempo:
Caso você não tenha obtido sucesso com a questão acima você pode utilizar a plataforma https://ibooked.com.br/widgets/weather
Acesse https://ibooked.com.br/widgets/weather e altere a localização (no canto superior direito). Espere as opções carregarem e selecione a sua cidade;
Escolha a terceira opção de widget:
Depois clique em obter código HTML e depois a opção "uma imagem";
Copie o código que aparecerá em tela e cole dentro do editor de texto da Fabapp selecionando a opção Código-Fonte;
Clique novamente sobre a opção Código-Fonte e salve.
Obs: usaremos uma plataforma embedada em um código html. Portanto estamos limitados às cidades cobertas por essa plataforma.
Veja como a previsão ficará no app.
Colocando no app:
Abra uma aba Lista ou Página em Branco e clique no campo "Código-Fonte";
Em outra aba busque no navegador por Forecast7 + o nome da sua cidade e entre no resultado do Forecast7;
Copie o código do navegador correspondente a previsão do tempo liberada pelo Forecast7 para a sua cidade;
Copie o código abaixo e cole na aba de Código-Fonte dentro do editor da Fabapp:
<style type="text/css">.botoes{
top: 100%;
position: fixed;
z-index: 999;
display:flex;
margin:0 auto;
left:0; right:0;
width: 242px;
text-align:center;
background-color: #f8bc62;
box-shadow: 0 1px 3px #00000033;
max-width: calc(100% - 46px);
min-height: 42px;
justify-content: center;
align-items: center;
border-radius: 24px;
font-size: 14px;
font-weight: 600;
margin-bottom: 22px;
font-family: "Open sans", sans-serif;
color: #2a140b;
}
</style>
<iframe srcdoc="<a class='weatherwidget-io' data-cke-saved-href='https://forecast7.com/pt/n23d55n46d63/sao-paulo/' href='https://forecast7.com/pt/n23d55n46d63/sao-paulo/' data-label_1='Sao Paulo' data-label_2='Meteorologia' data-theme='pure' >São Paulo Clima</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>" style="position:fixed; top:0; left:0; bottom:0; right:0; max-width:315px; height:100%; border:none; margin:0 auto; padding:0; overflow:hidden; z-index:999999;">Your browser doesn't support iframes</iframe>
Agora você deverá alterar os 2 links do código HTML copiado, substituindo pelo link que você obteve na plataforma da Forecast7. Veja a imagem abaixo:
Importante: Quando for substituir os links não altere mais nada no código! Somente substitua os links, sem retirar as aspas.
Se quiser, altere também o nome da cidade de São Paulo que aparece mais abaixo no código. Como mostra a imagem abaixo:
Agora clique sobre o botão de Código-Fonte no editor novamente para fechar o campo de edição HTML e clique em salvar. Nesse momento você verá o resultado do seu trabalho no pré visualização do celular que aparece na tela.
Utilizando outra plataforma de previsão de tempo:
Caso você não tenha obtido sucesso com a questão acima você pode utilizar a plataforma https://ibooked.com.br/widgets/weather
Acesse https://ibooked.com.br/widgets/weather e altere a localização (no canto superior direito). Espere as opções carregarem e selecione a sua cidade;
Escolha a terceira opção de widget:
Depois clique em obter código HTML e depois a opção "uma imagem";
Copie o código que aparecerá em tela e cole dentro do editor de texto da Fabapp selecionando a opção Código-Fonte;
Clique novamente sobre a opção Código-Fonte e salve.
Atualizado em: 09/12/2022