Stefan Horochovec
Possuo 20 anos de experiência no desenvolvimento de soluções web. Nos últimos 10 anos tenho atuado como Arquiteto de Soluções auxiliando empresas a desenvolver projetos para nuvem com um grande foco em Java EE como tecnologia voltada ao backend, Angular e React voltada ao frontend e Flutter voltado ao desenvolvimento móvel. Com relação a plataformas na nuvem, atuo com projetos consumindo serviços da AWS, Azure, e GCP.

Desenvolvendo para iOS utilizando Phonegap

Hoje existem diversas plataformas no mundo mobile e cada uma com uma linguagem específica, dessa forma, existe um custo elevado para portar uma mesma aplicação para todas as plataformas, esse custo elevado no desenvolvimento de projetos acaba criando uma barreira muito grande para que pequenas empresas possam usufruir desse ambiente que cresce exponencialmente a cada dia.

Entretanto, hoje é plenamente possível você criar um aplicativo utilizando HTML como linguagem de programação e executá-lo de forma nativa dentro do ambiente iOS. Essa condição é valida tanto para iPhone quanto para iPad. Para que isso seja possível, utilizaremos um framework chamado Phonegap. 

Phonegap é um framework open source (Apache Callback), criado pela Nitobi que foi adquirida em outubro de 2011 pela Adobe. O objetivo do Phonegap é ajudar empresas de desenvolvimento de software na área mobile oferencendo a possibilidade de desenvolver aplicações utilizando uma única linguagem de desenvolvimento para diversas plataformas, como: iOS, Android, Windows Mobile, etc.

O Phonegap provê uma grande quantidade de recursos em sua API, com ele você terá acesso aos serviços de: Acelerometro, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage. Tudo isso utilizando apenas HTML + Javascript para o desenvolvimento.

Se você já está familiarizado com o ambiente web, terá muita facilidade de iniciar o desenvolvimento mobile utilizando Phonegap.

Desenvolvimento

Para esse tutorial, você irá precisar efetuar dois downloads. O primeiro é o XCODE , disponível para download na Apple Store e do Phonegap, disponível no site da própria Phonegap.

Esse tutorial parte do principio que você já possua o XCODE instalado em seu Mac, e que possua o SDK do iOS.

Após efetuar o download do Phonegap através de seu site, você deve descompactar o arquivo e copiar o diretório iOS para seu Mac. Esse diretório contêm um arquivo chamado Phonegap-1.2.0.pkg. Esse arquivo é uma extensão para o XCODE, que irá facilitar a criação de projetos que serão distribuídos com o Phonegap.

Após executar a instalação do Phonegap-1.2.0.pkg, você poderá inicializar seu XCODE e iniciar a criação de um projeto para iOS no formato Phonegap-based Application, conforme imagem abaixo:

Após essa etapa, você deverá definir algumas opções para seu projeto, como nome da sua aplicação e um identificador. Para o identificador, é sugerido que você informe o domínio de sua empresa, no meu caso, utilizarei o domínio (de forma inversa) do meu blog: br.com.horochovec, e mais um identificador, no caso, .phonegap, conforme imagem abaixo:

Após essa etapa, o XCODE irá abrir seu projeto, possibilitando sua codificação. Perceba que não será necessário nenhuma codificação em Objective-C, e também não será necessário alterar absolutamente nada nas configurações geradas pelo XCODE para nosso projeto.

Agora, é necessário executar pela primeira vez nosso projeto. Para isso, você deve selecionar a plataforma que irá compilar o projeto, no meu caso, estou optando por iPhone 5.0 Simulator, e executar o projeto (clique em “Run”). Essa operação irá ser concluída com sucesso, o build do projeto não irá apresentar erros, o emulador será iniciado e a aplicação será instalada, porém, quando ela for aberta no simulador, um erro irá ser apresentado, dizendo que não foi encontrado o arquivo index.html na pasta www.

Esse erro que ocorre é proposital. O que acontece é que quando você cria um projeto do tipo Phonegap, ele não adiciona automaticamente essa pasta com esse conteúdo em seu projeto. Você deve fazer isso manualmente, o que ocorre, é que esse conteúdo é gerado apenas quando você tenta executar pela primeira vez o seu projeto dentro do emulador. Ou seja, você acaba sendo “forçado” a gerar esse erro para que o conteúdo seja gerado pelo plugin da Phonegap.

Após isso, você pode parar o emulador do projeto através do botão “Stop”. Após parar o projeto, você deve ir até a pasta aonde seu projeto foi criado, no meu caso, ele foi criado em meu Desktop. Você irá perceber que uma nova pasta foi criada, chamada “www”.

Essa pasta “www” deverá ser adicionada em seu projeto. Para isso, arraste-a para dentro do seu projeto no XCODE. Ao soltar a pasta “www” na pasta raiz de seu projeto, uma tela de confirmação irá aparecer. Selecione a opção: “Create folder references for any added folders” e clique em Finish.

Dentro da pasta “www”, iremos encontrar dois arquivos. O primeiro, o arquivo index.html, possui um pequeno exemplo de um Alert. Basicamente o arquivo faz a importação do arquivo phonegap-1.2.0.js e imprime um Alert em um Listener adicionado no evento “deviceready”. O EventListener foi adicionado no método onload() da tag body, conforme abaixo:

Hey, it's PhoneGap!
Don't know how to get started? Check out PhoneGap Start
  • Check your console log for any white-list rejection errors.
  • Add your allowed hosts in PhoneGap.plist/ExternalHosts (wildcards OK, don’t enter the URL scheme)

Após essas etapas, basta executar novamente seu projeto e terá a seguinte resposta do emulador:

Para fazer o download do projeto, clique aqui.

Em uma próxima oportunidade, quero abordar um pouco mais do Phonegap demonstrando algumas de suas APIs específicas.

Até a próxima!

Share

You may also like...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *