Crie aplicativos Android, iOS e Windows a partir do seu Site

Até pouco tempo atrás, muitas pessoas desejavam ter sua própria página na Web, seja para divulgar seu trabalho ou ainda dar visibilidade para sua empresa. Porém, de um tempo para cá, aumentou significamente o uso de smartphones e, consequentemente, de aplicativos.

E hoje cada vez mais pessoas querem ter seu aplicativo na loja para disponibilizar para seus amigos e clientes. Mas elas esbarram na necessidade de aprender uma linguagem de programação. Até existem ferramentas geradoras de código que ajudam a criar o aplicativo para diferentes dispositivos, mas mesmo assim há uma curva de aprendizado.

Mas se você já tem um site na Web, uma alternativa simples é criar um aplicativo que exibe o conteúdo do seu site. Nesse caso você continuará desenvolvendo suas páginas na Web e seu aplicativo estará sempre atualizado com as últimas mudanças.

Vamos mostrar como fazer isso através de um recurso bem fácil de usar: o ManifoldJS. Ele permite criar aplicativos nativos para Android, iPhone, Windows Phone, Windows desktop, etc. a partir de um site na Web. A seguir serão descritos os passos para criar seu aplicativo e posteriormente como tudo isso realmente funciona.

Importante: O site deve adotar práticas de Web Design responsivo para você obter resultados satisfatórios. Caso contrário a exibição do conteúdo em um smartphone, por exemplo, poderá ser prejudicada.

Usando ManifoldJS

Você pode criar seus aplicativos através do site do ManifoldJS, ou a partir do seu próprio ambiente de trabalho. Você também pode fazer localmente usando tanto OS X, Linux como Windows. Segue procedimento para criar os aplicativos localmente no Windows:

  1. O ManifoldJS pode ser instalado através do npm package manager que é instalado junto com o Node.JS. Portanto, baixe o Node.JS e instale no seu computador.
  2.  Abra a linha de comando e execute o seguinte comando:

    npm install -g manifoldjs

  3. Depois de instalado, execute o módulo ManifoldJS indicando o site na Web para o qual você deseja criar os aplicativos. Serão criadas várias pastas a partir do local onde foi executado o comando (para executar esse passo, você precisa de acesso a Internet). Exemplo:

    manifoldjs http://talkitbr.com

Pronto! Serão criadas várias pastas, cada uma com um projeto:

  • android
  • chrome
  • cordova
  • firefox
  • ios
  • web
  • windows10

No caso do Windows10 é criado um projeto Javascript. Ao abrir o projeto, note que é uma aplicação Web nativacrie_aplicativos_android_ios_windows_do_site_projeto-uwp

Por ser Universal Windows, esse projeto pode ser executando tanto no Windows Desktop como Windows Phone:
crie_aplicativos_android_ios_windows_do_site_app_uwp

O aplicativo está pronto. Mas ainda podemos acrescentar outras informações como imagens e orientação através de um arquivo de manifesto que deve ser publicado no site. Dessa forma, o próprio ManifoldJS irá ler esse arquivo e configurar os projetos de acordo com o especificado. Segue exemplo de arquivo de manifesto:

{
  "name": "TalkitBR",
    "short_name": "TalkitBR",
    "start_url": "http://talkitbr.com",
  "icons": [
    {
      "src": "tiny.png",
      "sizes": "70x70"
    },
    {
      "src": "square.png",
      "sizes": "150x150"
    },
    {
      "src": "apple-touch-icon-72x72.png",
      "sizes": "72x72"
    },
        {
      "src": "niceicon.png",
      "sizes": "128x128"
    }
  ],
  "display": "standalone",
  "orientation": "landscape"
}

O que são aplicações Web nativas

Mais conhecidas como Hosted Web Apps, as aplicações nativas disponibilizam conteúdo publicado na Web como se fosse um conteúdo do próprio aplicativo. Para o usuário é um aplicativo como qualquer outro que é baixado na loja e executado.

A vantagem nesse caso é que você pode reaproveitar recursos já investidos na criação do site e não precisa ter que aprender uma nova linguagem de programação.

E o Hosted Web App pode ainda usar recursos do dispositivo do usuário, como compartilhamento, contatos, recursos de assistente pessoal (Cortana, Google Now, Siri), execução de tarefas em segundo plano, etc (veja aqui como usar recursos do Windows 10).

E como o ManifoldJS funciona?

O ManifoldJS se baseia no padrão de Manifesto para Aplicações Web disponibilizado pela W3C. Ele cria aplicações nativas para cada plataforma suportada. E caso necessário ele complementa com recursos do Apache Cordova.

Já o desenvolvedor cria e mantêm o manifesto padrão para então criar as aplicações usando o ManifoldJS. E qualquer atualização nas páginas Web é refletida nas aplicações.

Quer saber mais? Então continue nos acompanhando no blog talkitbr. Até a próxima!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s