DEV Community: Matheus dos Reis de Jesus

Como programar em Swift no Linux

Matheus dos Reis de Jesus — Thu, 18 Jul 2024 17:04:03 +0000

Aprender a programar em Swift, para quem não tem um dispositivo da Apple, parece impossível. Porém, muita gente não sabe que a linguagem Swift é de código-aberto e pode ser usada no macOS, Windows e Linux. Hoje, veremos o passo-a-passo para os SOs Linux, mais especificamente, o Ubuntu.

NOTA: Não é possível criar apps para os dispositivos da Apple usando os sistemas operacionais Linux. Para isso, é preciso usar o macOS ou iPadOS. Porém, é possível aprender e programar em Swift, o que já é um ótimo começo.

1. Download da Toolchain

Primeiramente, vamos realizar o download do arquivo compactado contendo a toolchain de Swift, que dá suporte à compilação e execução de código em Swift. Para isso, acesse a página a seguir:

https://www.swift.org/install

Nela, é possível escolher o sistema operacional desejado para obter os arquivos de instalação:

Como vamos utilizar como base o Ubuntu Linux como base para esse tutorial, basta selecionar a opção Linux, e em seguida a opção da plataforma Ubuntu. Após isso, é possível selecionar a versão do Ubuntu em que será realizada a instalação. No meu caso, é a 22.04.

Escolha a opção correspondente à sua instalação do Ubuntu:

Feito isso, iremos realizar o download do tarball contendo a toolchain. Para isso, primeiro, é necessário saber qual a arquitetura do seu processador: x86_64 ou arm64. Para isso, execute o comando abaixo no seu terminal de preferência:

uname -m

Se a saída for x86_64, clique na opção abaixo:

Se for aarch64 ou arm64, clique na opção abaixo:

Feito isso, o download de um arquivo .tar.gz será realizado. Agora, você pode acessar o link a seguir para acompanhar o processo de instalação:

https://www.swift.org/install/linux/tarball/

Instalação das dependências

Antes de instalarmos a toolchain em si, é necessário garantir a instalação de todas as dependências da linguagem. O link anterior possui algumas seções contendo as dependências para cada SO Linux:

Estranhamente, não há uma opção para o Ubuntu 22.04, então usei as mesmas dependências do 20.04. Antes de instalar as dependências, é importante executar o comando para atualizar os pacotes já existentes na sua máquina:

$ apt-get update

Permissões de administrador podem ser necessárias para executar os comandos no terminal. Para isso, basta adicionar o sudo antes dos comandos.

Feito isso, basta instalar as dependências:

$ apt-get install \
          binutils \
          git \
          gnupg2 \
          libc6-dev \
          libcurl4 \
          libedit2 \
          libgcc-9-dev \
          libpython2.7 \
          libsqlite3-0 \
          libstdc++-9-dev \
          libxml2 \
          libz3-dev \
          pkg-config \
          tzdata \
          uuid-dev \
          zlib1g-dev

Após instalar as dependências, podemos finalmente realizar a instalação da toolchain. Vamos acessar a pasta downloads para extrair o arquivo que baixamos anteriormente:

$ cd ~/Downloads

Agora, podemos extrair o conteúdo do arquivo comprimido. O nome será parecido com:

swift-<versao>-RELEASE-<plataforma>-<arquitetura>.tar.gz

$ tar xzf <nome-do-arquivo>.tar.gz

Atenção: O nome do arquivo .tar.gz pode variar de acordo com a versão da toolchain que for obtida no site. Você pode começar digitando ~/.Downloads/swift- e apertar tab para que o terminal complete o restante.

Os arquivo comprimido será extraído para uma pasta de mesmo nome. Agora, iremos mover esta para um novo destino:

Agora, vamos criar uma pasta para onde iremos extrair a toolchain:

$ mv <nome-da-pasta> ~/.swift-toolchain

Pronto, agora já temos a toolchain no lugar correto. O próximo passo é torná-la acessível pelo terminal, modificando a variável PATH.

É preciso adicionar o seguinte caminho:

export PATH="~/.swift-toolchain/usr/bin:$PATH"

Use seu arquivo de preferência para inserir essa modificação (.bashrc, .zshrc, .bash_profile, .zprofile ou outro):

$ export PATH="~/.swift-toolchain/usr/bin:$PATH" > ~/.bashrc

Para confirmar que a instalação foi um sucesso, você pode executar o seguinte comando no terminal:

$ swift --version

O resultado deverá ser similar a esse(a depender do seu SO e arquitetura)

Swift version 5.10.1 (swift-5.10.1-RELEASE)
Target: aarch64-unknown-Linux-gnu

Pronto, já é possível executar código Swift na sua máquina.

Como executar código em Swift

Agora que já temos a toolchain instalada, podemos criar código em Swift.

ATENÇÃO: Como dito anteriormente, não é possível criar apps para iOS/iPad/macOS/tvOS em ambiente Linux. Frameworks específicos como UIKit, SwiftUI e outros não estão disponíveis.

Primeiro, vamos criar um arquivo:

$ touch exemplo.swift

Arquivo criado, podemos abrí-lo com nosso editor de preferência. Pode ser o Visual Studio Code, nano, o que preferir. Eu usei o vim:

$ vim exemplo.swift

Agora, podemos executar o código no terminal e ver o resultado:

$ swift exemplo.swift 
Hello, world!

Com tudo configurado, agora você já pode começar a programar em Swift sem precisar de um dispositivo da Apple. Gostou desse artigo? Compartilhe!

Até à próxima 👋🏽

Como criar um App para iOS em ViewCode

Matheus dos Reis de Jesus — Fri, 21 Jul 2023 14:35:17 +0000

1. Contexto

ViewCode é um termo usado para descrever a construção de interfaces de usuário utilizando apenas código. Inicialmente as telas eram criadas usando Storyboard/XIB, através da interface gráfica do próprio Xcode. Porém, existiam alguns problemas:

Acesso limitado a propriedades dos elementos
Conflitos de modificação de arquivos (merge hell)
Quando o app crescia muito, os arquivos ficavam pesados e causavam lentidão no Xcode (Storyboard)

Então, foi se criando um novo padrão, apelidado de ViewCode. Neste artigo, veremos brevemente como ele funciona e como criar um app do zero baseado nesse formato.

Sumário

1. Contexto
2. Criando o app
3. Removendo o Storyboard
4. ViewCode
- 4.1. Configurando o ViewCode
- 4.2. Criando um protocolo ViewCode
- 4.3. Criando uma View com ViewCode
- 4.4. Usando a View na ViewController
- 4.5. Adicionando uma ação ao botão
5. Conclusão

2. Criando o app

O primeiro passo, obviamente, é criar um app. Para criar este tutorial estou usando a versão 14.3.1 do Xcode. Caso você esteja usando uma versão diferente, alguns detalhes podem mudar.

Primeiramente, abrimos o Xcode e clicamos em Create a new Xcode Project:

Após isso, o Xcode irá abrir uma janela para seleção do tipo de aplicativo a ser criado:

Para este tutorial, iremos escolher a plataforma iOS e a opção App, e então clicar em Next:

A próxima etapa consiste em nomear o projeto e escolher algumas configurações básicas, como nome do app, time, Bundle identifier, tipo de interface(UI) e linguagem. Também é possível optar por usar CoreData sincronizado com a nuvem e incluir testes. Para este tutorial, o mais importante é selecionar modificar as seguintes opções:

Interface → Storyboard
Language → Swift

Assim, garantimos que nosso app estará configurado para usar a linguagem Swift(e não Obj-C) e, por padrão, a interface será criada com Storyboard(e não SwiftUI).

Após clicar em Next, o Xcode irá apresentar uma tela para escolher onde deseja salvar os arquivos do seu projeto.

Bast selecionar a pasta desejada e clicar no botão Create. Feito isso, seu projeto estará criado e será aberto pelo Xcode:

Agora que já temos um novo projeto, vamos para o próximo passo: remover o Storyboard.

3. Removendo o Storyboard

Nas propriedades do projeto ExampleApp, que já são abertas logo após a criação do mesmo, precisamos acessar a aba Info Caso você, por acaso, feche essa janela, é possível acessá-la novamente clicando duas vezes no item do projeto na barra lateral esquerda:

Na aba Info, na seção Custom iOS Target Properties, encontre os itens Main Storyboard file base name e Application Scene Manifest → Scene Configuration → Default Configuration > Storyboard name e remova-os da lista, usando o ícone de menos próximo ao nome do item ou selecionando-o e apertando a tecla delete/backspace:

Após excluir estes itens, podemos remover o arquivo Main.storyboard do nosso projeto, já que ele não será mais necessário. Para isso, basta encontrá-lo na barra lateral esquerda e apagá-lo, usando o atalho Cmd+Delete ou pelo menu de atalhos, como abaixo:

Agora que nosso projeto não possui mais um arquivo Storyboard, podemos começar a configurar nosso app para ser construído usando ViewCode.

4. ViewCode

4.1. Configurando o ViewCode

Já que não temos mais um Storyboard para apresentar nossa tela, precisamos definir um novo responsável por essa apresentação. Para isso, vamos acessar o arquivo SceneDelegate e fazer algumas modificações no método scene. Inicialmente, ele já vem com alguns comentários, mas, pra encurtar o trecho de código, eles foram removidos nesse exemplo. Inicialmente, esse é o conteúdo do método:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene,
               willConnectTo session: UISceneSession,
               options connectionOptions: UIScene.ConnectionOptions) {

        guard let _ = (scene as? UIWindowScene) else {
            return 
        }

    // [...] Outros métodos do SceneDelegate
}

Primeiro, iremos obter a scene que nosso método recebe e tentar convertê-la em uma UIWindowScene. Isso já está escrito no método, porém o valor da conversão está sendo descartado, por conta do let _ = [...]. Para isso, basta nomearmos a atribuição para obter o valor:

guard let windowScene = (scene as? UIWindowScene) else {
    return 
}

Precisamos fazer essa conversão e obter o valor pois iremos usá-lo criação da nossa UIWindow usada no SceneDelegate:

self.window = UIWindow(windowScene: windowScene)

Com uma window definida, o próximo passo é instanciar uma UINavigationController para ser apresentada, para que nosso app já seja construído com suporte para navegação.

O projeto ExampleApp já foi criado com uma ViewController de exemplo, e ela será a tela inicial(rootViewController) da navegação do nosso app:

let navigationController = UINavigationController(rootViewController: ViewController())

Agora que já temos uma UINavigationController, podemos defini-la como sendo a raiz(rootViewController) das nossas telas na window. Em seguida, fazemos com ela seja definida como a principal e apresentada na tela através do método makeKeyAndVisible:

self.window?.rootViewController = navigationController
self.window?.makeKeyAndVisible()

Após cada passo citado acima, teremos o seguinte código:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

        guard let windowScene = (scene as? UIWindowScene) else {
            return
        }

        self.window = UIWindow(windowScene: windowScene)

        let navigationController = UINavigationController(rootViewController: ViewController())

        self.window?.rootViewController = navigationController
        self.window?.makeKeyAndVisible()
    }

    // [...] Outros métodos do SceneDelegate
}

A próxima etapa consiste em criar um padrão para construção das views através de um protocolo.

4.2. Criando um protocolo ViewCode

Uma padronização muito interessante é criar um protocolo que irá definir o formato que uma UIView construída em ViewCode deve ter. Dessa forma, todas as views terão um mesmo padrão de construção e ficará mais fácil de encontrar informações importantes.

A seguir, uma sugestão de protocolo que possui o básico necessário para manter a construção de uma view bem organizada:

// Arquivo ViewCode.swift
protocol ViewCode {
    func addSubviews()
    func setupConstraints()
    func setupStyle()
}

extension ViewCode {
    func setup() {
        addSubviews()
        setupConstraints()
        setupStyle()
    }
}

Uma breve explicação de cada método definido acima:

addSubviews(): Adiciona as views como subviews e define a hierarquia entre elas
setupConstraints(): Define as constraints a serem usadas para posicionar os elementos na view
setupStyle(): Define os estilos da view, como cor, bordas e etc.
setup(): Executa os três métodos anteriores como parte do processo padrão de inicialização de uma view

OBS: Criamos o método setup em uma extension do protocolo porque não é possível criar implementações de métodos diretamente no protocolo. Mas, fazendo isso, conseguimos resumir o setup em uma única chamada de método, setup(). No próximo passo veremos isso na prática.

Com nosso protocolo pronto, podemos criar uma view que conforme com ele e entender melhor como essa estrutura funciona.

4.3. Criando uma View com ViewCode

Como exemplo, iremos criar uma view para a nossa ViewController que tenha um texto e um botão. Para isso, iremos precisar dos elementos UILabel e UIButton, contidos no framework UIKit.

Primeiramente, vamos um arquivo View.swift com a nossa classe View, que herda as características de uma UIView:

// Arquivo View.swift

// Importamos o UIKit
import UIKit

class View: UIView {
    init() {
        // Chamamos um método da UIView para inicialização
        super.init(frame: .zero)
    }

    // O método a seguir é obrigatório na classe UIView
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Agora que temos uma View, podemos criar as views que serão exibidas dentro dela. Como citado anteriormente, um texto e um botão:

// Arquivo View.swift

// Importamos o UIKit
import UIKit

class View: UIView {

    private lazy var label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private lazy var button: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(.blue, for: .normal)
        return button
    }()

    init() {
        // Chamamos um método da UIView para inicialização
        super.init(frame: .zero)
    }

    // O método a seguir é obrigatório na classe UIView
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setup(labelText: String, buttonTitle: String) {
        label.text = labelText
        button.setTitle(buttonTitle, for: .normal)
    }
}

Talvez o trecho de código acima tenha embaralhado um pouco sua mente com tantos conceitos diferentes e talvez desconhecidos. Abaixo, algumas respostas pra perguntas que provavelmente tenham surgido:

Por quê usar o modificador de acesso private?

Para evitar que a view seja modificada. Seguindo o princípio de encapsulamento, expomos apenas o que for estritamente necessário, evitando que propriedades das nossas views sejam modificadas indevidamente. Para permitir que a view seja configurada, podemos criar um método setup que tenha como parâmetros as informações necessárias.

Por quê usar lazy?

O termo lazy, do inglês, descreve nossa view como "preguiçosa". E é literalmente isso que ela é. Usando essa palavra-chave definimos que o valor da nossa propriedade label, por exemplo, só será definido na primeira vez que ela for acessada. E, após a definição, esse valor não poderá ser alterado. Em que contexto isso é útil? Quando temos renderização condicional. Se uma view só é adicionada caso uma condição seja atendida, evitamos que ela ocupe espaço na memória desnecessariamente.

O que é label: UILabel= { /* ... */ }()

O trecho acima é chamado de self-executing closure. É similar à funções anônimas em outras linguagens. Nesse caso, é como se declarássemos uma função e ela fosse chamada imediatamente. Em Swift, significa criar uma closure e chamá-la logo em seguida.

Para que serve translatesAutoresizingMaskIntoConstraints?

Essa propriedade é definida como false para permitir que as constraints que iremos definir não entrem em conflito com constraints que são geradas automaticamente pelo sistema. Assim, podemos definir nossas próprias constraints e posicionar os elementos como desejado.

Por quê o método setup(labelText:,buttonTitle:)?

Para permitir configurarmos as informações da nossa View sem a necessidade de expor cada uma das suas subviews. Dessa forma, limitamos a personalização a apenas o texto do label e o título do button.

Os conceitos acima seguem as práticas mais recomendadas para criação de views usando ViewCode. Agora que estão todos esclarecidos, podemos seguir para o próximo passo: fazer com que nossa view conforme com o protocolo ViewCode.

extension View: ViewCode {
    func addSubviews() {
        addSubview(label)
        addSubview(button)
    }

    func setupConstraints() {
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.centerYAnchor.constraint(equalTo: centerYAnchor),

            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 8),
            button.centerXAnchor.constraint(equalTo: centerXAnchor)
        ])
    }

    func setupStyle() {
        backgroundColor = .white
    }
}

No trecho acima, usamos os métodos definidos no protocolo ViewCode para:

Adicionar as views label e button à nossa View
Posicionar o label centralizado horizontalmente(centerXAnchor) e verticalmente(centerYAnchor) na View
Posicionar o button centralizado horizontalmente(centerXAnchor) e, na vertical, a um espaçamento de 8 a partir da parte inferior(bottomAnchor) do nosso label
Definir a cor de fundo(backgroundColor) da View como branca(.white)

Agora, precisamos apenas chamar o setup da View no init:

// Arquivo View.swift

// Importamos o UIKit
import UIKit

class View: UIView {

    private lazy var label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private lazy var button: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(.blue, for: .normal)
        return button
    }()

    init() {
        // Chamamos um método da UIView para inicialização
        super.init(frame: .zero)
        // Chamamos o setup da nossa view
        setup()
    }

    // O método a seguir é obrigatório na classe UIView
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setup(labelText: String, buttonTitle: String) {
        label.text = labelText
        button.setTitle(buttonTitle, for: .normal)
    }
}

extension View: ViewCode {
    func addSubviews() {
        addSubview(label)
        addSubview(button)
    }

    func setupConstraints() {
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.centerYAnchor.constraint(equalTo: centerYAnchor),

            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 8),
            button.centerXAnchor.constraint(equalTo: centerXAnchor)
        ])
    }

    func setupStyle() {
        backgroundColor = .white
    }
}

Após construir nossa View, podemos usá-la na nossa ViewController para ser exibida.

4.4. Usando a View na ViewController

Agora, retornamos para a nossa ViewController criada anteriormente e podemos usar a View para ser exibida na tela:

// Arquivo ViewController.swift
class ViewController: UIViewController {

    private lazy var myView: View = {
        return View()
    }()

    // Método do ciclo de vida que carrega a view
    override func loadView() {
        super.loadView()

        self.view = myView
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Configuramos a View usando o método setup
        myView.setup(labelText: "Olá, mundo!", buttonTitle: "Testar")

    }
}

Esse foi o último passo para conseguirmos exibir a nossa View criada utilizando o padrão ViewCode. Se você executar sua aplicação, verá o seguinte resultado:

Pronto, agora temos uma tela construída utilizando ViewCode. Porém, falta um último detalhe: criamos um botão, mas sem nenhuma interação. Nosso próximo passo será criar essa interação.

4.5. Adicionando uma ação ao botão

Primeiramente, vamos criar um Delegate para nossa View, que é o padrão adotado dentro do próprio UIKit quando precisamos "encaminhar" uma ação/informação para fora de uma View, "delegando" a responsabilidade de lidar com ela. Iremos chamá-lo de ViewDelegate:

protocol ViewDelegate: AnyObject {
    func didTapButton()
}

Algo estranho apareceu nesse trecho, né? Por quê nosso protocolo conforma com o protocolo AnyObject? Para permitir que nosso delegate seja uma referência do tipo weak, que só objetos podem ter, e evitando assim retain cycles. Esse é um detalhe mais complexo e que não caberia nesse artigo(que já está extenso), mas é importante saber a motivação.

Agora, precisamos criar uma propriedade delegate na nossa View e um método para lidar com a ação do nosso botão:

protocol ViewDelegate: AnyObject {
    func didTapButton()
}

class View: UIView {
    // ...

    private lazy var button: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(.blue, for: .normal)
        button.addTarget(self, selector: #selector(didTapButton), for: .touchUpInside)
        return button
    }()

    weak var delegate: ViewDelegate?

    // ...    

    @objc 
    private func didTapButton() {
        delegate?.didTapButton()
    }
}

Explicando melhor o trecho acima:

delegate: É uma propriedade com referência fraca(weak) e opcional(?) usada para que a View consiga notificar quem a esteja usando que uma ação aconteceu, como o toque no botão
@objc: Essa propriedade do método didTapButton permite que ele interaja com código em Objective-C, que é o caso de boa parte do UIKit. No caso, ele é necessário para que o método possa ser usado no #selector para adicioná-lo à interação do botão
addTarget(_ target:, action:, for:): É o método usado para adicionar a ação ao botão. O primeiro parâmetro, target, recebe a referência da classe onde está o método, o segundo recebe a ação em si, e para isso usamos o #selector(). Por fim, no for: informamos que o método será chamado para o toque dentro do botão, por isso .touchUpInside.

Feito isso, já temos toda a configuração do lado da View para lidar com uma ação. Agora, falta designarmos para a ViewController a responsabilidade de processar a ação:

class ViewController: UIViewController {

    private lazy var myView: View = {
        let view = View()
        // Atribuimos a ViewController como delegate
        view.delegate = self
        return view
    }()

    // ...
}

extension ViewController: ViewDelegate {
    func didTapButton() {
       // Nossa ação irá atualizar a View
       myView.setup(labelText: "Sucesso!", buttonTitle: "Testar novamente")
    }
}

No trecho acima, modificamos a nossa ViewController para ser atribuída como delegate da View e para conformar com o protocolo ViewDelegate para processar a ação de toque no botão. Ao tocar no botão, nossa ViewController atualiza a View com novas informações, ficando assim:

5. Conclusão

Passando por cada etapa desse tutorial, você terá conhecimento suficiente para começar seus estudos sobre criação de telas seguindo o padrão ViewCode.

O código completo desse artigo pode ser encontrado neste repositório:

reisdev / viewcode-example-ios

Repositório com o app criando neste artigo:

Ficou com alguma dúvida? Deixe nos comentários ou me procure em alguma das minhas redes, que você encontra aqui

Até o próximo artigo 👋🏽.

Capa por UX Store no Unsplash

Como decodificar JSON em Swift

Matheus dos Reis de Jesus — Thu, 13 Jul 2023 17:08:19 +0000

Contexto

Para quem está iniciando, talvez esteja se perguntando: porque preciso saber decodificar um conteúdo em JSON?

O formato JSON é amplamente utilizando em diversas linguagens para armazenar e transferir informações de maneira estruturada. Abaixo, alguns exemplos de cenários comuns:

Arquivo JSON que armazena de configurações
Consumir uma RESTFUL API que responda no formato JSON.
String contendo informações no formato JSON.

Neste artigos iremos ver como ler e decodificar o formato JSON usando a linguagem Swift.

Sumário

Contexto
Leitura do conteúdo JSON
- String
- Arquivo
- Requisição em API
Criação do tipo em Swift
Decodificação

Leitura do conteúdo JSON

O primeiro passo para ler um JSON em Swift é converter o seu conteúdo no formato Data, um tipo da linguagem Swift, que será usado para decodificar a informação em um tipo que iremos definir mais à frente. Abaixo, temos os exemplos de conversão para cada cenário:

String

Abaixo, temos um exemplo de uma string contendo uma lista de posts no formato JSON:

let jsonContent = """
[
  {
    "id":1,
    "title":"Como se tornar um programador",
    "content":"Para se tornar um programador, é necessário estudar linguagens de programação e desenvolver habilidades de resolução de problemas.",
    "created_at":"2023-04-18T14:00:00Z"
  },
  {
    "id":2,
    "title":"Os benefícios da meditação",
    "content":"A meditação pode ajudar a reduzir o estresse, melhorar a qualidade do sono e aumentar a sensação de bem-estar.",
    "created_at":"2023-04-18T14:00:00Z"
  },
  {
    "id":3,
    "title":"Receita de bolo de chocolate",
    "content":"Para fazer um delicioso bolo de chocolate, você vai precisar de farinha de trigo, açúcar, ovos, óleo, cacau em pó e fermento em pó.",
    "created_at":"2023-04-18T14:00:00Z"
  }
]
"""

Dessa forma, usando as 3 aspas("""), podemos declarar uma string com múltiplas linhas. Agora, podemos fazer a conversão da nossa string para o formato Data:

// Usamos o .utf8 para converter a string
// para um padrão que permita acentuação
let data = Data(jsonContent.utf8)

Arquivo

Supondo que tenhamos um arquivo .json que contenha uma lista de artigos:

[
  {
    "id":1,
    "title":"Como se tornar um programador",
    "content":"Para se tornar um programador, é necessário estudar linguagens de programação e desenvolver habilidades de resolução de problemas.",
    "created_at":"2023-04-18T14:00:00Z"
  },
  {
    "id":2,
    "title":"Os benefícios da meditação",
    "content":"A meditação pode ajudar a reduzir o estresse, melhorar a qualidade do sono e aumentar a sensação de bem-estar.",
    "created_at":"2023-04-18T14:00:00Z"
  },
  {
    "id":3,
    "title":"Receita de bolo de chocolate",
    "content":"Para fazer um delicioso bolo de chocolate, você vai precisar de farinha de trigo, açúcar, ovos, óleo, cacau em pó e fermento em pó.",
    "created_at":"2023-04-18T14:00:00Z"
  }
]

Considerando que o nome do nosso arquivo é artigos.json, ele pode ser lido da seguinte forma:

// Caminho para um arquivo
let filePath = Bundle.main.path(forResource: "artigos", ofType: "json")

// Transforma o conteúdo do arquivo em Data
let data = try? Data(contentsOf: filePath)

Usamos o try? antes do inicializador do Data porque a conversão do nosso arquivo para Data pode falhar e causar uma exceção. Para não termos que lidar com exceções, usamos o try?, que irá fazer com que o Data(contentsOf:) retorne nil caso um erro ocorra.

Requisição em API

Para fazer uma requisição em uma API, usaremos o método mais tradicional, URLSession.shared.dataTask(for:). Considerando uma URL fictícia que poderia nos fornecer a lista de artigos que desejamos obter, temos o seguinte código:

URLSession.shared.dataTask(with: url) { (data, response, error) in
    // Verificamos se um objeto data recebido não é nulo
    guard let data else { return }

    // A partir daqui, executamos o passo de decodificação
    // ...
}.resume()

Criação do tipo em Swift

Precisamos definir a estrutura dos objetos contida no nosso JSON, para qual os dados serão decodificados. Para isso, vamos criar um struct que conforme com o protocolo Decodable. Esse protocolo está disponível no framework Foundation e é usado para definição de objetos que sejam decodificáveis. A seguir, temos a declaração do nosso tipo Post:

struct Post: Decodable {
    let id: Int
    let title: String
    let content: String
    let createdAt: String

    /* 
    *  Definição dos atributos que possuem
    *  uma chave num formato diferente no JSON
    *  ex.: Nomes em snake_case
    */
    enum CodingKeys: String, CodingKey {
        case id, title, content
        case createdAt = "created_at"
    }
}

Cada atributo do objeto contido no nosso JSON é definido como uma propriedade do nosso struct. Através do enum CodingKeys podemos definir uma associação entre chaves a serem "renomeadas" do JSON para atributos do nosso objeto. Acima, por exemplo, convertemos o created_at(em snake-case) para createdAt(em camel-case). Esse mesmo comportamento pode ser obtido atribuindo à propriedade keyDecodingStrategy do JSONDecoder o valor .convertFromSnakeCase, que será visto no próximo tópico. O uso dessa propriedade elimina a necessidade de definirmos as associações para cada propriedade que esteja no formato snake-case.

Com nosso struct definido, poderemos fazer a decodificações de outras estruturas para ele, como um JSON, que é o nosso objetivo.

Decodificação

Agora que já temos um objeto Data e um tipo definido podemos usá-los para decodificar nosso conteúdo JSON. Para isso, o framework Foundation fornece uma classe JSONDecoder criada exatamente com esse objetivo. Abaixo, temos um exemplo do processo de decodificação:

let decoder = JSONDecoder()
decoder.keyDecodingStrategy = .convertFromSnakeCase
let artigos = try? decoder.decode([Post].self, from: data)

print(artigos)

O método decode da classe JSONDecoder recebe dois parâmetros. O primeiro é o tipo do objeto a ser decodificado e o segundo é o objeto Data que contém os dados obtidos anteriormente.

No exemplo deste artigo, o tipo a ser decodificado é uma lista do tipo Post. O self é usado para obter o tipo esperado, que é [Post](um array de Post).

Vale ressaltar que o Data esperado não pode ser nulo, então certifique-se de que seu objeto data não é nil antes de passá-lo para o decode.

Conclusão

Conhecer essas 3 formas básicas de decodificar um JSON em Swift já te dá uma base suficiente para aplicar o conceito em diversos contextos. Abaixo, a documentação de alguns dos recursos utilizados nesse artigo:

Gostou deste artigo? Compartilhe e me siga para mais conteúdos como esse!

Capa por Ferenc Almasi na Unsplash

Optional em Swift

Matheus dos Reis de Jesus — Tue, 26 Apr 2022 21:17:24 +0000

Capa por Ana Municio no Unsplash

Sumário

Introdução
Lidando com Optional
- Force unwrapping
- Binding opcional
- Unwrapping implícito
- Encadeamento opcional
- Unwrapping incondicional
Conclusão

Introdução

É possível criar variáveis em Swift que não necessariamente tenham um valor definido(ou seja, nulo) e elas são conhecidas como opcionais. Para que uma variável não tenha valor usamos o valor nil. Definimos uma variável como opcional colocando uma interrogação após a definição do seu tipo, da seguinte forma:

var minhaString: String? = nil

print(minhaString)
// Saída: nil

A partir dessa atribuição, a variável minhaString ainda não tem valor definido. Agora, podemos tentar atribuir um valor à minhaString e verificar o resultado:

var minhaString: String? = "Olá mundo!"

print(minhaString)
// Saída: Optional("Olá mundo!")

Lidando com `Optional`

Lidar com variáveis opcionais requer um pouco mais de atenção, pois é importante verificar se essa variável possui valor antes de utilizá-lo em algum trecho de código. Para isso, temos 4 opções:

Usando o force unwrapping, com !
Usando binding opcional, com if let
Usando o unwrapping implícito de opcionais, com !
Usando encadeamento opcional, com a?.b?.c
Usando unwrapping incondicional

Force unwrapping

Force unwrapping, que pode ser traduzido como "forçar a desembrulhar" é a forma explicita de extrair o valor de um Optional. Ele pode ser usado, por exemplo, em um parâmetro de uma função que não pode ser nil, dessa forma:


// O parâmetro 'nome' não é opcional
func minhaFuncao(nome: String) {
    print("Olá, \(nome)")
}

// A variável 'meuNome'é opcional e tem valor 'nil'
var meuNome: String? = nil

minhaFuncao(nome: meuNome!)

O trecho abaixo dispararia a seguinte exceção:

Unexpectedly found nil while unwrapping an Optional value

Por quê? Pelo fato de que o valor da variável meuNome foi atribuído como nil. Portanto, é importante ter em mente que, para usar o force unwrapping, é necessário atender pelo menos um dos seguintes critérios:

Ter certeza de que o valor está definido
Tratar a exceção que será lançada caso o valor seja nil

Se o valor da variável meuNome não fosse nil, o resultado seria diferente:

func minhaFuncao(nome: String) {
    print("Olá, \(nome)")
}

var meuNome: String? = "ReisDev"

minhaFuncao(nome: meuNome!)
// Saída: "Olá, ReisDev"

O uso do force unwrapping não é recomendado por conta dos erros que ele pode ocasionar caso alguma variável tenha o valor nil. Por isso, use com cautela.

Binding opcional

`if let`

Optional binding, que pode ser traduzido como "amarração opcional", consiste em garantir que um trecho de código será executado apenas se um determinado valor não for nil. Inclusive, é possível verificar sub-condições, como atributos de objetos. Abaixo, um exemplo de uso:

var meuTexto: String? = nil

if let texto = meuTexto {
    /* 
     * Nesse contexto, a variável texto é
     * do tipo String, e não 'String?'
     */
}

No bloco de código acima, o trecho contido entre as chaves é chamado de closure, e você pode ver mais detalhes neste link(em inglês). Dentro dessa closure a variável texto(que recebeu o valor da variável meuTexto) é do tipo String por conta da amarração opcional. Se o valor da variável meuTexto não for nil, ele será "amarrado" à variável texto, e o trecho de código dentro da closure será executado.

`guard let`

Além do if let, podemos usar também o guard let, que valida se uma variável tem valor e, caso não tenha, executa um trecho de código que deve encerrar a execução, seja do programa ou de uma função. Abaixo, um exemplo:

func validaTexto(meuTexto: String?) -> Bool {
    guard let texto = meuTexto else {
         return false
    }
    // Valida o texto ...
}

Unwrapping implícito

O unwrapping implícito, que pode ser traduzido como "desembrulhamento" implícito, é usado para evitar ter que usar as outras abordagens citadas nesse artigo para obter o valor de uma variável Optional. Ele funciona da seguinte forma:

var pessoa: Pessoa! = nil

Como a variável pessoa é do tipo Pessoa? (sem o unwrapping implícito), se tentarmos acessar o atributo endereco, por exemplo, obteríamos o seguinte erro:

value of optional type 'Pessoa?' must be unwrapped to refer to member 'endereco' of wrapped base type 'Pessoa'

Por quê? O compilador da linguagem sabe que é arriscado acessar uma variável Optional sem a garantia de que ela de fato tem um valor, pois isso pode causar um erro. Por isso, ele tenta garantir que quem está escrevendo o código faça essa verificação.

O unwrapping implícito é usado exatamente para não precisar fazer essa verificação todas as vezes. Parece prático, mas também pode ser arriscado. Se você utilizar esse recurso, tenha o cuidado de tratar exceções, pois pode acontecer de sua variável ter o valor nil, e isso irá ocasionar em um erro. O uso desse recurso não é encorajado, por conta dos problemas que ele pode gerar. Por isso, Use com moderação.

Encadeamento opcional

Optional chaining, que pode ser traduzido como "encadeamento opcional", é usado, por exemplo, quando se tem atributos de objetos que podem ser nulos, e esses objetos também tem atributos que podem ser nulos. Abaixo, um exemplo:

var minhaRua = pessoa?.endereco?.rua

O objeto pessoa é do tipo Pessoa?, e o objeto pessoa possui um atributo endereco do tipo Endereco?. A variável minhaRua também será do tipo Optional, e ela receberá um valor somente se o objeto pessoa e seu aributo endereco não forem nil. Caso algum deles tenha valor nulo, a variável minhaRua também terá valor nil.

Unwrapping incondicional

Unconditional unwrapping, que pode ser traduzido como "desembrulhamento incondicional", é usado quando você tem certeza de que um Optional contém um valor. Abaixo, um exemplo:

var numero = Int("42")!
print(number)
// Saída: 42

No trecho acima, o inicializador de Int pode falhar, pois a string fornecida pode não conter um número. Porém, nós temos certeza de que "42" irá resultar em um número. Logo, podemos usar o unconditional unwrapping.

Conclusão

Agora você já sabe como funcionam as variáveis do tipo Optional e as diferentes maneiras como você pode lidar com elas. Lembre-se sempre de avaliar a forma mais adequada de tratar variáveis opcionais em cada situação. Caso queira saber mais detalhes, recomendo que leia a documentação da Apple.

Gostou deste artigo? Compartilhe e me siga para mais conteúdos como esse!

Minhas redes:

Até a próxima!👋🏽

Variáveis e Constantes em Swift

Matheus dos Reis de Jesus — Wed, 13 Apr 2022 15:12:23 +0000

Capa por Blake Connally no Unsplash

Sumário

Introdução
Declarando constantes e variáveis
- Constantes
- Variáveis
Definindo o tipo
Atribuindo valores
Conclusão

Introdução

Uma das primeiras coisas para se conhecer ao aprender uma nova linguagem é o funcionamento das constantes e variáveis. Esse artigo traz uma breve explicação deste conceito dentro da linguagem Swift.

Declarando constantes e variáveis

Constantes

Para se declarar uma constante usamos a palavra-chave let. Como o próprio nome sugere, constantes não podem ter seu valor alterado. Quando declaradas, seu valor é atribuído e não poderá ser modificado. Abaixo, um exemplo:

let helloWorld = "Hello world!"

// Tentando atribuir um novo valor:
helloWorld = "Novo valor"

/*
* Irá resultar em um erro:
* "Cannot assign to value: ‘helloWorld’ is a ‘let’ constant"
*/

Como descrito no bloco de código acima, tentar atribuir outro valor à uma constante irá causar um erro. Então, lembre-se: a palavra chave let só deve ser usada quando o valor for constante. Inclusive, a própria documentação da linguagem recomenda que se use let sempre que possível.

Variáveis

Para se declarar uma variável usamos a palavra-chave var. Sempre que for preciso armazenar um valor que pode mudar durante a execução de um código, deve-se usar var. É possível, inclusive, declarar mais de uma variável em uma mesma linha. Abaixo, temos alguns exemplos:

// Declarações únicas
var x = 0
var valido = true
var meuTexto = "Este é um texto"

// Declarações múltiplas
var x = 0, y = 10, z = 100
var string1 = "Primeira string", string2 = "Segunda string"

Definindo o tipo

A linguagem Swift permite que sejam definidos tipos para variáveis e constantes(apesar de não ser obrigatório), e escrevemos da seguinte forma:

let meuTexto: String = "Este é um texto"
let contador: Int = 0
let medida: Float = 2.5
let valor: Double = 10.0
let hoje: Date = Date()

A linguagem Swift possui os tipos básicos, como tupla, array e dicionário. Os demais tipos são providos pelo framework Foundation, criado pela própria Apple. Você pode ver os tipos com mais detalhes neste link.

Além dos exemplos acima, uma variável/constante também pode ser do tipo Optional, que é usado quando o valor pode ser indefinido, dessa forma:

// Valor "nil" explícito
var meuTexto: String? = nil

// Valor "nil" implícito
var meuTexto: String?

A palavra-chave nil é similar ao null em outras linguagens, usada para indicar um valor nulo. O tipo Optional possui muitos detalhes que serão explicados em outro artigo. Neste, iremos nos limitar apenas a saber que é possível utilizá-lo.

Atribuindo valores

Para atribuir valores, sua variável/constante pode ter um tipo definido ou não. Se ela tiver, o valor atribuído deve ser do mesmo tipo da variável.

// Com tipo definido:
var meuTexto: String = "Esse é um texto"

// Sem tipo definido
var meuTexto = "Esse é um texto"

Se você não definir um tipo, o compilador irá considerar o tipo do valor atribuído. No caso acima, o tipo seria String.

Quando a variável/constante possui um tipo definido, o valor que for atribuído deverá ser desse mesmo tipo.

var meuTexto: String = 1

Como o valor atribuído acima é do tipo inteiro, mas o tipo da variável meuTexto é String, esse trecho irá disparar uma exceção:

error: cannot convert value of type 'Int' to specified type 'String'

A própria linguagem já previne que você cometa erros ao atribuir valores de tipos diferentes do que foi definido para uma determinada variável/constante.

Conclusão

Agora você já conhece o básico sobre o uso de variáveis e constantes em Swift. Recomendo que veja a documentação da linguagem e também do framework Foundation sobre os diferentes tipos disponíveis.

Gostou deste artigo? Compartilhe e me siga para mais conteúdos como esse!

Minhas redes:

Até a próxima!👋🏽

Como escrever códigos mais padronizados?

Matheus dos Reis de Jesus — Sun, 10 Oct 2021 00:13:32 +0000

Capa por Tim Graf no Unsplash

Sumário

Introdução
O que é Style Guide?
Quem define um guia de estilo?
No que isso vai me ajudar?
Exemplos

Introdução

Quem me acompanha nas redes sociais sabe que, recentemente(junho de 2019), eu mudei o rumo da minha carreira. Estava trabalhando com Data Science e decidi focar no desenvolvimento mobile iOS. A partir disso, tive que me dedicar a aprender Swift, linguagem lançada pela Apple em 2014.

Para aprender novas linguagens, é necessário conhecer padrões: sintaxe, comandos, paradigmas e por aí vai. Um detalhe muito importante é: Qual o padrão para se escrever códigos na linguagem que estou aprendendo? Para isso existem os style guides.

O que é Style Guide?

Em português, Guia de Estilo, é um conjunto de regras que definem como devem ser escritas as mais variadas instruções em uma determinada linguagem. Essas regras envolvem preferências sobre, por exemplo, iniciar ou não uma nova linha antes de das chaves de um comando if. Um exemplo de regra a seguir:

// Preferido
if(condition) {
   //code
}
// Não preferido (lógico, um crime)
if(condition)
{
   //code
}

Os style guides são criados para (tentar) garantir que o código terá um mesmo formato, independentemente de quem escreveu, tornando mais fácil sua leitura por qualquer pessoa.

Quem define um guia de estilo?

Os guias de estilo podem ser definidos por um projeto, empresa, comunidade, etc. Por exemplo, dentro de uma empresa, é possível que diferentes projetos sigam diferentes guias, cada um adequado às suas necessidades.

No que isso vai me ajudar?

Conhecer um guia de estilo pode tirar muitas dúvidas sobre como um "bom código" deve ser escrito. Você irá conhecer e entender como formatar determinados comandos, como escrever expressões, onde colocar ou não espaços, etc.

Exemplos

Abaixo estão listados alguns exemplos de guias de estilo para você conhecer:

Tratamento de Exceção com erros customizados em Swift

Matheus dos Reis de Jesus — Tue, 27 Apr 2021 12:20:29 +0000

Capa por Sigmund no Unsplash

Utilizar erros customizados pode deixar seu código mais compreensível e organizado, pois adiciona uma "descrição" para determinadas situações que podem ocorrer. No artigo de hoje vamos ver como criar e tratar erros customizados na linguagem Swift.

Sumário

Criação
Tratamento de Exceção
Considerações

Criação

Primeiro, precisamos pensar em um contexto para criar nossos erros. Vamos supor que existe um serviço que consome uma API que fornece dados sobre filmes, e iremos tratar os possíveis erros. Os erros mais comuns são:

Recurso não encontrado(404)
Proibido(403)
Erro interno(500)
Serviço Indisponível(503)

Os números associados aos erros são conhecidos como "Código de Status HTTP"(HTTP Status Code).

No trecho de código abaixo, iremos criar nossos erros customizados:

enum APIError: Error {
    case NotFound           // Recurso não encontrado
    case Forbidden          // Proibido
    case InternalError      // Erro interno
    case ServiceUnavailable // Indisponível
}

Usamos uma estrutura do tipo enum para definir o conjunto de erros que temos. Para dar continuidade, iremos supor que nosso serviço dispara exceções com os tipos definidos acima quando os respectivos códigos de status HTTP são recebidos.

Tratamento de Exceção

Agora que já temos um conjunto definido de erros, vamos ver como tratar nossas exceções. A linguagem Swift usa, para tratamento de exceções, uma estrutura conhecida como do-try-catch, que é escrita da seguinte forma:

do {
    try execute()
} catch(let exception){
    // Tratamento da exceção
}

Adequando o código acima para nosso cenário do serviço de filmes, e supondo que o serviço já está implementado, teríamos o seguinte:

do {
    // Tenta obter os dados do filme de id 5201
    try MovieService.getById(5201)
} catch(let exception){
    // Trata os erros
}

Podemos ir um pouco além do que já vimos. A estrutura do-try-catch permite que tratemos diferentes tipos de exceções, como se fosse um switch-case, da seguinte forma:

do {
    // Tenta obter os dados do filme de id 5201
    try MovieService.getById(5201)
} catch APIError.NotFound {
    // Trata o erro de "Recurso não encontrado
} catch APIError.Forbidden {
    // Trata o erro de "Proibido"
} catch APIError.InternalError {
    // Trata o erro de "Erro interno
} catch APIError.ServiceUnavailable {
    // Trata o erro de "Serviço Indisponível"
}

Com a estrutura acima, conseguimos tratar alguns dos erros mais comuns que podem ocorrer ao fazer uma requisição a um servidor. Vale destacar que não necessariamente essa é a melhor abordagem, mas ela é um bom exemplo de como tratar erros customizados usando a linguagem Swift.

Considerações

Caso você tenha interesse em descobrir mais sobre tratamento de exceções em Swift, você pode ler a documentação. Espero que essa explicação tenha te ajudado!

Gostou deste artigo? Me siga para mais conteúdos como esse!

Minhas redes sociais:

Twitter | Instagram | Youtube.

Até a próxima!👋🏽

Como usar variáveis de ambiente sem biblioteca em React

Matheus dos Reis de Jesus — Tue, 20 Apr 2021 11:01:38 +0000

Capa por FLY:D no Unsplash

Já deixou vazar alguma chave de segurança porque subiu alguma alteração e esqueceu de apagar o conteúdo sensível? Usar variáveis de ambiente evita que coisas assim aconteçam. Mas, como elas funcionam no React? Vem comigo!

Sumário

O que são Variáveis de ambiente
Como funcionam
Como utilizar

O que são Variáveis de Ambiente

Variáveis de ambiente são um conjunto de valores que geralmente são definidos para configurações de uma aplicação. Exemplos: Dados de conexão com um banco, a URL de uma API e etc.

O termo "Ambientes" se refere à diferentes cenários em que uma aplicação pode estar sendo executada. Os mais comuns são: desenvolvimento, teste, homologação, e produção. Cada um deles pode exigir diferentes configurações, e por isso é feita essa divisão. Você uma variável na aplicação que, em diferentes ambientes, terá valores específicos para aquele cenário.

Como funcionam

Para configurar variáveis de ambiente em uma aplicação React você precisa criar um arquivo na raiz da aplicação com o nome .env. Primeiro, certifique-se de que está na pasta-raiz do seu projeto, onde ficam os arquivos package.json, .gitignore e etc. Se preferir criar por linha de comando, utilize um dos comandos abaixo, de acordo com seu sistema operacional:

# MacOS ou UNIX
cd pasta-do-projeto
> .env

# Windows
cd pasta-do-projeto
type NUL > .env

Agora, você verá o arquivo vazio na pasta-raiz do seu projeto. Para criar uma variável de ambiente, você deve utilizar o prefixo REACT_APP_. Por exemplo: Se você deseja criar uma variável API_URL, ela deve ser nomeada como REACT_APP_API_URL, pois a react-scripts só faz a leitura das variáveis que usam esse prefixo.

Como utilizar

Vamos supor uma aplicação que precise de variáveis de ambiente para usar uma API para usar com o Axios. Não se preocupe com o que é axios e o que API, foque em entender a parte das variáveis. Será preciso configurar a porta, a url base e a versão de uma API. Logo, nosso arquivo .env ficaria da seguinte forma:

# Arquivo .env
REACT_APP_API_BASEURL=https://mydomain.com
REACT_APP_API_PORT=8888
REACT_APP_API_VERSION=v2

E agora, para configurar nossa instância do Axios, podemos utilizar nossas variáveis de ambiente:

// Arquivo axios.js, apenas um exemplo
const url = process.env.REACT_APP_API_BASEURL
const port = process.env.REACT_APP_API_PORT
const version = process.env.REACT_APP_API_VERSION

const api = axios.create({
    baseURL: `${url}:${port}/${version}/`
})

export default api;

E pronto. Nossas variáveis de ambiente estão configuradas e prontas para serem utilizadas em toda a aplicação. Porém, ainda temos dois pontos importantes:

Para evitar que seu arquivo .env seja enviado para um repositório remoto, é importante adicioná-lo ao .gitignore,dessa forma:

# Arquivo .gitignore
# ... outros valores
.env

E, para garantir que outras pessoas saberão configurar as variáveis de ambiente, crie um arquivo .env.example, com as variáveis sem valor definido, dessa forma:

# Arquivo .env.example
REACT_APP_API_BASEURL=https://mydomain.com
REACT_APP_API_PORT=8888
REACT_APP_API_VERSION=v2

Considerações

É importante lembrar que variáveis de ambiente configuradas em containers e ambientes cloud(Heroku, Vercel, Netlify, etc) também são reconhecidas, em tempo de build. Agora que você já sabe disso, não vai mais precisar se preocupar em apagar valore sensíveis toda vez que for fazer algum commit.

Gostou deste artigo? Me siga para mais conteúdos como esse!

Minhas redes sociais:

Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽

Nullish Coalescing Operator (??) on Javascript

Matheus dos Reis de Jesus — Tue, 13 Apr 2021 13:04:59 +0000

Cover by Evan Dennis on Unsplash

Summary

Intro
The operator ??
Use case
Considerations

Intro

You may have seen a Javascript piece of code like this before:

const value = actualValue || "defaultValue";

The operator || used above is called "Logic OR", and works this way: If the value at the left of the operator is true, its value will be assigned to the variable value. If it is false, then the variable value will receive the value at the right, "defaultValue".

If you're used to Javascript, you must know that there are various problems with false and true values. Example: "" and 0 are considered false values. Then, if in an algorithm "" and 0 are considered valid values, the operator || wouldn't give the desired result. That's when the Nullish Coalescing operator comes.

The operator `??`

Now that you understand the problem, comes the solution. The Nullish Coalescing operator is represented by the symbols ?? and is used like this:

const value = actualValue ?? "defaultValue";

In this case, if the value of actualValue is null or undefined, the value "defautlValue" will be assigned to the variable value. Otherwise, the value actualValue will be assigned to it.

Use case

Think about this scenario: You're creating a function that evaluates a expression using a coefficient. If the coefficient isn't provided, it will receive a default value, with 0 being valid. As I've said before, the operator || would not be the best for this case. Then, the operator ?? is much more suitable. Check the representation of this problem below:

function calculateResult(x,y,coefficient) { ;
    const c = coefficient ?? 0.5;
    return x + y * c;
}

const result = calculateResult(2,3);
console.log(result) // Output: 3.5 ( 2 + 3 * 0,5 )

The function calculateResult uses the ?? to check if the parameter coefficient is provided. If it is, then the value will be taken. Otherwise, the default coefficient will be 0.5.

Considerations

The case used was a simple example, but the operator ?? can be useful in a lot of situations and assure more reliability to your code.

Enjoyed this article? Follow me for more contents like this one!

Follow me:

Twitter | Instagram | Youtube.

See you on the next article!👋🏽

Operador de Nullish Coalescing (??) em Javascript

Matheus dos Reis de Jesus — Mon, 12 Apr 2021 12:08:06 +0000

Capa por Evan Dennis no Unsplash

Sumário

Introdução
O operador ??
Caso de uso
Considerações

Introdução

Talvez em algum momento você tenha se deparado com um trecho de código em Javascript da seguinte maneira:

const valor = valorReal || "valorPadrão";

O operador || usado acima é chamado de OU lógico, e funciona da seguinte maneira: Se o valor à esquerda do operador for verdadeiro, seu valor será atribuído à variável valor. Se o seu valor for falso, a variável valor receberá o valor à direta, "valorPadrão".

Se você já está habituado com Javascript, deve saber que existem vários problemas com relação a falsidade ou veracidade de valores na linguagem. Exemplo: "" e 0 são considerados valores falsos. Logo, se em um algoritmo "" ou 0 forem valores válidos, o operador || não iria fornecer o resultado necessário. É aí que entra o operador de Coalescência Nula(ou Nullish Coalescing).

O operador `??`

Agora que você já entendeu o problema, vêm a solução. O operador de Coalescência Nula é representado por ?? e utilizado da seguinte forma:

const valor = valorReal ?? "valorPadrão";

Nesse caso, se o valor da variável valorReal for null ou undefined, a variável valor receberá "valorPadrão". Caso contrário, ela receberá o valor de valorReal.

Caso de Uso

Pense no seguinte cenário: Você está fazendo um cálculo que utiliza um coeficiente. Se o coeficiente não for fornecido, ele irá receber um valor padrão, sendo 0 um valor válido. Como comentei, o operador || iria impedir que o 0 fosse utilizado. Nesse caso, o operador ?? se torna muito útil. Confira a representação desse problema abaixo:

function calcularResultado(x,y,coeficiente) { ;
    const c = coeficiente ?? 0.5;
    return x + y * c;
}

const resultado = calculaResultado(2,3);
console.log(resultado) // Saída: 3.5 ( 2 + 3 * 0,5 )

A função calculaResultado usa o ?? para verificar se o parâmetro coeficiente foi passado para a função. Caso tenha sido, seu valor será usado. Se não, o coeficiente padrão será 0.5.

Considerações

O caso que citei for um exemplo simples, mas o operador ?? pode ser útil em muitas situações e garantir uma maior confiabilidade no seu código.

Gostou deste artigo? Me siga para mais conteúdos como esse!

Minhas redes sociais:

Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽

O que preciso saber para aprender React?

Matheus dos Reis de Jesus — Thu, 08 Apr 2021 20:13:06 +0000

Capa por Caspar Camille Rubin no Unsplash

Meu primeiro contato com React, na Semana de Informática da UFV, foi uma experiência traumática. Eu não entendia nada, mesmo sabendo programar. As linhas de código não faziam sentido. Era Redux, React Router, Classes, ComponentDidIsso, ComponentDidAquilo. Levei mais de 1 ano pra ter coragem de tentar aprender novamente.

Pelo que tenho visto no Twitter e em várias comunidades, as dificuldades de outras pessoas são as mesmas que eu tive. Então, para evitar que enfrentem a mesma dificuldade que eu, vamos ao que interessa.

Sumário

HTML e CSS
Javascript
Programação Funcional

HTML e CSS

Parece simples, né? Mas saber HTML e CSS faz muita diferença. Conhecer qual o propósito de cada elemento que pode ser usado num código HTML impacta diretamente na qualidade da sua aplicação. Um HTML e CSS bem construído impactam diretamente na Acessibilidade, SEO, legibilidade e experiência do usuário. Usar divs(ou tables 😬) está longe das melhores práticas.

Onde encontro conteúdo?

Javascript

Esse aqui é indispensável. Quando comecei a aprender React, eu não sabia Javascript, então tive muita dificuldade em entender a sintaxe, funções anônimas, os problemas com tipos e alguns operadores. Se eu soubesse JS antes de tentar aprender React, esse processo certamente teria sido bem mais simples e menos traumático.

Do meu ponto de vista, os principais pontos da linguagem são:

AJAX (Fetch, async/await e Promises)
Spread Operator
Strict equality vs Loose equality
Entender como "undefined" funciona
Object e Array

Se tiver conhecimentos sólidos sobre o que citei, provavelmente você não terá grandes dificuldades no seu aprendizado.

Onde encontro conteúdo?

Programação Funcional

A partir da versão 16.8 o React migrou a criação de componentes para funções, dando o suporte ao controle de estados e todo o ciclo de vida do componente usando funções.

Nas versões anteriores, os componentes eram declarados como classe, o ciclo de vida era gerenciado através de métodos embutidos(componentDidMount,componentDidUpdate, etc) e os estados eram controlados através de atributos e métodos.

Com a nova versão, é possível controlar todo o componente usando apenas funções. Além disso, foi criada também a "Context API", que veio para suprir a necessidade de uso do Redux para controlar estados "globais" em uma aplicação.

Onde encontro conteúdo?

Conclusão

Os 3 tópicos acima não necessariamente cobrem tudo o que você precisa saber para entender como o React funciona, mas eles podem te dar um bom direcionamento para aprender a usar essa biblioteca que revolucionou o desenvolvimento front-end. Boa sorte nos seus estudos!

Gostou deste artigo? Deixe suas reações e me siga em outras redes: Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽

Design: Arte ou Processo?

Matheus dos Reis de Jesus — Thu, 25 Mar 2021 21:32:57 +0000

Capa por UX Indonesia no Unsplash

Recentemente cursei uma disciplina chamada "Visualização de Dados", e, semanalmente, a professora selecionava um conjunto de artigos sobre design, processo criativo e visualização de dados para discutirmos. Gostei tanto de um dos conjuntos de artigos que resolvi escrever sobre eles.

Todos os artigos estão em inglês e foram publicados na Nature Methods. Cada tópico deste artigo está acompanhado do seu respectivo link.

Sumário

Saliência para Relevância
Elementos do Estilo Visual
Narrativa

Saliência para Relevância

Link para o artigo

Este primeiro artigo fala especialmente sobre destacar visualmente uma informação sobre as demais. O autor usa um exemplo bem interessante na figura 2a:

Fonte: https://www.nature.com/articles/nmeth.1762/figures/2

Segundo o autor: Combinar saliência com relevância chama a atenção visual para as informações importantes.

No heat map acima, a intenção era destacar os pontos vermelhos em detrimento dos pontos azuis. Porém, o efeito foi inverso. Os pontos azuis escuro sobressaem aos pontos avermelhados. Logo, o objetivo dessa visualização não foi atingido.

A ideia destacada neste artigo é exatamente a de tentar mostrar relevância através de saliência. Destacar uma informação é muito útil, mas precisa ser eficiente. O uso de cores e figuras deve ser feito com cuidado.

Na figura 2b o autor destaca o problema do uso de figuras em movimento. O formato usado sugere que os conteúdos em textos são relevantes para o slide em questão. Porém, as figuras em movimento do lado esquerdo podem distrair o leitor e prejudicar a compreensão da informação.

Elementos do Estilo Visual

Link para o artigo

Esse artigo fala mais especificamente sobre a construção de elementos visuais e como a escolha dos seus componentes influencia na compreensão do leitor.

O primeiro exemplo que o artigo usa é a figura a seguir:

Fonte: https://www.nature.com/articles/nmeth.2444/figures/1

Segundo o autor: Uma enxurrada de símbolos idênticos desencadeia uma "saciedade semântica", um fenômeno em que a repetição exagerada resulta em uma perda de significado.

O problema nessa imagem é que os elementos tem cores diferentes, tanto os nós quanto as arestas. Logo, o uso de cores não tem significado na imagem. A ausência de legenda também impossibilita a compreensão do que as cores representam. Usar um conjunto limitado de cores e apresentar o significado de cada torna a leitura de elemento visual muito mais fácil.

Fonte: https://www.nature.com/articles/nmeth.2444/figures/2

Segundo o autor: Use a representação mais simples para objetos e omita informações desnecessárias.

O uso de elementos com diferentes formas na figura A, além de dificultar a interpretação, não acrescentam nada em seu significado. A figura B torna a compreensão muito mais fácil, e as informações mais importantes estão de fato em destaque.

Fonte: https://www.nature.com/articles/nmeth.2444/figures/3

Segundo o autor: Objetos que interagem ou que tem significado em comum devem ser formatados de maneira similar, para induzir a intuição.

Mais uma vez, a escolha de formas e cores afetando a compreensão da informação contida em um elemento visual. As imagens a esquerda não induzem uma correlação entre os elementos que deveriam ser similares, já que eles possuem cores diferentes e formatos irregulares. Os itens à direita, diferentemente, sugerem uma relação entre os itens e inclusive possibilitam o destaque de alguns deles.

Narrativa

Link para o artigo

Esse artigo fala a respeito do uso de elementos visuais para contar histórias, também conhecido como "Storytelling". As visualizações desse tipo relacionam eventos durante um intervalo de tempo ou de valores definido.

Fonte: https://www.nature.com/articles/nmeth.2571/figures/1

Segundo o autor: Use agregação para reduzir o detalhe dos dados e enfatizar a mensagem: Existem relativamente de médio intervalo.

Começando em um conjunto dos valores e finalizando em um gráfico de barras, a imagem anterior apresenta o processo de transformação dos dados em uma visualização que transmita uma ideia de maneira mais sucinta, sem precisar de muitas informações visíveis.

Fonte: https://www.nature.com/articles/nmeth.2571/figures/2

Segundo os autores: Uma história adiciona significado e clareza para estatísticas complexas.

Em alguns casos, apenas elementos visuais não são suficientes para apresentar uma informação de maneira clara. Quando se tem estatísticas mais complexas, apresentar uma contextualização do problema/situação pode facilitar a compreensão por parte do leitor.

Conclusão

Depois de tantos exemplos de como o design funciona e os critérios que ele deve obedecer para cumprir seu propósito, o que você acha? Design é apenas uma "arte", fruto da imaginação e criatividade, ou ele é resultado de um processo minucioso que exige conhecimento e dedicação? Ou talvez ambos?

Gostou deste artigo? Deixe suas reações e me siga em outras redes: Twitter | Instagram | Youtube.

Até o próximo artigo!👋🏽

DEV Community: Matheus dos Reis de Jesus

Como programar em Swift no Linux

1. Download da Toolchain

Instalação das dependências

Como executar código em Swift

Como criar um App para iOS em ViewCode

1. Contexto

Sumário

2. Criando o app

3. Removendo o Storyboard

4. ViewCode

4.1. Configurando o ViewCode

4.2. Criando um protocolo ViewCode

4.3. Criando uma View com ViewCode

4.4. Usando a View na ViewController

4.5. Adicionando uma ação ao botão

5. Conclusão

reisdev / viewcode-example-ios

Repositório com o app criando neste artigo:

Como decodificar JSON em Swift

Contexto

Sumário

Leitura do conteúdo JSON

String

Arquivo

Requisição em API

Criação do tipo em Swift

Decodificação

Conclusão

Optional em Swift

Sumário

Introdução

Lidando com Optional

Force unwrapping

Binding opcional

if let

guard let

Unwrapping implícito

Encadeamento opcional

Unwrapping incondicional

Conclusão

Variáveis e Constantes em Swift

Sumário

Introdução

Declarando constantes e variáveis

Constantes

Variáveis

Definindo o tipo

Atribuindo valores

Conclusão

Como escrever códigos mais padronizados?

Sumário

Introdução

O que é Style Guide?

Quem define um guia de estilo?

No que isso vai me ajudar?

Exemplos

Tratamento de Exceção com erros customizados em Swift

Sumário

Criação

Tratamento de Exceção

Considerações

Como usar variáveis de ambiente sem biblioteca em React

Sumário

O que são Variáveis de Ambiente

Como funcionam

Como utilizar

Considerações

Nullish Coalescing Operator (??) on Javascript

Summary

Intro

The operator ??

Use case

Considerations

Operador de Nullish Coalescing (??) em Javascript

Sumário

Introdução

O operador ??

Caso de Uso

Considerações

Lidando com `Optional`

`if let`

`guard let`

The operator `??`

O operador `??`