Emulando Apps PhoneGap e Mobile Web Apps, no Browser com Ripple

15/02/2013 | By Loiane | 12 Comments

Ei pessoal,

Mais uma dica sobre PhoneGap aqui no blog. Hoje é sobre uma ferramenta free, na verdade é um plugin para o Google Chrome chamado Ripple.

Com o Ripple é simples e super fácil emular uma aplicação que foi feita com PhoneGap.

Como eu desenvolvo apps com Sencha Touch e PhoneGap, e o objetivo é ter que fazer apenas 1 código para as plataformas que quero distribuir minha app, primeiro eu construo a aplicação e depois apenas que vou para o Xcode ou Eclipse. Nesse tempo tenho a necessidade de testar a app pra ver se tudo está ok. E como o browser não suporta o PhoneGap, apenas o Sencha Touch, fica meio complicado testar assim sem emular no iOS ou Android. Aí entra o Ripple.

Para esse post, usei Sencha Touch 2 e coloquei um alert em PhoneGap apenas para dizer que fiz integração entre os frameworks e para mostrar que funciona mesmo.

Você também pode usar o Ripple para testar apps Sencha Touch, JQuery Mobile, HTML 5 mobile apps e até apps com Blackberry 10 (vou falar sobre isso em breve aqui no blog).

Então vamos lá!

Primeiro instalei o Ripple no Chrome:

Depois abri minha app normalmente no browser – não vai funcionar direito porque o browser não reconhece o PhoneGap, mas a parte do Sencha Touch funciona:

Clique com o botão direito- > Emulator -> enable:

Aí o Ripple vai dar um refresh e abrir nesse ambiente super legal:

Dá pra trocar o device (Android, iOS – tem vários modelos), dá pra escolher a plataforma (Phonegap 1 ou 2, simples html, blackberry, etc) e várias outras configurações.

Dá para debugar também, mas isso fica para outro post!

Essa ferramenta se tornou essencial no desenvolvimento de apps Sencha Touch e PhoneGap pra mim.

Espero que tenham gostado da dica!

Até a próxima!

Filed in: Phone Gap (Cordova) | Tags: Cordova, Emulador, PhoneGap, Ripple, Sencha Touch

Comments (12)

Luan Alves Costa

Muito bom.

15/02/2013 at 12:41 Reply
Henrique Alves

Com certeza inovação, show de bola.

15/02/2013 at 13:06 Reply
Daniel Reis

Muito bacana…

15/02/2013 at 14:44 Reply
Wallace Erick

Vamos testar.

16/02/2013 at 12:33 Reply
Sousa

Muito bom obrigado, no aguardo do debug.

16/02/2013 at 21:17 Reply
Marcos Rosada

@loiane, Sabe me dizer pq qndo clico no “Enable” nada acontece?

Grato!!!

18/02/2013 at 13:33 Reply
- Loiane
  
  Oi Marcos,
  Vc precisa ter o projeto feito deploy em um webserver. Abrir um arquivo no navegador não funciona. Outra dica é escolher a plataforma correta. Não adianta escolher phone gap se o projeto não tiver phonegap.
  []‘s
  
  18/02/2013 at 14:23 Reply
  - Marcos Rosada
    
    Depois do comentário percebi q fazer o deploy…
    
    http://emulate.phonegap.com/
    
    Sim, escolhi PhoneGap…
    
    Vou continuar nos testes…
    
    Grato!
    
    18/02/2013 at 14:35 Reply
    - Loiane
      
      Sim, vc pode usar o ripple remotamente tb.
      []‘s
      
      18/02/2013 at 16:10 Reply
Francisco Rubens

Estou desenvolvendo com windows+sencha+phonegap e estou testando ripple, porém na aba 'config' do ripple diz que o arquivo 'config.xml' não existe. Tem ideia de como resolver este problema?

Obrigado

09/03/2013 at 3:28 Reply
Francisco Rubens

Meu ambiente é windows+sencha+phonegap, consigo abrir minha aplicação no ripple, porém na aba 'config' do ripple diz que o arquivo 'config.xml' não foi encontrado. Alguma dica sobre como resolver este problema.

Obrigado.

09/03/2013 at 3:32 Reply
- Loiane
  
  Francisco, vc precisa trocar o sistema para apache cordova/phonegap. A aba config é apenas para apps blackberry que precisam ter esse arquivo.
  []‘s
  
  11/03/2013 at 9:23 Reply