În acest tutorial, vom construi o interfață utilizând API-ul de căutare publică Wikipedia împreună cu unele JavaScript + RamdaJS.

Noțiuni de bază

Iată Link GitHub și Link coduri și cutie. Deschideți terminalul și alegeți un director pentru a-l clona.

git clone [https://github.com/yazeedb/ramda-wikipedia-search](https://github.com/yazeedb/ramda-wikipedia-search)
cd ramda-wikipedia-search
yarn install (or npm install)

master filiala are proiectul finalizat, așa că verificați start filiala dacă doriți să codificați de-a lungul.

git checkout start

Și începe proiectul!

npm start

Browserul dvs. ar trebui să se deschidă automat localhost: 1234.

Obținerea valorii de intrare

Iată aplicația inițială.

Cum se foloseste API ul de cautare Wikipedia pentru a construi

Pentru a capta informațiile utilizatorului în timp ce tastează, input elementul are nevoie de un ascultător de evenimente.

Ta src/index.js fișierul este deja conectat și gata de pornire. Veți observa că am importat Bootstrap pentru stil.

1612079407 626 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Să adăugăm un ascultător de evenimente fals pentru a începe lucrurile.

import 'bootstrap/dist/css/bootstrap.min.css';

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', (event) => {
  console.log('value:', event.target.value);
});

Noi stim event.target.valueeste modul standard de a accesa valoarea unei intrări. Acum arată valoarea.

1612079407 747 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Cum ne poate ajuta Ramda să realizăm următoarele?

  • Apuca event.target.value
  • Tăiați ieșirea (bandă de direcție / spatiu alb)
  • Implicit șirul gol dacă undefined

pathOr funcția poate gestiona de fapt primul și al treilea punct glonț. Este nevoie de trei parametri: valoarea implicită, calea și datele.

Deci, următoarele funcționează perfect

import { pathOr } from 'ramda';

const getInputValue = pathOr('', ['target', 'value']);

Dacă event.target.value este undefined, vom primi un șir gol înapoi!

Ramda are și un trim funcție, astfel încât să rezolve problema spațiului nostru alb.

import { pathOr, trim } from 'ramda';

const getInputValue = (event) => trim(pathOr('', ['target', 'value'], event));

În loc să cuibărim acele funcții, să le folosim pipe. Vezi articolul meu despre pipă dacă este nou pentru tine.

import { pathOr, pipe, trim } from 'ramda';

const getInputValue = pipe(
  pathOr('', ['target', 'value']),
  trim
);

Acum avem o funcție compusă care necesită un event obiect, îi apucă target.value, implicit la '', și o taie.

Frumos.

Vă recomand să păstrați acest lucru într-un fișier separat. Poate suna asta getInputValue.js și utilizați sintaxa implicită de export.

1612079407 307 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Obținerea URL-ului Wikipedia

Începând cu această scriere, adresa URL de căutare API a Wikipedia este https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=

Pentru o căutare efectivă, trebuie doar să adăugați un subiect. Dacă aveți nevoie de urși, de exemplu, adresa URL arată astfel:

https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=bears

Am dori o funcție care să preia un subiect și să returneze adresa URL completă de căutare Wikipedia. Pe măsură ce utilizatorii tastează, creăm adresa URL pe baza intrării lor.

Al lui Ramda concat funcționează frumos aici.

import { concat } from 'ramda';

const getWikipediaSearchUrlFor = concat(
  'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search="
);

concat, fidel numelui său, concatenează șiruri și tablouri. Este redat, astfel încât furnizarea URL-ului ca un argument returnează o funcție care așteaptă un al doilea șir. Vedea articolul meu despre currying daca este nou!

Puneți codul respectiv într-un modul numit getUrl.js.

1612079408 795 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Acum să actualizăm index.js. Importați cele două module noi, împreună cu pipe și tap din Ramda.

import "bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';

const makeUrlFromInput = pipe(
  getInputValue,
  getUrl,
  tap(console.warn)
);

const inputElement = document.querySelector('input');

inputElement.addEventListener('keyup', makeUrlFromInput);

Acest nou cod construiește adresa URL a cererii noastre din datele de intrare ale utilizatorului și le înregistrează prin tap.

Verifică.

1612079408 327 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Efectuarea cererii AJAX

Următorul pas este maparea URL-ului respectiv la o solicitare AJAX și colectarea răspunsului JSON.

A inlocui makeUrlFromInput cu o nouă funcție, searchAndRenderResults.

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(console.warn)
);

Nu uitați să vă schimbați și ascultătorul de evenimente!

inputElement.addEventListener('keyup', searchAndRenderResults);

Iată rezultatul nostru.

1612079409 821 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Realizarea unei componente de rezultate

Acum, că avem JSON, haideți să creăm o componentă care să o îndrăgostească.

Adăuga Results.js în directorul dvs.

1612079409 266 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Uitați-vă înapoi la răspunsul nostru JSON de căutare Wikipedia. Rețineți forma acestuia. Este o matrice cu următorii indici:

  1. Interogare (ce ați căutat)
  2. Matrice de nume de rezultate
  3. Matrice de rezumate
  4. Matrice de linkuri către rezultate

Componenta noastră poate lua o serie de această formă și poate returna o listă frumos formatată. Prin destructurarea matricei ES6, o putem folosi ca semnătură a funcției noastre.

Editați | × Results.js

export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names.map(
      (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
    )}
  </ul>
`;

Să mergem pas cu pas.

  • Este o funcție care preia o serie de elemente așteptate: query, names, summaries, și links.
  • Folosind Litere șablon ES6, returnează un șir HTML cu un titlu și o listă.
  • În interiorul <ul> ne hărțuim names la <li> etichete, deci câte una pentru fiecare.
  • În interiorul acestora sunt <a> etichete care indică legătura fiecărui rezultat. Fiecare link se deschide într-o filă nouă.
  • Sub link este un rezumat al paragrafului.

Importați acest lucru în index.js și folosiți-l așa:

// ...

import Results from './Results';

// ...

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(console.warn)
);

Aceasta transmite JSON Wikipedia Results și înregistrează rezultatul. Ar trebui să vedeți o grămadă de HTML în consola dvs. DevTools!

1612079410 38 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Tot ce a mai rămas este să-l redați DOM-ului. Un simplu render funcția ar trebui să facă truc.

const render = (markup) => {
  const resultsElement = document.getElementById('results');

  resultsElement.innerHTML = markup;
};

A inlocui console.warn cu render funcţie.

const searchAndRenderResults = pipe(
  getInputValue,
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

Și verifică-l!

1612079410 685 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Fiecare link ar trebui să se deschidă într-o filă nouă.

Eliminarea virgulelor acelea ciudate

Este posibil să fi observat ceva în legătură cu noua noastră IU.

1612079411 595 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Are virgule suplimentare! De ce??

Litere de șablon

Este vorba despre modul în care literele șablon se alătură lucrurilor. Dacă rămâneți într-o matrice, aceasta o va alătura folosind toString() metodă.

Vedeți cum se îmbină acest lucru?

const joined = [1, 2, 3].toString();

console.log(joined);
// 1,2,3

console.log(typeof joined);
// string

Literalele șablonului fac asta dacă puneți matrici în ele.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums}`;

console.log(msg);
// My favorite nums are 1,2,3

Puteți remedia problema alăturându-vă matricei fără virgule. Folosiți doar un șir gol.

const nums = [1, 2, 3];
const msg = `My favorite nums are ${nums.join('')}`;

console.log(msg);
// My favorite nums are 123

Editați | × Results.js pentru a utiliza join metodă.

export default ([query, names, summaries, links]) => `
  <h2>Searching for "${query}"</h2>
  <ul class="list-group">
    ${names
      .map(
        (name, index) => `
        <li class="list-group-item">
          <a href=${links[index]} target="_blank">
            <h4>${name}</h4>
          </a>
          <p>${summaries[index]}</p>
        </li>
      `
      )
      .join('')}
  </ul>
`;

Acum, interfața dvs. este mult mai curată.

1612079412 386 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Remedierea unui mic bug

Am găsit o mică eroare în timp ce construiam asta. Ai observat asta?

1612079413 260 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Golirea input aruncă această eroare.

1612079413 774 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Asta pentru că trimitem o solicitare AJAX fără un subiect de căutare. Verificați adresa URL din fila Rețea.

1612079413 85 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Acel link indică o pagină HTML implicită. Nu am recuperat JSON pentru că nu am specificat un subiect de căutare.

Pentru a preveni acest lucru, putem evita trimiterea cererii în cazul în care inpute gol.

Avem nevoie de o funcție care nu face nimic dacă inputeste gol și face căutarea dacă este umplut.

Să creăm mai întâi o funcție numită doNothing. Puteți ghici cum arată.

const doNothing = () => {};

Acest lucru este mai bine cunoscut sub numele de noOp, dar imi place doNothing în acest context.

Apoi eliminați getInputValue de la tine searchAndRenderResults funcţie. Avem nevoie de ceva mai multă securitate înainte de ao folosi.

const searchAndRenderResults = pipe(
  getUrl,
  (url) =>
    fetch(url)
      .then((res) => res.json())
      .then(Results)
      .then(render)
);

Import ifElse și isEmpty din Ramda.

import { ifElse, isEmpty, pipe, tap } from 'ramda';

Adăugați o altă funcție, makeSearchRequestIfValid.

const makeSearchRequestIfValid = pipe(
  getInputValue,
  ifElse(isEmpty, doNothing, searchAndRenderResults)
);

Luați un minut pentru a absorbi asta.

Dacă valoarea de intrare este goală, nu faceți nimic. Altfel, căutați și redați rezultatele.

Puteți aduna aceste informații doar citind funcția. Asta e expresiv.

Al lui Ramda este gol funcția funcționează cu șiruri, tablouri, obiecte.

1612079414 566 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Acest lucru îl face perfect pentru a testa valoarea de intrare.

ifElse se potrivește aici pentru că atunci când isEmpty revine adevărat, doNothing aleargă. In caz contrar searchAndRenderResults aleargă.

În cele din urmă, actualizați gestionarul de evenimente.

inputElement.addEventListener('keyup', makeSearchRequestIfValid);

Și verificați rezultatele. Nu mai există erori la ștergerea fișierului input!

1612079414 112 Cum se foloseste API ul de cautare Wikipedia pentru a construi

Acest tutorial a fost de la Ale mele complet gratuit curs pe Educative.io, Modele funcționale de programare cu RamdaJS!

Vă rugăm să luați în considerare preluarea / distribuirea acestuia dacă v-a plăcut acest conținut.

Este plin de lecții, grafică, exerciții și probe de cod care pot fi rulate pentru a vă învăța un stil de programare funcțional de bază folosind RamdaJS.

Vă mulțumesc că ați citit ❤️