Boas-vindas ao curso de Design System com SwiftUI. Meu nome é Ândriu Coelho e sou instrutor de iOS na Alura.
Audiodescrição: Ândriu se identifica como um homem branco. Tem o rosto alongado, cabelos curtos e castanho-claros, barba e bigode escuros. No corpo, veste uma camiseta azul-escura com o logo da Alura. Está sentado em uma cadeira gamer preta e há um microfone à sua frente segurado por um suporte. Ao fundo, uma parede lisa iluminada em tons de azul com uma estante cheia de objetos à direita e um vaso grande de plantas à esquerda.
Neste curso, utilizaremos o aplicativo da VollMed, que permite que pessoas usuárias busquem especialistas e marquem consultas de acordo com suas necessidades.
A ideia deste curso é catalogar todos os componentes visuais que este aplicativo possui. Assim, criaremos um novo módulo específico para o Design System utilizando o CocoaPods.
Dentro deste módulo, teremos toda a tipografia do aplicativo, incluindo os textos e botões visíveis. Ao longo desta formação, incrementaremos este novo módulo de Design System com vários componentes visuais.
Como resultado, esperamos corrigir problemas de inconsistência de layout que todo aplicativo possui. Cada pessoa desenvolvedora pode implementar a parte visual de uma maneira diferente, o que pode causar problemas de inconsistência de layout.
Com o uso do Design System, criamos de uma forma única e utilizamos essa mesma forma para criar novos componentes. Essa é a ideia central do curso.
Temos cursos sobre esses três temas aqui na Alura.
Após entender o conteúdo que será abordado durante o curso, esperamos você na primeira aula!
Para iniciar o curso, vamos apresentar o projeto que utilizaremos nesta formação de Design System para iOS.
O projeto é o VollMed. Talvez você já conheça este projeto, caso tenha participado dos cursos anteriores da formação sobre requisições HTTP. Continuaremos a utilizá-lo para discutir sobre Design System.
O objetivo do curso é entender a importância de ter um Design System para um aplicativo e abordar alguns problemas que podemos encontrar ao longo do caminho quando não trabalhamos com Design System. O VollMed é um aplicativo onde a pessoa usuária pode se registrar, fazer seu cadastro e marcar uma consulta em alguma especialidade da qual precise.
É importante, como pessoas desenvolvedoras, entender que este aplicativo possui várias Views (telas), cada qual com diversos componentes visuais. Por exemplo, ao acessar a tela de registro de pessoa usuária pelo emulador, teremos os seguintes elementos, de cima para baixo:
Ao analisar mais a fundo, percebemos que esses mesmos textos e estilos são utilizados em outras telas.
Voltando ao código, acessaremos a aba lateral esquerda para buscar, por exemplo, a View de cancelar uma consulta, no arquivo CancelAppointmentView, dentro da pasta "Views".
Ao acessar esse arquivo e recarregar a aba lateral direita de pré-visualização, notaremos que a tela exibe um texto igual ao da outra tela, com o mesmo estilo e tamanho. O botão também segue o mesmo padrão do botão de cadastro, com a diferença apenas na cor.
Observando outras telas da pasta "View" — como a HomeView da Home e a MyAppointmentsView onde são listadas as especialidades —, notaremos que todas seguem basicamente o mesmo estilo.
Um problema comum que percebemos quando não utilizamos um Design System em um projeto é que cada profissional pode criar seus componentes da forma que achar melhor. Por exemplo, ao desenvolver uma nova tela para o VollMed, devemos repetir os mesmos estilos ao declarar um texto: fonte, estilo em negrito, cor da fonte e padding. Esses estilos são repetidos em vários textos.
Ao abrir novamente a tela de cadastro de pessoa usuária no arquivo SignInView, notaremos que o texto de e-mail tem uma fonte, um estilo (neste caso, negrito) e uma cor. Se houver um erro (o que é comum), o design variará de uma tela para outra, resultando em diferenças de layout, o que não é ideal. Isso impede a geração de um layout fluido para a pessoa usuária.
A ideia do Design System é resolver esses problemas. Criaremos um módulo, como se fosse um projeto separado do VollMed, onde catalogamos todos os componentes que utilizaremos. Assim, ao criar um texto ou botão, não precisamos repetir todos esses estilos, pois isso já estará pronto.
Com isso, o layout permanece consistente, sem disparidades entre telas, pois todos os elementos consomem do mesmo módulo de Design System. Quando mencionamos "módulo", referimo-nos a um novo projeto, chamado "VollMed UI", separado do projeto principal, utilizando o gerenciador de dependências CocoaPods.
O CocoaPods será utilizado com frequência no projeto para criar módulos, gerar versões e instalar módulos no projeto principal. Portanto, conforme mencionado na introdução, é importante ter o conhecimento prévio para trabalhar com essa ferramente.
Temos um curso na Alura que aborda o CocoaPods. Sinta-se à vontade para explorá-lo!
Para começar, é importante verificar se já temos o CocoaPods instalado no Mac. Para isso, abriremos o terminal do Mac, pressionando "Command + Espaço" para abrir a janela do Spotlight. Em seu interior, digitaremos "terminal" e pressionaremos "Enter".
Na janela do terminal exibida, verificaremos se o CocoaPods está instalado com o comando abaixo:
pod --version
Se ele mostrar uma versão, significa que o CocoaPods está instalado corretamente no Mac. Caso contrário, será necessário instalá-lo com o comando abaixo:
sudo gem install cocoapods
Em seguida, rodaremos um comando para instalar tudo o que é necessário para trabalhar com o CocoaPods:
gem install cocoapods
A seguir, continuaremos com a criação do módulo de Design System.
Após entender a importância da criação de um Design System para o aplicativo Vollmed, é hora de criar um novo módulo.
A ideia é desenvolver um projeto separado do Vollmed, que conterá todo o catálogo de componentes visuais que podemos utilizar dentro do aplicativo principal.
Existem alguns motivos para não fazer isso no mesmo aplicativo. Em empresas grandes, que possuem aplicativos com milhares de pessoas usuárias, é comum a divisão em vários times ou squads. Cada time é responsável por uma funcionalidade ou unidade de negócio da empresa, entre os quais é comum haver um time específico para criar o Design System, consumido por todos.
Trabalhar com modularização é vantajoso, pois desacoplamos essa tarefa do projeto principal, permitindo que outras pessoas o desenvolvam paralelamente. Ao transformar em um novo módulo, o aplicativo fica desacoplado.
É isso que faremos agora: criar um novo projeto para um novo módulo, utilizando o CocoaPods.
Abriremos novamente o terminal do Mac, pressionando "Command + Espaço", digitando "terminal" e pressionando "Enter".
Em seu interior, acessaremos a área de trabalho com o comando abaixo.
cd desktop
Em seguida, digitaremos o comando para criar o módulo. Lembrando que é necessário ter o CocoaPods instalado.
Digitaremos pod lib create seguido do nome do projeto ou módulo. No caso, VollmedUI.
pod lib create VollmedUI
Após pressionar "Enter", uma sequência de passos será apresentada para configuração. Ele pergunta:
ios
swift
yes
none
Após esses passos, um novo módulo será criado, exibindo uma nova janela do Xcode com o projeto VollmedUI e sua estrutura de pastas à esquerda.
Maximizando a janela do novo projeto, abriremos a estrutura de pastas do módulo, no explorador da esquerda. No primeiro nível, há dois targets: "VollmedUI" e "Pods".
VollmedUI
Pods
Usaremos pouco a seção "VollmedUI", pois servirá apenas para testes internos do próprio módulo. Trabalharemos bastante na parte dos pods, a biblioteca criada, dentro da qual desenvolveremos os componentes para compartilhar com o aplicativo Vollmed, aberto em uma nova janela do Xcode.
A ideia é que todos os arquivos criados sejam colocados dentro da pasta "VollmedUI", dentro de "Pods". Dentro dessa pasta, há um arquivo ReplaceMe, vazio, indicando onde novos arquivos devem ser criados. Vamos removê-lo, clicando nele com o botão direito, selecionando "Delete" e clicando em "Move to Trash" (mover para a lixeira).
Agora, criaremos um novo arquivo chamado VollmedTextStylesUI, onde começaremos a catalogar toda a tipografia do aplicativo. Clicando na pasta "VollmedUI" com o botão direito, selecionaremos "New Group" (novo grupo) e o nomearemos como "Styles".
Clicando com o botão direito na pasta "Styles", selecionaremos "New File from Template". Na janela exibida, selecionaremos "SwiftUI View" e clicaremos em "Next". Na outra janela exibida, é importante marcar as caixas de seleção "Pods-VollmedUI_Example", do target, e "VollmedUI", módulo a ser compartilhado com o aplicativo do Vollmed.
No campo "Save As", digitaremos o nome do arquivo:
VollmedTextStylesUI
Por fim, clicaremos em "Create", no canto inferior direito da janela, o que exibirá a tela principal do Xcode dividida entre a área de código, à esquerda, e a área de preview (pré-visualização), à direita.
Ao tentar clicar no botão de recarregar no topo da área de preview, alguns erros serão apresentados na área de código. Isso ocorre porque o SwiftUI funciona a partir do iOS 13, e a versão padrão do projeto é 10. Precisamos fazer algumas configurações para que funcione corretamente.
No explorador lateral, clicaremos na pasta "Pods" para exibir uma área diferente na parte central da tela. Em seu interior, acessaremos a aba secundária de projetos, à esquerda, e selecionaremos o projeto "POds-VollmedUI_Example".
Na aba central, clicaremos no campo "iOS" da seção "Minimum Deployments" e substituiremos a versão 10.0 pela 16.0, mais recente.
Faremos isso com as outras opções da aba secundária de projetos, alterando a versão do iOS nos projetos, "Pods-VollmedUI_Tests" e "VollmedUI".
Por fim, voltaremos à aba do explorador lateral e clicaremos na pasta de primeiro nível "VollmedUI", no topo. Voltando à área central, alteraremos o campo "iOS" para a versão 16.0 nos dois projetos presentes na aba da esquerda: "VollmedUI_Example" e "VollmedUI_Tests".
Teoricamente, ajustamos todas as versões. Voltando ao arquivo VollmedTextStylesUI, faremos um "Command + B" para buildar o projeto e verificar se está tudo certo.
O editor exibirá uma mensagem indicando que o build será bem-sucedido. Com isso, teremos feito todas as alterações e configurações para a biblioteca funcionar.
Há um problema ao criar classes de SwiftUI em uma biblioteca de CocoaPods, pois muitas vezes o preview não funciona. Quando isso ocorre, podemos realizar os seguintes passos:
A ideia deste vídeo era expor a motivação para criar um novo módulo de Design System separado do projeto, criar esse módulo utilizando o CocoaPods e fazer as configurações iniciais.
A seguir, abordaremos o arquivo Podspec, o subiremos no GitHub e criaremos os componentes visuais.
O curso iOS: produzindo o design system no SwiftUI possui 103 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de iOS em Mobile, ou leia nossos artigos de Mobile.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.