Iniciando no Intel® HTML5 Development Environment

O Intel® HTML5 Development Environment – BETA é um amplo ambiente de desenvolvimento integrado (IDE) para a criação de aplicativos HTML5 para uma ampla gama de dispositivos móveis. É baseado na IDE Cloud9* e foi expandida com componentes e plug-ins para suportar o desenvolvimento de aplicativos HTML5 móveis. Juntos, o ambiente e os plug-ins adicionados suportam o desenvolvimento de aplicativos HTML5 client-side, da edição, depuração à distribuição para múltiplas plataformas. O ambiente de desenvolvimento é executado na nuvem; você tem acesso a ele utilizando o navegador Google Chrome* (todas as funcionalidades desta IDE não são garantidas em outros navegadores) em sua plataforma preferencial de desenvolvimento. Para melhores resultados, escolha uma plataforma de desenvolvimento com uma boa conexão de rede.

Aplicações HTML5 contém HTML, CSS e código em JavaScript, junto com arquivos associados de imagens, áudio/vídeo, ícones e outros recursos. As aplicações HTML5 podem ser distribuídas como aplicações puras baseadas na web (web apps), significando que elas podem ser executadas em um navegador Internet, provavelmente em uma variedade de dispositivos e usualmente são hospedadas em um servidor web acessado através de uma URL (ou bookmark). Se uma aplicação utiliza recursos on-board como as câmeras, sensores e armazenamento de dados dos dispositivos, ela deve acessar estes recursos através de uma API que provê acesso às funcionalidades nativas da plataforma. Estas aplicações são chamadas de aplicações web híbridas, pois não rodam diretamente no navegador, elas são executadas dentro de um componente comumente chamado de webview. Aplicações web híbridas são tipicamente instaladas em uma plataforma através da sua loja de aplicativos nativa.

A arquitetura do Intel HTML5 Development Environment incentiva o desenvolvimento em plataforma cruzada. Isto significa que você escreve sua aplicação para ser executada em mútiplas plataformas de dispositivos, ao invés de utilizar linguagens e SDKs específicos de uma única plataforma, produzindo um aplicativo exclusivo para cada uma delas. Utilizando o HTML5 para criar sua aplicação elimina a necessidade de uma fase de projeto e desenvolvimento para cada plataforma móvel que você pretende suportar, e faz com que seja mais simples o suporte à novas plataformas tão logo elas sejam disponibilizadas. Ele também te permite maximizar o seu expertise e reutilizar código HTML5 para a criação de novas páginas e aplicações.

O ambiente de desenvolvimento HTML5 contém exemplos de aplicações que ilustram técnicas e boas práticas de programação para dispositivos HTML5 que podem acomodar automaticamente diferentes resoluções, tamanhos, proporções e orientações de tela.  Algumas aplicações de exemplo demonstram como acessar recursos dos dispositivos utilizando as APIs do Apache Cordova* (suas versões mais antigas eram conhecidas como PhoneGap*). As APIs do Cordova são suportadas em diversas plataformas móveis, então você pode ter uma única base de código que seja executada em múltiplas plataformas, eliminando a necessidade de programar em linguagens nativas como o Objective-C* da Apple ou o Java*.

Veja Construíndo aplicativos em Plataforma Cruzada com HTML5 para mais informações sobre como codificar aplicativos HTML5 com suporte a múltiplas plataformas.

Obtendo acesso ao Intel HTML5 Development Environment

Execute seu navegador Chrome e navegue até a seção de HTML5 da Intel® Developer Zone (Intel® DZ) em http://software.intel.com/pt-br/html5. Se você ainda não se registrou no portal, por favor faça seu registro clicando no link inscrever-se no canto direito superior da página e digite seu nome, endereço de e-mail e outras informações solicitadas. Este site disponibiliza uma biblioteca de programas de exemplo em HTML5, trechos de código (o HTML5 Playground), links para diversos artigos, documentação de produtos e um link para o Intel HTML5 Development Environment baseado em nuvem.

Depois que fizer o login, clique no link “Inscrever-se” do Intel HTML5 Development Environment para solicitar o acesso à ferramenta. Se já tiver acesso a ela, basta clicar em “Iniciar a ferramenta” para começar a utiliza-la. Seu login da Intel Developer Zone te dá acesso à esta IDE.

Workspaces, Pastas, e Arquivos

Um workspace é o espaço baseando em nuvem onde você vai desenvolver sua aplicação. Na primeira vez que você entrar na IDE, um workspace chamado html5 será automaticamente criado para você. Este workspace é aberto cada vez que você entrar na IDE. O workspace será populado com uma aplicação híbrida simples em HTML5.

A árvore de pastas do lado esquerdo da IDE apresenta o conteúdo do seu workspace. Todos os arquivos e pastas que você cria dentro do workspace html5 são armazenados no servidor da IDE e acessíveis somente a você. Este workspace padrão e seu conteúdo é seguro e privado, a não ser que você dê acesso, compartilhando ele com outros usuários da IDE.

Para ver uma introdução deste ambiente, clique em Help > Take a Guided Tour no menu da IDE.

Dica: O modo mais simples de iniciar é fazendo uma cópia de uma aplicação de exemplo. Use o menu File > Import Sample Application… para selecionar uma aplicação exemplo em HTML5 e copia-la para o seu workspace. Copiar uma aplicação exemplo para o seu workspace cria uma pasta abaixo da pasta atualmente selecionada, contendo um arquivo de alto nível chamado index.html. Você pode copiar diversas aplicações de exemplo para um único workspace. É melhor copiar cada aplicação de exemplo para a sua própria pasta.

Em geral, uma aplicação deveria ser uma hierarquia de arquivos dentro de uma pasta, com o arquivo index.html principal dentro da pasta de mais alto nível. Em outras palavras, todos os arquivos e pastas de uma aplicação deveriam estar localizados abaixo de uma pasta única contendo o arquivo index.html. Isto faz com que sua aplicação possa ser facilmente empacotada e/ou exportada, bem como a faz compatível com as convenções de arquivos do Cordova. Será um problema se seu index.html contiver uma referência como ../comum/reuseme.js. Veja a ferramenta Packager para mais detalhes.

O menu File provê muitas outras formas de criar arquivos e pastas. Utilize File > Upload Files para copier arquivos ou pastas de uma máquina host para seu workspace baseado na nuvem. Selecione uma pasta e use File > Download Folder para fazer o download de um arquivo zip contendo aquela pasta (e todas as suas sub pastas). Você também pode importar e exportar arquivos entre o workspace e um repositório git usando comandos git digitados no terminal da IDE.

Dica: Quando adicionar um novo arquivo em branco, utilize File > New From Template… ao invéz de File > New File. Isso cria um arquivo de um tipo conhecido, então o editor pode imediatamente aplicar a edição inteligente para aquele tipo de arquivo. Para alguns tipos de arquivo, como arquivos .html, ele também fornece um conteúdo inicial bem útil. Escolha o nome final e a pasta paar o arquivo quando você for grava-lo posteriormente usando o menu File > Save As…. Você pode mover arquivos de pasta a paste usando copiar / colar ou arrastar e soltar.

No seu workspace, clique com o botão da direita em um arquivo ou pasta para mostrar seu menu de contexto. Você pode selecionar ações para aplicar à pasta ou arquivo selecionado, como renomear, deletar, duplicar e criar nova pasta.

Editando Arquivos

Dê um clique duplo em um arquivo para abrir seu conteúdo em uma nova aba na janela de edição à direita. Você pode abrir múltiplos arquivos nesta area, onde cada aba apresenta o nome do arquivo. Seleciona uma aba para visualizar e editar o conteúdo daquele arquivo. Arraste as abas para a esquerda ou direita para reordenar suas abas abertas.

O editor é um editor completo que suporta arquivos grandes e diversas linguagens de programação. Ele também provê funcionalidades de alto nível como um localizar e substituir global, complementação automática de código, busca de erros em segundo plano e muito mais.

É importante destacar a funcionalidade de “múltiplos cursores”. Depois que você estabelece diversos pontos de cursor, qualquer texto que você digite será adicionado a cada ponto de cursor simultaneamente. Para acessar esta funcionalidade, selecione no menu um item abaixo de Selection > Multiple Selections.

Os menus Edit, Find, Selection, View, e Goto provêm um grande número de commandos de edição. Usuários do editor de text vim ficarão felizes em encontrar o View > Vim Mode.

Muitos dos itens de menu possuem atalhos de teclado que são tipicamente mais convenientes do que os itens de menu. Um resumo dos atalhos de teclado para comandos de edição está disponível no menu Help > Keyboard Shortcuts.

NOTA: O editor não salva alterações automaticamente. Se certifique de gravar frequentemente suas alterações para não correr o risco de perder dados em um evento inesperado onde sua conexão de rede com o servidor seja interrompida.

Pré visualização e o Emulador de Dispositivos

Dentro da IDE existem duas formas diferentes de “executar” sua aplicação. Localizadas dentro do menu Tools, elas são:

  • Pré visualização (em uma aba do navegador)
  • Pré visualização em um Dispositivo
  • Executar no Emulador de Dispositivos

A operação Preview abre o arquivo HTML selecionado em uma nova aba de seu navegador atual. Para aplicações web, esta é a forma mais rápida e simples de realizar um teste inicial. Nenhuma assitência especial é fornecida pela IDE quando você estiver fazendo uma pré visualização da sua aplicação. Esta opção pode não ser muito útil se sua aplicação utilizar a API Cordova, porque a API Cordova não está implementada por padrão nos navegadores. Além disso, o tamanho da tela (o viewport) de um navegador padrão é tipicamente bem diferente do viewport de um navegador em um dispositivo móvel.

Preview on Device apresenta um QR code para o arquivo HTML selecionado, provendo uma forma conveniente de mostrar rapidamente sua aplicação em um navegador móvel. Tal como a operação Preview descrita anteriormente, esta opção pode não ser muito útil se a sua aplicação utilizar a API Cordova, pois ela não está implementada por padrão nos navegadores, mesmo naqueles existentes em um dispositivo móvel (por razões relacionadas a segurança dos navegadores). Quando você utiliza esta ferramenta, uma caixa de diálogo que contém uma URL para o arquivo HTML selecionado codificada em um QR code é mostrada . Seu dispositivo móvel irá precisar de um aplicativo scanner de QR code e de uma camera para decodificar o QR code e navegar até a URL codificada usando o seu navegador.

Veja Aprendendo sobre QR Codes para mais informações sobre QR Codes.

O Device Emulator (Emulador de Dispositivos) executa sua aplicação em um ambiente simulado que implementa a API Cordova. Você pode selecionar o tamanho da tela para se ajustar a tamanhos de telas de dispositivos populares. Você pode disparar eventos de sistema e parâmetros de controle de sistema, como sua localização ou direção da bússula interna. Isto te permite ver rapidamente como sua aplicação se apresenta e se comporta em uma variedade de dispolsitivos sem precisar adquirir um número grande de dispositivos reais para testes. Veja o artigo Iniciando com o Emulador de Dispositivos para mais detalhes sobre o Emulador de Dispositivos. Use o menu Tools > Device Emulator ou o ícone  na barra de ferramentas para executar sua aplicação no Emulador de Dispositivo.

Usando a pré visualização ou o Emulador de Dispositivos, você pode depurar sua aplicação utilizando o depurador do seu navegador, que para o navegador Chrome é o “Ferramentas o desenvolvedor” e a console JavaScript.

Existem duas outras formas de executar sua aplicação:

  • Em um hardware real
  • Em um emulador de plataforma

Você pode facilmente executar uma aplicação web pura em um navegador do sistema operacional alvo. A IDE baseada em nuvem atua como um servidor web, que hospeda a sua aplicação. Simplesmente direcione o navegador do seu dispositivo para a mesma URL que aparece quando você faz uma pré visualização do seu app. Note apenas que para que o navegador do seu dispositivo possa acessar os arquivos de projeto servidos pela IDE, você precisa estar logado através dele na Intel® Developer Zone (Intel® DZ). Assim que você estiver logado com sucesso, você deverá ter acesso aos seus arquivos de projeto. Não execute a IDE completa em um navegador móvel.

O emulador de plataforma é um software de simulação que executa em um sistema hospedeiro e que pode executar (quase todos) os aplicativos de sistemas alvo reais. Isto provê uma impressão bem precisa sobre o ambiente real do sistema alvo, pois você está executando o código real do sistema alvo. A principal vantagem de emuladores de plataforma é que eles te permitem testar em diversos ambientes com maior fidelidade do que em um emulador de dispositivos, sem que seja necessária a utilização de diversos dispositivos reais para testes.

O emulador de plataforma é tipicamente um componente do kit de desenvolvimento de software (SDK) de cada plataforma; ele não está incluso no Intel HTML5 Development Environment - BETA. Você deve instalar o SDK da sua plataforma alvo para usar o emulador de plataforma.

Veja o artigo Melhores práticas para Depuração de Aplicações HTML5 em Plataforma Cruzada para recomendações sobre como utilizar as diversas estratégias de depuração disponíveis.

A ferramenta de empacotamento (Packager)

Use a ferramenta de empacotamento (Packager) quando sua aplicação HTML5 híbrida estiver pronta para ser executada em um dispositivo real (ou em um emulador de plataforma, como o emulador do Google Android*). Como uma aplicação híbrida não pode ser executada em um navegador, você deve distribui-la como uma aplicação stand-alone. Você também pode optar por empacoter aplicações web puras, dependendo de como planeja sua distribuição.

Um wizard que prepara sua aplicação para que seja enviada à PhoneGap Build está disponível na IDE em Tools > Packager. Inicie selecionando a pasta de mais alto nível de aplicação que você deseja exporter, que deve conter o seu arquivo index.html. Todas as pastas abaixo desta serão exportadas. Clique em Next.

O wizard te pede informações essenciais sobre sua aplicação, informações necessárias para construir ou revisar um arquivo config.xml. Este arquivo config.xml ou “manifest” descreve sua aplicação, como o seu título, o ícone para representa-la no desktop do dispositivo móvel, quais funcionalidades e privilégios são utilizados por ela (para que as permissões adequadas sejam garantidas pelo usuário de sua aplicação durante o processo de instalação), e outros atributos chave que são requeridos por diversos dispositivos móveis. O formato deste arquivo segue a especificação W3C Widget Specification. Se existir um arquivo config.xml em sua pasta de mais alto nível, as configurações do wizard serão lidas deste arquivo. Se você já tiver um arquivo config.cml em seu sistema de desenvolvimento, clique no botão Upload config.xml para usar os parâmetros deste arquivo.  Quando todos os parâmetros requeridos forem fornecidos, clique em Next. Os resultados serão armazenados no arquivo config.xml.

O passo final é o download de um arquivo zip contendo o manifest e os arquivos que compõem a sua aplicação para o seu sistema de desenvolvimento. Este arquivo zip completo é adequado para envio ao utilitário PhoneGap Build disponível em http://build.phonegap.com.

O PhoneGap Build é um serviço independente que não possui nenhuma relação especial com o Intel HTML5 Development Environment. Você precisa de um id de usuário separado para usar este serviço. Algumas modalidades deste serviço são gratuitas e outras não. O processo básico consiste em fazer o upload de sua aplicação (o arquivo zip que você acabou de criar) para que o PhoneGap Build converta a sua aplicação em um executável nativo para cada uma das plataformas suportadas. Quando o empacotamento estiver completo, você pode fazer o download do executável final para sua máquina de desenvolvimento e transferi-lo para dispositivos reais ou para uma loja de aplicativos.

Janela de Comandos, Console, e Terminal

A IDE suporta uma linguagem de comandos em texto que espelha todas as ações que você pode executar utilizando a interface gráfica. Você pode utilizar esta facilidade para criar scripts que automatizem sequencias de comandos da IDE. O comando help lista os diversos comandos disponíveis.

A janela de Comandos é uma janela com uma única linha que aparece na parte de baixo da IDE. Digite um comando simples na janela de Comandos e tecle Enter para executar; a saída do comando será apresentada na janela de Console. Você pode exibir e ocultar as janelas de Comando e Console utilizando o menu View.

A janela de Comandos foi criada para um número pequeno de comandos, mas a janela Terminal provê um ambiente de linha de comando muito mais rico. Utilize View > Terminals > New Terminal para abrir uma janela de terminal ou clique em Open a Terminal na janela de Comandos. Uma Janela de Terminal é uma janela de emulação de terminal em tela cheia, que suporta um shell bash GNU completo. A janela de Terminal aparece como uma aba da área de edição. Para fechar uma janela de Terminal, clique no botão fechar em sua aba.

Quando você abre uma janela de Comandos ou Terminal, sua pasta de trabalho é automaticamente ajustada para seu workspace. Você pode navegar para outras pastas através do comando cd.

Integração com o Git

Você pode utilizer as janelas de Terminal ou Comandos para criar repositórios git dentro da IDE para gerenciar os arquivos de sua aplicação. Isso não é apenas útil para o controle de versão, mas a natureza distribuída do git permite que você sincronize seus arquivos na IDE com arquivos locais em sua máquina ou com outros serviços na nuvem como o GitHub.

Se você precisar apenas importar um repositório git disponível publicamente em seu workspace, digite o seguinte comando na janela de Comandos:

  • git clone name-of-remote-git-repository

onde " nome-do-repositório-remoto" é o nome do repositório git remoto que você quer clonar em seu workspace. O nome e formato precisos do comando do git clone depende da localização e do servidor em que o seu repositório remoto do git está armazenado. Veja este servidor remoto para mais informações.

Por favor continue lendo se você quiser fazer mais do que simplesmente clonar um repositório remoto em seu workspace.

O seu workspace no HTML5 Development Environment é automaticamente inicializado com um arquivo básico de configuração do git, diretórios e chaves SSH em um diretório home que está um nível acima do seu diretório de workspace. A identidade git armazenada nesta configuração padrão foi inicializada com o endereço de e-mail que você usou quando se registrou para ter acesso ao HTML5 Development Environment. Você pode examinar e personalizar seu arquivo de configuração do git usando o comando git config de uma janela de Terminal (View > Terminals > New Terminal).

Você pode acessar repositórios git privados, como aqueles hospedados no GitHub, através de uma conexão segura SSH usando a ferramenta de linha de comando do git em uma janela de Terminal. O par de chaves SSH necessárias para sua identificação em servidores git está localizada na no sub diretório .ssh do seu diretório home (cd ~) de seu workspace. Para acessar repositórios git privados de dentro do HTML5 Development Environment você deve primeiro registrar a chave ública armazenada neste workspace e associada à sua conta no servidor git.

Para obter uma cópia da sua chave pública, abra o “Dashboard” clicando no pequeno medidor de RPM no canto superior direito da IDE (próximo ao logotipo da Intel); quando você passar o cursor sobre o ícone, a palavra “Dashboard” vai aparecer. Dentro do Dashboard, em “Account Settings”, clique na frase “Show your SSH key” e clique no botão “COPY”. Isto irá copier a sua chave SSH para a área de transferência. Você poderá então copiar esta chave para o arquivo de configuração ou registro apropriado no servidor git remoto. Cuidado para não adicionar nenhuma nova linha ou espaços em branco à chave SSH quando copia-la ao servidor git remoto.

Por exemplo, para registrar sua chave pública em sua conta no GitHub:

  • Faça o login no seu workspace no HTML5 Development Environment
  • Abra o dashboard, clicando no ”medidor RPM” no canto superior direito da IDE 
  • Clique em "Show your SSH key" dentro de "ACCOUNT SETTINGS" 
  • Clique no botão "COPY" para copiar a chave SSH para a área de transferência
  • Faça o login na sua conta do GitHub
  • Clique no ícone account settings (ícone com uma chave inglesa e uma chave de fenda)
  • Selecione "SSH Keys" do menu settings
  • Clique no botão "Add SSH key"
  • Digite um título descritivo (ex., Intel HTML5 Development Environment)
  • Cole o conteúdo da area de transferência na seção "Key"
  • Clique no botão "Add key"

Quando tiver completado os passos acima, os comandos git que você enviar usando o protocolo SSH (ex. para git@github.com/<user>/<repo>.git) dentro de uma janela de Terminal ou de Comandos, irão automaticamente utilizar as chaves armazenadas no seu workspace para identifica-lo para o servidor remoto. Você pode importar um repositório existente em um servidor git remoto usando o commando git clone. Isso irá importar arquivos para o seu diretório de trabalho atual e não para o seu diretório home ! Se você não tem certeza sobre sua localização atual dentro da árvore de diretórios do seu workspace, feche a janela de Terminal e abra uma nova, pois isso irá coloca-lo diretamente em seu diretório de workspace.

Depois de atualizar de um repositório remoto com o comando git, você deve atualizar manualmente a janela do seu navegador para que a árvore de diretórios de seu workspace reflita qualquer alteração feita em seu workspace.

Para tratar um sub diretório do seu workspace como um repositório git, sem clonar um repositório existente, execute um cd para aquele diretório e execute o comando git init.

NOTA: O diretório principal do seu workspace é automaticamente inicializado como um repositório git.

Para rastrear e fazer o commit de suas edições, execute um cd para o diretório que está sendo gerenciado como um repositório git e execute os comandos git snapshotting apropriados.

NOTA: Nenhum editor padrão é configurado para editar as mensagens de commit, portanto você deve usar as opções de commit –m ou –F ou configurar o git para usar um dos editores padrão do Linux, como o vi. Os editores Linux estão apenas disponíveis em uma janela de Terminal e eles não vão funcionar em uma janela de Comandos.

Use git push para exportar uma aplicação ou projeto. Este comando irá enviar o último estado de commit a um repositório remoto.

Por favor veja este tutorial do git para entender melhor a ferramenta.

Recursos

  • A seção HTML5 do Intel Developer Zone (Intel DZ) pode ser encontrada em http://software.intel.com/pt-br/html5. Você pode acessar a IDE através desta página, depois que fizer o login no Intel Developer Zone.
  • Dentro do Intel HTML5 Development Environment – BETA, acesse a documentação e videos usando o menu Help.
  • Acesse http://www.phonegap.com para informações sobre o PhoneGap Build e para se registrar para utilizer o serviço.
  • Referência da Apache Cordova API: http://docs.phonegap.com.
  • Serviço de Build da Adobe PhoneGap: http://build.phonegap.com.
Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.