Converter um projeto Cordova em um projeto PhoneGap

Artigo
09/13/2015

PhoneGap é uma estrutura de código-fonte aberto para a criação rápida de aplicativos móveis de plataformas cruzadas usando HTML5, JavaScript e CSS. Adobe PhoneGap compilação é um serviço de nuvem que permite criar rapidamente aplicativos móveis e compilá-los facilmente sem SDKs, compiladores e hardware. Este artigo descreve como converter um projeto do Apache Cordova criado usando o Visual Studio para um projeto PhoneGap e usar o serviço de nuvem de compilação PhoneGap.

Uma das principais diferenças entre um projeto do Visual Studio e o projeto PhoneGap é a definição de aplicativo no arquivo de configuração (config. xml). As tarefas a seguir são necessários para alterar o projeto do Visual Studio em um projeto PhoneGap:

Crie um novo projeto Cordova usando o Visual Studio
Criar a estrutura do projeto PhoneGap
Atualizar o arquivo config. XML
Carregamento de compilação na nuvem
Assinar com código e provisionar o aplicativo

Crie um novo projeto Cordova usando o Visual Studio

Para criar pacotes de aplicativos, a compilação de PhoneGap baseado em nuvem requer somente os ativos da web-do seu aplicativo, que são limitados a seu HTML, CSS, imagens, arquivos. js e arquivos semelhantes. Provavelmente falhará PhoneGap Build compilar o aplicativo se arquivos nativos são carregados (. h, .m, Java, etc.). Como a estrutura do projeto criada pelo Visual Studio corresponde a estrutura do projeto Cordova, a pasta da Web do seu projeto agora hospeda todos os ativos da web exigidos pelo seu aplicativo.

Cordova project structure in Visual Studio

Depois de criar um projeto do Visual Studio, você pode mover os ativos da web em um projeto de compilação PhoneGap. É recomendável que você crie uma nova pasta (fora de seu local de projeto do Visual Studio) para hospedar seu projeto PhoneGap e, em seguida, copie a pasta de Web para o novo local.

Criar a estrutura do projeto PhoneGap

Ao estruturar o projeto PhoneGap, verifique se config. XML e index. HTML estão no nível superior da estrutura de pasta do aplicativo (aqui, usamos a pasta da Web como a pasta de nível superior). Caso contrário, você pode estruturar seu aplicativo conforme necessário. Copie o arquivo config. XML da pasta raiz do projeto para a pasta de Web do projeto PhoneGap compilação. Além disso, copie os recursos nativos da pasta 'res' (res\icons e res\screens respectivamente) para a pasta Web do projeto PhoneGap compilação.

Quando você copiar sobre todos os arquivos e pastas, o projeto de compilação PhoneGap deve ter esta aparência.

PhoneGap project structure

Como seu aplicativo pode conter arquivos ou pastas não necessárias em seu aplicativo de pacote final (como as telas de abertura não utilizados, bower pacotes, pesado artefatos, não compilados menos arquivos, etc.), compilação PhoneGap oferece suporte a um arquivo especial denominado .pgbomit.

.pgbomit é um arquivo que você pode criar e adicionar a uma pasta para instruir o PhoneGap compilação para excluir a pasta como uma fonte de arquivos de aplicativo nativo. (No entanto, você pode usar essa pasta para armazenar os arquivos necessários durante o processo de compilação PhoneGap até a etapa de compilação). Como um exemplo típico, convém colocar .pgbomit na pasta que contém os ícones e telas iniciais. Então colocar .pgbomit na pasta do seu projeto de compilação PhoneGap; www/res Como resultado, nenhum dos arquivos e pastas em www/res será incluído no pacote do aplicativo binário, exceto aqueles copiado e usado para ícones e telas iniciais para uma plataforma específica. A ilustração a seguir mostra o arquivo .pgbomit na pasta www/res.

Location of the pgbomit file

Como o PhoneGap compilação não dá suporte a pasta mesclagens do projeto Cordova CLI por padrão, você precisará copiar conteúdo de plataforma específica da pasta do projeto Cordova CLI mesclagens na pasta do projeto de compilação PhoneGap www.

Atualizar o arquivo config. XML

Compilação PhoneGap oferece suporte a um arquivo XML de configuração, config. XML, que é muito diferente do gerado pelo projeto do Visual Studio. Esse arquivo de configuração permite que você modifique coisas como o título do aplicativo, ícones, telas iniciais e outras propriedades.

Inicie removendo o namespace do VS e adicionando o PhoneGap namespace para o arquivo config. XML. O resultado é mostrado aqui.

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
  id="io.cordova.appb64ec64666e9432a9caf5f01009feb88"
  version="1.0.0.0"
  xmlns:gap="http://phonegap.com/ns/1.0"
  xmlns="http://www.w3.org/ns/widgets">
<name>SlidePuzzle</name>

Ícones

O ícone padrão deve ser nomeado icon.png e deve residir na raiz da pasta do seu aplicativo. A menos que você especifique de outra forma no arquivo config. XML, cada plataforma tentará usar o icon.png padrão durante a compilação.

<icon src="icon.png" />

Se você quiser ícones específicos para a plataforma Android, as entradas a seguir mostram um exemplo de como atualizar o arquivo config. XML com base no conteúdo da pasta res\icons\android no projeto de compilação PhoneGap criado anteriormente.

<icon gap:platform="android" gap:qualifier="ldpi"
    src=" res/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi"
    src=" res/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi"
    src=" res/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi"
    src=" res/icons/android/icon-96-xhdpi.png" />

Para obter mais informações sobre como especificar elementos de ícone no arquivo config. XML, leia isto artigo.

Telas iniciais

Você pode ter zero ou mais elementos da tela inicial presente no arquivo config. XML. O elemento de tela inicial pode ter atributos src, lacuna: plataforma, largura e altura, assim como o elemento < ícone >. Como os arquivos de ícone, salve a abertura triagem de arquivos como imagens PNG. A menos que você especifique de outra forma no arquivo config. XML, cada plataforma usará o arquivo de splash.png padrão durante a compilação. Se você não fornecer o atributo lacuna: plataforma, a imagem padrão será copiada para todas as plataformas, aumentando o tamanho de cada pacote de aplicativo.

A tela inicial padrão deve ser nomeada splash.png e deve residir na raiz da pasta do seu aplicativo.

<gap:splash src="splash.png" />

Se você quiser específico de telas iniciais para a plataforma Android, as entradas a seguir mostram um exemplo de como atualizar o arquivo config. XML com base no conteúdo da pasta res\screens\android no projeto de compilação PhoneGap.

<gap:splash gap:platform="android" gap:qualifier="port-ldpi" 
    src=" res/screens/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" 
    src=" res/screens/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" 
    src=" res/screens/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" 
    src=" res/screens/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="land-ldpi" 
    src=" res/screens/android/screen-ldpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-mdpi" 
    src=" res/screens/android/screen-mdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-hdpi" 
    src=" res/screens/android/screen-hdpi-landscape.png" />
<gap:splash gap:platform="android" gap:qualifier="land-xhdpi" 
    src=" res/screens/android/screen-xhdpi-landscape.png" />

Para obter mais informações sobre como especificar elementos da tela inicial no arquivo config. XML, consulte artigo.

Plugins

Para estender o acesso a recursos de plataforma nativa expostos pelo contêiner de aplicativo nativo PhoneGap, compilação PhoneGap oferece suporte a uma seleção listadas em branco PhoneGap Plugins. Para obter a lista de plug-ins com suporte, consulte Plug-ins. Se você incluir qualquer plug-ins que não estejam na lista de permissões da Adobe, haverá falha na compilação. Para importar um plug-in no seu projeto de compilação PhoneGap, você precisará adicionar o elemento correto < lacuna: plug-in > ao arquivo config. XML. Se você omitir o atributo de versão para o plug-in, o aplicativo irá criar sempre usando a versão mais recente do plug-in.

Eis a maneira mais simples de usar um plug-in de controle de versão.

<gap:plugin name="com.phonegap.plugins.example" version="2.2.1" />

Como o Visual Studio emite o elemento < vs: plug-in > no arquivo config. XML para cada plug-in que você adicionou, você precisará substituir esses elementos com elementos < lacuna: plug-in >. O projeto de exemplo que estamos usando, usamos dois plug-ins e duas linhas correspondentes no arquivo config. XML.

<vs:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
<vs:plugin name="org.apache.cordova.camera" version="0.3.2" />

No projeto de compilação PhoneGap, essas linhas devem ser alteradas para:

<gap:plugin name="org.apache.cordova.device-motion" version="0.2.10" />
  <gap:plugin name="org.apache.cordova.camera" version="0.3.2" />

Para obter mais informações sobre como modificar os plug-ins, consulte artigo.

Carregue seu projeto PhoneGap

Depois de concluir todas as modificações necessárias, você pode carregar seu aplicativo para o serviço de compilação PhoneGap. Primeiro, crie uma conta para o serviço de compilação PhoneGap. Em seguida, faça logon na sua conta no https://build.phonegap.com/apps enviar seu aplicativo. Você pode enviar seu aplicativo de um repositório GIT ou você pode carregar um arquivo ZIP local. Neste exemplo, vamos para carregar um arquivo ZIP local que contém a pasta zipada www. Depois de carregar o CEP, você verá que o aplicativo está pronto para criar.

Cordova_Pgap_Build_BuildReady

Quando você clica no pronto para compilação botão, o serviço de compilação PhoneGap iniciará criando para o plataformas que você definiu no arquivo config. XML. Uma vez que não definimos qualquer plataforma específica, o serviço criará para todas as três plataformas (iOS, Android e Windows). Após a compilação for concluída, você verá os resultados da compilação.

PhoneGap fully signed build package

Assinar com código e provisionar o aplicativo

Como estamos usando uma nuvem criar serviço, teremos de definir a assinatura de código e certificados para dar suporte a construção de provisionamento pacotes de distribuição da versão/assinados. Para iOS, você pode fornecer o código de certificado de assinatura e o perfil móvel provisionamento aqui:

Code signing a PhoneGap package for iOS

Para criar um pacote de APK de versão para o Android está pronto para envio de armazenamento, serviço de compilação PhoneGap permite que você forneça informações de armazenamento de chaves e as senhas correspondentes aqui:

Code signing a PhoneGap package for Android

Para o Android, usaremos um chave-armazenamento existente que criamos anteriormente (ou você pode criar um novo usando essa guia) e, em seguida, recompile o aplicativo. Agora, o serviço de compilação cria um pacote de versão totalmente assinado que pode ser baixado de publicação para o armazenamento ou instalado em um dispositivo com fio.