Guies

Com afegir cerca a la teva app: des de filtres simples fins a cerca de text complet

Per afegir cerca a la teva app, comença per la cosa més simple que funcioni: un quadre de cerca que crida una ruta de servidor, la qual filtra les files de la base de dades comparant la consulta amb unes quantes columnes, més filtres per a coses com la categoria o el preu. Quan això no sigui prou bo —necessites ordenació per rellevància, arrels de paraules o molts registres—, canvia a la cerca de text complet de la teva base de dades, i només passa a un motor de cerca allotjat si necessites molt bona tolerància als errors tipogràfics o resultats instantanis sobre dades molt grans. Triï el que triïs, la cerca ha de respectar els permisos: els usuaris mai no han de trobar registres que no tenen permís per veure.

Què vol dir «cerca» per a la teva app

La cerca abasta diverses coses diferents, i la majoria d'apps necessiten més d'una:

  • Cerca per paraules clau: un quadre de text —«troba anuncis que mencionin 'jardí'».
  • Filtres: opcions estructurades —categoria, ciutat, rang de preu, data, estat.
  • Ordenació: més recents, més barats, més rellevants.
  • Autocompletat: suggeriments mentre s'escriu.
  • Tolerància als errors tipogràfics: «restuarant» encara troba «restaurant».

Per a un directori, un tauler d'ofertes de feina o una botiga, els filtres sovint importen més que el quadre de text. Decideix quines d'aquestes necessites de veritat abans de triar una eina.

Les opcions

EnfocamentCom funcionaIdeal per aLímits
Filtrar al navegadorCarregar la llista i filtrar-la amb JavaScriptLlistes públiques petites (unes quantes centenars d'elements)Envia totes les dades a cada visitant; lent amb llistes grans
Coincidència de patrons a la base de dadesConsulta al servidor tipus «el nom conté el text», sense distingir majúsculesApps petites o mitjanes, eines d'administracióSense ordenació per rellevància; pot anar lent en taules grans; sense arrels de paraules
Cerca de text complet a la base de dadesPostgres indexa les paraules i ordena les coincidènciesLa majoria d'apps amb molt contingutFeble amb errors tipogràfics, tret que hi afegeixis coincidència aproximada
Coincidència aproximada (trigrames)Postgres compara seqüències de caràcters per similitudNoms, camps curts, tolerància als errors tipogràficsNecessita una extensió i un índex; l'ajust requereix cura
Motor de cerca allotjatUn servei separat indexa les teves dades (Algolia, Meilisearch, Typesense, Elasticsearch i altres)Catàlegs grans, cerca instantània, molta tolerància als errors tipogràficsUn altre servei per mantenir sincronitzat, pagar-lo i protegir-lo

Si les teves dades ja són a Postgres, la seva cerca de text complet integrada és un bon terme mig. Parteix el text en paraules, les redueix a arrels (perquè «running» coincideixi amb «run»), ignora les paraules comunes i pot ordenar els resultats segons com coincideixin. Amb l'índex adequat es manté ràpida en taules grans.

Indicacions d'exemple

Un començament senzill:

Afegeix un quadre de cerca i filtres a la pàgina d'anuncis. La cerca ha de comparar la consulta amb el títol i la descripció, sense distingir majúscules. Filtres: categoria (desplegable), ciutat (desplegable) i preu màxim. Fes la cerca al servidor amb una ruta d'API paginada, 20 resultats per pàgina. Mantén la cerca i els filtres a la URL perquè els resultats es puguin compartir i el botó de tornar funcioni. Mostra un estat buit amigable quan no hi hagi coincidències.

Per passar a la cerca de text complet:

Canvia la cerca d'anuncis a la cerca de text complet de Postgres sobre el títol (amb més pes) i la descripció. Afegeix l'índex adequat, ordena els resultats per rellevància i mantén els filtres i la paginació existents. No canviïs cap dada existent.

Per afegir tolerància als errors tipogràfics en els noms:

Afegeix coincidència aproximada sobre el nom de l'empresa perquè els petits errors tipogràfics encara trobin resultats. Fes servir la similitud de trigrames si està disponible, amb un índex, i torna a la cerca actual si no ho està.

Pas a pas

  1. Enumera què busca la gent. Quins camps (títol, descripció, etiquetes, nom)? Quins filtres? Pregunta a alguns usuaris reals si pots.
  2. Comença al servidor. Afegeix una ruta d'API que rebi la consulta i els filtres, i retorni una pàgina de resultats. No carreguis tot al navegador.
  3. Aplica els permisos a la consulta. Si els usuaris només veuen els seus propis registres, o només els publicats, aquesta condició pertany a la mateixa consulta que la cerca.
  4. Afegeix paginació des del primer dia —números de pàgina o «carrega'n més».
  5. Posa l'estat de la cerca a la URL (per exemple ?q=garden&city=leeds). Els enllaços compartibles, el botó de tornar i els motors de cerca poden rastrejar les pàgines filtrades si les vols indexades.
  6. Aplica un retard a la cerca mentre s'escriu. Espera uns quants cents de mil·lisegons després d'acabar d'escriure abans de fer la consulta, perquè no n'enviïs una per cada tecla.
  7. Afegeix índexs quan sàpigues per quines columnes filtres i cerques.
  8. Millora a cerca de text complet, després coincidència aproximada, i després un motor allotjat —només quan el pas més simple falli amb usuaris reals.
  9. Prova amb dades semblants a les reals: centenars o milers de files, caràcters estranys, consultes buides, consultes molt llargues, altres idiomes si els admets.

Errors habituals

  • Carregar tota la taula al navegador. Està bé per a 50 elements, és dolorós per a 50.000, i exposa cada registre —inclosos els que l'usuari no hauria de veure.
  • Una cerca que ignora els permisos. La cerca és una fuita habitual: un registre privat o un esborrany apareix perquè la consulta de cerca s'ha oblidat de la condició «només els meus» o «només els publicats».
  • Construir SQL amb l'entrada directa de l'usuari. Usa sempre consultes parametritzades. Un constructor d'IA normalment ho fa, però comprova si veus cadenes enganxades.
  • Sense estat buit. «Sense resultats» amb un suggeriment (esborra els filtres, revisa l'ortografia) evita que la gent se'n vagi.
  • Sense índexs. La cerca sembla bé amb dades de prova i s'alenteix a mesura que creixen les dades reals.
  • Anar directament a un servei de cerca. Després has de mantenir una segona còpia de les dades sincronitzada, gestionar les eliminacions i protegir un altre conjunt de claus —sovint sense cap benefici visible.
  • Oblidar el mòbil. Els filtres han de cabre en un telèfon; un calaix de filtres o un panell plegable normalment funciona millor que una barra lateral.

Llista de comprovació

  • Saps quins camps es cerquen i quins filtres existeixen
  • La cerca s'executa al servidor i retorna resultats paginats
  • La consulta aplica els mateixos permisos que la resta de l'app
  • L'entrada de l'usuari es passa com a paràmetres, mai enganxada dins de SQL
  • L'estat de la cerca viu a la URL
  • L'escriptura té retard
  • Les columnes cercades i filtrades estan indexades
  • Els estats buit, sense resultats i d'error són clars
  • Provat amb volums de dades realistes i entrades desordenades

Afegir cerca amb Mythex

A una app construïda a Mythex, les dades normalment viuen a la base de dades Postgres del projecte, així que pots començar amb les indicacions de dalt: primer la coincidència de patrons, després la cerca de text complet de Postgres quan necessitis ordenació per rellevància. Si vols un motor de cerca allotjat, porta el teu propi compte i la teva clau, guarda-la com a secret del projecte i demana a l'agent que indexi i consulti des del servidor, tal com es descriu a Integra qualsevol API.

La cerca és el nucli de moltes apps: consulta com construir un lloc web de directori, com construir un tauler d'ofertes de feina i com construir un mercat per veure com encaixa amb la resta del producte.

Preguntes

Quina és la manera més senzilla d'afegir cerca a una app?

Si les teves dades són a una base de dades, una ruta de servidor que filtri les files amb una coincidència sense distingir majúscules en unes quantes columnes és el començament més senzill. Per a una llista petita que ja està carregada al navegador, filtrar al navegador és encara més senzill.

Necessito Algolia o Elasticsearch per fer cerca?

Normalment no, al principi. La cerca de text complet de Postgres gestiona bé la coincidència de paraules, l'ordenació de resultats i des de milers fins a milions de files. Un motor de cerca allotjat val la pena quan necessites molt bona tolerància als errors tipogràfics, resultats instantanis mentre s'escriu sobre dades grans, o un ajust avançat de la rellevància.

Per què la meva cerca no troba resultats quan hi ha errors tipogràfics?

La coincidència bàsica i la cerca de text complet estàndard busquen les paraules tal com s'escriuen (o les seves arrels), així que una falta d'ortografia no troba res. Necessites una coincidència aproximada, com la similitud de trigrames a Postgres o un motor de cerca amb tolerància als errors tipogràfics.

La cerca s'ha d'executar al navegador o al servidor?

Al servidor per a qualsevol cosa més enllà d'una llista pública petita. La cerca al servidor escala, respecta els permisos i no envia tot el teu conjunt de dades a cada visitant.

Mythex · Pricing · Crea qualsevol cosa amb IA · Plantilles de llocs web i aplicacions · Mythex comparat · Glossari de creació d’aplicacions amb IA · Eines gratuïtes per crear aplicacions amb IA · English

English አማርኛ العربية Български বাংলা Bosanski Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Bahasa Indonesia Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)