Blog NAno

Tutorial Angular.js – Criando um sistema de notícias (Introdução)

Início » Blog » 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.

Mas, uma vez programador, sempre programador. Isso é um fato!

Em 2008 comecei com Java no curso técnico, depois veio o PHP, que para a minha felicidade tinha uma grande semelhança com a sintaxe do bom e velho Java e há alguns anos (mais precisamente em Outobro de 2010) eu escrevi alguns artigos ensinando como fazer um login dinâmico em ajax que mesclava PHP, jQuery e MVC, o que para minha feliz surpresa teve dezenas de milhares de acessos e ótimos feedbacks como um dos melhores conteúdos sobre este assunto na web.

Se quiser ver um pouco mais sobre o conteúdo, acesse: www.hcferreira.com.br

Bem, o que na época era novidade para muita gente, hoje é quase que obrigatório entender o funcionamento dos principais padrões de desenvolvimento.

Muitos frameworks disseminaram diversas convenções e padrões em seu core, como por exemplo o Codeigniter, um conhecido framework em PHP que já tem por padrão a sua estrutura arquitetada em MVC.

Pra quem programa em PHP, temos aí o Laravel, outro framework que devolveu aos programadores PHP o prazer de criar aplicações robustas e seguras, com orientação a objetos e diversos padrões ‘embutidos’ em seu modo de operar.

Outra coisa que está muito em alta para programadores web é o Angular.js.

Encabeçado pelo time de engenheiros ‘monstros’ da Google, o Angular é um framework em Javascript que tem uma abordagem mais ligada ao HTML, onde, longe de ser resumido a isso, mas apenas para contexto, é uma das melhores soluções no mercado para desenvolvimento de ‘single-page applications’, ou seja, aplicações que funcionam como uma única página, com todo conteúdo sendo carregado dinamicamente com base nas ações do usuário.

Angular não é usado apenas para o desenvolvimento Web

Com a forte penetração no mercado de aplicações híbridadas para o desenvolvimento de soluções web/mobile, o Angular.js é a base de toda lógica escrita em aplicações híbridasbaseadas em Phonegap/Cordova (Conheça o Phonegap/cordova), (aplicativos que são escritos como se fossem um site, mas que rodam no celular e são compilados como aplicativos para as principais plataformas do mercado: iOs, Android e Windows Phone).

Quando falo ‘como se fossem um site’, estou dizendo que você irá utilizar HTML e CSS pra desenhar telas e Javascript para: controlar as interações do usuário e consumo de dados no servidor e retornar para a aplicação (Consumo de API).

Lindo, não?

Ah, Hugo, mas em termos de performance, ele não é relativamente mais lerdo que um aplicativo nativo?

Sim, meu querido, com certeza um aplicativo híbrido não terá a mesma performance que um projeto desenvolvido em Swift para iOs ou em Java para Android.

Mas, aí eu te pergunto: O quanto em termos de milissegundos ou segundos de uma requisição ou ação feita em um aplicativo realmente fará grande diferença para o usuário final da aplicação que você está desenvolvendo?

Tudo é relativo e se você está pleiteando entrar para o time de desenvolvedores do Waze ou do Netflix, esqueça a mamata e vá para o nativo, meu caro leitor.

Todavia, se o que você quer é desenvolver aplicações transacionais, cuja as funcionalidades se baseiam em consumir dados de um servidor e mostrar informações para o usuário (um aplicativo híbrido faz muito mais que isso, mas comecemos daqui) criar um aplicativo híbrido para seu cliente ou seu projeto de Startup sem dúvida será a melhor opção. Mais barata, mais rápida e que cumpre o que promete.

[mailmunch-form id=”610647″]

Bem, do que se trata então este artigo (ou esta série de artigos, no caso)?

Como já temos aqui no Blog um tutorial bem legal de Phonegap que te ensina a dar os primeiros passos para o desenvolvimento de aplicativos móveis híbridos e a base da lógica de um app híbrido é o Angular.js, iremos lhe guiar para aprender a fazer uma aplicação Single Page totalmente web que servirá de base para você arrebentar quando for para o Aplicativo Mobile.

O que desenvolveremos efetivamente, Hugo, fala logo, por favor?

Um sistema de notícias.

Meu compromisso com você é chegarmos ao final desta série de artigos, que será dividido em 3 partes, e ter um projeto que:

  1. Lista todas as notícias cadastradas em um banco de dados online
  2. Cadastrar notícias
  3. Editar notícias
  4. Deletar notícias
  5. Visualizar notícias

Parece simples e de pouca utilidade?

Olha, uma das empresas do Brasil que mais admiro é a TecMundo.

Eles são um site de notícias relacionadas a Tecnologia, inovação e conteúdos desse tipo.

E sabe como é o aplicativo deles?

Listagem de artigos/notícias, com opção de você filtrar o conteúdo por categoria, pesquisar uma notícia, visualizar os detalhes de uma notícia, curtir, compartilhar e enviar comentários.

Já ouviu falar numa tal de globo.com?

Pois é, o aplicativo deles também se resume em uma listagem de artigos/notícias.

Claro que existem muito mais funcionalidade nos aplicativos citados. Mas o que quero é que você tenha em mente que o core é exibir conteúdo. Só isso.

Notícia é pouco?

O que falar do Instagram então?

A grosso modo, uma timeline de fotos e vídeos publicados pelas pessoas que você segue, com algumas opções de interação (curtir, compartilhar, comentar, denunciar).

Na prática: envio e recebimento de informações a um servidor, com base na autenticação que você fez no aplicativo.

Longe de mim querer ‘diminuir’ a grandiosidade de qualquer uma dessas empresas.

Pra quem programa de verdade sabe que pra fazer tudo acontecer como vemos ao utilizarmos cada uma dessas plataformas o buraco é muito mais embaixo. São milhares (se não milhões) de linhas de código, servidores e mais servidores trabalhando 24/7 e milhões investidos em infraestrutura para que tudo rode com a elegância e rapidez que tem que ser, e este nem é nosso foco aqui.

O que quero é te dar base para realizar projetos funcionais e de valor.

Imagine o seguinte…

  • Temos o Phonegap/Cordova que funciona como base para uma aplicação híbrida
  • Temos o Angular.js para desenvolver toda a lógica de uma aplicação web/mobile
  • Temos o Ionic para nos ajudar a fazer aplicativos totalmente funcionais de forma sólida e sem muito sofrimento
  • Temos o PHP que roda em qualquer servidorzinho para fazer a API que vai fornecer o conteúdo para sua aplicação
  • E temos o HTML e CSS para dar vida ao layout da nossa aplicação (seja web ou mobile híbrida)

Isso é uma coisa linda demais, você não acha?

Então, uma vez contextualizado da capacidade que temos de criação de soluções úteis ao dominar as tecnologias citadas acima, vamos falar exatamente como vai funcionar aqui nossa dinâmica.

Primeiro, pra quem não é destinado este conteúdo?

Se você nunca fez um site, volte uma casa, irmão.

Se não sabe o que é HTML, CSS, Javascript, nunca usou o jQuery na vida, não faz ideia do que é FTP, DNS… Se não consegue me explicar a diferença de Padding e Margin no CSS ou não gosta de café, te aconselho a dar um Google aí em cada item desses que eu citei, criar alguns sites institucionais para a empresa do seu tio, sogro, pai, bater cabeça pra fazer um site com URL Amigável rodar (sem ser com CMS, ok?) e aí volte aqui e será muito bem-vindo.

Brincadeiras à parte (a parte do café eu falei sério) este conteúdo é indicado, resumidamente, a quem já desenvolve para web há um bom tempo, tem alguns projetos em seu portfolio aí e quer aprender a desenvolver aplicações web e/ou mobile utilizando os conhecimentos que já tem.

PS: Se você já fez uma borda arredondada para um site para funcionar no IE6, usou PNG com fundo transparente e nada de tabela, você já tem o meu respeito e pode me chamar pra tomar um café ou chopp que a primeira rodada é por minha conta.

Outra coisa importante é que este conteúdo não pretende ‘dar papinha na boca’, ok?

Se você não sabe nem por onde começar com o Angular.js, vamos utilizar dois artigos de profissionais que investiram seu precioso tempo pra disseminar conteúdos bons sobre Angular e por onde começar.

Primeiro, da Tableless (escrito pelo Davi Ferreira):

https://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/

Aqui você já vai aprender como iniciar uma aplicação em Angular, o que é o tal do $scope.

Agora, avançando um pouco mais, vamos para um artigo do Gabriel Feitosa sobre Rotas, como separar os arquivos, eventos do Angular, entre outros.

http://gabrielfeitosa.com/angularjs-route/

Aqui você vai aprender como navegar entre páginas, algo essencial no Angular pra criar aplicações web no formato Single Page (que também vai utilizar a mesma lógica para aplicações mobile).

Leu os dois artigos? Maravilha!

Agora vamos falar do conteúdo de cada uma das partes do nosso material.

Parte I

  • Revisão dos principais conceitos e funcionalidades do Angular.js
  • Entendimento geral do funcionamento do projeto
  • Criação da navegação das páginas da nossa aplicação
  • Criação de todos os arquivos onde escreveremos todo nosso projeto

Parte II

  • API em PHP e Banco de dados de Notícias
  • Listagem de notícias com filtragem
  • Cadastro de notícias
  • Visualização de uma notícia

Parte III

  • Editar notícias
  • Excluir notícias

Considerações Finais

Indicaremos alguns materiais para estudo e consulta, dicas de próximos passos, sugestões do que você poderá desenvolver depois de aprender o que trabalhamos até então, dicas e técnicas de como analisar melhor sua aplicação, encontrar erros mais facilmente e debugar sua aplicação como um todo. E por fim, falaremos sobre um curso para desenvolvimento de aplicativos móveis com Phonegap, Ionic e Angular que estamos pensando em desenvolver.

Preparado pra começar a desenvolver Single Page Applications com Angular.js e construir uma base sólida para criação de aplicativos híbridos?

Se você chegou até aqui neste artigo é porque faz parte do time de pessoas que estão sempre dispostas a aprender, se dedicar e fazer as coisas acontecerem.

Tenho certeza de que ao final deste material você se surpreenderá com o que será capaz de fazer, e lembre-se: Independente da linguagem utilizada para desenvolver um software, seja ele web, desktop ou mobile, o objetivo sempre tem que ser criar projetos que resolvam problemas reais e melhorem a vida das pessoas.

Abraços!

Compartilhe nas redes:
Facebook
Twitter
LinkedIn
WhatsApp

Conteúdos relacionados: