Pubblicazione processo

Quando si gestisce un sito Web con più utenti, è fondamentale progettare un'esperienza che garantisca un'esperienza uniforme per tutti.

Si immagini lo scenario seguente: si dispone di un sito Web che consente ai datori di lavoro di caricare le pubblicazioni di lavoro. Per le persone in cerca di lavoro, è comodo visualizzare facilmente tutti i documenti relativi a un post in un formato coerente. Tuttavia, per i datori di lavoro è conveniente allegare informazioni in qualsiasi formato di file. Per facilitare entrambi i tipi di utenti, puoi convertire automaticamente in PDF tutti i documenti caricati e incorporarli in linea nel messaggio.

Cosa puoi imparare

Questa esercitazione pratica descrive un esempio di Node.js che utilizza Adobe Acrobat Services e il relativo Node.js SDK per aggiungere queste funzionalità a un sito di pubblicazione di job. In questo modo si crea un sito web più facile da utilizzare e più attraente sia per i datori di lavoro che per le persone in cerca di lavoro. Di seguito è riportato il codice completo del progetto, per consentirti di seguire la lettura.

Per iniziare, configura una semplice applicazione Web Node.js basata su Express. Express è un framework minimalista di applicazioni Web che offre funzionalità come l'instradamento e la creazione di modelli. Il codice per l'applicazione è disponibile su GitHub. Installare inoltre il database PostgreSQL e configurarlo per archiviare il PDF.

API Acrobat Services rilevanti

Creazione di credenziali API di Adobe

Innanzitutto, è necessario creare credenziali per Adobe PDF Embed API (gratuito per l'uso) e Adobe PDF Services API (gratuito per sei mesi poi pay-as-you-go per soli $0,05 per transazione documento). Quando si creano le credenziali per l’API di PDF Services, selezionare l’opzione "Crea codice di esempio personalizzato". Salva il file ZIP ed estrai pdftools-api-credentials.json e private.key nella directory principale del progetto Node.js Express.

È inoltre necessaria una chiave API per l’API di incorporamento liberamente disponibile. Da Progetti, seleziona il progetto che hai creato. Fai quindi clic su Aggiungi al progetto e seleziona API. Fare clic su PDF Embed API.

Specifica il dominio per l’API PDF Embed. La chiave API deve essere pubblica (trova nel codice eseguito dal browser). Specificando un dominio, assicurati che un altro utente in un dominio diverso non possa utilizzare la chiave API.

Impossibile utilizzare "localhost" come dominio. Specifica un dominio, ad esempio "testing.local", e modifica il file degli host sul computer per reindirizzare il dominio a 127.0.0.1, che rappresenta il computer. Quindi, invece di testare l'applicazione su localhost:3000, è possibile testarla su testing.local:3000. Al termine, trova la chiave API per l’API PDF Embed nella pagina del progetto.

Aggiunta di un modulo di caricamento e di un gestore

Con un’applicazione Express funzionante e credenziali API, è inoltre necessario un modulo che consenta agli utenti di caricare i propri documenti sul sito Web. A tale scopo, modificare il modello index.jade.

Crea un campo di input per il nome del processo caricato e per un documento contenente ulteriori informazioni.

All’interno del blocco di contenuto del modello, aggiungi il modulo seguente:

extends layout

block content
  h1= title

  form(action="/upload", enctype="multipart/form-data", method="POST")
    label Job posting name: 
    input(type="text", name="name", required="required")
    br
    br
    label Describing document: 
    input(type="file", name="attachment", required="required")
    br
    br
    input(type="submit", value="Submit job posting")

Aggiungere quindi un gestore per la richiesta POST all'azione /upload. Quindi, aggiungi una route per /upload al file routes/index.js. Puoi creare un nuovo file per questa route, ma dovrai aggiornare il file app.js per riflettere il nuovo file. All'interno di questo gestore route è possibile accedere al nome specificato e al file caricato.

router.post('/upload', async function (req, res, next) {
    const name = req.body.name;
    const fileContents = req.files.attachment.data;

    // code to work with the uploaded document
  });

La funzione è asincrona, quindi è possibile utilizzare la parola chiave await nella funzione, utile quando si chiamano i metodi che eseguono le chiamate API.

Utilizzo dell’API di PDF Services

Prima di utilizzare l'API PDF Services, è necessario aggiungere le seguenti importazioni all'inizio del file route:

const PDFToolsSdk = require('@adobe/documentservices-pdftools-node-sdk');
  const { Readable } = require('stream');

Direttamente sotto le importazioni, puoi caricare le credenziali API e creare un contenuto di esecuzione. Poiché è possibile riutilizzare un contesto di esecuzione per operazioni diverse, è consigliabile eseguire questa operazione una sola volta.

  const credentials = PDFToolsSdk.Credentials
  .serviceAccountCredentialsBuilder()
  .fromFile("pdftools-api-credentials.json")
  .build();

  const executionContext = PDFToolsSdk.ExecutionContext.create(credentials);

Tornare ora alla scrittura del codice nel gestore richieste in corrispondenza del commento nel blocco router.post. Iniziate convertendo il documento in PDF.

  const createPdfOperation = PDFToolsSdk.CreatePDF.Operation.createNew();

  const input = PDFToolsSdk.FileRef.createFromStream(Readable.from(fileContents),
  req.files.attachment.mimetype);

  createPdfOperation.setInput(input);

  let result = await createPdfOperation.execute(executionContext);

  result.saveAsFile('output-pdf' + new Date().getTime() + '.pdf');
  return res.send('success!');

La maggior parte delle operazioni esegue gli stessi quattro passaggi. Inizializzare innanzitutto il tipo di operazione utilizzando il metodo createNew della classe appropriata. Creare quindi l'input per l'operazione, ovvero FileRef. Le operazioni successive possono ignorare questo passo perché il risultato di un'operazione è anche un FileRef. Per questa operazione iniziale, creare un FileRef dai byte del file caricato. In terzo luogo, è necessario assegnare l'input all'operazione. Infine, l'operazione viene eseguita con il contesto di esecuzione come parametro nel metodo Execute. Questo metodo restituisce una promessa in modo da poter attendere il risultato.

Il codice salva il PDF restituito in un file e invia una semplice risposta di "operazione completata" al browser. La parte "Data" del nome file garantisce un nome file univoco. SaveAsFile restituisce un errore se il file di destinazione esiste.

Conversione di immagini in testo e compressione del PDF

A questo punto, utilizza il riconoscimento ottico dei caratteri (OCR) per convertire le immagini in testo e quindi comprimi il risultato. Questa operazione viene eseguita utilizzando le operazioni OCR e Comprimi PDF simili all’operazione Crea PDF. Aggiungere quanto segue al file di route, in router.post:

  const name = req.body.name;
  const fileContents = req.files.attachment.data;

  const createPdfOperation = PDFToolsSdk.CreatePDF.Operation.createNew();
  const input = PDFToolsSdk.FileRef.createFromStream(Readable.from(fileContents),
  req.files.attachment.mimetype);
  createPdfOperation.setInput(input);

  let result = await createPdfOperation.execute(executionContext);

  const ocrOperation = PDFToolsSdk.OCR.Operation.createNew();
  ocrOperation.setInput(result);
  result = await ocrOperation.execute(executionContext);

  const compressPdfOperation = PDFToolsSdk.CompressPDF.Operation.createNew();
  compressPdfOperation.setInput(result);
  result = await compressPdfOperation.execute(executionContext);

  result.saveAsFile('output-pdf' + new Date().getTime() + '.pdf');
  return res.send('success!');

È necessario eseguire questa operazione una sola volta perché il risultato è un FileRef, che il codice può passare a setInput.

Esiste un’alternativa migliore rispetto al salvataggio del file su un disco rigido e alla restituzione di una risposta HTTP eccessivamente semplificata. Archivia invece il PDF in un database e visualizza una pagina Web che incorpora il PDF utilizzando l’API gratuita di Adobe PDF Embed. In questo modo, l'annuncio di lavoro o la brochure del datore di lavoro è visibile sul sito web per chi cerca lavoro da trovare e visualizzare, completo di loghi aziendali e altri elementi di progettazione.

Memorizzazione del PDF in un database

Memorizzare i PDF in un database PostgreSQL. Scarica il pacchetto node-postgres per connettersi a Postgres in Node.js. Installare il pacchetto stream-buffer perché, a un certo punto, è necessario memorizzare il contenuto del PDF in un buffer e FileRef funziona solo con i flussi. Quindi, utilizza il pacchetto stream-buffer per scrivere il contenuto in un buffer.

npm install pg stream-buffers

Creare una tabella di database per le pubblicazioni di lavoro. Sono necessarie una colonna per un identificatore univoco, una colonna per un nome e una colonna per il PDF associato. È possibile creare una tabella di database dall'interfaccia della riga di comando (CLI) Postgres:

CREATE TABLE job_postings (id TEXT PRIMARY KEY, name TEXT NOT NULL, attachment
BYTEA NOT NULL);

Torna ai file Node.js. Aggiungi alcune importazioni nella parte superiore del file:

  const { Client } = require('pg');
  const streamBuffers = require('stream-buffers');

Per memorizzare il PDF nella tabella del database, modificare la funzione di caricamento. Sostituisci le ultime due righe (saveAsFile e send) con questo frammento di codice:

  const pgClient = new Client();
  pgClient.connect();

  const id = Math.random().toString(36).substr(2, 6); // not securely random at all,
  but serves the purpose for this demo

  const writableStream = new streamBuffers.WritableStreamBuffer();
  writableStream.on("finish", async () => {
    await pgClient.query("INSERT INTO job_postings VALUES ($1, $2, $3)", [
      id,
      name,
      writableStream.getContents()
    ]);
    res.redirect(`/job/${id}`);
  })
  result.writeToStream(writableStream);

Per scrivere il contenuto, creare un WritableStreamBuffer. Con l'evento finish, è il momento di eseguire la query SQL. Il pacchetto node-postgres converte automaticamente il parametro Buffer nel formato BYTEA. La query reindirizza l'utente a /job/{id}, un endpoint creato in seguito.

Per l’API PDF Embed, è inoltre necessario un endpoint che restituisca solo il contenuto PDF:

  router.get('/pdf/:id', async function (req, res, next) {
    const id = req.params.id;

    const pgClient = new Client();
    pgClient.connect();

  const pgResult = await pgClient.query("SELECT attachment FROM job_postings WHERE id
  = $1", [id]);
  const buffer = pgResult.rows[0].attachment;
  res.type('pdf');
    return res.send(buffer);
  });

Incorporamento delle PDF

Creare ora l'endpoint /job/{id}, che esegue il rendering di un modello contenente il nome della pubblicazione del processo richiesta e un PDF incorporato.

router.get('/job/:id', async function(req, res, next) {
    const id = req.params.id;

    const pgClient = new Client();
    pgClient.connect();

    const pgResult = await pgClient.query("SELECT name FROM job_postings WHERE id =
  $1", [id]);
    const name = pgResult.rows[0].name;

    res.render('job', { pdf_url: `/pdf/${id}`, name });
  });

Nella directory views/, crea un file job.jade con questo contenuto:

  extends layout

  block content
    h1= name
    div(id='adobe-dc-view')
    script(src='https://documentcloud.adobe.com/view-sdk/main.js')
    script.
      window.embedUrl = "!{pdf_url}";
    script(src='/javascripts/embed-pdf.js')

Il primo script è l’SDK di visualizzazione di Adobe, che semplifica l’incorporamento dell’PDF. Il secondo script è un one-liner in linea che imposta il valore di window.embedUrl sull'URL del PDF fornito dal gestore di route rapido. Creare personalmente il terzo script nel modo seguente:

  document.addEventListener("adobe_dc_view_sdk.ready", function () {
    var adobeDCView = new AdobeDC.View({ clientId: "YOUR API KEY HERE", divId:
   "adobe-dc-view" });
    adobeDCView.previewFile({
      content: { location: { url: '//' + window.location.host + window.embedUrl }
         },
      metaData: { fileName: "Job posting" }
    });
  });

Ora puoi testare l’intero processo di caricamento di un documento, reindirizzamento alla pagina /job/id e visualizzazione del PDF incorporato. Gli utenti eseguono gli stessi passaggi per aggiungere un annuncio di lavoro o un altro documento al sito Web.

Per vedere un incorporamento in linea in azione, guardate questa demo dal vivo.

Fasi seguenti

Questa esercitazione pratica spiega come utilizzare Node.js con Acrobat Services per convertire in PDF un annuncio di lavoro caricato in vari formati. Il PDF risultante è stato quindi incorporato in una pagina Web. Ora puoi aggiungere la stessa funzione al tuo sito Web, rendendo più facile per i datori di lavoro caricare descrizioni di lavori, brochure e altro ancora da trovare per chi è in cerca di lavoro. Queste funzionalità aiutano tutti a ottenere le informazioni necessarie per trovare il lavoro dei sogni.

Acrobat Services ti consente di aggiungere funzioni chiave di gestione dei documenti al tuo sito Web o app. Per ulteriori informazioni sulle funzionalità di queste API, consulta la seguente documentazione di avvio rapido:

Per iniziare ad aggiungere funzionalità di gestione dei documenti di facile utilizzo al tuo sito Web, iscriviti alla versione di prova gratuita. L'API di Adobe PDF Embed è sempre gratuita e l'API dei servizi Adobe PDF è gratuita per sei mesi; quindi è di soli $0,05 per transazione di documento e potrai pagare in base alla tua disponibilità in base alla crescita della tua azienda.