ComponentBuild from ScratchUse APIMain Risk ReducedDrag-and-drop upload UI2–3 semanas< 1 horaProblemas do navegador, problemas de acessibilidadeLargas e multi-file uploads1–2 semanasFalhas de configuração simples, gerenciamento de arquivos grandesVírus escaneamento e segurançaManutenção independenteIncluídoMalware, vulnerabilidades de segurançaProcessamento de arquivos (conversão de PDF, otimização de imagem)1+ semana por formatoEm demandaManutenção de biblioteca, suporte de formatoLivro CDN1–2 semanasIncluídoLivro lento, problemas de escala Quando uma equipe é convidada a "construir rapidamente um portal de submissão", isso soa fácil no início.Você pode pensar que levará apenas alguns sprints.Mas uma vez que você comece a trabalhar nele, as coisas ficam complicadas. O processamento de carregamentos de arquivos na vida real não é simples.Você tem que lidar com arquivos grandes como 300MB ZIPs, PDFs quebrados, verificações de segurança, diferentes navegadores e estudantes submetendo antes do prazo.Por causa disso, um projeto de duas semanas pode se transformar em um projeto de seis semanas. Os recursos básicos, como funções de usuário, atribuições e classificação, são realmente bastante simples. Este guia é para líderes de engenharia que querem evitar esta situação. Em vez de construir o gerenciamento de arquivos do zero, você pode usar serviços de arquivos prontos através de APIs. Key Takeaways Principais Takeaways O gerenciamento de arquivos é a parte mais difícil de um portal de submissão, não os recursos CRUD básicos. Mantenha a lógica do aplicativo principal separada do gerenciamento de arquivos para construir mais rapidamente. Use APIs para carregamentos, processamento e segurança, em vez de construir tudo você mesmo. Automatize a varredura de vírus, verificações de arquivos e conversões usando fluxos de trabalho e webhooks. Passe seu tempo de engenharia em recursos que tornem seu produto único, não em gerenciar sistemas de arquivos. Why “Just Build It” Costs More Than You Think Por que “Just Build It” custa mais do que você pensa Antes de falar sobre arquitetura, sejamos honestos sobre o alcance real.Um bom portal de submissão tem duas partes principais, e elas não são tão difíceis. usuários, papéis, atribuições e classificações. Part one: Este é um trabalho previsível. sua equipe já construiu aplicativos CRUD antes. A estrutura do banco de dados é clara, os casos de borda são gerenciáveis e você pode estimar o esforço. arquivo de manuseio. Part two: É aí que surge o esforço oculto. Um sistema de arquivos pronto para produção precisa de muito mais do que um simples botão de upload. Um carregador drag-and-drop que funciona em todos os navegadores e dispositivos. Suporte para arquivos grandes usando carregamentos divididos (de modo que os carregamentos não falham se a rede cair). Análise de vírus antes de arquivos serem armazenados. Verificação automática do formato do arquivo (porque alguém irá carregar o formato errado). Conversão de documentos para PDF para classificação consistente. Ligações de acesso seguras e limitadas por tempo para graduadores. CDN para acesso rápido. Armazenamento que escala automaticamente. Cada um é um projeto por si só. Aqui está como a construção personalizada se compara com o uso de uma API: ComponentBuild from ScratchUse APIMain Risk ReducedDrag-and-drop upload UI2–3 semanas< 1 horaProblemas do navegador, problemas de acessibilidadeLargas e multi-file uploads1–2 semanasFalhas de configuração simples, gerenciamento de arquivos grandesVírus escaneamento e segurançaManutenção independenteIncluídoMalware, vulnerabilidades de segurançaProcessamento de arquivos (conversão de PDF, otimização de imagem)1+ semana por formatoEm demandaManutenção de biblioteca, suporte de formatoLivro CDN1–2 semanasIncluídoLivro lento, problemas de escala Componente Construído a partir do Scratch Usando o fogo Risco principal reduzido Portanto, essa escolha não é realmente sobre se sua equipe A questão é: se eles são Dedique tempo para a construção. pode deveria É melhor gastar o tempo de seus engenheiros criando recursos que façam seu portal se destacar e ser útil, em vez de reconstruir sistemas de arquivos e ferramentas que já estão disponíveis e confiáveis. Então, se o gerenciamento de arquivos é onde vive a maior parte da complexidade oculta, a verdadeira pergunta se torna: como devemos projetar o sistema de forma diferente? The Architecture That Enables Speed A arquitetura que permite a velocidade As equipes que enviam rapidamente seguem uma ideia simples: separem claramente sua lógica de aplicação principal do gerenciamento de arquivos. Aqui está o que parece na prática: Pense em três camadas simples: Frontend: A interface onde os alunos submetem o trabalho e os alunos o revisam. Lógica de negócios: as regras para prazos, submissões, classificação e permissões. Modelo de dados: A estrutura do banco de dados: usuários, atribuições, submissões e classificações. Sua equipe se concentra apenas nessas três camadas. A partir do momento em que um aluno clica Até que um graduador abra o arquivo, tudo relacionado ao arquivo em si, upload, armazenamento, digitalização para segurança e processamento, é gerenciado por um serviço de arquivos como o Filestack. “Submit” Ao manter o gerenciamento de arquivos separado, seu sistema permanece mais limpo, mais rápido de construir e muito mais fácil de manter. Depois de separar a lógica de negócios do gerenciamento de arquivos, a implementação torna-se muito mais simples. Implementation: The Three Accelerators Título: Os Três Aceleradores Neste ponto, o objetivo é simples: transformar semanas de trabalho em apenas alguns dias, concentrando-se apenas nas partes que tornam o seu portal único. Esses três aceleradores removem as maiores desacelerações: upload de arquivos, processamento de arquivos e entrega de arquivos, para que sua equipe possa construir mais rápido sem comprometer a qualidade ou a segurança. 1. The Upload Experience O formulário de submissão é a parte mais importante do seu portal.É também onde a complexidade front-end cresce rapidamente se você construir tudo sozinho. Suportar o Google Drive, o OneDrive, o Dropbox e os carregamentos locais, mantendo o drag-and-drop suave, mostrando o progresso do upload e fazendo com que ele funcione em vários navegadores, é um esforço sério. A incorporação do File Picker do Filestack reduz isso a algumas horas de trabalho de integração. Aqui está o que parece em um formulário de submissão 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 da caixa, os alunos recebem: Multi-arquivo de upload Suporte ao armazenamento em nuvem Upload indicadores de progresso Gerenciamento de erros embutidos Tudo é mantido por uma equipe focada inteiramente em tornar os upload de arquivos confiáveis. Construindo um grande Ao integrar uma solução pronta, você obtém um sistema de upload polido sem gastar semanas desenvolvendo e mantendo-o você mesmo. Experiência de drag-and-drop Uma vez que os arquivos estão no sistema, eles precisam ser protegidos e processados automaticamente. 2. The Security and Processing Pipeline Cada arquivo que um aluno carrega é desconhecido e pode ser arriscado.Em um sistema de produção real com centenas ou milhares de usuários, a varredura de vírus não é opcional; é necessário. Also, checking only the file extension isn’t enough. A file called assignment.pdf might not actually be a real PDF. You need proper file validation. Além da segurança, há outro problema: diferentes formatos de arquivo. Os alunos subiram: Imagens em JPEG, PNG, HEIF, WebP Documentos em .docx, .pages ou PDFs digitalizados Se os gradadores tiverem que lidar com todos esses formatos diferentes, isso os retarda. Uma abordagem melhor é processar automaticamente cada arquivo assim que ele for carregado. Com a API de fluxos de trabalho do Filestack, você pode configurar um pipeline automático que: Análise de arquivos para vírus Validação de tipos de arquivos Converter documentos para PDF Compressão de imagens grandes Optimiza arquivos para armazenamento e entrega Tudo isso acontece automaticamente após o upload. Você não precisa escrever código personalizado para cada tipo de arquivo. Se você quiser explorar mais sobre isso, Orquestração de fluxos de trabalho de processamento de arquivos automatizados Explique a configuração completa em detalhes e passe por como configurar essas tubulações corretamente. Orquestração de fluxos de trabalho de processamento de arquivos automatizados Se você gerenciar a varredura de vírus sozinho, você é responsável por: Atualização de definições de vírus Manutenção de sistemas de digitalização Comportamento dos falsos positivos Monitoramento de vulnerabilidades de segurança Esse é um trabalho contínuo que sua equipe tem que lidar para sempre. Ao usar uma API de arquivo que inclui segurança e processamento incorporados, sua equipe evita a manutenção a longo prazo e mantém o sistema mais seguro com muito menos esforço. são construídos diretamente na camada da API, removendo uma carga de manutenção de longo prazo que sua equipe teria que gerenciar por conta própria. Medidas de segurança abrangentes para upload Com o processamento manuseado automaticamente, a peça final é conectar tudo de volta ao seu fluxo de trabalho de classificação. 3. Webhooks and the Grading Workflow É aqui que a arquitetura realmente mostra seu valor. Quando um aluno submete um arquivo, você não quer parar tudo enquanto a varredura de vírus e a conversão de arquivo estiverem concluídas.Em vez disso, você aceita a submissão imediatamente, deixe o Filestack processar o arquivo no fundo e aguarde para ser notificado quando estiver pronto. Essa comunicação ocorre através de uma . webhook Seu backend fornece um endpoint especial que o Filestack chama automaticamente depois que o arquivo foi digitalizado, validado e processado. # 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'})
 Aqui está o que acontece passo a passo: Um aluno carrega um arquivo. O sistema aceita a apresentação imediatamente. O Filestack processa o arquivo em segundo plano (escanear, converter, otimizar). Uma vez concluído o processamento, o Filestack envia uma solicitação de webhook para o seu backend. Seu backend atualiza o status da submissão e notifica o graduador. Agora, o arquivo está marcado como pronto e pode ser acessado com segurança. Este padrão mantém seu sistema rápido e responsivo, enquanto o processamento pesado é executado separadamente. Se você quiser entender como esse padrão é aplicado mais amplamente, mostra como webhooks podem automatizar fluxos de trabalho em muitos casos de uso de engenharia, não apenas portais de submissão. Utilização de Webhooks para automação Secure Grader Access Os graduados não devem receber links públicos e permanentes para as apresentações dos alunos.Os arquivos só devem ser acessíveis por um tempo limitado e apenas para usuários autorizados. O Filestack suporta links de acesso baseados em políticas de tempo limitado, o que significa que você pode gerar um URL seguro que funcione por um curto período de tempo, como uma hora, e depois expira automaticamente. Aqui está um exemplo simples: 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: Cria uma política que permite o acesso à leitura. Defina um tempo de expiração (1 hora neste caso). Assine a solicitação com segurança usando o segredo do aplicativo. Gerar um link de acesso temporário. O gradiador recebe um link que funciona por uma hora.Depois disso, ele deixa de funcionar automaticamente. Isso impede o acesso público permanente às submissões e elimina a necessidade de gerenciar regras complicadas de armazenamento ou expiração manual do link. Com carregamentos, processamento e acesso gerenciados, seus engenheiros estão finalmente livres para se concentrar no que realmente importa. What Your Team Actually Builds O que sua equipe realmente constrói Uma vez que o gerenciamento de arquivos é gerenciado pelo Filestack, seus engenheiros podem se concentrar nas partes que realmente importam, as características que tornam seu portal diferente. O ciclo de vida da tarefa: criar tarefas, publicá-las, definir prazos, lidar com submissões atrasadas, anexar rubricas, esta é a lógica do produto principal. Papéis e permissões do usuário: gerenciar instrutores, assistentes de ensino, alunos e administradores. Definir quem pode enviar, classificar, editar ou visualizar conteúdo. O livro de graduação: pontuação, adição de feedback, anotações, cálculos de classificação, exportações, é aqui que o valor real é criado para os usuários. Integração de plágio: Se você precisar se conectar com serviços como Turnitin ou ferramentas semelhantes, essa integração vive em seu backend. Estes são desafios de engenharia significativos que melhoram seu produto. Vamos ver como tudo isso funciona em conjunto em um fluxo de submissão do mundo real. A Real Submission Flow, End to End Um verdadeiro fluxo de submissão, fim a fim Vamos fazer isso prático. Um instrutor cria um projeto que requer: Arquivo de Código (ZIP) Um relatório escrito (PDF ou DOC) Suporte a screenshots Os alunos abrem o formulário de submissão, arrastam e descarregam arquivos ou os importam do Google Drive. O File Picker verifica os tipos de arquivos e impõe o limite de 500MB no navegador antes mesmo do início do upload. Os arquivos são enviados para o Filestack. Automaticamente, o fluxo de trabalho de processamento é executado: Antivírus completa Converter arquivos DOC para PDF As imagens são compactadas e otimizadas Uma vez concluído o processamento, o seu endpoint do webhook recebe uma notificação.O seu backend atualiza o registro de submissão no banco de dados e envia ao graduador um link de acesso seguro e limitado em tempo. O graduado abre a submissão e vê: Documentos corretamente formatados Imagens otimizadas Acesso Seguro Sem qualquer confusão de formato, preocupações de segurança ou problemas de infraestrutura no final da noite durante a semana do exame. Da decisão de arquitetura à integração completa, esta é uma implementação realista de um dia para um engenheiro experiente. Se sua equipe espera tráfego pesado ou grandes ativos, o guia para carregamentos de arquivos grandes explica as melhores práticas para lidar com arquivos grandes de forma confiável. Conclusion As equipes que lançam portais de submissão rapidamente não saltam os passos ou diminuem a qualidade.Elas se movem mais rapidamente porque fazem uma escolha arquitetônica inteligente: elas próprias criam os principais recursos e usam APIs para a infraestrutura complexa. Gerenciar arquivos em um sistema de produção, de forma segura, confiável e em escala, é um grande trabalho se você construir tudo do zero.Mas quando você usa uma API, fica muito mais fácil.Em vez de construir e manter sistemas complicados, você simplesmente configura o que você precisa. A decisão é simples: gaste seu tempo criando recursos que tornem seu produto especial, não reconstruindo o gerenciamento de arquivos. This article was published on the  Arquivo do Blog . Este artigo foi publicado na Arquivo do Blog Arquivo do Blog .

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Este áudio é produzido no idioma original da história!

Equipes de engenharia podem enviar portais de submissão de tarefas em horas: como você pode fazê-lo também

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Telegram: a ponte da Crypto Island para o continente

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Telegram: a ponte da Crypto Island para o continente

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps