Criar “Pass” Personalizado para “Apple Wallet” — Sem Programação
Recentemente, como forma de aprendizado para a construção de um “appsurdo” (app com temas e tecnologias aleatórias), tive que aprender um pouco sobre como criar cartões personalizados para a Apple Wallet e acabei descobrindo que o processo não é tãããão complicado.
Na verdade, a própria Apple disponibiliza um tutorial mostrando como criar seu pass, mas para quem, assim como eu, tem um pouco de dificuldades com inglês, vou tentar dar uma facilitada abaixo.
Parte 1: Pass Type ID
Essa primeira parte é um pouco chatinha, mas é uma pré-configuração necessária para que você consiga criar seu cartão
- Antes de tudo, você precisa possuir uma conta de desenvolvedor da apple
- Clique em Account e entre ou crie sua conta
3. Vá para Identifiers na página Certificates, Identifiers e Profiles
4. Escolha o Pass Type IDs e continue
5. Preencha a Descrição (Nome) do Pass ID e o Identifier (pass.com.company.appname) e Registre o ID.
Você será redirecionado à página dos Identifiers e poderá ver o Pass Type ID recém criado na lista
Opa, isso quer dizer que eu já posso colocar a mão na massa e criar meu cardzinho???
Parte 2: Certificado
Nós ainda precisamos criar um certificado, que vai te dar permissão de gerar o pass (como é chamado o cartão da Wallet) e adicioná-lo à Apple Wallet
6. Busque o Acesso às Chaves no seu computador
7. Para gerar o certificado, siga os passos da imagem abaixo:
8. Após preencher seu endereço de e-mail, escolha a opção Salva no disco e salve em um local fácil de encontrar
9. Agora vamos voltar à página do passo 5 e clicar no Pass Type ID que você criou
10. Em Create Certificate você tem a opção de escolher um arquivo do seu computador (lembra da belezinha que criamos no passo 8? Usaremos o próprio 🤯)
11. Após criado o certificado, faça o download dele e salve em um local fácil de localizar
Tá, tá!! Vamos personalizar????
Parte 3: Gerar o Cartão
Esse passo é essencial para conseguir ver e compartilhar o Cartão
12. Crie uma pasta em um local de sua preferência e a renomeie como "NomedoSeuCartão.pass"
Aqui eu sugiro criar uma pasta comum e colocar a pasta .pass dentro pois teremos que adicionar outras coisas no mesmo local da pasta
13. Primeiro faça o download das Samples disponibilizadas pela própria Apple
14. Abra a pasta baixada e vá na subpasta SamplePasses
Você poderá ver vários tipos de modelos lá
Você pode aprender um pouco mais sobre os tipos de passes aqui.
15. Copie o conteúdo da pasta Generic.pass para a pasta .pass criada no passo 12
16. De volta à pasta baixada (provavelmente o nome será WalletCompanionFiles), abra a pasta signpass
17. Abra o signpass.xcodeproj e execute o projeto (cmd+b)
Não se preocupe, não é pra aparecer nenhuma tela a mais, só a mensagem "Build Succeeded"
18. Ainda com o projeto aberto, na aba esquerda do Xcode, procure o .exe abaixo:
19. Clique nesse arquivo com o botão direito e clique em Show in Finder
20. Arraste o arquivo para a mesma pasta raíz onde está a pasta .pass e abra o terminal nessa pasta raíz
21. No terminal, digite ./signpass -p NomedaSuaPasta.pass
Se deparou com um erro mais ou menos assim: "Couldn’t find an identity for pass.com. …"?
Agora os passos anteriores farão sentido!!
Passo 4: Usar o Certificado para Autenticar o Pass
Lembra desse queridinho?
22. Clica duas vezes nessa bença (abrirá o Acesso às Chaves)
23. Vá para a aba "Meus Certificados"
24. Clique o botão direito na "chave privada" e clique em "exportar…" e exporte para a pasta raíz (provavelmente será pedido para criar uma senha e digitar a sua senha de admin)
25. Tenta novamente o passo 21 da etapa anterior
26. Caso tenha funcionado, você verá um arquivo com a extensão .pkpass na pasta raíz, clicando duas vezes nele, abrirá o cartão exemplo da Apple.
E FINALMENTE, vamos colocar a mão na massa e começar a criar o seu cartão personalizado!!!!
Parte 5: Personalizar Campos do seu cartão
Dentro da pasta que você baixou (WalletCompanionFiles), abra o arquivo pass.json
Aqui e Aqui, você pode entender melhor a estrutura do .json, mas vou te explicar direitinho o que deve ser mudado para personalizar seu cartão
Sempre que você mudar algo no .json e quiser ver o resultado, você repetirá o passo: No terminal, digite ./signpass -p NomedaSuaPasta.pass. Isso mudará o arquivo .pkpass
Vamos analisar o .json por partes
- “passTypeIdentifier”
Lembra da página do passo 5? Eu também não lembraria 😅
No campo “passTypeIdentifier”, troque o identifier ("pass.com…") pelo seu (imagem acima)
- “teamIdentifier”
Na mesma página Certificates, Identifiers & Profiles:
No campo “teamIdentifier”, troque o identifier (“A93…”) pelo seu (imagem acima)
- "message": nesse campo você pode colocar um link ou a linha digitável de um código de barras, ou seja, é o campo que define o que estará no seu código de barras. Ex: se você fizer um cartão profissional, pode colocar aqui um link para o seu LinkedIn.
- "format": aqui você determina o formato do código de Barras (veja as legendas abaixo das imagens a seguir)
- "altText":(opcional) você pode ainda adicionar esse campo, dentro de "barcode", para adicionar um texto abaixo do código de barras
- “organizationName”: Aqui é o nome da sua organização ou seu nome, geralmente só aparecerá em notificações do Wallet, então não é muito relevante no nosso contexto (MAS É OBRIGATÓRIO ESTAR NO .JSON 🙃)
- “description”: aqui você deve descrever brevemente a utilidade do seu cartão (usado por tecnologias de acessibilidade). Ex: "Informações Profissionais de Cleiton"
- “logoText”:(opcional) esse texto estará ao lado da sua logo, então capricha
As cores são definidas em rgb
- “foregroundColor”:(opcional) essa cor define a cor das letras do seu cartão, é como se fosse a cor que fica "por trás" do background
- “backgroundColor”:(opcional) é a cor principal do seu cartão (ficará sobre toda a frente do cartão)
Agora iremos para as informações principais do pass
- "generic": determina o estilo do cartão
Veja abaixo a localização dos Fields: primary, secondary e auxiliary (algumas informações podem não aparecer nos campos, se muitas forem colocadas, pois como podemos ver, os tamanhos dos campos são restritos)
Pode ser ainda: boardinPass, coupon, eventTicket ou storeCard
- "key": deve ser única em relação a todo o .json (não aparecerá no cartão)
- "label":(opcional) o "título" do campo que aparecerá no cartão
Note que não há "label" no campo "primaryFields" do exemplo, mas você pode adicionar. Além disso veja que são "FieldS", então cada chaves ({ }) dessas correspondem a um "Field".
- “value”: valor/texto que aparecerá no referido campo do cartão
- "textAlignment":(opcional) alinhamento do texto.
Esse campo não é permitido em "primaryFields" e nem "backFields"(veremos a seguir)
- Essas serão as informações presentes na "parte de trás/dentro" do cartão, você pode seguir o padrão "key", "value", "label", como visto para a parte da frente do cartão ou olhar aqui quais informações podem ser adicionadas.
Obs: Veja que não há nada como "value", mesmo que eles tenham sido definidos no .json, não se preocupe, pois ao adicionar o cartão à Wallet, essas informações estarão disponíveis.
Parte 6: Mudar Imagens do Cartão
Entre os dados que você copiou para dentro da sua pasta .pass, estão várias imagens
As que aparecem no cartão são "thumbnail@2x.png" e "logo@2x.png", então tudo o que você precisa fazer é substituir essas imagens pelas suas ou pode substituir todas se assim desejar (têm que estar com os mesmos nomes).
ACABOOOOOUUUUUUU!!!!!
Dá um trabalhinho né? Mas o resultado vale à pena, certo? (Espero que a resposta tenha sido sim 😅)
Para levar isso para o seu código e gerar um cartão direto do seu app, veja o artigo de Erick, que se aventurou nessa área para o nosso appsurdo!
