DEV Community: Ivan

Building Progressive Web Apps with Quasar Framework: A Complete Guide to Offline-First Development

Ivan — Wed, 10 Sep 2025 14:35:22 +0000

In today's mobile-first world, users expect applications to work seamlessly regardless of network conditions. Progressive Web Apps (PWAs) bridge the gap between web and native applications, offering app-like experiences with the reach of the web.
The Challenge
How can we create web applications that:

Work offline without losing functionality
Can be installed like native apps
Provide fast, responsive user experiences
Cache resources intelligently

The Solution: Quasar Framework + PWA
I've created a demonstration project that showcases these capabilities using Quasar Framework (Vue.js) in PWA mode. The application consumes the REST Countries API to display country information including names, populations, regions, and flags.

Network-Independent Functionality

Full application functionality without internet connection
Previously loaded data remains accessible
Smooth user experience regardless of connectivity

Technical Stack

Vue.js 3 + Quasar Framework for the frontend
Axios for API consumption
Workbox for service worker and offline caching
REST Countries API as the data source

Why This Matters for Business
User Experience Benefits:

Increased Engagement: Users can access content even offline
Better Performance: Cached resources load instantly
Mobile-First: Installable apps increase user retention
Reliability: No more "No Internet" error pages

Development Benefits:

Framework Flexibility: Quasar provides unified codebase for web, mobile, and desktop
Proven Technologies: Built on Vue.js ecosystem
Production Ready: Easy deployment and maintenance

Try It Yourself
The complete source code is available on GitHub, including:

Full implementation details
Setup and deployment instructions
Testing strategies for offline functionality

Repository: https://github.com/ivanrochacardoso/quasar-pwa-countries
Live Demo: https://siglobal.com.br/paises/

Key Takeaway
PWAs represent the future of web development, combining the best aspects of web and native applications. With frameworks like Quasar, implementing offline-first functionality has never been more accessible.
The investment in PWA technology pays dividends in user satisfaction, engagement metrics, and overall application reliability. As network conditions continue to vary globally, offline-capable applications become not just nice-to-have features, but essential requirements.

Transformando áudios em texto com Python

Ivan — Fri, 22 Aug 2025 12:05:05 +0000

História real: Semana passada, um cliente me enviou 12 áudios do WhatsApp com especificações do projeto. Escutar tudo várias vezes para fazer as anotações me tomou horas. Sem falar que o transcritor nativo do WA demora, e nem sempre disponivel para o idioma.
A transcrição manual ou de sites de terceiros podem representar riscos a privacidade.
Pensamento imediato: "Deve ter uma forma de automatizar isso!"
E tinha! Em algumas horas de desenvolvimento, criei um script Python que:

Pega qualquer áudio do WhatsApp (.ogg)
Converte e transcreve automaticamente
Funciona online (mais preciso) ou offline (privacidade total)
Processa múltiplos arquivos de uma vez

O que começou como uma necessidade virou uma ferramenta que pode ajudar muita gente!
Casos de uso que imagino:

Profissionais que recebem briefings por áudio
Pesquisadores transcrevendo entrevistas
Equipes documentando reuniões informais
Estudantes convertendo aulas gravadas
Código 100% aberto no GitHub: https://github.com/ivanrochacardoso/audio-transcriber

Quem mais já passou por essa situação? Conta aí nos comentários!

Como a IA Pode Acelerar Sua Produtividade em Qualquer Aplicação

Ivan — Mon, 11 Aug 2025 20:03:07 +0000

Apresentando o Kai:

Imagine poder ter um assistente de IA disponível em qualquer lugar do seu computador - seja no WhatsApp, Gmail, Word, Slack, ou qualquer outra aplicação. Não como uma extensão específica, mas como uma ferramenta universal que funciona em todo o sistema.

Foi exatamente isso que criei: o Kai (Tecla AI) - uma solução que democratiza o acesso à inteligência artificial no dia a dia de trabalho.

💡 Como Surgiu a Ideia

Como desenvolvedor e profissional que trabalha intensivamente com texto, sempre me incomodei com a fragmentação das ferramentas de IA. ChatGPT em uma aba, Claude em outra, copiar e colar constantemente... Não muito produtivo.

A pergunta era simples: "E se eu pudesse acessar a IA diretamente onde estou escrevendo?"

A Solução: Simplicidade Extrema

O Kai funciona de forma incrivelmente simples:

Você está escrevendo em qualquer aplicação
Digite: :pergunta sua dúvida aqui/
Instantaneamente o texto é inserido com a resposta da IA

Exemplos reais de uso:

No email corporativo:

:pergunta escreva um email profissional agradecendo o cliente pelo feedback/

No WhatsApp:

:pergunta como explicar machine learning para uma criança/

No Excel:

:pergunta fórmula para calcular crescimento percentual entre duas células/

No Word:

:pergunta melhore este parágrafo mantendo o tom profissional/

Por Que Isso Importa?

Elimina Friction

Sem trocas de abas, sem copy-paste, sem quebrar o fluxo de trabalho. A IA está onde você precisa, quando você precisa.

Universal

Funciona em qualquer aplicação - não importa se é browser, desktop, mobile emulator, terminal. Se você consegue digitar, consegue usar IA.

Produtividade Real

Transformei tarefas de minutos em segundos. Respostas de email, correções de texto, explicações técnicas, traduções - tudo instantâneo.

A Tecnologia Por Trás (Sem Complicação)

Construído em Rust - uma linguagem moderna e segura - o Kai é:

Leve: Usa pouquíssimos recursos do sistema
Rápido: Respostas em segundos
Seguro: Roda localmente, só envia suas perguntas para a IA
Multiplataforma: Windows, Mac, Linux

Usei a API do OpenRouter, que oferece acesso a múltiplos modelos de IA (GPT, Claude, Llama, etc.) com preços acessíveis. Porém pode ser facilmente adaptada para outras APIs de outras plataformas.

Impacto no Orçamento com API

Diferente de assinaturas mensais caras, você paga apenas pelo que usa:

Consulta simples: ~R$ 0,01
Texto longo: ~R$ 0,05
Uso médio mensal: R$ 10-70

Muito mais econômico que múltiplas assinaturas de IA.

Casos de sugestão de uso

Para Professores:

Preparação de questões para provas e atividades
Feedback construtivo para pais sobre desempenho dos alunos
Adaptação de conteúdo para diferentes níveis de aprendizado
Ideias criativas para explicar conceitos complexos
Comunicados para pais sobre eventos e projetos

Para Coordenadores Pedagógicos:

Planos de formação continuada para professores
Projetos interdisciplinares e cronogramas de atividades
Estratégias para melhorar engajamento dos alunos
Adaptações curriculares para necessidades especiais
Orientações para professores com dificuldades

Para Gerentes:

Rascunhos de atas de reunião
Emails de feedback para equipe
Resumos de documentos longos

Para Vendedores:

Propostas personalizadas instantâneas
Respostas para objeções comuns
Follow-ups automatizados

Para Criadores de Conteúdo:

Ideias para posts
Correção de textos
Adaptação de tom e linguagem

Para Estudantes/Pesquisadores:

Explicações de conceitos complexos
Resumos de artigos
Ajuda com redação

O Futuro é Assistido por IA

Acredito que estamos no início de uma revolução onde a IA não será um "produto separado", mas uma camada invisível que melhora tudo que fazemos.

O Kai é minha contribuição para esse futuro - onde ter um assistente inteligente seja tão natural quanto usar corretor ortográfico.

Disponível Gratuitamente

Como acredito no poder da comunidade open-source, disponibilizei o Kai no GitHub para que qualquer pessoa possa usar, modificar e contribuir.

** GitHub**: https://github.com/ivanrochacardoso/kai

É meu presente para a comunidade tech brasileira. Use, modifique, melhore!

Reflexão Final

Vivemos na era da IA, mas ainda estamos presos em interfaces de décadas passadas. Ferramentas como o Kai são apenas o começo de como podemos integrar inteligência artificial de forma natural no nosso fluxo de trabalho.

A pergunta não é "se" a IA vai transformar como trabalhamos, mas "como" e "quando".

Com o Kai, esse "quando" é agora.

E você, como imagina a IA integrada ao seu dia a dia? Que tarefas repetitivas gostaria de automatizar?

Compartilhe suas ideias nos comentários! 👇

InteligenciaArtificial #Produtividade #OpenSource #Inovacao #TecnologiaBrasil #Rust #Automacao

Monitor de Conexões dashboard

Ivan — Sat, 26 Jul 2025 11:26:14 +0000

Monitoramento de Conexões de Rede com Node.js, PHP e SQLite

Se você gerencia um servidor, sabe como é importante monitorar as conexões de rede para identificar acessos suspeitos ou anormais. Pensando nisso, desenvolvi um microserviço simples e funcional para mapear conexões ativas, exibir geolocalizações e permitir bloqueios diretamente via interface web. Tudo com tecnologias leves: Node.js, PHP e SQLite.

O que esse projeto faz?

Um dashboard web para visualizar conexões ativas (IPs, portas, localização geográfica).
Um mapa interativo com os IPs conectados.
Ação rápida para bloquear/desbloquear IPs usando iptables.
Cache local das geolocalizações com SQLite para performance.
Backend seguro, sem expor o Node.js para a internet.

Arquitetura

Backend (Node.js):

Usa netstat ou ss para coletar as conexões ativas.
Envia esses dados para a interface via API local (http://127.0.0.1:3033).
Usa ip-api.com para obter geolocalização dos IPs, salvando os resultados em cache (ip_cache.sqlite).
Bloqueia/desbloqueia IPs com iptables.

Frontend (PHP):

Um proxy leve usando cURL, que consome as rotas do backend local.
Interface em HTML/CSS/JS servida via index.php e mapa.php.
Sem problemas de CORS e com total isolamento entre frontend e backend.

Como usar

1. Instale as dependências

npm install

2. Inicie o serviço

node index.js

O serviço ficará ouvindo em http://127.0.0.1:3033.

3. Configure seu servidor web

Aponte a raiz do Apache ou Nginx para o diretório public/ do projeto.

Certifique-se de que o PHP tenha a extensão curl habilitada.

4. Acesse via navegador

http://localhost/        # Ou o IP do seu servidor

Principais arquivos

index.js: Serviço Node.js que coordena as conexões, IPs e ações.
mapa.php: Interface gráfica com mapa interativo.
ip_cache.sqlite: Base local de IPs e geolocalizações.
package.json: Dependências e descrição do projeto.

Requisitos do ambiente

Node.js 16+
PHP com curl
Ferramentas: netstat ou ss, iptables
SQLite

Exemplo de visualização

A interface mostra algo assim:

IP: 203.0.113.42
Localização: 🇩🇪 Frankfurt, DE
Status: 🔓 ou 🔒 (bloqueado)
Ações: botão para bloquear/desbloquear diretamente

🔐 Segurança

O backend Node.js não é exposto publicamente. Todo acesso acontece via proxy PHP, o que reduz vetores de ataque e elimina problemas de CORS.

Se você precisa de uma solução leve, funcional e extensível para monitorar conexões no seu VPS, esse projeto pode te ajudar. O código está disponível para personalização e pode ser facilmente expandido com logs, alertas, ou até integração com Telegram ou n8n.

🔗 Repositório: https://github.com/ivanrochacardoso/ip-map-dashboard

Feedbacks e PRs são bem-vindos!

Build a Microservice to Monitor SSL

Ivan — Fri, 25 Jul 2025 20:48:07 +0000

Monitor SSL Certificates (and Get Alerts Automatically)

If you manage websites or deal with infrastructure, you know that forgetting to renew an SSL certificate can cause serious trouble: downtime, security warnings, and loss of trust.

To solve this, I built a lightweight microservice in Node.js that checks the SSL validity of any domain — and can be fully automated using n8n.

What is this microservice?

It’s a simple HTTP API with one endpoint:

GET /check?host=yourdomain.com

It returns the SSL certificate status:

{
  "domain": "yourdomain.com",
  "valid": true,
  "expires_on": "2025-07-10T12:00:00.000Z",
  "days_remaining": 25
}

If the domain is invalid or unreachable:

{
  "domain": "invalidsite.com",
  "valid": false,
  "error": "getaddrinfo ENOTFOUND invalidsite.com"
}

It uses only native Node.js tls and the express library. Fast and efficient.

How to use it

Clone the repo, install dependencies, and run:

npm install
npm start

Then visit:

http://localhost:2999/check?host=yourdomain.com

Automating with n8n

The real power comes with automation using n8n — a visual workflow automation tool.

With it, you can:

Run scheduled checks (every 12h, 20min, etc.)
Monitor multiple domains in batch
Send alerts via email or Slack when:
- The SSL is about to expire
- The domain is down
- There's a DNS or connection error
Log all responses into a MySQL database (for reporting or analytics)

💡 I included a pre-configured .json workflow you can import into n8n and customize.

Real-world scenario

Say you manage 35 websites and subdomains.

With this microservice + n8n, you can:

Monitor all domains on autopilot
Get alerts before users report issues
Stay in control without spreadsheets or expensive monitoring services

Requirements

Node.js 18+
PM2 (optional, for running it as a service)
n8n (optional but highly recommended)

Project structure

.
├── server.js              ← main microservice code
├── package.json
├── README.md
├── site_ssl_monitor.json  ← n8n workflow

Final thoughts

This microservice solves a common pain for developers, sysadmins, and IT teams — in a simple, free, and self-hosted way.

If you enjoy automation, security, and full control over your tools, this is for you.

➡️ GitHub repo

If you find this helpful, leave a comment or follow me for more smart tools like this.

Building a PHP CRUD System with PDO & MariaDB

Ivan — Tue, 08 Jul 2025 14:47:52 +0000

Hey! I’m thrilled to share my latest project: a PHP CRUD system powered by PDO and MariaDB, now live on GitHub!

This project is a clean, modular solution for managing a users table, and responsive UI with Bootstrap 5.

What’s inside: Full CRUD operations (Create, Read, Update, Delete)

Inline editing for a seamless experience

Secure PDO connection to MariaDB

Extensible design for adding fields or tables

Bootstrap 5 for styling, jQuery for dynamic interactions

Perfect for learning PHP CRUD or building scalable apps, it follows best practices like SQL injection prevention.

Check it out: github.com/ivanrochacardoso/crud_php_pdo

Fork it, test it, or share your thoughts! Let’s build better PHP solutions together.

Generate PDF & Excel Files Directly in Browser with Quasar — No Backend Needed!

Ivan — Fri, 27 Jun 2025 17:46:40 +0000

By Ivan Rocha Cardoso - Full-Stack Developer at SiGlobal

Have you ever needed to generate a PDF report or Excel spreadsheet directly from your app without depending on a backend? Today I'll show you how to do this using only Vue.js + Quasar.

Works 100% in the browser, exports tables, reports, and dashboards in a simple and professional way.

Introduction: Why generate PDF/Excel on the frontend?

Common use cases:

Sales reports that need to be printed or emailed
Dashboards with data that users want to save locally
Data tables that need to be exported for analysis
Offline applications that can't depend on server to generate files
Cost reduction of infrastructure (no need for server-side libraries)

Frontend approach advantages:

✅ Performance: Distributed processing on users' devices

✅ Simplicity: No additional APIs to maintain

✅ Offline: Works even without internet connection

✅ Cost: Reduces server load

⚙️ Setup: Starting the project

1. Creating the Quasar project

# Install Quasar CLI (if you don't have it yet)
npm install -g @quasar/cli

# Create new project
quasar create pdf-excel-project

# or
npm init quasar@latest

# Navigate to directory
cd pdf-excel-project

2. Installing required dependencies

# For PDF generation
npm install pdfmake

# For Excel generation
npm install xlsx

# Auxiliary dependencies for types (optional)
npm install --save-dev @types/pdfmake

3. Project structure

src/
├── components/
│   ├── ExportPDF.vue
│   └── ExportExcel.vue
├── pages/
│   └── ExportDemo.vue
└── utils/
    ├── pdfGenerator.js
    └── excelGenerator.js

Practical Example 1: Export QTable to Excel

ExportExcel.vue Component

<template>
  <div class="q-pa-md">
    <q-table
      title="Monthly Sales"
      :rows="salesData"
      :columns="columns"
      row-key="id"
      class="q-mb-md"
    />

    <q-btn 
      color="green" 
      icon="download" 
      label="Export Excel"
      @click="exportToExcel"
    />
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  name: 'ExportExcel',
  data() {
    return {
      columns: [
        { name: 'id', label: 'ID', field: 'id', align: 'left' },
        { name: 'product', label: 'Product', field: 'product', align: 'left' },
        { name: 'salesperson', label: 'Salesperson', field: 'salesperson', align: 'left' },
        { name: 'amount', label: 'Amount', field: 'amount', format: val => `$${val}` },
        { name: 'date', label: 'Date', field: 'date' }
      ],
      salesData: [
        { id: 1, product: 'Dell Laptop', salesperson: 'John Smith', amount: 2500.00, date: '2024-01-15' },
        { id: 2, product: 'Logitech Mouse', salesperson: 'Mary Johnson', amount: 85.50, date: '2024-01-16' },
        { id: 3, product: 'Mechanical Keyboard', salesperson: 'Peter Wilson', amount: 350.00, date: '2024-01-17' },
        { id: 4, product: '24" Monitor', salesperson: 'Anna Davis', amount: 800.00, date: '2024-01-18' }
      ]
    }
  },
  methods: {
    exportToExcel() {
      // Prepare data for Excel
      const worksheetData = [
        // Header
        ['ID', 'Product', 'Salesperson', 'Amount', 'Date'],
        // Data
        ...this.salesData.map(row => [
          row.id,
          row.product,
          row.salesperson,
          row.amount,
          row.date
        ])
      ]

      // Create worksheet
      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)

      // Create workbook
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sales')

      // Export file
      XLSX.writeFile(workbook, `sales_${new Date().toISOString().split('T')[0]}.xlsx`)

      this.$q.notify({
        color: 'green-4',
        textColor: 'white',
        icon: 'cloud_download',
        message: 'Excel exported successfully!'
      })
    }
  }
}
</script>

📄 Practical Example 2: Generate PDF with Logo and Formatting

ExportPDF.vue Component

<template>
  <div class="q-pa-md">
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">Sales Report</div>
        <div class="text-subtitle2">Data visualization</div>
      </q-card-section>

      <q-card-section>
        <q-table
          :rows="salesData"
          :columns="columns"
          row-key="id"
          hide-pagination
          :rows-per-page-options="[0]"
        />
      </q-card-section>
    </q-card>

    <q-btn 
      color="red" 
      icon="picture_as_pdf" 
      label="Generate PDF"
      @click="generatePDF"
    />
  </div>
</template>

<script>
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'

// Configure fonts
pdfMake.vfs = pdfFonts

export default {
  name: 'ExportPDF',
  data() {
    return {
      columns: [
        { name: 'id', label: 'ID', field: 'id', align: 'left' },
        { name: 'product', label: 'Product', field: 'product', align: 'left' },
        { name: 'salesperson', label: 'Salesperson', field: 'salesperson', align: 'left' },
        { name: 'amount', label: 'Amount', field: 'amount', format: val => `$${val}` },
        { name: 'date', label: 'Date', field: 'date' }
      ],
      salesData: [
        { id: 1, product: 'Dell Laptop', salesperson: 'John Smith', amount: 2500.00, date: '2025-01-15' },
        { id: 2, product: 'Logitech Mouse', salesperson: 'Mary Johnson', amount: 85.50, date: '2025-01-16' },
        { id: 3, product: 'Mechanical Keyboard', salesperson: 'Peter Wilson', amount: 350.00, date: '2025-01-17' },
        { id: 4, product: '24" Monitor', salesperson: 'Anna Davis', amount: 800.00, date: '2025-01-18' }
      ]
    }
  },
  methods: {
    generatePDF() {
      // Prepare table data for PDF
      const tableBody = [
        // Table header
        [
          { text: 'ID', style: 'tableHeader' },
          { text: 'Product', style: 'tableHeader' },
          { text: 'Salesperson', style: 'tableHeader' },
          { text: 'Amount', style: 'tableHeader' },
          { text: 'Date', style: 'tableHeader' }
        ],
        // Table data
        ...this.salesData.map(row => [
          row.id.toString(),
          row.product,
          row.salesperson,
          `$${row.amount.toFixed(2)}`,
          row.date
        ])
      ]

      // Calculate total
      const total = this.salesData.reduce((sum, item) => sum + item.amount, 0)

      // Define PDF structure
      const docDefinition = {
        content: [
          // Header
          {
            columns: [
              {
                text: 'SALES REPORT',
                style: 'header'
              },
              {
                text: `Date: ${new Date().toLocaleDateString('en-US')}`,
                style: 'subheader',
                alignment: 'right'
              }
            ]
          },

          // Divider line
          { text: '', margin: [0, 10, 0, 10] },

          // Table
          {
            table: {
              headerRows: 1,
              widths: ['auto', '*', '*', 'auto', 'auto'],
              body: tableBody
            },
            layout: {
              fillColor: function (rowIndex) {
                return (rowIndex % 2 === 0) ? '#f3f3f3' : null
              }
            }
          },

          // Total
          {
            text: `Grand Total: $${total.toFixed(2)}`,
            style: 'total',
            margin: [0, 20, 0, 0]
          },

          // Footer
          {
            text: 'Report automatically generated by the system',
            style: 'footer',
            margin: [0, 30, 0, 0]
          }
        ],

        // Styles
        styles: {
          header: {
            fontSize: 18,
            bold: true,
            color: '#2c3e50'
          },
          subheader: {
            fontSize: 12,
            color: '#7f8c8d'
          },
          tableHeader: {
            bold: true,
            fontSize: 12,
            color: 'white',
            fillColor: '#3498db'
          },
          total: {
            fontSize: 14,
            bold: true,
            alignment: 'right',
            color: '#27ae60'
          },
          footer: {
            fontSize: 10,
            italics: true,
            alignment: 'center',
            color: '#95a5a6'
          }
        }
      }

      // Generate and download PDF
      pdfMake.createPdf(docDefinition).download(`sales_report_${new Date().toISOString().split('T')[0]}.pdf`)

      this.$q.notify({
        color: 'red-4',
        textColor: 'white',
        icon: 'picture_as_pdf',
        message: 'PDF generated successfully!'
      })
    }
  }
}
</script>

Advanced Improvements

1. Excel with custom formatting

// utils/excelGenerator.js
import * as XLSX from 'xlsx'

export function exportAdvancedExcel(data, filename) {
  const worksheet = XLSX.utils.aoa_to_sheet(data)

  // Apply styles (limited in XLSX)
  const range = XLSX.utils.decode_range(worksheet['!ref'])

  // Cell formatting
  for (let row = range.s.r; row <= range.e.r; row++) {
    for (let col = range.s.c; col <= range.e.c; col++) {
      const cellAddress = XLSX.utils.encode_cell({ r: row, c: col })

      if (row === 0) {
        // Bold header
        if (!worksheet[cellAddress]) continue
        worksheet[cellAddress].s = {
          font: { bold: true },
          fill: { fgColor: { rgb: "3498db" } }
        }
      }
    }
  }

  // Adjust column widths
  worksheet['!cols'] = [
    { width: 10 },  // ID
    { width: 30 },  // Product
    { width: 20 },  // Salesperson
    { width: 15 },  // Amount
    { width: 12 }   // Date
  ]

  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Data')
  XLSX.writeFile(workbook, filename)
}

2. PDF with custom logo

// utils/pdfGenerator.js
import pdfMake from 'pdfmake/build/pdfmake'

export function generatePDFWithLogo(data, logoBase64) {
  const docDefinition = {
    content: [
      // Logo and header
      {
        columns: [
          {
            image: logoBase64, // Base64 image
            width: 100,
            height: 50
          },
          {
            text: 'COMPANY XYZ\nManagement Report',
            style: 'headerWithLogo',
            alignment: 'right'
          }
        ]
      },

      // Rest of content...
    ],

    styles: {
      headerWithLogo: {
        fontSize: 14,
        bold: true,
        color: '#2c3e50'
      }
    }
  }

  return pdfMake.createPdf(docDefinition)
}

Main page integrating everything

indexPage.vue

Replace the contents of the src/pages/indexPage.vue file, use the contents;

<template>
  <q-page class="q-pa-md">
    <div class="text-h4 q-mb-lg text-center">
      📊 Demo: PDF & Excel on Frontend
    </div>

    <div class="row q-gutter-md">
      <div class="col-12 col-md-5">
        <ExportExcel />
      </div>

      <div class="col-12 col-md-5">
        <ExportPDF />
      </div>
    </div>

    <q-separator class="q-my-lg" />

    <div class="text-center">
      <p class="text-body1">
        ✨ No backend, no complications! ✨
      </p>
      <p class="text-caption text-grey-7">
        100% browser file generation using Vue.js + Quasar
      </p>
    </div>
  </q-page>
</template>

<script>
import ExportExcel from 'components/ExportExcel.vue'
import ExportPDF from 'components/ExportPDF.vue'

export default {
  name: 'ExportDemo',
  components: {
    ExportExcel,
    ExportPDF
  }
}
</script>

Conclusion

With these implementations, you have a complete export system that:

✅ Works offline - Doesn't depend on server
✅ High performance - Client-side processing
✅ Flexible - Easy to customize styles and layouts
✅ Professional - Good-looking PDFs and Excel files
✅ Scalable - Can be integrated into any Quasar project

Next steps:

Implement charts in PDF using Chart.js
Add multiple sheets in Excel
Create reusable templates
Integrate with upload components for logos

🔗 Useful links

- GitHub project files

💡 Tip: Save this tutorial and try out the code! The best way to learn is by practicing.

🚀 Enjoyed the content? Share with other developers and leave your feedback in the comments!

How AI Helped Me Build a CRM Integration 60% Faster: A Real Vue.js + CouchDB Case Study

Ivan — Thu, 26 Jun 2025 19:47:03 +0000

By Ivan Rocha Cardoso - Full-Stack Developer at SiGlobal

The Challenge Every Developer Has Faced

Last week I got that request that makes any developer sigh deeply:

"Ivan, we need customers to register themselves in our CRM, but the data needs to be validated and automatically integrated with SIADM."

For context about our systems at SiGlobal:

SIADM: Our main CRM built with Quasar Framework + CouchDB
PreencheFácil: System that allows customer/member self-registration

Traditionally, this integration would take at least 2 weeks:

Integrate Vue.js/Quasar frontend with CouchDB
Implement complex validations (Tax ID, email, phone)
Configure CouchDB authentication
Error handling and data synchronization

Spoiler: I finished in 4 days. And no, I didn't become a coding machine. I used Cursor AI.

My First "Serious" Experience with AI Coding

I'd heard about Cursor before, but always thought: "Oh, just another fancy autocomplete".

Cursor isn't just code suggestions. It's like having a senior dev beside you who:

Understands your entire project context
Suggests architectures
Generates functional code (not just snippets)
Explains what it's doing

My Initial Setup

# Quasar + CouchDB integration project
npm install -g @quasar/cli
quasar create preenchefacil-integration

# Integration dependencies
npm install pouchdb-authentication pouchdb-memory pouchdb-adapter-http

# Cursor AI understood the stack just by seeing:
# - quasar.config.js
# - CouchDB connection configs

Where Cursor AI Really Shined

1. API Structure Generation

My prompt:

I need to integrate a Quasar app (PreencheFácil) with CouchDB (SIADM):
- Vue component that collects registration data
- Tax ID, email and phone validation on frontend
- CouchDB sync using native authentication
- Document conflict handling
- Responsive interface with Quasar components

What Cursor generated in 2 minutes:

<template>
  <q-page class="flex flex-center">
    <q-card class="q-pa-lg" style="width: 100%; max-width: 500px;">
      <q-card-section>
        <div class="text-h6 text-center">Customer Registration</div>
      </q-card-section>

      <q-card-section>
        <q-form @submit="onSubmit" class="q-gutter-md">
          <q-input
            v-model="form.name"
            label="Full Name"
            :rules="[val => !!val || 'Name is required']"
            outlined
          />

          <q-input
            v-model="form.email"
            label="Email"
            type="email"
            :rules="emailRules"
            outlined
          />

          <q-input
            v-model="form.tax_id"
            label="Tax ID"
            mask="###.###.###-##"
            :rules="taxIdRules"
            outlined
          />

          <q-input
            v-model="form.phone"
            label="Phone"
            mask="(##) #####-####"
            :rules="[val => !!val || 'Phone is required']"
            outlined
          />

          <q-btn
            label="Register"
            type="submit"
            color="primary"
            class="full-width"
            :loading="loading"
          />
        </q-form>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import PouchDB from 'pouchdb'

export default {
  name: 'CustomerRegistration',
  setup() {
    const $q = useQuasar()
    const loading = ref(false)

    // CouchDB connection
    const db = new PouchDB('http://admin:password@localhost:5984/siadm')

    const form = ref({
      name: '',
      email: '',
      tax_id: '',
      phone: ''
    })

    // Validations
    const emailRules = [
      val => !!val || 'Email is required',
      val => /.+@.+\..+/.test(val) || 'Email must be valid'
    ]

    const taxIdRules = [
      val => !!val || 'Tax ID is required',
      val => validateTaxId(val) || 'Invalid Tax ID'
    ]

    // Tax ID validation (Brazilian CPF/CNPJ)
    function validateTaxId(value) {
      const cleanValue = value.replace(/\D/g, '')
      if (cleanValue.length === 11) {
        return validateCPF(cleanValue)
      } else if (cleanValue.length === 14) {
        return validateCNPJ(cleanValue)
      }
      return false
    }

    function validateCPF(cpf) {
      if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf)) return false

      let sum = 0
      for (let i = 0; i < 9; i++) {
        sum += parseInt(cpf[i]) * (10 - i)
      }
      let remainder = sum % 11
      let digit1 = remainder < 2 ? 0 : 11 - remainder

      if (parseInt(cpf[9]) !== digit1) return false

      sum = 0
      for (let i = 0; i < 10; i++) {
        sum += parseInt(cpf[i]) * (11 - i)
      }
      remainder = sum % 11
      let digit2 = remainder < 2 ? 0 : 11 - remainder

      return parseInt(cpf[10]) === digit2
    }

    async function onSubmit() {
      loading.value = true

      try {
        // Check if customer already exists
        const existingDocs = await db.find({
          selector: {
            $or: [
              { email: form.value.email },
              { tax_id: form.value.tax_id }
            ]
          }
        })

        if (existingDocs.docs.length > 0) {
          $q.notify({
            type: 'negative',
            message: 'Customer already registered!'
          })
          return
        }

        // Create document in CouchDB
        const customerDoc = {
          _id: new Date().toISOString() + '_' + Math.random().toString(36).substr(2, 9),
          type: 'customer',
          name: form.value.name,
          email: form.value.email,
          tax_id: form.value.tax_id.replace(/\D/g, ''),
          phone: form.value.phone,
          created_at: new Date().toISOString(),
          status: 'active'
        }

        await db.put(customerDoc)

        $q.notify({
          type: 'positive',
          message: 'Customer registered successfully!'
        })

        // Reset form
        form.value = {
          name: '',
          email: '',
          tax_id: '',
          phone: ''
        }

      } catch (error) {
        console.error('Registration error:', error)
        $q.notify({
          type: 'negative',
          message: 'Registration failed. Please try again.'
        })
      } finally {
        loading.value = false
      }
    }

    return {
      form,
      loading,
      emailRules,
      taxIdRules,
      onSubmit
    }
  }
}
</script>

** My reaction:** "Dude, this has validation, masks, CouchDB integration and it's responsive!"

2. CouchDB Configuration That Would Take Me Hours

I asked: "How to configure authentication and synchronization with CouchDB for this use case?"

Cursor generated a complete Vue composable:

// composables/useCouchDB.js
import { ref } from 'vue'
import PouchDB from 'pouchdb'

export function useCouchDB() {
  const loading = ref(false)
  const error = ref(null)

  // Connection configuration
  const dbConfig = {
    remote: 'http://localhost:5984/siadm',
    options: {
      auth: {
        username: process.env.COUCHDB_USER,
        password: process.env.COUCHDB_PASSWORD
      },
      timeout: 10000,
      retry: {
        retries: 3,
        minTimeout: 1000
      }
    }
  }

  // Local instance for synchronization
  const localDB = new PouchDB('siadm_local')
  const remoteDB = new PouchDB(dbConfig.remote, dbConfig.options)

  // Bidirectional synchronization
  async function syncDatabase() {
    try {
      loading.value = true

      const sync = localDB.sync(remoteDB, {
        live: true,
        retry: true,
        filter: 'customers/by_status',
        query_params: { status: 'active' }
      })

      sync.on('change', (info) => {
        console.log('Sync change:', info)
      })

      sync.on('error', (err) => {
        console.error('Sync error:', err)
        error.value = err
      })

      return sync

    } catch (err) {
      error.value = err
      throw err
    } finally {
      loading.value = false
    }
  }

  // Create document with conflict handling
  async function createDocument(doc) {
    try {
      loading.value = true

      // Try local insert first
      const result = await localDB.put(doc)

      // Sync to remote
      await localDB.replicate.to(remoteDB)

      return result

    } catch (err) {
      if (err.status === 409) {
        // Conflict - document already exists
        console.log('Conflict detected, resolving...')
        return await resolveConflict(doc)
      }
      throw err
    } finally {
      loading.value = false
    }
  }

  // Automatic conflict resolution
  async function resolveConflict(doc) {
    const existing = await localDB.get(doc._id)

    // Strategy: keep the most recent
    if (new Date(doc.created_at) > new Date(existing.created_at)) {
      doc._rev = existing._rev
      return await localDB.put(doc)
    }

    return existing
  }

  return {
    localDB,
    remoteDB,
    loading,
    error,
    syncDatabase,
    createDocument
  }
}

** What impressed me:** Offline sync, conflict handling, automatic retry... stuff that would take me DAYS to research!

3. Testing with Quasar Testing Framework

I said: "I need tests for this Vue + CouchDB component"

// test/jest/__tests__/CustomerRegistration.spec.js
import { mount } from '@vue/test-utils'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { Quasar } from 'quasar'
import CustomerRegistration from 'src/pages/CustomerRegistration.vue'

// Mock PouchDB
vi.mock('pouchdb', () => ({
  default: vi.fn(() => ({
    find: vi.fn(),
    put: vi.fn(),
    sync: vi.fn()
  }))
}))

describe('CustomerRegistration', () => {
  let wrapper

  beforeEach(() => {
    wrapper = mount(CustomerRegistration, {
      global: {
        plugins: [Quasar]
      }
    })
  })

  it('should render form correctly', () => {
    expect(wrapper.find('[data-test="name-input"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="email-input"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="tax-id-input"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="phone-input"]').exists()).toBe(true)
  })

  it('should validate tax ID correctly', async () => {
    const taxIdInput = wrapper.find('[data-test="tax-id-input"]')

    await taxIdInput.setValue('111.111.111-11') // Invalid tax ID
    await wrapper.find('form').trigger('submit')

    expect(wrapper.text()).toContain('Invalid Tax ID')
  })

  it('should register valid customer', async () => {
    const mockPut = vi.fn().mockResolvedValue({ ok: true, id: 'test-id' })
    wrapper.vm.db.put = mockPut

    await wrapper.find('[data-test="name-input"]').setValue('John Doe')
    await wrapper.find('[data-test="email-input"]').setValue('john@email.com')
    await wrapper.find('[data-test="tax-id-input"]').setValue('123.456.789-09')
    await wrapper.find('[data-test="phone-input"]').setValue('(11) 99999-9999')

    await wrapper.find('form').trigger('submit')
    await wrapper.vm.$nextTick()

    expect(mockPut).toHaveBeenCalledWith(
      expect.objectContaining({
        name: 'John Doe',
        email: 'john@email.com',
        type: 'customer'
      })
    )
  })

  it('should handle duplicate customer error', async () => {
    const mockFind = vi.fn().mockResolvedValue({
      docs: [{ _id: 'existing-customer' }]
    })
    wrapper.vm.db.find = mockFind

    await wrapper.find('[data-test="email-input"]').setValue('john@email.com')
    await wrapper.find('form').trigger('submit')
    await wrapper.vm.$nextTick()

    expect(wrapper.text()).toContain('Customer already registered')
  })
})

Before vs After: The Real Numbers

Development Time

Traditional method: 2 weeks (80 hours)
With Cursor AI: 4 days (32 hours)
Time saved: 60%

Code Quality

Initial bugs: 70% fewer
Test coverage: Generated automatically
Validations: Edge cases I wouldn't think of

Lines of Code

Total project: ~1200 lines
AI-generated: ~480 lines (40%)
My work: Business logic, SIADM-specific configurations

What I Learned (Valuable Lessons)

Where AI Excelled:

Vue Components: Forms, validations, masks
CouchDB Integration: Authentication, sync, conflicts
Quasar Components: Responsive layout, notifications
Composables: Reusable and reactive logic

Where I Still Need the Human:

Business Rules: How SIADM data relationships work
Design System: SiGlobal visual standards
Performance: CouchDB-specific optimizations
Deployment: Quasar production configurations

Best Practices I Discovered:

1. Be specific about your stack:

❌ "Create a form"
✅ "Create a Quasar component with validation that saves to CouchDB"

2. Mention Vue 3 patterns:

"Use Composition API, reactive refs, and async/await"

3. Ask for CouchDB explanations:

"Why use local PouchDB + synchronization?"

Next Steps: What's Coming

Now that I've seen the potential, I'm already planning to use AI for:

SiEscola: Automate grade and attendance reports
SIADM: Intelligent dashboard with insights
PreencheFácil: Real-time frontend validations

Final Thoughts: Did AI Replace the Developer?

Short answer: No.

Long answer: AI became my most efficient pair programming partner. It doesn't make architectural decisions, doesn't understand complex business rules, and doesn't solve unique problems.

But for:

Repetitive code ✅
Standard validations ✅
Basic tests ✅
Documentation ✅

It's unbeatable.

Today's developer needs to learn to collaborate with AI, not compete against it.

Final Result

PreencheFácil now integrates seamlessly with SIADM. Customers register through a responsive Quasar interface, data is validated in real-time, and everything syncs automatically with our CouchDB.

Total time: 4 days
Lines of code: 1200+ (40% AI-generated)
Bugs found: Less than 3 (sync worked on first try!)
Happy client: ✅

I work at SiGlobal developing solutions like SIADM, PreencheFácil and SiEscola. I share real development experiences to help other developers.

Need consulting on automation and system integration? Reach out: **ivanrochacardoso@gmail.com**

Dashboard em Tempo Real com Vue.js + Quasar + MQTT (Usando HiveMQ)

Ivan — Thu, 19 Jun 2025 16:57:26 +0000

Vamos configurar um painel bonito, responsivo para monitoramento de sensores, dispositivos IoT ou até servidores, recebendo dados em tempo real via MQTT, usando apenas Vue.js + Quasar Framework no frontend.

Se você trabalha com automação, IoT, ou gosta de acompanhar dados dos seus dispositivos, sensores, ou servidores, provavelmente já pensou em ter um dashboard bonito, funcional e em tempo real.

Com Vue.js + Quasar e um broker MQTT como o HiveMQ, você cria isso rapidamente, usando só frontend. Perfeito para:

 Monitoramento de sensores (temperatura, energia, ambiente...)

 Automação residencial

 Status de servidores

 Qualquer aplicação que envie dados via MQTT

Tecnologias Usadas

Vue.js 3 (Composition API)

Quasar Framework (UI bonita, responsiva e poderosa)

MQTT.js (Cliente MQTT via WebSocket)

HiveMQ Cloud (Broker MQTT gratuito)
Broker Gratuito Usado

Vamos usar o broker gratuito da HiveMQ:
🔗 https://www.hivemq.com/demos/websocket-client/

Configurações para WebSocket:

Broker: broker.hivemq.com

Porta: 8000 (WebSocket sem SSL)
ou 8884 (WebSocket com SSL) (pode testar ambos)

URL WebSocket: ws://broker.hivemq.com:8000/mqtt
ou com SSL: wss://broker.hivemq.com:8884/mqtt

Utilizando ambiente DEV em linux Debian com @quasar/cli v2.5.0

Setup do Projeto
1️ Crie um novo projeto Quasar:

npm install -g @quasar/cli
npm init quasar
#App with quasar->ProjectFolder->mqtt-dashboard
# utilizando Pinia como state Management e Axios
cd mqtt-dashboard
#testar o ambiente dev com
quasar dev

Com isso o servidor dev local acessivel em http://localhost:9000/#/

Estrutura do projeto

.
├── index.html
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── postcss.config.cjs
├── public
├── quasar.config.js
├── README.md
└── src

4 directories, 7 files

Instale o MQTT.js:

npm install mqtt

🔌 Conectando ao MQTT
Crie um composable useMqtt.js:

mkdir src/composables
#cria arquivo vazio, abaixo adicionamos conteúdo...
touch src/composables/useMqtt.js

Adicione esse conteúdo

import { ref, onMounted, onBeforeUnmount } from 'vue'
import mqtt from 'mqtt'

export function useMqtt() {
  const temperatura = ref(0)
  const status = ref('Desconectado')
  const client = ref(null)

  const connect = () => {
    const url = 'ws://broker.hivemq.com:8000/mqtt'
    client.value = mqtt.connect(url)

    client.value.on('connect', () => {
      status.value = 'Conectado'
      client.value.subscribe('teste/sensor/temperatura')
    })

    client.value.on('message', (topic, payload) => {
      if (topic === 'teste/sensor/temperatura') {
        temperatura.value = parseFloat(payload.toString())
      }
    })

    client.value.on('error', (err) => {
      status.value = 'Erro'
      console.error('Erro MQTT:', err)
    })

    client.value.on('close', () => {
      status.value = 'Desconectado'
    })
  }

  const disconnect = () => {
    client.value?.end()
    status.value = 'Desconectado'
  }

  onMounted(connect)
  onBeforeUnmount(disconnect)

  return {
    temperatura,
    status
  }
}

Interface Simples
No seu IndexPage.vue, substitua o conteudo por:

<template>
  <q-page padding>
    <div class="q-pa-md">
      <q-card>
        <q-card-section>
          <div class="text-h6">Dashboard IoT - MQTT</div>
          <div>Status: <q-badge :color="status === 'Conectado' ? 'green' : 'red'">{{ status }}</q-badge></div>
        </q-card-section>

        <q-separator />

        <q-card-section>
          <div class="text-subtitle1">
            🌡️ Temperatura: <b>{{ temperatura }} ºC</b>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script setup>
import { useMqtt } from 'src/composables/useMqtt'

const { temperatura, status } = useMqtt()
</script>

Testando

👉 Envie dados de teste usando o próprio Web Client da HiveMQ:

Na guia 'Connection' clique connect
Abaixo em 'Publish' coloque o tópico abaixo e o valor '25' no campo mensagem.

🔗 https://www.hivemq.com/demos/websocket-client/

Tópico: teste/sensor/temperatura

Mensagem: 25 (ou qualquer valor de teste)

Clique em Publish.

Seu dashboard atualizará em tempo real!
Expandindo

🔌 Adicione mais tópicos (ex.: umidade, energia, presença).

📈 Inclua gráficos com apexcharts ou chart.js.

📲 Pode hospedar isso no seu próprio domínio.

Conclusão

É simples montar um dashboard em tempo real usando apenas frontend, com Vue.js, Quasar e MQTT. Isso é perfeito para automação residencial, IoT, monitoramento de energia (como eu uso nos meus projetos) e muito mais.
Se quiser, pode expandir adicionando banco de dados, notificações, alertas ou integração com ferramentas como n8n ou Node-RED.

Arquivos do projeto;
https://github.com/ivanrochacardoso/mqtt_quasar_dashboard