DEV Community: Tiago Danin

Creating an AI Agent in Claude Code to Control my Smartphone

Tiago Danin — Fri, 22 Aug 2025 19:19:38 +0000

Automating Android app documentation and testing with artificial intelligence

The Initial Challenge

I was facing a specific challenge: I needed to automatically document various flows of an Android application. That's when I started exploring ways to accomplish this process, and one of the tools I decided to test was Claude Code.

Initially, Claude Code didn't adapt very well. However, as an Android developer, during a chat conversation, it was demonstrated how to use ADB commands to simulate user actions like clicks, typing, and other interactions, so that the AI could control my smartphone.

I thought about looking for an MCP (Model Context Protocol) that already implemented this functionality, but I couldn't find any suitable one, so I decided to build my own: Android-Debug-Bridge-MCP.

The Power of ADB UI Automator

One of the most valuable features of ADB is the UI Automator, which returns a detailed XML of the current interface. This makes the use of the adb shell tap x y command much more precise for clicking on specific screen elements, for example, since it shows exactly their positions and the LLM understands the XML format better than an image.

What I needed to organize was:

What types of elements to detect in the interface
How to show the content and position of each element
How to allow Claude Code to execute the correct action at the exact position

Evolving the Agent

After integrating Claude Code with my MCP, I rewrote the agent and gradually improved it until I reached an efficient flow. My AI agent follows a simple but effective pattern:

Visualize the current screen content
Execute a specific action
Repeat the process
Generate a complete test report

Real Example: Testing Stock Pulse App

I'll show how the agent automatically tested the process of adding a stock (NVDA) within an app I helped develop called StockPulse:

Command Used

@agent-app-tester Open br.com.idopterlabs.Tickerapp, add an Nvidia stock to the portfolio, click Save, and I expect the stock's current data to be displayed on the screen.

The agent then executed the entire flow automatically. It created a test folder called tickerapp_nvda_test, opened the StockPulse app, and began its work. First, it captured an initial screenshot showing the empty portfolio screen. Then it navigated to add a new stock by tapping the "+" button and captured the stock selection screen.

Next, the agent selected NVIDIA (NVDA) from the list, verified the stock details were properly displayed, and generated a complete report with all screenshots and results documented.

Final Result

The agent automatically generated:

Organized screenshots
Complete markdown report
Documentation of each step
Success/failure status for each stage

All of this in less than 2 minutes, without manual intervention!

Use Cases and Possibilities

The combination of MCP with Claude Code opens up various possibilities:

Test Automation becomes incredibly powerful with this approach. You can execute automated regression tests for critical flows without any manual intervention, validate interface elements and layouts automatically, and simulate realistic user interactions for usability testing.

Intelligent Documentation is another game-changer. The system can automatically capture organized screenshots for app documentation, create detailed documentation of user journeys within applications, generate technical manuals with step-by-step guides and visual evidence, and even perform periodic monitoring to verify application states.

The possibilities are practically infinite - any need involving automated control of Android devices can benefit from this solution.

Quick Setup

Getting started is straightforward. You'll need ADB installed and configured on your system, an Android device connected or emulator running, and Claude Code properly set up.

To install the MCP, simply run npm install -g android-debug-bridge-mcp in your terminal. Then add it to Claude Code with the command claude mcp add --scope project android-debug-bridge-mcp -- npx android-debug-bridge-mcp.

Next, configure a custom agent with specific prompts for your test cases. You can find my configuration at: app-tester.md

Once everything is set up, you can start executing tests using simple and direct commands to begin automation.

Conclusion

Claude Code, when combined with the right tools and well-structured instructions, demonstrates impressive potential for automation. This experiment represents only the beginning of a broader exploration - there's plenty of room for future improvements.

It's important to recognize that for more complex scenarios, the expertise of a professional QA is still necessary. AI automation complements, but doesn't completely replace, specialized testing knowledge.

Despite the limitations, I confess it was extremely gratifying to develop this solution. It not only met my initial objective of documenting application flows but also opened doors to new automation possibilities that previously seemed impractical.

The project will continue evolving, and I hope to bring new features in the future.

Thanks to my friend Iago Cavalcante for reviewing the translation and introducing me to Claude Code.

React 18 - Uma nova maneira de usar o useState (Processamento em lote)

Tiago Danin — Wed, 03 Aug 2022 00:11:00 +0000

O que mondou no React 18?

Uma das maiores mudanças do React 17 para o React 18 foi o processamento dos estados serem feitos em lote por padrão, é com isso é preciso ficar atento ao novo funcionamento na hora de migrar uma aplicação.

O que é processamento em lote (Batch)?

Imagine uma esteira, que fábrica um equipamento e cada braço mecânico colocar um tipo de peça, mas o mais importante em nenhum momento essa esteira fica desligada enquanto tá produzindo ou pular uma etapa. O processamento em lote, mais conhecido também como Batch, é exatamente isso, temos uma entrada de dados e todas as tarefas são executadas em ordem sem pular passos, e no final tem um resultado provindo de todos os passos realizadas.

Veja mais em pt.wikipedia.org/wiki/Processamento_em_lote

Novo ciclo de atualização de estados

Para entender melhor, vamos ao um exemplo, abaixo há uma aplicação em React 17, no qual pegar uma lista de super-heróis e planetas do Star Wars usando o SWAPI e mostrar o seu total na tela.

Podemos observar que há uma tarefa que vai executar uma chamada da função fetchData e posteriormente vai obter a lista de super-heróis e planetas e atualizar dois estados (heros e planets).
Agora se criamos um observado para os dois estados, e ele atualizar a soma do total das duas lista.

Dessa modo toda vez que houve uma alteração em um dos dois estados, o total vai ser atualizado na tela.

Se olhamos o Console da aplicação, ou mesmo olhamos em câmera lenta para tela vamos nota que há três atualizações dos dados do total na tela.

O primeiro é o estado inicial da aplicação após carregada.
O segundo é por causa da mudança do estado do heros.
O terceiro é por causa da mudança do estado do planets.

Podemos concluir que o processamos não foi feito em Batch, pois antes de terminar a tarefa da função fetchData tivemos o disparo de saída de eventos (troca de estados) mais de uma vez.

Agora vamos olhar a mesma aplicação, só que dessa vez rodando com React 18.

Vamos olhar novamente o Console da aplicação

O primeiro é o estado inicial da aplicação após carregada.
O segundo é por causa da mudança do estado do heros e planets. Mas só um evento é disparado, por sua vez apenas uma atualização da tela é realizada.

Desse modo os invocadores de eventos, timeouts e operações assíncronas agora no React 18 atualizam em lotes os estados.

Quais as vantagens e desvantagens

Uma desvantagem é que as aplicações já existente depois de migrado precisam de um cuidado para verificar se está tudo funcionando normalmente, já que pode ter impactos em seu fluxo de observadores. Fora isso o Automatic Batching melhorar muito o desempenho da aplicação uma vez que as atualizações vão ocorrer com menos frequências e vai ser mais fácil de gerência a atualização dos estados, assim como é feito no Redux ou Flutter, onde é possível usar Batch ou atualização imediata.

Como usar novamente a atualização imediata

Podemos usar o flushSync do react-dom para força a atualização, veja no exemplo abaixo.

Com isso podemos reproduzir o mesmo comportamento que tínhamos no React 17

Veja mais em reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching

Source code:

React 17 https://codesandbox.io/s/react-17-status-y63xcn
React 18 https://codesandbox.io/s/react-18-status-5e16rc
React 18 com FlushSync https://codesandbox.io/s/react-18-status-flushsync-0bp0vq

Criando aplicativos para Android Wear OS com Jetpack Compose

Tiago Danin — Sat, 25 Jun 2022 22:33:00 +0000

Jetpack Compose no Wear OS

A Google recentemente anunciou na Google I/O o beta do Jetpack Compose para o Wear OS, a versão do Android para Smartwatch. Um dos principais foco do Compose é a criação de interface de maneira rápida usando sintaxe declarativa, semelhante ao que há no iOS com SwiftUI, hoje demostrarei a criação de um simples aplicativo em poucos minutos utilizado o que há de mais moderno para desenvolvimento de aplicativos para Android.

O Aplicativo

O aplicativo que vamos desenvolver consiste em controlar a quantidade de copos de água você tomou ao logo do dia, para isso vamos precisar da versão mais recente do Android Studio, no meu caso estou utilizado o Android Studio Electric Eel (2022.1.1) Canary 5

Iniciando um novo projeto

Com Android Studio aberto vamos em criar um novo projeto

Na lista de template vai ter um chamando Wear OS >> Empty Compose Activity, selecionaremos e vamos continuar.

O próximo passo é configurar o nosso app com nome, id, localização do projeto, e versão mínima do Android Wear OS. Para esse exemplo utilizaremos a API Level 30, conforme na imagem acima.

Vai ser gerado as seguintes arquivos e pastas, a customização no Compose não acontecer via os arquivos de resources (RES) em formato XML, em vez disso para diminuir a curva de aprendizagem boa parte do app é feito usado Kotlin, como a personalização do app que agora fica localizado em /theme, por enquanto vamos apenas trocar as cores.

package com.tiagodanin.waterwearos.presentation.theme

import ...

val Blue700 = Color(0xFF1976d2)
val Blue900 = Color(0xFF0d47a1)
val DeepPurple200 = Color(0xFFb39ddb)
val DeepPurple400 = Color(0xFF512da8)

internal val wearColorPalette: Colors = Colors(
    primary = Blue700,
    primaryVariant = Blue900,
    secondary = DeepPurple200,
    secondaryVariant = DeepPurple400,
    error = Color.Red,
    onPrimary = Color.Black,
    onSecondary = Color.Black,
    onError = Color.Black
)

Para isso basta informar na referência da variável primary, por exemplo, a nova cor que deseja. Nesse caso vou usar um Azul pois remete a água.

OBS: A função Color é a representação da cor em ARGB, exemplo vermelho (FFFF0000), é representado como Color(0xFFFF0000).

Criando a Tela

A tela principal já é criada por padrão ele fica localizando no MainActivity.kt, se rodamos o app no emulador (ou dispositivo físico) vamos ter a seguinte tela:

O primeiro passo agora é criarmos a tela principal do nosso jeito, mas antes de adicionarmos elementos relacionados ao nosso aplicativo, precisamos mostra elemento comuns do sistema, nos smartphones temos a StatusBar (onde mostrar a hora) e NavigationBar, no Wear OS também temos algo semelhante que pode mostrar horas, indicador de página entre outros aspectos, ele é conhecido como Scaffold:

@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun WearApp() {
    WaterWearOSTheme {
        Scaffold(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background),
            timeText = {
                TimeText()
            },
        ) {}
    }
}

Nosso Layout principal é montado da seguinte maneira:

WaterWearOSTheme { UI Compose } é o nosso utilitário para aplicar o tema em todos os elementos de UI que tem dentro dele
Scaffold(Props) { UI Compose} criar uma estrutura base de layout
- modifier: Modifier Modificadores de layout e elementos comuns
- timeText = { UI Compose } informar qual relógio será mostrado no topo
TimeText() É layout padrão do relógio que fica no topo

Uma das vantagens do Jetpack Compose é a fácil customização de elementos já existentes, uma das maneiras mais simples de fazer isso é usando os modificadores (Modifier) que estão disponíveis na maioria dos componentes, como no caso do Scaffold, onde foi definido que ele ocuparia o máximo da tela (.fillMaxSize()) e teria um fundo na cor preta (.background(MaterialTheme.colors.background)). O Resultado que vamos obter é:

Podemos prosseguir agora o app, vamos criar uma nova função de Compose para uma barra de progresso de quantidade de água tomada no dia, mas antes é preciso importar ela dentro do corpo do Scaffold.

@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun WearApp() {
    WaterWearOSTheme {
        Scaffold(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background),
            timeText = {
                TimeText()
            },
        ) {
            ProgressIndicatorWater() // Corpo
        }
    }
}

@Composable
fun ProgressIndicatorWater() {} // Nova UI Compose

Como já é de esperado há uma maneira de fazer a barra de progresso usando os componentes padrão do Compose, assim como no Jetpack Compose para smartphone, o nome dela é [CircularProgressIndicator](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#CircularProgressIndicator(kotlin.Float,androidx.compose.ui.Modifier,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp), e o que diferencia no Wear são poucas coisas, uma delas e a disposição dos elementos sobre a tela.

Vamos olhar uma parte da assinatura desse componente que estamos usando, no momento estamos da seguinte maneira o codigo

@Composable
fun ProgressIndicatorWater() {
    CircularProgressIndicator(
        startAngle = 360f,
        endAngle = 0f,
        progress = 0.5f,
        strokeWidth = 5.dp,
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 10.dp)
    )
}

O que precisamos para criar a nossa barra é saber onde posicionar, para isso precisamos entender algumas das propriedades da nossa tela.

startAngle Ângulo de começo da barra
endAngle Ângulo de fim da barra
progress O progresso total, onde 1.0f é 100% e 0.0f é 0%

A disposição dos ângulos é dada da seguinte maneira:

Com base nisso podemos finalizar a barra antes do texto da hora, configurando da seguinte maneira startAngle = 295f, endAngle = 245f:

Estamos perto do final, agora precisamos adicionar informações (litros tomados) e ação (beber água) para cada copo de água, para isso vamos fazer uma nova função de UI Compose e usar um elemento de layout flexível para alinhamento:

Os três principais elementos são:

Box: elementos dentro do outros / Sobrepostos
Column: Um em baixo do outro (Coluna)
Row: Um do lado do outro (Linha)

Queremos a seguinte estrutura no ProgressIndicatorWater

Para isso podemos usar o Box.

@Composable
fun ProgressIndicatorWater() {
    // Box para centralizar
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        CircularProgressIndicator(
            startAngle = 295f,
            endAngle = 245f,
            progress = 0.5f,
            strokeWidth = 5.dp,
            modifier = Modifier
                .fillMaxSize()
                .padding(all = 10.dp)
        )
        InfoWater() // Importação do novo Compose
    }
}

@Composable
fun InfoWater() {}

Já dentro do InfoWater precisamos de algo como Column

@Composable
fun InfoWater() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {}
}

E por fim adicionaremos os dois elementos de composição que planejavamos, nada diferente do que já é no Android Mobile com Jetpack Compose. O Botão e o Texto.

@Composable
fun InfoWater() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        // Nosso texto
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 30.dp),
            textAlign = TextAlign.Center,
            color = MaterialTheme.colors.primary,
            text = "Você já bebeu 1 litro de água hoje" // Texto
        )

        // Nosso botão
        Button(
            modifier = Modifier.padding(top = 5.dp),
            onClick = {
                      // Ação do click
            },
        ) {
            Icon(
                painter = painterResource(id = R.drawable.cup_water),
                contentDescription = "Cup Water",
                modifier = Modifier
                    .size(ButtonDefaults.DefaultButtonSize)
                    .wrapContentSize(align = Alignment.Center),
            )
        }
    }
}

O ícone em questão que importei não é padrão do kit de desenvolvimento, você pode baixa ele por fora, eu utilizo o Material Design Icons Community.

Depois de feito o donwload do SVG dele, no menu de opções da pasta res, selecione:

Lembrando de que para importar você pode usar o mesmo nome, exemplo R.drawable.[nome].

Lógica

É por fim a parte lógica, criaremos um estado para quantidade de litros:
private val count: MutableState<Float> = mutableStateOf(0f)

e vamos modificar a nossa barra de progresso para levar em conta que 3 litros é o ideal.

@Composable
fun ProgressIndicatorWater() {
    val recomedByDay = 3.0f // 3 Litros
    // Progresso = Todal do dia / Recomendação
    val progressOfDay: Float = count.value / recomedByDay

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        CircularProgressIndicator(
            startAngle = 295f,
            endAngle = 245f,
            progress = progressOfDay, // Valor do progresso
            strokeWidth = 5.dp,
            modifier = Modifier
                .fillMaxSize()
                .padding(all = 10.dp)
        )
        InfoWater()
    }
}

O mesmo com nosso texto e botão, vamos mostrar a quantidade e no evento do clique do botão considera 500ml água ingerida.

@Composable
fun InfoWater() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 30.dp),
            textAlign = TextAlign.Center,
            color = MaterialTheme.colors.primary,
            text = "Você já bebeu ${count.value} litro de água hoje" // Resultado
        )
        Button(
            modifier = Modifier.padding(top = 5.dp),
            onClick = { count.value += 0.5f }, // Ação
        ) {
            Icon(
                painter = painterResource(id = R.drawable.cup_water),
                contentDescription = "airplane",
                modifier = Modifier
                    .size(ButtonDefaults.DefaultButtonSize)
                    .wrapContentSize(align = Alignment.Center),
            )
        }
    }
}

Se abrimos o app novamente vamos o seguinte resultado

No desenvolvimento desse app foram usados alguns dos componentes disponíveis do Jetpack Compose para Wear OS, no link abaixo você pode conferir diversos outros UI Compose:

developer.android.com/training/wearables/compose

Você pode seguir as implementações adicionado novas funcionalidade como persitencia de dados😉

Link do repositório: Github.com/TiagoDanin/WearOS-Count-Water-App

Arrow Function Vs Normal Function

Tiago Danin — Sun, 07 Apr 2019 22:15:31 +0000

O que é Arrow Function ?

Uma alternativa mais simples para criar funções, com algumas características diferente da função regular.

// Syntax
const soma = (a, b) => a + b
const mult = (a, b) => {
    return a * b
}

This (Contexto)

Seu contexto por padrão é o contexto global. Veja um exemplo de comparação:

const a = () => this === object
const b = function() {
    return this === object
}

const object = {
    a,
    b
}

console.log(object.a()) //false
console.log(object.b()) //true

No Chrome o contexto padrão é o window, logo:

const a = () => this === window
...
console.log(object.a()) //true

Arguments (Argumentos)

Não há Arguments, em alguns casos como no Node.Js ele pode recebe os argumentos globais.

const a = () => arguments //Uncaught ReferenceError: arguments is not defined
console.log(a(true))

Em uma regular função teríamos uma saída: { '0': true }

Constructor (Construtor)

Sem Constructor.

const a = () => true
console.log(new a()) //TypeError: a is not a constructor

Nome da Função

Em Arrow, o nome é o identificado que está recebendo a função. Numa regular podemos define o nome de uma função, como no exemplo abaixo, eu coloquei o nome sendo d.

const a = () => true
const b = function () { return true }
const c = function d () { return true}

console.log(a.name) //a
console.log(b.name) //b
console.log(c.name) //d

Retorno de Objeto

const casaA = () => {cozinha: true}
const casaB = () => ({cozinha: true})
const casaC = function () {
    return {cozinha: true}
}


console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }
console.log(casaC()) //{ cozinha: true }

Note: A casaA retorna undefined pois não há retorno na função. Não viu isso ? Vou rescrever casaA e casaB no modo normal:

const casaA = function () {
    {cozinha: true}
}
const casaB = function () {
    return {cozinha: true}
}

console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }

Sacou? Por isso usamos o parênteses no primeiro exemplo, casaB.

Veja mais em MDN: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Lista - Analisadores de Perfil no GitHub

Tiago Danin — Sun, 07 Apr 2019 16:21:43 +0000

Abaixo os links para alguns analisadores de perfil no GitHub:

Usando PulseAudio no HDMI

Tiago Danin — Sun, 07 Apr 2019 16:07:37 +0000

Usando PulseAudio no HDMI

Depois que migre para o PulseAudio tive um problema ao tenta usar o HDMI do notebook. Jogos, videos e musicas não estavam reproduzindo na saída do HDMI.

SOLUÇÃO

Instalar o pavucontrol.

$ pacman -S pavucontrol

Depois podemos abrir o pavucontrol, navegue até onde tem seu dispositivo HDMI e clique no botão ✅.

Agora ele é o dispositivo padrão de saída de audio. :)

Lista de apps — Automatizando fluxo de trabalho no GitHub

Tiago Danin — Sun, 07 Apr 2019 16:02:41 +0000

Uma das melhores coisa de usar o GitHub é a quantidade de integrações disponíveis, hoje eu separei alguma das que eu mais uso:

Travis CI: Testes & Build
Crowdin: Tradução
ImgBot: Otimização de Imagens
Codacy: Analise de Código
GitHub (Telegram): Notificação de Issues/PR’s & Commits
Renovate: Atualização de Dependências
PR Triage: Organização de Issues/PR’s
Snyk: Verificação de Vulnerabilidade
CuboHub: Gerado de Página Estáticas
WIP: Proteção de Branch & Organização de PR’s

O melhor plugin de Auto Complete para ZSH

Tiago Danin — Sun, 07 Apr 2019 15:58:23 +0000

Uma das maiores maravilhas de usar o ZSH, é sua flexibilidade de customização, tendo uma grande quantidade de plugins desenvolvido por usuários.

Em torno de um ano atrás (em 2017) eu achei o melhor plugin, o zsh-autosuggestions, sua principal característica é a exibição de comandos digitados anteriormente em forma de uma cor “cinzenta silenciada”.

Assim como os editores de código como Atom e Sublime, usando a tecla “tab” você consegue completa a sequencia de caracteres, já existente no histórico do arquivo, em nosso caso séria do “zhistory”. O aumento de produtividade é perceptivo nos primeiros dias.

O perfil perfeito no GitHub

Tiago Danin — Sun, 07 Apr 2019 15:53:14 +0000

Vou dar algumas dicas de como criar um perfil apresentável no GitHub.

Faça parte de comunidades open source e contribua para elas. Os melhores projetos para fazer contribuição são aqueles que você usar ou já está familiarizado com as ferramentas, pacotes, aplicativos e até mesmo jogos.
Tenha repositórios organizados.
Não uso o mesmo repositório para dois guarda dois projetos diferentes.
Crie um README, ele tem que ter minimo a descrição do software e instruções para instalações e como fazer o seu uso.
Tenha uma padrão universal de organização dos tópicos de seu README (Você vai usar eles em outros projetos como ponto de partida).
Para repositórios com o arquivo "package.json", recomendo usar o Package-Json-to-Readme ou Gen-README como ponto de partida do README.
Faça commits que descrever a modificação realizada (Nada como "Update X.js" ou "up").
Escolha uma licença, o site escolhaumalicenca.com.br pode ajuda você nisso.
Não coloque muitos arquivos na raiz, o ideal seria você usar subdiretórios para organizar os arquivos.
Use os "badges" para mostrar status do projeto. Há vários desses no site shields.io.
Sempre que possível crie testes.
Use ferramentas de CI (Continuar integração), para fazer build e roda testes. Recomendo usar o Travis CI a integração dele com GitHub é perfeita e ainda tem "badges"
Tenha um site para seu projeto, assim fica mais fácil de acha ele fora do GitHub. Caso não queira ter o trabalho de criar um do zero use o GitHub Pages.
Separe seus forks em uma organização. Dica: Você pode manter eles sempre atualizados usar o bot Pull.
Não faça gambiarras :), lembre-se que o mundo todo vai ver seu código.
Evite demorar muito responder issue ou pull requests.
Tenha foto de perfil apresentável e uma rápida descrição.

Outras sugestões em github.com/training-center/forum/issues/23.

Construindo meu novo site com UIKit, Jus e CuboHub

Tiago Danin — Sun, 07 Apr 2019 15:44:12 +0000

Construindo meu novo site com UIKit, Jus e CuboHub

Um poucos sobre as três ferramentas.

Jus é uma incrível framework que permite em pouco tempo construir um site funcionar de modo semelhante ao Jekyll, só que com um sistema mais fácil de usar e eu gosto do jeito que ele trabalha com os modelos de paginas.

Já o UIKit para min é “o novo Bootstrap”. Você tem os componentes com um padrão bem simples e limpo.

Crie o CuboHub para atualizar os sites dos meus projetos de forma automática.

O começo!

Bom meu antigo website usava um tema que baixei na internet e fiz algumas modificações nele. Depois de um tempo a quantidade de projetos aumentaram e eu comecei a ter problemas de compatibilidade em alguns dispositivos, também tive dificuldades para manter as páginas sempre atualizadas.

Dei o primeiro passo, comecei a criar um gerador para isso, chamado de CuboHub disponível no Github: https://github.com/CuboHub. A página é atualizada toda fez que tem uma nova modificação no repositório. Em seguida eu comecei a planeja meu novo website encontrei as ferramentas certas para o trabalho UIKit e Jus, com o layout em minha cabeça eu fui capaz de executar esse projeto em dois dias. O resultados você pode ver aqui tiagodanin.github.io.

PS: Jus usar o lobars, uma ferramenta incrível!

Vantagens

Jus

Diversos formatados de arquivos suportados (é realmente incrível a quantidade).
Fácil de usar.
URLs limpas.
Suportado em GitHub Pages.
Muitas opções/funções para fazer modelo de página.

UIKit

CSS limpo.
Responsive web design.
Suporte para plataformas mobiles.
RTL suporte.
Usar prefixo “uk-” para tudo. :) Sem conflito com seu css.

CuboHub

Eu sou o desenvolvedor :v.
Acompanhar seus commits.
Fácil de configurar.

GitHub vs Outros

Tiago Danin — Sun, 07 Apr 2019 15:36:15 +0000

Um grande números de desenvolvedores estão migrando para outros serviços, devido recente aquisição do GitHub pela Microsoft. No entanto não houve mudanças e o GitHub continuar sendo o melhor (Minha opinião), logo fiz uma lista abaixo de coisas que muitos serviços de hospedagem de projetos em Git não tem:

Email confidencial.
Usar sua conta para fazer login em outros site (Exemplos GitLab, Crowdin, Rocket.Chat e etc).
Design organizado e bonito.
Code Owners (Melhor coisa para projeto grande).
IPv6 ❤.
Suporte ao GIT LFS
Notificações (Novos comentários, pull requests, versões e etc).
Uptime alto dos servidores.
API limpa e fácil de usar (Ainda há dois projetos que tornam isso mais incrível. Octokit e Probot).
Integração com Deploy/CLI diretamente do Github com seu provedores de hospedagem: Amazon, Azure, Heroku, TravisCI, Google Cloud e etc.
Aquivos de suporte (Guia de contribuição, Documentação, Templante para issue e pull requests).
Reações nos comentários.
SEO Otimizado (Seu projeto aberto é facilmente indexado e achado nos motores de busca e rede sócias).
Pesquisar, também há suporte para regras de pesquisar de nome de aquivos/conteúdos e também consegue fazer pesquisar de códigos, usuários e tags.
Sistema de revisão de diff consegue acha funções modificadas.
Muitos serviços (Ex. Hospedagem) oferecem suporte a clona um repositório do Github com um simples clique.
Marketplace (Tudo qualquer tipo de integração com seu projeto você acha na loja, e boa parte delas são grátis para projeto de código aberto).
Drag e drop de tarefas.
Explore (Uma página que mostrar os principais projetos em destaque e desenvolvedores).
GitHub Classroom (Ajuda professore e alunos no controle de repositórios escolares).
É 100% grátis para estudantes.
Também é conhecido com "Facebook dos desenvolvedores" (Você pode acompanha projeto que gosta, pessoas e fornecer seu feedback).
Usuários também usam (Um exemplo disso é o repositório do Telegram Desktop, uma parte dos issues são feitos por pessoas sem relação com TI).
Quantidade de clientes e desenvolvedores ❤ usando GitHub.
Estáticas de projeto.
Status :)

Mesmo assim você tá querendo migrar? Eu recomendo usar o Gogs ou Gitea.

Resolvendo erro do wine não fazer conexões SSL

Tiago Danin — Sun, 07 Apr 2019 15:25:26 +0000

Recentemente eu sair do Arch puro para o Manjaro… E fui fazer a instalação de programas que eu uso, como o wine.

Depois de execultar um sudo pacman -S wine no terminal, e abrir o wine. Encontrei um problema, ele não fazia conexões SSL nos aplicativos. Hoje eu verificando o log com calma achei isso:

004f:err:winediag:schan_imp_init Failed to load libgnutls, secure connections will not be available.
004f:err:winediag:SECUR32_initNTLMSP ntlm_auth was not found or is outdated. Make sure that ntlm_auth >= 3.0.25 is in your path. Usually, you can find it in the winbind package of your distribution.

A solução para o problema é bem simples, basta fazer a instalação dos seguintes pacotes: ‘lib32-gnutls gnutls`.

Agora basta fazer reboot no wine e vai tá funcionado normalmente.