Skip to content

Arquitetura da Aplicação

Visão Geral

A aplicação UNICEF Portugal é uma aplicação híbrida ASP.NET MVC + AngularJS SPA, construída sobre o Umbraco 7.15.4. O AngularJS não é um processo ou servidor separado -- é HTML/JS estático servido a partir do mesmo Azure App Service.

O conceito de "SPA" (Single Page Application) significa que o browser descarrega uma única página HTML (index.html) e, a partir daí, carrega dinamicamente todo o conteúdo através de chamadas API ao backend Umbraco. Isto implica que se a API do Umbraco estiver lenta, todas as páginas ficam bloqueadas.

O backoffice do Umbraco (/umbraco) é separado e utiliza o Angular próprio do Umbraco (backoffice Angular), que não tem relação com o AngularJS do frontend.

Diagrama de Arquitetura

graph TB subgraph Browser A["index.html - ng-app=unicef"] --> B["AngularJS + ui-router - HTML5 mode"] B --> C["Catch-all route - *myPath"] end subgraph "Azure App Service" D["ContentApiController.cs - /umbraco/Api/ContentApi/GetData/"] E["Umbraco 7.15.4 - Cache de Conteudo"] F["/Assets/ngviews/ - Templates estaticos .html"] G["Umbraco Backoffice - /umbraco"] end subgraph "Base de Dados" H[(SQL Server)] end C -->|GET /umbraco/Api/ContentApi/GetData/?url=path| D D --> E E --> H D -->|JSON: data + meta.template| B B -->|ng-include template| F G --> E

Fluxo de Carregamento de Pagina

sequenceDiagram participant U as Utilizador participant B as Browser participant NG as AngularJS participant API as ContentApiController participant UMB as Umbraco Cache participant DB as SQL Server U->>B: Navega para /pagina-exemplo B->>NG: Carrega index.html (ng-app="unicef") NG->>NG: ui-router intercepta via catch-all (*myPath) NG->>API: GET /umbraco/Api/ContentApi/GetData/?url=/pagina-exemplo API->>UMB: Procura conteudo na cache UMB->>DB: Query (se nao estiver em cache) DB-->>UMB: Dados UMB-->>API: Conteudo encontrado API-->>NG: JSON {data: {title, body, image...}, meta: {template: "/Assets/ngviews/..."}} NG->>NG: Processa resposta (crops, share links) NG->>B: ng-include carrega template de /Assets/ngviews/ B-->>U: Pagina renderizada

Implicação de Performance

Se o ContentApiController estiver lento (por exemplo, devido a bloat na base de dados), o spinner de carregamento fica visível indefinidamente, pois o AngularJS aguarda a resposta da API para renderizar qualquer conteúdo.

Estrutura da Solução

A solução Visual Studio é composta pelos seguintes projetos:

Projeto Descrição
Web (Web.csproj) Projeto web principal. Host do Umbraco, API controllers, views
Business (Business.csproj) ViewModels e lógica de negócio
Definitions (Definitions.csproj) Modelos e interfaces
DB (DB.sqlproj) Projeto de base de dados SQL Server
PaymentsManager (PaymentsManager.csproj) Processamento de pagamentos EasyPay/PayPal
DAL.Payments (DAL.Payments.csproj) Acesso a dados para pagamentos
MassiveLuceneAnalyser Analisador Lucene customizado para pesquisa
Templates/app/ Código fonte do frontend AngularJS (index.html, Assets/js/, Assets/ngviews/)

Como Funciona

  1. O browser carrega index.html que contém <html ng-app="unicef">
  2. O AngularJS faz bootstrap e ativa o ui-router com HTML5 mode
  3. Uma rota catch-all (*myPath) intercepta toda a navegação
  4. Para cada página, o Angular chama /umbraco/Api/ContentApi/GetData/?url=<path>
  5. O ContentApiController.cs (server-side) procura o conteúdo na cache do Umbraco
  6. Retorna JSON com os dados e o caminho do template: {data: {...}, meta: {template: "/Assets/ngviews/..."}}
  7. O Angular renderiza o template via ng-include com os dados recebidos
  8. Os templates são ficheiros .html estáticos em /Assets/ngviews/