ComponentBuild from ScratchUse APIMain Risk ReducedDrag-and-drop upload UI2–3 setmanes< 1 horaProblemes de navegador, problemes d'accessibilitatUllars i múltiples càrregues de fitxers1–2 setmanesInstal·lació senzillaErrors de xarxa, maneig de fitxers gransVirus escaneig i seguretatManteniment desconnectatInclòsMalware, vulnerabilitats de seguretatProcessament de fitxers (conversió de PDF, optimització d'imatge)1+ setmana per formatManteniment de la biblioteca on-demand, suport de formatEnviament de CDN1–2 setmanesInclòsEncarregació lenta, problemes d'escala Quan es demana a un equip que “construeixi ràpidament un portal de presentació”, al principi sona fàcil.Potser penseu que només trigarà un parell de sprints. Gestionar les càrregues de fitxers en la vida real no és senzill. Vostè ha de fer front a fitxers grans com ara 300MB ZIPs, PDFs trencats, comprovacions de seguretat, diferents navegadors, i els estudiants que es presenten just abans de la data límit. Les característiques bàsiques, com ara rols d'usuari, assignatures i classificació, són en realitat bastant simples. Aquesta guia és per als líders d'enginyeria que volen evitar aquesta situació. En comptes de construir el maneig de fitxers des del zero, podeu utilitzar serveis de fitxers acabats a través d'API. Key Takeaways Coneixements clau El maneig de fitxers és la part més difícil d'un portal de presentació, no les característiques bàsiques de CRUD. Mantingui la lògica de l'aplicació principal separada de la gestió de fitxers per construir més ràpidament. Utilitzeu APIs per a càrregues, processament i seguretat en comptes de construir-ho tot vosaltres mateixos. Escaneig automàtic de virus, comprovacions de fitxers i conversions utilitzant fluxos de treball i webhooks. Passa el teu temps d'enginyeria en funcions que facin únic el teu producte, no en la gestió de sistemes de fitxers. Why “Just Build It” Costs More Than You Think Per què "Just Build It" costa més del que penses Abans de parlar d'arquitectura, siguem honestos sobre l'abast real. Un bon portal de presentació té dues parts principals, i no són tan difícils. Usuaris, rols, assignatures i qualificacions. Part one: Aquest és un treball predictible.El teu equip ha construït aplicacions CRUD abans.L'estructura de la base de dades és clara, els casos d'avantguarda són gestionables i pots estimar l'esforç. Gestió de fitxers. Part two: Aquí és on apareix l’esforç ocult. Un sistema de fitxers preparat per a la producció necessita molt més que un simple botó de càrrega. Un carregador de desplaçament que funciona en tots els navegadors i dispositius. Suport per a arxius grans utilitzant càrregues trencades (perquè les càrregues no fracassin si la xarxa cau). Escanejar virus abans d'emmagatzemar arxius. Comprova automàticament el format del fitxer (perquè algú carregarà el format incorrecte). Convertir documents a PDF per a una classificació coherent. Enllaços d'accés segurs i limitats en el temps per als graders. CDN per a un accés ràpid. Un sistema que escalfa automàticament. Cadascun d’ells és un projecte per si mateix. Aquí està com la construcció personalitzada es compara amb l'ús d'una API: ComponentBuild from ScratchUse APIMain Risk ReducedDrag-and-drop upload UI2–3 setmanes< 1 horaProblemes de navegador, problemes d'accessibilitatUllars i múltiples càrregues de fitxers1–2 setmanesInstal·lació senzillaErrors de xarxa, maneig de fitxers gransVirus escaneig i seguretatManteniment desconnectatInclòsMalware, vulnerabilitats de seguretatProcessament de fitxers (conversió de PDF, optimització d'imatge)1+ setmana per formatManteniment de la biblioteca on-demand, suport de formatEnviament de CDN1–2 setmanesInclòsEncarregació lenta, problemes d'escala Component Construït des de Scratch Utilitza el foc Principal risc reduït Per tant, aquesta elecció no és realment sobre si el seu equip La qüestió és si es tracta de Passa el temps a construir-la. Pot Hauria El temps dels enginyers és valuós.És millor gastar la creació de característiques que fan que el vostre portal es destaqui i sigui útil, en comptes de reconstruir sistemes de fitxers i eines que ja estan disponibles i fiables. Per tant, si el maneig de fitxers és on viu la major part de la complexitat oculta, la pregunta real esdevé: com hem de dissenyar el sistema de manera diferent? The Architecture That Enables Speed L'arquitectura que permet la velocitat Els equips que enviïn ràpidament segueixen una idea senzilla: separen clarament la lògica de la seva aplicació principal del maneig de fitxers. Això és el que sembla en la pràctica: Penseu en tres cames senzilles: Frontend: la interfície on els estudiants presenten el treball i els graduats el revisen. Lògica empresarial: les regles per a terminis, presentacions, classificació i permisos. Model de dades: L'estructura de la base de dades: usuaris, assignatures, presentacions i qualificacions. El teu equip se centra només en aquestes tres capes. Des del moment en què un estudiant clica Fins que un grader obri el fitxer, tot relacionat amb el mateix fitxer, càrrega, emmagatzematge, escaneig per a seguretat i processament, es gestiona per un servei de fitxers com Filestack. “Submit” Mantenint el tractament de fitxers per separat, el sistema es manté més net, més ràpid de construir i molt més fàcil de mantenir. Una vegada que separis la lògica empresarial de la gestió de fitxers, la implementació es torna molt més senzilla. Implementation: The Three Accelerators Títol: Els tres acceleradors En aquest punt, l’objectiu és simple: convertir setmanes de treball en pocs dies centrant-se només en les parts que fan únic el vostre portal. Aquests tres acceleradors eliminen les majors desacceleracions: càrrega de fitxers, processament de fitxers i lliurament de fitxers, de manera que el vostre equip pot construir més ràpid sense comprometre la qualitat o la seguretat. 1. The Upload Experience El formulari de presentació és la part més important de la seva pàgina web i és on la complexitat del front-end creix ràpidament si ho construeix tot vostè mateix. Donar suport a Google Drive, OneDrive, Dropbox i carregaments locals, mantenint el drag-and-drop suau, mostrant el progrés de la càrrega i fent que funcioni a través dels navegadors, és un esforç seriós. La incorporació de Filestack's File Picker redueix això a unes hores de treball d'integració. Això és el que sembla en un formulari de presentació de React: import React, { useState } from "react";
import * as filestack from "filestack-js";

const client = filestack.init("YOUR_API_KEY_HERE");

function FilestackUpload() {
  const [fileData, setFileData] = useState(null);

  const handleUpload = async () => {
    try {
      const result = await client.picker({
        accept: ["image/*"],
        maxFiles: 1,
        maxSize: 5 * 1024 * 1024,
        onUploadDone: (res) => {
          console.log("Upload done:", res);
          setFileData(res.filesUploaded[0]);
        },
      }).open();
    } catch (error) {
      console.error("Upload failed:", error);
    }
  };

  return (
    <div>
      <button onClick={handleUpload}>Upload File</button>

      {fileData && (
        <div style={{ marginTop: "20px" }}>
          <p>File uploaded: {fileData.filename}</p>
          <img src={fileData.url} alt="Uploaded" style={{ maxWidth: "300px" }} />
        </div>
      )}
    </div>
  );
}

export default FilestackUpload;
 Fora de la caixa, els estudiants obtenen: Múltiples arxius d'enviament Suport d'emmagatzematge en núvol Indicadors de progrés Gestió d'errors incorporats Tot és mantingut per un equip centrat íntegrament en fer que les càrregues de fitxers siguin fiables. Construïm una gran En integrar una solució acabada, s'obté un sistema de càrrega polit sense passar setmanes desenvolupant-lo i mantenint-lo vostè mateix. Experiència drag-and-drop Una vegada que els arxius estan en el sistema, han de ser protegits i processats automàticament. 2. The Security and Processing Pipeline En un sistema de producció real amb centenars o milers d'usuaris, l'escaneig de virus no és opcional; és necessari. A més, només comprovar l'extensió de l'arxiu no és suficient. Un arxiu anomenat .pdf no pot ser realment un PDF. Més enllà de la seguretat, hi ha un altre problema: diferents formats de fitxers. Alumnes de la UPDATE: Imatges en JPEG, PNG, HEIF, WebP Documents en .docx, .pages o PDF escanejats Si els graders han de fer front a tots aquests formats diferents, els retarda. Un millor enfocament és processar automàticament cada arxiu tan aviat com es carrega. Amb l'API de fluxos de treball de Filestack, podeu configurar una canonada automàtica que: Escanejar arxius per a virus Tipus de fitxers validats Convertir documents en PDF Compressió de grans imatges Optimitza els arxius per a l'emmagatzematge i el lliurament Tot això passa automàticament després de la càrrega. No cal escriure codi personalitzat per a cada tipus de fitxer. Si voleu explorar-ho més, Orquestració de fluxos de treball de processament automàtic de fitxers Explica amb detall la configuració completa i s'explica com configurar correctament aquestes canonades. Orquestració de fluxos de treball de processament automàtic de fitxers La seguretat és especialment important.Si gestioneu l'exploració de virus vosaltres mateixos, sou responsables de: Actualització de les definicions de virus Manteniment de sistemes d'escaneig Actuar amb falsos positius Monitorització de vulnerabilitats de seguretat Aquest és el treball continuat que el teu equip ha de gestionar per sempre. Mitjançant l'ús d'una API de fitxers que inclogui seguretat i processament integrats, el vostre equip evita el manteniment a llarg termini i manté el sistema més segur amb molt menys esforç. Estan construïts directament a la capa d'API, eliminant una càrrega de manteniment a llarg termini que el vostre equip hauria de gestionar per si mateix. Mesures de seguretat completes per a les càrregues Amb el processament manejat automàticament, la peça final és connectar tot de nou al seu flux de treball de classificació. 3. Webhooks and the Grading Workflow Aquí és on l’arquitectura mostra realment el seu valor. Quan un estudiant envieu un arxiu, no voleu aturar tot mentre s'acaba l'escaneig de virus i la conversió de fitxers. En lloc d'això, accepteu la presentació immediatament, deixeu que Filestack processi el fitxer en el fons i espereu que us notifiqui quan estigui llest. Aquesta comunicació es fa a través d’una . webhook El seu backend proporciona un punt final especial que Filestack crida automàticament després que el fitxer hagi estat escanejat, validat i processat. # Flask example
@app.route('/webhooks/filestack', methods=['POST'])
def handle_filestack_webhook():
    payload = request.json

    if payload['action'] == 'fp.upload':
        file_handle = payload['data']['url'].split('/')[-1]
        submission_id = payload['metadata']['submission_id']

        # Update submission status in your database
        db.submissions.update(
            {'_id': submission_id},
            {'$set': {
                'status': 'processed',
                'file_handle': file_handle,
                'ready_for_grading': True
            }}
        )

        # Trigger your grading notification
        notify_grader(submission_id)

    return jsonify({'status': 'ok'})
 Això és el que passa pas a pas: Un estudiant carrega un arxiu. El sistema accepta la sol·licitud immediatament. Filestack processa el fitxer en el fons (escanejar, convertir, optimitzar). Un cop completat el processament, Filestack envia una sol·licitud de webhook al seu backend. El seu backend actualitza l'estat de la presentació i notifica al graduer. Ara, el fitxer està marcat com a llest i es pot accedir de forma segura. Aquest patró manté el sistema ràpid i receptiu, mentre que el processament pesat s'executa per separat. Si voleu entendre com s'aplica aquest patró més àmpliament, Mostra com els webhooks poden automatitzar fluxos de treball a través de molts casos d'ús d'enginyeria, no només portals de presentació. Utilitzar webhooks per a l'automatització Secure Grader Access Els graduats no han de rebre enllaços públics i permanents a les presentacions dels estudiants. Els arxius només han de ser accessibles durant un temps limitat i només per als usuaris autoritzats. Filestack és compatible amb enllaços d'accés basats en polítiques de temps limitat, el que significa que podeu generar una URL segura que funcioni durant un curt període de temps, com una hora, i després caduca automàticament. Aquí teniu un exemple senzill: const generateSecureGraderLink = (fileHandle, graderId) => {
  const policy = {
    expiry: Math.floor(Date.now() / 1000) + 3600, // 1-hour access
    handle: fileHandle,
    call: ['read'],
  };

  const encodedPolicy = btoa(JSON.stringify(policy));
  const signature = hmacSha256(encodedPolicy, YOUR_APP_SECRET);

  return `https://cdn.filestackcontent.com/${fileHandle}` +
        `?policy=${encodedPolicy}&signature=${signature}`;
};
 What this does: Crea una política que permet l'accés a llegir. Estableix un temps d'expiració (1 hora en aquest cas). Signar la sol·licitud de forma segura utilitzant el secret de l'aplicació. Generar un enllaç d'accés temporal. The grader gets a link that works for one hour. After that, it automatically stops working. Això impedeix l'accés permanent del públic a les presentacions i elimina la necessitat de gestionar normes complicades d'emmagatzematge o la caducitat manual de l'enllaç. Amb les càrregues, el processament i l'accés manejats, els seus enginyers són finalment lliures de centrar-se en el que realment importa. What Your Team Actually Builds Què construeix realment el teu equip Una vegada que la gestió de fitxers es gestiona per Filestack, els seus enginyers poden centrar-se en les parts que realment importen, les característiques que fan que el seu portal sigui diferent. El cicle de vida de les assignatures: crear assignatures, publicar-les, establir terminis, gestionar les presentacions tardanes, adjuntar rubriques, aquesta és la lògica del producte bàsic. Rols i permisos d'usuari: Gestió d'instructors, assistents docents, estudiants i administradors. Definició de qui pot enviar, classificar, editar o visualitzar contingut. Això reflecteix com funciona realment la vostra institució o plataforma. El llibre de classificació: puntuació, afegir comentaris, anotacions, càlculs de classificació, exportacions, és on es crea valor real per als usuaris. Integració de plagi: Si necessiteu connectar amb serveis com Turnitin o eines similars, aquesta integració viu en el vostre backend. Aquests són reptes d'enginyeria significatius que milloren el vostre producte. Anem a veure com tot això funciona junts en un flux de presentació del món real. A Real Submission Flow, End to End Un flux de presentació real, final a final Fem que això sigui pràctic. Un instructor crea un projecte que requereix: Arxiu de codi (ZIP) Un informe escrit (PDF o DOC) Suport a les captures de pantalla Els estudiants obren el formulari d'enviament. arrosseguen i descarreguen arxius o els importen de Google Drive. El File Picker comprova els tipus d'arxius i imposa el límit de 500MB en el navegador abans que comenci la càrrega. Els arxius es carreguen a Filestack. Automàticament, el flux de treball de processament s'executa: Scan complet de virus Convertir arxius DOC a PDF Les imatges són comprimides i optimitzades Un cop finalitzat el processament, el punt final del webhook rep una notificació.El seu backend actualitza el registre de presentació a la base de dades i envia al gradiador un enllaç d'accés segur i limitat al temps. El graduat obre la sol·licitud i veu: Documents correctament formatats Imatges optimitzades Accés segur Sense cap confusió de format, preocupacions de seguretat o problemes d'infraestructura tard a la nit durant la setmana de l'examen. Des de la decisió arquitectònica fins a la integració completa, aquesta és realment una implementació d'un dia per a un enginyer experimentat. Si el vostre equip espera un gran trànsit o grans actius, la guia per carregar arxius grans explica les millors pràctiques per gestionar els arxius grans de manera fiable. Conclusion Els equips que llancen portals de presentació ràpidament no salten els passos ni redueixen la qualitat. es mouen més ràpidament perquè fan una elecció arquitectònica intel·ligent: construeixen les característiques principals ells mateixos i utilitzen APIs per a la infraestructura complexa. Gestionar els arxius en un sistema de producció, de forma segura, fiable i a escala, és una gran tasca si ho construïu tot des de zero. Però quan utilitzeu una API, es fa molt més fàcil. La decisió és simple: dediqueu el vostre temps a crear característiques que facin especial el vostre producte, no a reconstruir el maneig de fitxers. Aquest article va ser publicat a la Blog de filòsofs . Aquest article va ser publicat a la Blog de filòsofs Blog de filòsofs .

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Aquest àudio és produït a l'idioma original de la història!

Els equips d'enginyeria poden enviar portals de presentació d'assignacions en hores: com es pot fer també

About Author

COMENTARIS

Etiquetes penjant

AQUEST ARTICLE VA SER PRESENTAT A

Related Stories

The Fall of OM by Mantra DAO: Accident or Pattern?

How AWS, Bosch & Brave Reach 4M+ Tech Pros on HackerNoon

Why Over-Explaining Your Tech Is Killing Your Content Strategy

Startups of The Year: Meet the Business Industry

The Fall of OM by Mantra DAO: Accident or Pattern?

How AWS, Bosch & Brave Reach 4M+ Tech Pros on HackerNoon

Why Over-Explaining Your Tech Is Killing Your Content Strategy

Startups of The Year: Meet the Business Industry

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps