Do papel ao Swift Playgrounds

O processo criativo de um designer que desenvolveu um PlaygroundBook vencedor do WWDC21 Swift Student Challenge

Victor Duarte
10 min readJun 4, 2021

Antes de tudo, acho importante dizer porque eu, uma pessoa que não possui background em programação, tentaria participar do Swift Student Challenge? Um desafio internacional com tantas pessoas incríveis participando.

A contextualização

Eu sempre fui apaixonado por tecnologia e pela Apple, e desde que tenho 12 anos, assisto à todas as WWDCs, porém ainda que assistir as conferências faça meus olhos brilharem, eu sempre direcionei meus conhecimentos para Design, e não Programação (muito menos em Swift, já que o desenvolvimento iOS costumava estar em uma realidade distante).

Já em 2020, estudando Design Industrial na UFF e aprofundando minhas pesquisas em Design, fui fortunado em ser selecionado na Apple Developer Academy | PUC-Rio, onde conheci participantes, ex-participantes e desenvolvedores de diversos locais no mundo tão apaixonados por tecnologia e pelo universo Apple como eu!

Todo esse estímulo e paixão em estar fazendo algo que me deixe tão realizado e podendo, além de trabalhar com pessoas geniais, colaborar para que mais pessoas se inspirem e sigam seus sonhos (já que cheguei a ser socialmente desestimulado a ser designer quando iniciei minha jornada) é um dos meus grandes objetivos de vida, e participar da WWDC é certamente um marco importante na minha jornada.

Minha primeira tentativa em 2020

Como eu disse, não tenho background em programação, então comecei a aprender a linguagem Swift em março de 2020, logo assim que entrei na Academy. Meu objetivo não era ser um programador profissional, mas um desenvolvedor que conseguisse trabalhar com qualquer pessoa em uma equipe, então meus conhecimentos na área sempre foram mais básicos ou intermediários.

Com o anúncio da WWDC20, fiquei extremamente empolgado, e apesar do grande desafio de codar um Playground com menos de três meses depois de ter começado a aprender Swift, eu lidei com as dificuldades e cheguei em um Playground viável! Eu fiquei extremamente feliz em ter virado noites para alcançar um resultado responsivo e codado pela primeira vez, mas infelizmente, não ganhei em 2020.

Meu projeto para o WWDC20 Swift Student Challenge, sobre diversidade de Famílias, no Xcode Playground

Eu já estava triste pois estávamos em uma pandemia sem perspectiva de acabar, que a WWDC20 seria 100% virtual, tive que me mudar nesse período e minha casa estava com uma obra que eu não aguentava mais, porém quando chegou o dia do evento, eu consegui ignorar absolutamente tudo isso e toda a minha animação das WWDCs voltou à tona! Assisti o máximo de coisas que consegui e conheci novos desenvolvedores de diversos outros locais do Brasil e do mundo.

Com esse estímulo, continuei me dedicando em aprender Swift, Design e tentei novamente em 2021.

Ok, agora vou compartilhar meu processo criativo, eu juro! Mas independentemente de quem você seja, do que faça e se já participou ou não da WWDC, eu espero que esse início de artigo te inspire positivamente de alguma forma.

WWDC21 Swift Student Challenge — O processo criativo

A Metodologia

Antes de tudo, eu já sabia que precisaria de uma metodologia para conseguir me organizar tanto com o projeto, quanto mentalmente. Para isso, decidi usar a CBL (Challenge Based Learning), por ser uma metodologia que eu poderia adaptar facilmente ao projeto e que tenho um bom conhecimento. Além disso, a CBL seria ideal para que eu desenvolvesse algo do qual eu não fazia ideia de como concluir, que seria programar um Playground funcional e criativo em mais ou menos 16 dias.

O anúncio do Challenge

Sim, sei que eu poderia já ter planejado tudo bem antes e ter começado o desenvolvimento no dia do anúncio, mas não o fiz, e comecei a planejar meu Swift Playground no dia em que foi anunciado o desafio, o que deixou tudo mais divertido e estimulante!

Desde antes do anúncio, eu sabia que precisava falar de um tema específico: o Meio Ambiente. Todo o caos que eu vi durante a pandemia em relação ao meio ambiente foi algo que me impactou de formas bem negativas, e como o mundo estava em quarentena, me senti com uma sensação de impotência em relação aos desastres, por isso quis aproveitar para me expressar um pouco mais sobre esse assunto com o Challenge.

Primeiros rascunhos

Passei os primeiros dias fazendo rascunhos em papel e decidindo sobre o que me sentiria mais engajado em tratar relacionado ao tema, e então tudo me levou a falar sobre o bioma Amazônico e suas crescentes queimadas ocorridas em 2020.

O planejamento

Assim que decidi o tema, abri o Notion e comecei a organizar o CBL, além de ter criado uma To-do list com tarefas guias e um cronograma (que eu alterei algumas vezes ao longo do processo, mas tentei seguir o máximo possível).

Anotações no Notion

Meu cronograma inicialmente foi planejado para que eu terminasse o Playground três dias antes da deadline, o que me deixava com um espaço seguro para que eu pudesse me dedicar a ajudar meus amigos que também estavam desenvolvendo seus Playgrounds, caso precisassem, e também para não me desesperar caso algo desse errado (e deu, claro!).

Além desses recursos, também fui desenvolvendo na mesma página, todo o storytelling do meu Playground, já definindo os markups, os assets a serem planejados e as interações que eu gostaria e conseguiria implementar na jornada, tudo com base no escopo do Challenge.

Já de início, vi que tudo o que eu pesquisava de PlaygroundBook era muito complexo para que eu absorvesse com o tempo disponível, então desconsiderei trabalhar com o formato e fiquei apenas no Swift Playground — essa decisão mudou no processo e foi uma questão existencial da minha experiência.

A pesquisa

A pesquisa levou bastante tempo, pois apesar de muitas informações sobre o bioma Amazônico, é necessário ter cautela e filtrar todo esse conteúdo, o que torna a pesquisa complexa quando se trata de um ambiente com milhões de km² e uma variedade monumental de espécies.

Nessa fase, a Wikipedia foi minha grande amiga, pois além de informações importantes, geralmente tudo o que eu pesquisava continha fotos em alta resolução e disponíveis para uso livre e gratuito, fator importante para o uso de recursos externos no Playground.

Os primeiros protótipos

Para facilitar o processo de criação, comecei rascunhando todas as telas em papel, ilustrando cada asset e imaginando a implementação deles nas interfaces. Essa parte do desenvolvimento foi super tranquila, e eu quis valorizar bastante o design do projeto, pois tive em mente que essa seria, provavelmente, a minha "unfair advantage", e também tive a consciência de que não seriam minhas habilidades com código e tecnologias Swift que fariam os avaliadores falarem UAU! Então pode ser uma boa pensar no que você pode dar destaque e com isso fazer algo que você se apaixone, para ficar bem incrível!

Depois, fotografei meus desenhos, abri no Photoshop e separei asset por asset, para importar tudo no Sketch e ir organizando minhas telas antes de codar.

Primeiros protótipos em papel e alguns assets já redesenhados no Adobe Photoshop.

De início, eu estava planejando desenvolver meu Playground inteiramente com SpriteKit, mas isso mudou, pois eu estava construindo o que chamei de Painground (uma experiência geral de dor e sofrimento com código), então parti para uma tecnologia que pessoalmente acho mais amigável, o SwiftUI. Até precisei repensar algumas interfaces, considerando a implementação da nova tecnologia, mas foi algo bem simples já que tudo estava prototipado no Sketch.

Telas de rascunhos e protótipos no Sketch

O código

Abri o Swift Playgrounds e fui construindo toda a minha experiência diretamente nele, usando o Playground do Xcode apenas para fazer os markups, algo que para mim deixou essa atividade bem tranquila.

Enquanto codava, continuei pesquisando e readequando todo o meu escopo. Primeiramente coloquei tudo nas views, transformei meus assets em botões que mostram uma Modal com suas respectivas imagens reais e bom, fiz o que consegui do Playground em SwiftUI. Minha segunda página eu não consegui desenvolver em SwiftUI, então fiz essa exclusivamente em UIKit, o que funcionou muito bem.

Coloquei animações, efeitos gráficos e afins. Até aí parece que está tudo indo muito bem, né? Então… o Swift Playgrounds nativamente possui o recurso de exibir os resultados ativado, ou seja, sempre que eu testava o Playground, minha experiência ficava extremamente lenta e parava de funcionar, algo que vi acontecendo com outros devs também. Além disso, como as animações do SwiftUI não tinham um controle fino de intensidade, por se basearem no tamanho da LiveView para animar de forma automática, sempre que o código era executado elas se movimentavam descontroladamente pela interface, que não era uma LiveView persistentemente executada.

O renascimento

O que eu iria fazer? Colocar um pedido para quem avaliasse, desligasse sempre os resultados nas páginas? Pedir desculpas por ser uma grande falha? Bom, não vou dizer que não cheguei a considerar essas opções, mas segui pesquisando e vi que se eu transformasse meu Playground em um PlaygrundBook (meu pior pesadelo), eu poderia resolver tanto a questão do toggle de resultados ativados, quanto da LiveView persistente do Playground.

Nessa etapa, eu estava perto de atingir meu primeiro prazo, então novamente mudei meu escopo, planejando a interação agora apenas para o iPad e pedindo que um amigo testasse para mim, já que eu não tenho um iPad.

Minhas primeiras tentativas na transição para a experiência no iPad, claro, cheia de problemas!

Comecei a pesquisar tudo sobre PlaygroundBook, assisti alguns vídeos e DevLogs, pedi infinitas ajudas aos meus amigos que já tinham lidado com isso e finalmente aprendi o básico de como usar o PlaygroundBookTemplate. Transferi todo o meu Playground para o Xcode e depois de muitos, muitos, MUITOS (sério, muitos mesmo) builds falhos e sem erros explicitados, consegui executar minha experiência no formato PlaygroundBook!

O refinamento e finalização da experiência

Com tudo executando no PlaygroundBook, resolvi refinar minha experiência, aplicando à interação uma camada a mais de imersão com recursos musicais, e o Zapsplat foi fantástico para que eu achasse o som perfeito para tudo, e novamente, gratuitos e livres de direitos autorais. Para a implementação, usei o AVFoundation e AVKit, e olha, colocar som fez absolutamente toda a diferença!

Também aproveitei esse tempo para rever todo o meu conteúdo textual, lendo, relendo, readequando à experiência no iPad e passando tudo no Grammarly, pois acho sempre bom conferir já que Inglês não é meu idioma nativo.

Pedi finalmente para meu amigo testar no iPad e estava tudo certo! Agora eu tinha 3 dias para pensar com calma nas minhas cartas, enviar o meu PlaygroundBook e esperar que o time da Apple falasse "UAU!" ao interagir com o Amazonia (nome que dei à experiência).

O PlaygroundBook pronto e testado no Mac.

As cartas

Escrevi as cartas abrindo o meu coração, como estou fazendo aqui agora. Pensei em cada frase, cada palavra, em tudo! Quando terminei de escrever, deixei de lado para reler no dia seguinte, e depois novamente.

Reler as cartas com um espaço de tempo ajuda muito no processo, já que assim ficamos mais próximos de ter a experiência de alguém que irá lê-las pela primeira vez, deixando erros e outras questões coesivas mais visíveis.

O resultado

Enviei! Esperei. Esperei. Esperei. Até que finalmente chegaram os e-mails e eu confesso que antes de abrir, fiquei gelado, mas respirei e abri o link! Foi definitivamente a melhor coisa que aconteceu no ano, então valeu muito a pena!

Beyond WWDC

Como disse no início desse artigo, desde os 12 anos, em 2011, acompanho as WWDCs e adoro a Apple. Sempre admirei como a Apple lida com a experiência completa, algo que me inspira demais.

Hoje, 4 de Junho de 2021, como learner e ambassador na Apple Developer Academy | PUC-Rio, sinto que um sonho se tornou realidade, por estar tão perto de pessoas que admiro e por trabalhar com algo pelo qual sou dedicado e apaixonado, e uso essa paixão como base para meus projetos, vida, e decisões de liderança.

Minha paixão por explorar, compartilhar conhecimento e ajudar outras pessoas a descobrirem como alcançar seus objetivos e desenvolverem seus projetos, ao mesmo tempo em que tornam este planeta um lugar melhor para se viver e evoluir, é minha principal motivação no momento, enquanto sou acadêmico, então eu espero que você tenha gostado desse artigo e obrigado por confiar em mim e ler até aqui!

Quer testar o meu PlaygroundBook no seu iPad ou Mac? Pensa em trocar uma ideia e conversar? Estou disponibilizando o link do projeto no GitHub e da documentação no Notion com meu e-mail!

Valeu! ✌️

Agradecimentos especiais

Obrigado Diogo Infante, Fernando Lobo, Fred Lacis, Lucas Frazão, Pedro Gomes, Ricardo Venieris e Yuri Strack! Vocês fizeram da minha experiência com o WWDC21 Swift Student Challenge, algo unicamente memorável!

--

--

Victor Duarte

he/him - Product Designer at Accenture Song, WWDC21 Scholar, Apple Developer Academy alumni and Industrial Design graduate at UFF. Loves diversity and design!✨