Tutorial Angular.js – Criando um sistema de notícias (Introdução)
Há muito tempo não escrevo artigos técnicos para nosso blog. Longe de ser por falta de vontade, a dinâmica do empreendedorismo muitas vezes nos força a fazer muito mais o que é preciso ser feito do que apenas o que te da prazer.
Ionic – Iniciando sua jornada com essa poderosa ferramenta
Fala galera… Criei um novo artigo que vai mostrar como: iniciar com Ionic, sua instalação e como seguir com essa poderosa ferramenta. Lembrando que esse post é um complemento ao artigo Phonegap Tutorial – Iniciando um projeto. O que é o Ionic Em poucas palavras, podemos defini-lo como: Um framework de desenvolvimento de aplicações híbridas (webapps), mas isso é ser simplista demais. Atualmente o Ionic é uma plataforma completa para desenvolver aplicativos, composto por um framework com diversos componentes disponíveis, de botões à menus completos. Se precisar, você pode ver os componentes disponíveis para Ionic aqui. Além dos componentes o Ionic possui um poderoso toolkit para terminal, onde é possível iniciar um “projeto como base”, adicionar qual plataforma esta sendo desenvolvido o aplicativo, gerar ícones e splash screen para diversas resoluções, entre outras funcionalidades. Para desenvolvimento de aplicações híbridas o Ionic é considerado a principal ferramenta. Hoje é composto por todo um ecossistema, envolvendo framework para desenvolvimento, ferramentas para prototipar apps online, market place e muito mais, vale a pena dar uma conferida na documentação completa do Ionic. Acessar documentação Ionic O conceito da parada Aplicações híbridas são webapps, ou seja, aplicações desenvolvidas com Javascript, HTML e CSS. O Ionic irá nos fornecer o front-end, com componentes HTML e CSS, a parte de interatividade, acesso a API’s e funcionalidades fica por conta do AngularJS. Como dito, tudo o que estamos fazendo é um webapp, certo?! Como é possível então instalar o aplicativo num device, acessar câmera, contatos, geo localização, etc? É através do Phonegap, ele é a plataforma que disponibilizará API’s de acesso aos recursos do dispositivo. Falaremos disso mais a fundo num próximo post. Instalando o Ionic Framework Para instalar o Ionic é bastante simples, você precisa apenas ter Node.JS e o NPM (gerenciador de pacotes do Node.JS) instalado em seu computador. Para instalar o Node.JS e o NPM é só baixar no site oficial www.nodejs.org/en/download/. Feito isso, abra seu terminal e estará disponível o comando “npm”, que será o responsável pela instalação do Ionic. Navegue pelo terminal até o diretório de seus projetos e execute o seguinte comando: npm install –g cordova ionic Feito isso o Cordova e o Ionic foram instalados em seu computador, disponíveis em qualquer diretório, por isso o “-g” no comando que significa “global” no terminal. Ainda no terminal, perceba como o comando “ionic” está disponível, execute agora: ionic start nomeDoApp sidemenu Basicamente estamos iniciando uma aplicação com Ionic com o modelo “sidemenu”. Como dito acima, o Ionic possui alguns “projetos base” com os quais você pode iniciar sua aplicação, os modelos disponíveis são: sidemenu tabs blank Esses são os modelos padrões, você pode também iniciar a partir de um modelo customizado no github por exemplo, da seguinte forma: ionic start nomeDoApp https://github.com/driftyco/ionic-starter-tabs Verifique a pasta onde você criou o projeto e provavelmente irá encontrar a seguinte estrutura de pastas: hooks node_modules São os módulos utilizados pelo gulp (http://gulpjs.com/) para automatizar tarefas platforms São as plataformas utilizadas pelo seu projeto, ou seja, os sistemas operacionais dos dispositivos para os quais você está desenvolvendo. plugins Lembra que eu falei que é possível acessar recurso dos dispositivos, como câmera, contatos, etc.. Esse acesso é feito através de plugins, falaremos mais a fundo sobre esse assunto num próximo post também. Mas fique com um gostinho do que é possível resources Aqui ficam alguns recursos como ícones e splash screen separados por device scss Ionic utiliza SASS e aqui fica seu arquivo principal para ser compilado. Se você estava escondido com Osama Binladem em uma caverna e não sabe o que é SASS entenda aqui (http://sass-lang.com/) www Aqui é onde fica a Jamaica toda, esse é o diretório utilizado para desenvolvimento, nele ficarão todos arquivos HTML, SASS e JS Por padrão o Ionic adiciona uma plataforma iOS, que pode ser visto na pasta platforms, para adicionar uma plataforma android use o comando: ionic platform add android Para visualizar seu aplicativo você pode simplesmente ir ao diretório `www` dentro da pasta do projeto recém criado, abrir o arquivo index.html e simular a resolução da device com o inspetor de elementos do browser… ou… executar o comando: ionic serve –lab E assim a mágica acontece, você vai poder ver uma preview de como ficaria o app numa device android e outra iOS. Ahh, mas se eu tiver usando o recurso de vibração do smartphone, como faço? Calma jovem gafanhoto, muito simples, o Ionic tem um recurso de linha de comando que permite que você rode seu app diretamente no device, desde que esteja conectado com um cabo USB. Para isso, claro, você vai ter que acompanhar o Tutorial em Phonegap. Para executar o app no device use o comando: ionic run android Ps. No lugar do Android use o platforma de sua preferência. Dica bônus Você pode “inspecionar” sua aplicação que está rodando no Android ou iOS diretamente pelo Chrome, pelo nosso conhecido “inspect element” e ver em tempo real o que esta acontecendo. Para isso acesse pelo Chrome a URL chrome://inspect/#devices e clique no link com o seu dispositivo conectado. Bom galera, é isso, espero ter dado um caminho para vocês seguirem no desenvolvimento com Ionic. Em breve iremos lançar uma série de artigos de como criar um app do zero, com login, consumindo uma api e usando recursos do device. Se você ficou com alguma dúvida ou tem algum feedback, comente, compartilhe e ajude outros devs. Abraço gaitero e até a próxima.
PhoneGap tutorial – Iniciando um projeto (completo)
Neste tutorial de PhoneGap/cordova será apresentado o Framework PhoneGap com todas as instruções para a preparação de seu ambiente para o desenvolvimento utilizando as tecnologias HTML, CSS, e JavaScript. O objetivo é ensinar a configurar um ambiente para iniciar um projeto PhoneGap. E depois que você estiver dominando o Phonegap, indico que leia também o tutorial introdutório sobre Ionic que o Maurílio criou. Este artigo se resume em: O que é PhoneGap. Como instalar Android SKD Como instalar Ant Apache Como instalar Node.js Como instalar PhoneGap Rodando um projeto Demo. Para a execução deste tutorial de Phonegap você precisará de de algumas ferramentas:um editor de código, um Browser moderno (Chrome/Firefox/etc) e um bom conhecimento em HTML, CSS e Javascript. O que é PhoneGap? Já pensou o trabalho que seria ter que criar um aplicativo e disponibilizar para todas as plataformas, seja elas Android, IOS, Windows Phone, etc.? Teríamos que aprender como cada plataforma trabalha, sem contar que teríamos que desenvolver o mesmo para cada plataforma, só de imaginar o trabalho que seria dá até um frio na barriga. E se existisse uma maneira de desenvolver um único aplicativo e que rodasse em todas as plataformas? Pois bem, esse é um dos motivos pelo qual o PhoneGap vem crescendo a cada dia. O PhoneGap (também conhecido como Cordova) é um framework voltado para o desenvolvimento de aplicações para dispositivos móveis que permite desenvolver aplicações utilizando as tecnologias Javascript, HTML5, CSS3. Ele é multiplataforma e da suporte a alguns recursos bastante importante , tais como: Accelerometer, camera, compass, contacts, geolocation, notification (alert / sound / vibration, storage, media e network). A tabela abaixo mostra a compatibilidade dos recursos para cada plataforma. Uma das vantagens do Phonegap é que por se tratar de um web app, você poderá testar seu app diretamente no seu browser, sem precisar compilar o projeto e emular em uma AVD ou rodar diretamente no seu celular a cada alteração feita. Aprenda a instalar o Ionic também Para ampliar ainda mais seus estudos, nosso programador front-end Maurílio Novais criou um novo tutorial sobre Ionic. Leia agora! Leia o tutorial de Ionic Instalando um ambiente para rodar o Phonegap (Android SKD) Para que possamos dar inicio a um projeto, primeiro precisamos ter um ambiente para o desenvolvimento. O primeiro passo é realizar o download do SDK do Android no site: http://developer.android.com/sdk/index.html. Após fazer download, faça a instalação do mesmo. Depois de realizar a instalação, procure pelo SDK Manager na pasta onde realizou a instalação do SDK Android e realize as atualizações necessárias. Instalando Ant Apache Para que possamos desenvolver para Android é preciso ter o Apache Ant instalado. O Apache Ant é uma ferramenta utilizada para automatizar a construção de software. Ela é escrita na linguagem Java e foi desenvolvida inicialmente para ser utilizada em projetos desta linguagem. A ferramenta Ant é um projeto da Apache Software Foundation. É um software livre, licenciado sob a licença Apache. Primeiro baixe a distribuição binária do Apache Ant no site: http://ant.apache.org/bindownload.cgi Depois descompacte o Apache Ant em qualquer lugar, no meu caso descompactei na raiz do disco D. Está gostando deste artigo? Coloque seu e-mail abaixo e fique atualizado com nossas novidades. CADASTRE EM NOSSA LISTA DE PROGRAMADORES [mailmunch-form id=”610647″] Configurando Variáveis de Ambiente Feita a instalação e a atualização do Android SDK e a instalação do Apache Ant. É necessário configurar as variáveis de ambiente. Vá em Propriedades do Sistema -> Aba Avançado -> Váriáveis de Ambiente -> Em Váriáveis do Sistema Ou Tecle Tecla Windows + Pause Break > Configurações Avançadas do sistema > Variáveis de Ambiente Crie uma variável chamada ANDROID_HOME e em seu valor informe a pasta no qual o SDK foi instalado. Depois crie uma variável chamada ANT_HOME e em seu valor informe a pasta no qual o Apache Ant foi instalado. Agora procure pela variável PATH e clique em editar Em seu valor adicione a seguinte string:%ANT_HOME%bin;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools; Até aqui já temos um ambiente pronto para desenvolver um app para android, agora iremos instalar as ferramentas necessárias para utilizar o PhoneGap. Instalando Node.js Faça download do Node.js no site: http://nodejs.org/download/ Depois faça a instalação do mesmo. Para verificar se a instalação foi feita corretamente abra Prompt de comando e digite : node –v Deverá aparece a versão do nodejs instalado em sua maquina conforme mostra a figura a seguir; Criando um projeto PhoneGap Agora estamos chegando na parte mais interessante do tutorial, logo abaixo iremos iniciar um projeto de PhoneGap! Com o Node.js instalado corretamente em sua maquina, abra o Prompt de comando e digite o comando para instalar o Cordova CLI: – npm install –g cordova Vá para um diretório onde você irá armazenar seus projetos. Por exemplo: – cd ~/Projetos Crie um projeto chamado “helloword”: – cordova create helloword br.yourname.helloword Helloword Entre na pasta do projeto criado: – cd helloword Adicione a plataforma que você queira desenvolver. No nosso caso será para a plataforma Android. – cordova platforms add android Agora iremos adicionar alguns plugins básicos para o nosso projeto, ainda na pasta do projeto digite: – cordova plugin add org.apache.cordova.device – cordova plugin add org.apache.cordova.console Verifique a estrutura do projeto criado, na pasta plugins devem conter duas pastas, uma para cada plugin instalado anteriormente e na pasta platforms a pasta android referente à plataforma instalada. Rodando o projeto Pronto agora nosso projeto de PhoneGap já pode ser rodado, para que possamos rodar esse projeto conecte um dispositivo Android em seu computador usando um cabo USB, entre na pasta platforms e digite: – cordova run android Mas caso você queira rodar seu app em um emulador Android, digite: – cordova emulate android E se você achar mais prático testar em seu próprio browser, vá na pasta www de seu projeto e abra o arquivo index.php no navegador de sua escolha. Há alguns emuladores de dispositivos móveis que rodam em alguns browsers modernos que nos permite utilizar recursos como Accelerometer, compass, etc. Um deles é o Ripple Emulate do Chrome, ele ainda está na fase Beta mas oferece bastante recursos, facilitando assim a nossa
