Uso di Cursor + Claude per creare app SaaS a stack completo

La scorsa settimana, ho pubblicato un video tutorial in cui mostro come uso Cursor e Claude 3.5 insieme ad Open SaaS per creare applicazioni SaaS a stack completo.

Il video originale è stato ripubblicato dall’influencer Rohan Paul e ora ha oltre 200.000 visualizzazioni!

Pertanto, visto che sembra un argomento di interesse per molte persone, ho deciso di fornire qualche informazione aggiuntiva e consiglio per accompagnare il video e aiutarvi a cominciare a costruire applicazioni SaaS velocemente, sperando di aiutarvi a guadagnare un po ‘di extra soldi!

Utilizzo di Open SaaS e Wasp

La cosa più importante è che uso Open SaaS, un gratuito, open-source, React, NodeJS e Prisma full-stack SaaS starter come base.

Open SaaS include un sacco di caratteristiche interessanti di base:

• Autenticazione a stack completo

• Esempi di app API Open AI

• Esempi di caricamento file su AWS S3

• Integrazione di pagamenti Stripe o Lemon Squeezy

• Tipi di sicurezza a stack completo

• Pannello amministrativo

• Invio di email

• Documentazione completa

• Implementazioni semplici, tramite un solo comando

Se vuoi conoscere di più, visita la pagina iniziale di Open SaaS.

Non solo il template è un grande punto di partenza perché include un sacco di codice di base, ma è anche basato su Wasp, un framework React/NodeJS full-stack con tante funzionalità integrate.

L’utilizzo di un file di configurazione centrale da parte di Wasp significa che tutto ciò che devi fare è definire le funzionalità in pochi linee di codice, e Wasp le gestisce per te, eliminando la necessità di scrivere un sacco di codice di base per cose come l’autenticazione, ad esempio:

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

Questo significa che, quando si lavora con tool di codifica assistita da AI come Cursor e Claude, l’AI deve fare molto meno lavoro. Scrive codice molto semplice e ottieni codice più facile da debugare!

Suggestioni e trucchi per Cursor

Quando lavoro con Cursor, noto che ci sono ancora alcuni problemi con l’AI che crea allucinazioni o scrive codice buggy. Ho risolto questi problemi in due modi:

1. Aggiungi le documentazioni di Wasp nel contesto di Cursor

2. Informa Cursor su come superare i classici errori che commette nei settaggi delle regole di Cursor.

3. Assicurati di indicizzare l’intero codebase

1. Aggiungere le documentazioni di Wasp nel contesto del Cursor

Il beneficio dell’uso di Open SaaS e del framework Wasp sottostante è che entrambi sono gratuiti e open-source. Fortunatamente, questo significa che anche noi abbiamo accesso ai loro file di documentazione grezze, scritti in markdown e disponibili nei rispettivi repository GitHub.

Quindi ciò che farò è copiare i file markdown delle documentazioni di Wasp in un proprio directory all’interno della root del progetto in cui sto lavorando. Poi posso fare riferimento alle documentazioni ogni volta che ho domande o sto cercando di implementare una nuova funzione.

Poi, quando utilizzo il compositore o l’interfaccia chat di Cursor, posso usare il simbolo “@” e selezionare Cartella -> Documenti e scrivere un prompt come questo:

Utilizzando @docs come guida, aiutami a implementare la funzione di chat con il feature WebSockets di Wasp nella mia app. Dare all’app una pagina di chat…

2. Aggiungere regole di Cursor per evitare errori comuni

Cursor e Claude sono incredibili nell’ scrivere codice in più file, ma possono ancora commettere piccoli errori, come immaginare importazioni o saltare un feature di Wasp che avrebbe reso l’implementazione più veloce.

Quello è il motivo per cui mi piace identificare questi errori comuni e aggiungerli alla sezione Regole del cursore nelle impostazioni di Cursor. In alternativa, puoi aggiungere queste regole a un file .cursorrules nella root del tuo progetto se li vuoi mantenere specifici per il progetto.

Ciò che è importante è che, se trovi che Cursor commette ripetutamente gli stessi errori, controllare la documentazione, trovare il problema e aggiungere una nuova regola man mano che appaiono.

Queste sono le regole che ho trovato utili finora:

• Quando importi funzioni Wasp dall’SDK, assicurati di usare ‘wasp’ e non ‘@wasp‘, ad esempio import { Task } from 'wasp/entities', import { type GetTasks } from 'wasp/server/operations', import { getTasks, useQuery } from 'wasp/client/operations'

• Aggiungi nuove entità (anche chiamate modelli) a schema.prisma, NON al file main.wasp

• NON aggiungere dipendenze al file main.wasp, ma istruisci invece per installarle tramite npm install.

• nell’creazione di operazioni Wasp (query e azioni), unitele in un file operations.ts all’interno della directory feature invece di separare query.ts e actions.ts

3. Indicizza tutto il tuo base di codice

Questo è semplice. Assicurati che nei tuoi impostazioni del Cursor abbia l’opzione per indicizzare il tuo base di codice, poiché ciò rende più semplice per il Cursor tenere il tuo intero progetto (compresa la documentazione) in contesto quando chiedi di fare qualcosa per te.

C’è anche un’opzione per Indicizza nuove cartelle come predefinito sotto la Dropdown Mostra impostazioni. Assicurati che sia abilitata per indicizzare automaticamente nuove cartelle e funzionalità quando Cursor le crea

Ora inizia a costruire SaaS

Ecco qui. Ora non c’è più scusa per non costruire quell’idea di applicazione SaaS da sempre hai avuto in mente.

Using Cursor, insieme a Open SaaS e Wasp, è come avere un codice trucco per lo sviluppo di applicazioni SaaS, così divertiti!

Oh, a proposito, se trovi questo utile, saremmo lieti di un stellino su GitHub 🙏

È il modo più semplice per sostenere iniziative open-source come la nostra.

Grazie e ci vediamo a breve!