Desenvolvimento Web / App Mobile

Utilizando o Ionic Lab para ter uma pré visualização do seu app em 3 dispositivos diferentes

Esse recurso irá montar o visual do app levando em consideração as características de cada um dos aparelhos, assim você tem uma visão mais próxima da realidade.

Por Gustavo Web

Publicado por Gustavo Web
em 29/06/2017 às 08h00

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR
Compartilhe:

Salve salve galera, Gustavo Web aqui novamente e vamos retomar aquele nosso assunto sobre desenvolvimento de aplicativo híbrido?

Retomando aqui os estudos, e vendo ainda sobre as possibilidades que temos com a ferramenta, eu decidi ver rapidamente como que funciona o Ionic Lab.

Num artigo anterior eu falei sobre duas ferramentas bacana que o Ionic nos oferece para auxiliar no processo de desenvolvimento de nosso app.

Se você vem acompanhando nossa série de artigos sobre esse assunto eu já falei um pouco sobre como subir um ambiente e como testar o aplicativo, e eu estou utilizando agora mais uma ferramenta para analisar com mais especificidade o visual em cada um dos dispositivos.

Quando vamos iniciar o serviço eu já falei como funciona com o ionic serve e o interessante é que se você passar um parâmetro a mais nessa chama deixando a sintaxe como ionic serve --lab você tem uma visão diferente dentro do seu navegador podendo simular nos 3 dispositivos diferente. Saca só:

No meu terminal eu acessei a pasta do meu projeto e executei o comando:

Ele automaticamente abre o browser na url de localhost e eu tenho a seguinte visão:

E eu posso controlar qual dos dispositivos sejam exibidos no meu palco utilizando os checkbox que temos no topo da página:

Uma coisa que vinha me incomodando ao usar o Ionic Viewer, é que fica uma barrinha branca no topo da aplicação… E eu não estava conseguindo deixar totalmente azul, mas agora acredito que essa barra branca do topo seja por conta do App Ionic Viewer e não por conta da aplicação que eu estou desenvolvendo! Dá uma olhada como fica o print rodando dentro do Ionic Viewer…

Mais uma ferramenta para ajudar os desenvolvedores na parte visual do nosso app.

Agora, nos meus próximos passos, quero trabalhar com o login dentro do app… Provavelmente vou ter que utilizar o localstorage (do jquery) ou ver as possibilidade que o angular nos fornece para resolver esse tipo de problema… Assim eu consigo proteger a minha aplicação e autenticar o usuário usando a API do WorkControl, e vou fazer isso usar a digital ainda :)

Acredito que vai ficar beeeeem legal, que tal? Me fala nos comentários, quais são as utilidades que você gostaria de ter no app da UP… Assim a gente faz um brainstorm com uma gaaaaleeeeraaaa e bota isso pra rodar :)

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: