DEV Community: Michel Anderson Lütz Teixeira

Universal Links Made Easy: Web-Mobile Connection for All Developers #1 — iOS World

Michel Anderson Lütz Teixeira — Mon, 22 Apr 2024 18:25:09 +0000

This article stems from my experience in IT, where I encountered the challenge of migrating a PWA project to native applications, which raised various questions about behaviors, particularly regarding universal links and social login.

Driven by this experience, I decided to share my reflections in this first article. If the feedback is positive and there is engagement, I intend to continue this journey with a second article, addressing the Android world, and including appendices dedicated to Flutter and React Native.

Original post

Currently, I am part of and manage a multiplatform mobile architecture team, which allows me to understand the importance of exploring the topic from different angles. I hope this article can be useful and inspiring for other professionals facing similar challenges.

Let’s start with the scenario of a project where you have an email marketing or a landing page and you want to guide the user to click on a certain link, which will then open the installed application on the device.

We have our initial goal set: to click on a specific link and open the installed application.
How do we achieve this? With this in mind, my aim is to bridge the understanding between front-end web professionals and mobile professionals, who will need to work together to achieve this goal.

We’re about to dive into the code part, alright, developer? But before that, I’d like to introduce the topic of Associated Domains.
In terms of Apple’s Associated Domains, we have two distinct types: “webcredentials” and “applinks”. Both serve different purposes and are essential for the integration between apps and websites.

Apple World

Webcredentials: This is a type of Associated Domain that allows an iOS app to declare associations with website credentials. This is useful for single sign-on (SSO) and automatic login credential filling. When a user attempts to log in to a site associated with the app, iOS can automatically suggest the saved app credentials for filling.

Applinks: On the other hand, Applinks are used to link content between your app and your website. They enable you to associate specific URLs on your website with specific content in your app. For example, if you have a link to a specific page on your website and want it to open the corresponding content in your app, you can use Applinks for that. When a user clicks on an associated link on your website, iOS can open the appropriate app, if installed, and navigate directly to the related content.

In an upcoming article, I’ll delve deeper into the Android world, but for Android, there’s no direct equivalent to iOS’s Associated Domains feature. However, there are some related functionalities that can be used for similar purposes:

App Links (Deep Links): Similar to Apple’s Applinks, App Links are links that allow a website to direct users to specific app content if the app is installed on the device. They serve as a way to link content between the app and the website, enabling a smooth transition between the two. When a user clicks on an App Link in a browser, the Android operating system can open the appropriate app and direct the user to relevant content within the app.

Smart Lock for Passwords: This Google feature allows users to save and authenticate automatically in apps and websites without manually typing their credentials. Similar to Apple’s “webcredentials,” Smart Lock for Passwords facilitates single sign-on (SSO) in Android apps and associated websites. When users log in to an app or site that uses Smart Lock for Passwords, they have the option to save their credentials to Google, and Android can then automatically fill in these credentials when needed.

Below is a table summarizing the comparison between iOS and Android resources:

Let’s Dive into the Code

All the code snippets showcased here are available on my GitHub, and the links will be provided at the end of the article. This project serves as the foundation for a series of tests and posts I’m preparing for my mobile development team.

ence, you might notice that the project structure differs slightly, as I’ve organized it into modules and opted not to use storyboards, among other aspects. However, if you’re just starting out, don’t worry, as I’ll cover the important and relevant points here.

Getting Started with Web Configuration:

Firstly, you need a JSON file named:
apple-app-site-association

ATTENTION! The file must not have the .json extension.

According to the documentation, the file should be placed at the root of your website or inside a folder named .well-known. In this article’s example, this is the format I’ve used.

This will be the basic structure for the content of the file we’ll use in this example:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "35RIDB766W.me.micheltlutz.MobLab",
        "paths": [
          "/moblab.micheltlutz.me/*"
        ]
      }
    ]
  }
}

The appID attribute is the combination of “TEAMID.BUNDLE ID”. In our case, we’ll use the path attribute only with the subdomain I have configured and any other path that follows after the slash. Do not add any schema (http, https, myapp) to this path.

You can find more details about these settings in the link to the official documentation.

Let’s move to Xcode.

An important point here is that you’ll need a developer account on the developer.apple.com portal. If you’re not going to publish the app, it’s not necessary to pay, just register. You need this because the profiles and certificates linked to your TeamID need to be configured to use Associated Domains. Otherwise, you’ll receive a warning like this:

Where do I find my TeamID?
Once logged in to the Apple developer portal, scroll down the main page until you find the Subscription Information area

First thing we need to do is select the Project in Project Navigator
We go to the Signing & Capabilities tab and add support for Associated Domains, then we need to put our url in an applinks entry:

See the image below:

In the end it should look like the image, remember to use the url of your web project.

Let’s now go to the scheme configuration:
Open the Info.plist File Access the URL types > Item > URL Schemes branch and add the scheme you want to map, in our case moblab

Done, these were the project settings that need to be made, now to finish let’s go to the codes.

Important!

The project is using the most current version of Xcode as of the date of publication (Version 15.3 (15E204a) I configured the project to use UIKit. In this case the project has the AppDelegate.swift file and also the SceneDelegate.swift

Let’s work on SceneDelegate, it will be necessary to create the `openURLContexts method where we will carry out the necessary treatments.

The openURLContexts method is a method of the UISceneDelegate protocol, which is called when the scene receives a URL to open. It is used to handle URLs received by your iOS application scene. This method receives a Set of UIOpenURLContext objects, which contains information about the URLs being opened.

Each `UIOpenURLContext object contains the URL itself and other relevant information, such as the application opening the URL and the reason the URL is being opened.

By implementing the scene(_:openURLContexts:) method in your SceneDelegate, you can access these UIOpenURLContext objects and process the incoming URLs as needed.

This may include manipulating the URL to navigate to a certain screen within your application, extracting information from the URL for further processing, or taking other actions based on the content of the URL.

The scene(_:openURLContexts:) method is critical for handling URLs received by your iOS application and allows you to appropriately respond to those URLs as necessary for your application’s functionality.

Here is a structure of using the method:

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }

    // Checks if the URL has an associated scheme
    if let scheme = url.scheme {
        // Checks if the schema is as expected
        if scheme == "myapp" {
           // Do whatever you need to with the URL
           // For example, manipulate the URL to navigate to a certain screen
           // or extract information from the URL for further processing
        }
    }
}

In our project we will do the following:

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        guard let url = URLContexts.first?.url else {
            return
        }

        if let scheme = url.scheme {
            if scheme == "moblab" {
                appManager?.start(with: url)
            }
        }
    }

In it we will confirm that the scheme is the same as the one we mapped and let’s go, the initial validation is very simple, let’s just check if the scheme is the one we really want to open. If so, you could now load your ViewController.

It’s done, now just run the project on the Emulator or on the Device, access the url of your web project and access the link.

Here for the project the following page was created:

https://moblab.micheltlutz.me/

See the functional demo:

Imgur: The magic of the Internet

Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more from users like michellutz.

imgur.com

If you are using a previous version of code that does not use SceneDelegate.swift, you will need to do the same procedure in AppDelegate.swift, see the example below:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // Checks if the URL has an associated scheme
    if let scheme = url.scheme {
        // Checks if the schema is as expected
        if scheme == "meuapp" {
           // Do whatever you need to with the URL
           // For example, manipulate the URL to navigate to a certain screen
           // or extract information from the URL for further processing
            return true
        }
    }
    return false
}

The `application(_:open:options:) method is a method of the UIApplicationDelegate protocol, which is called when the application is opened with a URL. It is used to handle URLs received by the iOS application.

This method takes three parameters:

app: The UIApplication instance representing the application.
url: The URL being opened.
`options: A dictionary containing additional information about how the URL is being opened.

The return of this method is a boolean indicating whether the application was able to handle the URL successfully.

Within this method, you can check the received URL and take appropriate actions based on the content of the URL, in the same way as done in openURLContexts.

Until next time, if you’ve read this far please leave at least 1 Like S2.

Repositories:

Site: https://github.com/micheltlutz/moblab-site
App: https://github.com/micheltlutz/moblab-ios
Winged-Python: https://github.com/micheltlutz/Winged-Python

References:
https://developer.apple.com/documentation/xcode/supporting-associated-domains

Integrando Inovação e Liderança - Avançando em Mobile e IA através de Arquitetura de Software Eficiente

Michel Anderson Lütz Teixeira — Fri, 08 Mar 2024 21:03:03 +0000

Considero crucial abordar alguns pontos fundamentais para liderança técnica eficaz no contexto do desenvolvimento mobile. Começando com a compreensão dos fundamentos do desenvolvimento mobile, incluindo aspectos essenciais como usabilidade, diferenças de navegação e interfaces entre as plataformas, bem como nuances específicas das lojas de aplicativos da Google e da Apple. Conhecer os recursos e limitações dos dispositivos móveis é fundamental, especialmente após experiências em projetos onde o mobile foi subestimado, muitas vezes relegado apenas a exibir dados na tela. Esses equívocos podem surgir quando não há clareza com o cliente e as partes interessadas sobre os aspectos críticos do desenvolvimento de aplicativos mobile. Além disso, a colaboração entre equipes mobile e de back-end e front-end é essencial. Este encontro não deve ser apenas uma formalidade, mas sim, uma oportunidade para uma troca significativa entre os membros da equipe. A comunicação e o entendimento mútuo são cruciais para garantir resultados de alta qualidade na entrega. Com esses princípios estabelecidos podemos seguir em frente com a discussão.

Apresentarei em tópicos mais alguns pontos que falaremos. Vou trazer mais desafios aqui que não são exclusivos para o Mobile.

Contexto e Negócio

Entender o contexto e o negócio nos quais você está inserido é essencial para embasar as decisões técnicas que serão tomadas. Embora busquemos sempre utilizar o que há de mais avançado em tecnologia, manter os pés no chão desde o início pode prevenir dores de cabeça futuras. Nem todos os projetos precisam necessariamente começar de forma modular. Essa decisão deve ser baseada no contexto específico do projeto e na expertise do time. Alguns questionamentos podem ajudar nessa tomada de decisão:

Todos os membros do seu time estão familiarizados com a modularização de aplicativos?
Existe um roadmap claro de funcionalidades para o aplicativo?
Foi definido um Design System?

Esses três pontos merecem atenção especial. A experiência do time com modularização pode ser determinante, pois caso contrário, será necessário um treinamento inicial. Um roadmap definido proporciona uma visão do que o cliente planeja a curto e médio prazo, o que pode impactar na criação inicial de componentes base, separação de módulos e fluxos de navegação. Além disso, contar com um Design System desde o início pode facilitar a separação de comportamentos e estilos, mesmo em um contexto não modular. Não estou argumentando contra ou a favor do uso de modularização desde o início, apenas ressalto que essa decisão envolve variáveis que vão além das questões puramente técnicas

Cross-Platform vs Nativos (estamos pensando neles juntos?)

É comum discutirmos os prós e contras entre o desenvolvimento de aplicativos Cross-Platform (híbridos) e nativos. No entanto, muitas vezes negligenciamos a possibilidade de combinar ambos os modelos, incorporando funcionalidades nativas em uma base Cross-Platform ou vice-versa. Quando falamos de funcionalidades, não nos referimos apenas a componentes isolados, mas também a fluxos de navegação e telas completas. Cada vez mais observamos clientes que, por diversas razões, iniciam o desenvolvimento utilizando uma abordagem e precisam migrar ou incorporar elementos da outra. O mercado é dinâmico e as aplicações precisam acompanhar essas mudanças. Portanto, gostaria de incentivar uma exploração mais profunda desse cenário, no qual aplicativos funcionam de forma híbrida, combinando o melhor dos dois mundos.

Documente

A importância da documentação é um tema recorrente para mim e meus colegas sabem como sou enfático neste ponto, tanto em novos projetos quanto em projetos em andamento. Independentemente de já existir documentação prévia ou não é essencial que alguém dê o primeiro passo e assuma a responsabilidade por essa frente. A documentação não deve ser vista apenas como uma tarefa do time ou do líder técnico, mas sim como uma prática incentivada pela liderança e compartilhada por todos os membros. As mudanças de equipe e de funcionalidades são freqüentes, e considerar o tempo necessário para repassar conhecimento é crucial. Tendo em vista este ponto quero trazer a relação com o acrônimo DRY (Don’t Repeat Yourself), que é relevante aqui também. Evite ser repetitivo com as explicações, onboardings e refinamentos, grave vídeos curtos sobre funcionalidades específicas, faça gravações de definições técnicas, agendas para tirar dúvidas, pois utilizar estes recursos torna-se extremamente valioso no futuro. Sugiro habilitar a transcrição dos vídeos vou abordar um ponto sobre isso mais a frente para facilitar o acesso a esses conteúdos.
Se você se deparar com um projeto pouco documentado, comece pelo básico: agende uma reunião com as pessoas-chave, faça anotações e comece a elaborar uma arquitetura de referência. Compartilhe essas informações com a equipe em uma plataforma de documentação, como Confluence ou SharePoint. O processo pode parecer tedioso no início, mas ver o progresso a partir do ponto zero é incrivelmente gratificante.

Conheça seu Time e Divida responsabilidades

Construir relações sólidas com seus colegas e permitir que eles conheçam você cria laços de confiança e credibilidade dentro da equipe. Reconhecer que todos nós temos lacunas em nossos conhecimentos e mapear esses gaps desde o início é fundamental para o sucesso do projeto. Afinal, ninguém nasce sabendo tudo. Encoraje uma cultura onde os membros da equipe se sintam à vontade para admitir quando não dominam determinada competência e busquem apoio para desenvolvê-la. Dividir e delegar responsabilidades para as pessoas certas pode fazer toda a diferença no resultado do projeto. É importante deixar isso transparente não apenas para sua equipe, mas também, para outras lideranças envolvidas, especialmente se o projeto envolver mais de um time (squad). Essa transparência promove uma melhor colaboração entre os times e evita possíveis conflitos ou mal-entendidos ao longo do caminho.

Princípios de Arquitetura de Software para Aplicações Móveis

Separação de Responsabilidades (SoC):

Divida o aplicativo em componentes ou camadas distintas, como interface do usuário, lógica de negócios e acesso a dados, para garantir que cada parte do aplicativo tenha uma responsabilidade clara e independente.

Desacoplamento:

Minimize as dependências entre os diferentes componentes do aplicativo, permitindo que eles sejam desenvolvidos, testados e mantidos de forma independente. Isso facilita a modificação e evolução do aplicativo ao longo do tempo.

Reutilização de Código:

Identifique e promova a reutilização de código onde for possível, através da criação de componentes modulares e bibliotecas compartilhadas. Isso reduz a redundância, melhora a consistência e acelera o desenvolvimento. Pense simples no início e faça refactory estendendo funcionalidades, quando necessário e não crie código que não será utilizado.

Escalabilidade:

Projete o aplicativo de forma a suportar crescimento futuro, tanto em termos de usuários quanto de funcionalidades. Isso inclui a adoção de padrões de projeto escaláveis, arquiteturas distribuídas e o uso eficiente de recursos de hardware e rede.

Testabilidade:

Facilite a escrita e execução de testes automatizados para garantir a qualidade do aplicativo. Isso envolve o projeto de componentes que sejam facilmente testáveis e a implementação de práticas de desenvolvimento orientadas por testes.

Manutenibilidade:

Projete o aplicativo tendo em mente que ele vai precisar de manutenção, facilitando a identificação e correção de problemas, a adição de novas funcionalidades e a adaptação a mudanças nos requisitos ou tecnologias. Utilizar bibliotecas para tudo nem sempre é o ideal, por isso, pondere o uso de bibliotecas privadas com as de comunidade.

Performance e Eficiência:

Lembre-se das limitações que muitos dispositivos têm, seja em rede ou armazenamento. Otimize o desempenho do aplicativo, minimizando o consumo de recursos, o tempo de carregamento e a latência. Isso inclui o uso eficiente de memória, armazenamento e largura de banda, bem como a adoção de práticas de codificação e design eficientes.

Inteligência Artificial e Mobile: Oportunidades e Desafios

Pensar nas oportunidades e desafios que a integração entre IA e Mobile traz um verdadeiro gostinho de satisfação, tanto do ponto de vista do desenvolvimento quanto do produto. Vamos começar com a integração de IA em aplicativos mobile: já encontramos uma variedade de casos de uso e benefícios. Desde aplicativos de edição de fotos até reconhecimento de comandos de voz, grandes players do mercado estão explorando essas possibilidades. Mas e se pensássemos em funcionalidades que vão além do convencional?

Personalização da experiência de uso do aplicativo: Que tal deixar o aplicativo aprender com seu uso e organizar os menus de acordo com suas preferências?
Automação de tarefas repetitivas: Imagine se o aplicativo pudesse identificar padrões em suas atividades e oferecer sugestões para agilizar suas tarefas, como realizar anotações ou efetuar pagamentos.
Acessibilidade avançada: Recursos como o VoiceOver da Apple estão cada vez mais precisos na descrição de imagens, tornando a experiência mais inclusiva para todos os usuários.
Análise de comportamento de saúde: Aplicativos de saúde podem utilizar IA para oferecer orientações personalizadas, incentivando pausas no trabalho e atividades físicas.
Visão computacional e OCR: Reconhecimento de texto e objetos em imagens são recursos que podem agregar muito valor aos aplicativos mobile.

Quando pensamos no lado do desenvolvimento, esses pontos fazem ainda mais sentido, especialmente quando consideramos a automação de tarefas repetitivas. Os pontos que falamos anteriormente fazem esta conexão ser possível para podermos cada vez mais automatizar nosso trabalho e co-pilotar. Quero deixar a pergunta aqui: até quando você que é Dev quer continuar escrevendo telas repetidas vezes?

Pense se não seria mais produtivo desenvolvermos os componentes com seus comportamentos definidos, onde a partir de uma UI desenhada pelo time de User Experience, a IA reconhece os elementos de uma tela, busca em uma base de componentes tudo o que é necessário e escreve o código da tela padronizado para você na linguagem que o projeto utiliza, bastando apenas você ligar os pontos e as camadas necessárias, como regras de negócio e persistências. Com um projeto bem estruturado e uma documentação atualizada e clara, isso se torna factível.

Deixo aqui um exemplo real que me inspirou em alguns projetos em andamento:

Desafios técnicos e éticos na implementação de IA em dispositivos móveis

Creio que todos já estejam cientes dos desafios técnicos que enfrentamos atualmente em certas implementações, quer envolvam IA ou não. É importante ressaltar que abordar questões éticas e de privacidade do usuário é fundamental. Deixar claro os pedidos de permissão é imperativo para garantir uma utilização adequada da IA em nossas aplicações. Além disso, é crucial ter cautela com as informações que são compartilhadas em ambientes de desenvolvimento. Garantir que os usuários estejam plenamente informados sobre quais dados estão sendo coletados e como serão utilizados, em conformidade com regulamentos de proteção de dados, como a LGPD, é essencial. Ao enfrentar tais desafios, os desenvolvedores podem conceber aplicativos móveis com IA que não apenas sejam eficazes e inovadores, mas também éticos e responsáveis.

Análise de Dados e Tomada de Decisão em Projetos Mobile

Para líderes técnicos mobiles, a análise de dados oferece uma riqueza de insights cruciais que podem informar e orientar o desenvolvimento de projetos.

Quero começar este tópico retornando à parte de documentações e gravações de reuniões e refinamentos. Comentei sobre habilitar as transcrições das gravações. Utilizando códigos simples em Python ou react.js juntamente com um banco de dados redis ou um banco de dados vetorial, é possível trabalhar com buscas semânticas em arquivos textos, PDF, markdown, dentre outros. Com estes recursos e dados em mãos podemos pensar na criação de uma base de conhecimento sobre o projeto onde teremos os arquivos de vídeo e as transcrições de reuniões, refinamentos e documentações técnicas, possuindo diversas utilizações, dentre elas conhecer os gaps do projeto, buscar por bibliotecas utilizadas, regras de negócio desenvolvidas com base nas documentações de código, evitando retrabalho, gerando conhecimento para o time e partes envolvidas e podendo, também, utilizar algorítimos de predição de eventos com base em dados coletados da aplicação.

Tive a oportunidade de escrever uma demo utilizando Python para busca semântica em chapters técnicos que fazemos aqui em nosso studio de inovação, e digo que é fantástico o que se pode extrair destas informações. Vou deixar um video completo do Diego Fernandes (Rockerseat)

Onde é apresentado o uso de Langchain + Embeddings abordando exatamente esta técnica.

Abaixo trago mais algumas dicas e insights importantes:

Entenda o contexto e os objetivos do projeto: Antes de começar a análise de dados, é essencial compreender completamente o contexto do projeto e seus objetivos. Isso ajudará a definir as métricas relevantes que precisam ser acompanhadas e avaliadas.
Identifique métricas-chave: Identifique as métricas-chave que são mais importantes para o sucesso do aplicativo. Isso pode incluir métricas de engajamento do usuário, como tempo médio de sessão, taxa de retenção e conversão, além de métricas relacionadas à performance do aplicativo, como tempo de carregamento e taxas de falha.
Use ferramentas adequadas de análise de dados: Utilize ferramentas como Firebase Analytics, Google Analytics e ferramentas de análise de lojas de aplicativos para coletar e analisar dados de forma eficaz. Familiarize-se com essas ferramentas e suas funcionalidades para extrair insights valiosos. Recomendo conhecer e explorar ferramentas, como DataDog e NewRelic, utilizadas com freqüência para serviços, mas que trazem visões importantíssimas para a saúde de sua aplicação.
Itere com base nos dados: Utilize os insights obtidos da análise de dados para iterar e melhorar continuamente o aplicativo. Identifique padrões, tendências e áreas de oportunidade para ajustar a estratégia de desenvolvimento, priorizar recursos e otimizar a experiência do usuário.
Mantenha-se atualizado: A tecnologia e as preferências dos usuários estão em constante evolução. Mantenha-se atualizado com as últimas tendências e melhores práticas em análise de dados e desenvolvimento mobile para garantir que seu aplicativo permaneça relevante e competitivo.

Ao incorporar a análise de dados em todas as fases do ciclo de vida do projeto mobile, os líderes técnicos e outras partes interessadas podem tomar decisões mais informadas e estratégicas, impulsionando o sucesso do aplicativo e garantindo uma experiência excepcional para os usuários.

Explorar outras ferramentas em seu trabalho é fundamental. Atualmente, por exemplo, utilizo extensivamente a biblioteca pandas do Python, que me permite consolidar relatórios em um dataframe e obter insights valiosos a partir dos dados. É uma biblioteca bastante acessível, com uma documentação robusta e uma comunidade ativa, o que facilita bastante o aprendizado e a resolução de problemas.

Agradeço a todos pela atenção e dedicação em explorar essas estratégias cruciais para o desenvolvimento mobile.
Obrigado!