A Arquitetura de Código MVC e Como Implementá-la

Nathalia Papst
Apple Developer Academy | Mackenzie
4 min readAug 22, 2022
Photo by Clément Hélardot on Unsplash

No mundo da programação, a primeira ideia que temos, ao descobrir que digitando palavrinhas podemos criar um app, é mágica. E já que estamos trabalhando com mágica, porque não deixamos ela mais bonita e organizada, usando uma arquitetura?

Mas o que é essa tal de arquitetura?

Arquitetura de código é uma forma de organizar seu código, e deixá-lo mais bonito seguindo alguma estrutura pré-definida.

Ao seguir essa estrutura, além de deixar seu código mais organizado e bonito, você também trás uma certa independência aos componentes do seu código, assim, evitando a mudança em um milhão de arquivos diferentes, para uma pequena alteração no seu app.

E o que é essa estrutura pré-definida? Existem milhões de estruturas diferentes que podem ser utilizadas, porém as mais conhecidas na programação em Swift são: a MVC e a MVVM. Cada uma se encaixa melhor com algum tipo de framework da linguagem, como por exemplo: UIKit e SwiftUI respectivamente para as estruturas citadas anteriormente.

Nesse artigo, vamos nos aprofundar na estrutura MVC com exemplos de código em UIKit.

O MVC

A sigla da estrutura de arquitetura de código MVC, significa Model View Controller.

Agora vamos falar mais especificamente sobre cada uma dessas partes, utilizando um exemplo simples para visualização.

Model

A Model define as estruturas de dados do seu código, e, de acordo com o as ações do usuário, atualiza suas informações.

Vamos pensar no seguinte exemplo: você tem uma coleção de livros que gostaria de catalogar em um app. Um livro contém pelo menos, um título, um autor e uma capa. Pensando nisso o nosso modelo do livro ficaria da seguinte forma:

Ok, temos os elementos visuais necessários para demonstrar as informações do nosso livro, mas e agora, como adicionamos as informações necessárias para esses elementos visuais?

Podemos fazer isso através do inicializador do nosso modelo. Como essas informações são preenchidas pelo usuário para cada livro catalogado, podemos realizar isso de duas formas diferentes: a primeira, inicializando os elementos como os valores que serão dados pelo usuário no próprio inicializador do modelo.

E a segunda, é inicializando eles de forma padrão logo na declaração deles.

Após a inicialização, os elementos visuais desse modelo devem ser posicionados através das constraints.

Bom, agora que já temos o nosso modelo do livro construído, vamos ver como utilizamos essas informações na nossa interface, isso é, na View.

View

A View define como as informações aparecem na nossa tela, de acordo com os nossos modelos criados anteriormente, também é onde o usuário irá interagir com o seu app.

Vamos voltar ao nosso exemplo da catalogar a coleção de livros.

Agora queremos montar a tela que mostrará o nosso livro. Vamos imaginar que queremos um título e um botão de adicionar mais livros nessa tela. Vamos declará-los então.

Perceba que como criamos o nosso modelo de livro, não precisamos declarar cada um de seus elementos necessários, apenas o objeto Book.

Agora com os nossos elementos declarados e inicializados, falta apenas posicioná-los com as constraints. Pronto! Agora temos nossa tela com título, botão e o nosso primeiro livro.

Com isso feito, precisamos resolver como o usuário interage com o seu app, por exemplo: o que acontece se ele clicar no botão que declaramos?

E aí que entramos com a Controller!

Controller

A Controller define a lógica do nosso app, então as mudanças que devem ocorrer no momento que o usuário interage com algum elemento na nossa View, são realizadas pela Controller.

No nosso exemplo, vamos imaginar que no momento em que o usuário clicar no botão de adicionar mais livros na tela, ele deva ser direcionado para uma nova tela onde ele irá criar esse livro.

Para isso precisamos de uma função dentro da nossa View, que será a ação do botão declarado nela, e uma função na nossa Controller, que realizará de fato a navegação entre as telas. Na função da View, teremos apenas a chamada da função da Controller através de um delegate.

Assim, nosso código ficaria da seguinte forma, na View:

E na Controller:

Conclusão

Assim, criamos a estrutura do nosso app de catalogação de livros, seguindo a arquitetura MVC, e deixando a nossa "mágica" muito mais organizada e bonita.

Referências

iOS Swift — Entendendo os Padrões de Modelagem MVC, MVP e o MVVM

About App Development with UIKit

Introdução ao Padrão MVC

--

--