Refatoração do front-end Noosfero

Fase 0.1 (Inicial) - Desacoplar front-end do back-end

Objetivo

Remover dependência da estrutura visual com a estrutura funcional. Concretizar uma estrutura de integração mínima entre o noosfero e o angular-theme pronta para um uso mínimo.

Escopo

• Desenvolver um tema que dê suporte implementação de diretivas de responsividade no futuro
• Desenvolver o fluxo para usuário não-logado: telas apenas read-only (sem edição de conteúdo/estrutura)
• Desenvolver o tema com um layout padrão(área central e lateral), sem suporte a customizações, por enquanto

Desenvolvimento

• Criar uma branch (default-noosfero) a ser atualizada com a master do angular-theme onde os MR dos novos desenvolvimentos devem ser enviados para revisão e incorporação. O responsável pela criação e manutenção da branch é Caio.
• Alinhar os trabalhos com o SERPRO, a partir do fluxo de trabalho, avaliar quais pontos/atividades de interesses iguais e definir se dever ser paralelizado ou serializado e quem será o responsável pela execução. A responsável pela comunicação entre equipes é Melissa.
• Milestones entre Lappis e SERPRO serão separadas. As milestones do lappis refletem/espelham as definidas no plano de atividades do Noosfero-Gov.
• O desenvolvimento das seções de cada área possuem 3 camadas a serem garantidas/desenvolvidas:
  • Backend Noosfero (as funcionalidade/informações desta seção já existe (são suportadas) no backend do Noosfero?)
  • API do Noosfero (a API provê as informações/ações a serem expostas para o usuário?)
  • Componente do Angular (a seção já está estruturada/definida como um componente angular para visualização do usuário?)

Fase 0.1.1

Login e Cadastro/Registro

Garantir/validar:

• Desenvolvimento de funcionalidades no backend do Noosfero
  • Verificar: login para twitter/facebook/googleplus
• Desenvolvimento da API para funcionalidades
  • Verificar se existe API para GET/POST de todos os campos
  • API de Task (para Adicionar amigos)

Perfil do usuário

Garantir/validar:

• Desenvolvimento de funcionalidades no backend do Noosfero
  • Bloco de áreas de interesse: Aparentemente dá pra adaptar o bloco de tags para um Profile, nesse caso as áreas de interesse seriam informadas pelo usuário.
  • Verificar se todos os campos do perfil do usuário estão presentes como campos no Noosfero
  • Todos os campos para a área de descrição do perfil do usuário estão disponíveis via API
• Desenvolvimento dos componentes Angular
  • Construir bloco de atividades recentes no angular: Bloco de última atualizações + aproveitar a mesma estrutura que existe na seção de timelin

Fase 0.1.2

Comunidades

• Desenvolver as telas referentes a seções de visualização por usuários não-logados
• Estrutura de comunidade não possui nenhum relacionamento com estrutura de perfil de usuário (Desmembramento de conceito de Perfil do Noosfero)

Fase 0.2 - Usuário logado

• Um usuário logado é capaz de editar sua própria página de perfil
  • Tela de edição de informações pessoais, foto e bio (seção de cabeçalho)
  • Tela de edição/criação de seções - redefinir organização dos elementos (?)
• Em comunidades que o usuário logado possui papel de administrador
  • Tela de edição de informações da comunidade
  • Tela de criação/edição de conteúdos
  • Tela de edição/criação de seções - redefinir organização dos elementos (?)

Fase 0.3 - Interatividade com visitantes

• Aplicação do guia de estilo aos elementos das telas de Login/Cadastro, Perfil e Comunidades
  • Avaliar mecanismos avançados de estilização: definição de classes, aplicação de padrões com flexibilização de cores e fontes (?)
• Mecanismos de organização estrutural de destaque e elementos coadjuvantes em telas com objetivos específicos.
  • obs.: Usar padrão do Drupal para comportamentos de bloco por caminho

Fase 0.4 - Responsividade

Preparação para desenvolvimento

• Node NVM - Node 5.8.0
• Entender melhor os conceitos: webpack, gulp, npm, typescript, angular (data-binding, services, etc.)

Estrutura

Componentes se localizam no diretório src/app. Cada componente é independente e constituído dos seguintes arquivos:

• index: é o primeiro arquivo a ser carregado, e responsável por carregar os demais
• .spec: testes
• .component: a lógica do componente em si, que envolve basicamente tratar os dados recebidos via API e formatá-los para o HTML (em uma analogia com o MVC, é como se fosse o controller)
• .html: o HTML em si, código Angular, onde é possível utilizar, além de HTML puro, os componentes Angular, os atributos, data-binding, etc. Em uma analogia com o MVC, aqui é a view. A variável especial "ctrl" te dá acesso ao escopo do controller.
• .scss: o SASS responsável por estilizar o componente

Os dados devem ser carregados via serviços. Cada serviço deve estar no diretório lib/ng-noosfero-api/http e é responsável por chamar um endpoint da API do Noosfero e retornar os dados que serão tratados pelos componentes.

Uma vez implementado, o componente deve ser declarado no arquivo app/main/main.component.ts.

Caso seja necessário algum componente Angular existente, este deve ser adicionado ao arquivo bower.json e carregado no arquivo src/app/index.ts, que é o primeiro arquivo do tema a ser carregado.

Dica: Para uma compilação mais rápida, edite o arquivo gulp/build.js e desabilite as seguintes tasks: uglify (linha 69), minifyCss (linha 76) e minifyHtml (linha 85). Com isso, a compilação fica até 4x mais rápida