UpInside Treinamentos

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.

Utilizando o Ionic Lab para ter uma pré visualização do seu app em 3 dispositivos diferentes
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter
  • Compartilhar na UpInside

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 esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter
  • Compartilhar na UpInside

Olá, deixe seu comentário para Utilizando o Ionic Lab para ter uma pré visualização do seu app em 3 dispositivos diferentes

Já temos 3 comentário(s). DEIXE O SEU :)
Cassius Giorgio Vieda

Cassius Giorgio Vieda

Show de bola Gustavo! Aguardando os próximos capítulos!
★★★★★DIA 02.07.17 13h24RESPONDER
Gustavo Web
Enviando Comentário Fechar :/
Luiz Bezerra

Luiz Bezerra

Boa Noite Gustavo, estou curtindo seus posts sobre o IONIC !!!

Gostaria de ver como vc vai chamar a página do artigo clicando no LINK que vc já tem na página principal !!!
★★★★★DIA 29.06.17 00h58RESPONDER
Gustavo Web
Enviando Comentário Fechar :/
Gustavo Web

Gustavo Web

Continua nos próximos episódios... :)

★★★★★DIA 29.06.17 10h45RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/