Din ”enkla interna tracker” börjar enkelt. Sedan blir den ett stökigt kalkylark, ett halvfärdigt formulär och en Slack-tråd som ingen kan söka i när nästa förfrågan kommer in.
Det här slår mot marketing ops när kampanjförfrågningar hopar sig, men byråledare och små team känner av det också. Med den här automationen för en Redis request tracker får du en lättviktig plats för att lägga till, redigera, ta bort och återställa förfrågningar utan att behöva rulla ut ännu ett verktyg.
Du får se hur flödet levererar en webbläsarbaserad tracker, lagrar data i Redis och exponerar korrekt formaterade endpoints som teamet faktiskt kan använda i vardagen.
Så fungerar automationen
Hela n8n-flödet, från trigger till slutlig output:
n8n Workflow Template: Redis + webbläsare: enkel intern tracker teamet använder
flowchart LR
subgraph sg0["Flow 1"]
direction LR
n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Hook: Reset"]
n8@{ icon: "mdi:swap-vertical", form: "rounded", label: "Loop Over Items", pos: "b", h: 48 }
n10["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format as JSON"]
n14["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Get All Item Keys"]
n15["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Delete an Item"]
n16["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Reset Autoincrement ID"]
n7 --> n16
n15 --> n8
n10 --> n8
n8 --> n15
n14 --> n10
n16 --> n14
end
subgraph sg1["Flow 2"]
direction LR
n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Hook: Add Item"]
n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Add Item"]
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>GetID"]
n3 --> n2
n1 --> n3
end
subgraph sg2["Flow 3"]
direction LR
n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Hook: Get Items"]
n11["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Get All Items"]
n12["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Format the Items"]
n11 --> n12
n0 --> n11
end
subgraph sg3["Flow 4"]
direction LR
n9@{ icon: "mdi:swap-vertical", form: "rounded", label: "SET API URL", pos: "b", h: 48 }
n17["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Serve HTML CRUD App"]
n18["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Webhook: Serve HTML App"]
n9 --> n17
n18 --> n9
end
subgraph sg4["Flow 5"]
direction LR
n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Hook: Edit Item"]
n13["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Update the item"]
n4 --> n13
end
subgraph sg5["Flow 6"]
direction LR
n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Hook: Delete Item"]
n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/redis.svg' width='40' height='40' /></div><br/>Delete Item by Id"]
n5 --> n6
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n14,n15,n16,n2,n3,n11,n13,n6 database
class n7,n1,n0,n17,n18,n4,n5 api
class n10,n12 code
classDef customIcon fill:none,stroke:none
class n7,n10,n14,n15,n16,n1,n2,n3,n0,n11,n12,n17,n18,n4,n13,n5,n6 customIcon
Problemet: interna förfrågningar försvinner (eller dubbleras)
Intern spårning låter tråkigt tills den sabbar din vecka. En kollega ber om ”en snabb ändring”, du skriver ner det någonstans, och två dagar senare minns du inte om det levererades, vem som äger det eller vad ”snabb” betydde. Kalkylark hjälper i en minut, men de är sköra: länkar delas fel, folk skriver över fält och uppdateringar känns inte realtidsnära. Samtidigt kan ett fullt ärendehanteringssystem vara överkurs för ett team på 5–20 personer som bara behöver en lätt lista och några få åtgärder.
Friktionen byggs på. Här är var det faller isär.
- Du slösar cirka 10 minuter per förfrågan bara på att lista ut var den är spårad och vad senaste status är.
- Dubbletter dyker upp eftersom det inte finns en enda ”källa till sanningen” som teamet faktiskt kollar i.
- Redigeringar i kalkylark är lätta att förstöra, särskilt när flera uppdaterar samma rad samtidigt.
- ”Vi fixar det senare” blir en osynlig backlog som aldrig städas upp.
Lösningen: en webbläsarbaserad CRUD-tracker med Redis som grund
Det här flödet gör n8n till både ”appen” och backend. En webhook serverar ett enkelt HTML-gränssnitt på en sida (ingen extra hosting), så teamet öppnar en URL och ser direkt en tracker de kan använda. Under huven hanterar separata webhook-endpoints kärnåtgärderna: hämta alla poster, lägga till en post, redigera en post, ta bort en post och återställa allt. Redis lagrar varje post med ett autoinkrementerat ID, så du får ordnade poster utan manuell numrering eller sköra kalkylarksformler. När någon lägger till eller redigerar en förfrågan i webbläsaren anropar HTML-appen n8n-endpoints, n8n uppdaterar Redis och gränssnittet uppdateras med den senaste listan.
Flödet startar när du öppnar webhooken för ”HTML-appen” i en webbläsare. Därefter använder gränssnittet HTTP-anrop till dina n8n API-endpoints för create, read, update, delete och reset. Redis sköter lagringen, och n8n svarar med JSON som webbläsaren kan rendera direkt.
Det här får du: automation vs. resultat
| Vad det här flödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att teamet loggar cirka 25 interna förfrågningar per vecka (småfix, innehållsuppdateringar, snabba ops-uppgifter). Med ett kalkylark upplägg lägger du ofta kanske 5 minuter per förfrågan på att bara lägga in den, korrigera formatering och jaga kontext, plus ytterligare 5 minuter senare för att hitta rätt rad och uppdatera den. Det blir ungefär 4 timmar i veckan av administration. Med det här flödet är det en snabb webbläsaråtgärd att logga eller uppdatera en förfrågan (cirka en minut), och alla läser från samma sida. Du lägger tiden på jobbet, inte på spårningen.
Det här behöver du
- n8n-instans (testa n8n Cloud gratis)
- Alternativ för egen drift om du föredrar det (Hostinger fungerar bra)
- Redis för snabb key-value-lagring och ID:n.
- En webbläsare för att köra HTML-gränssnittet för trackern.
- n8n-webhook-URL (kopiera den från Webhook-noderna i ditt flöde).
Kunskapsnivå: Medel. Du klistrar in URL:er, sätter credentials och testar några endpoints, men du bygger ingen full app.
Vill du inte sätta upp det här själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
Webbläsaren laddar din tracker. Du öppnar webhook-URL:en för ”HTML-appen”, och n8n svarar med en komplett HTML-sida (gränssnittet) i stället för JSON.
Gränssnittet anropar dina API-endpoints. Inuti HTML-sidan använder appen HTTP-anrop till dina andra webhooks för att hämta poster, skapa nya, uppdatera befintliga och ta bort via ID.
Redis lagrar och uppdaterar posterna. När en create-förfrågan kommer in genererar Redis nästa ID och sparar posten. Vid redigering och borttagning uppdaterar eller tar flödet bort motsvarande nyckel och bygger sedan om listan för gränssnittet.
n8n skickar tillbaka en korrekt formaterad lista till webbläsaren. Flödet hämtar postnycklar, formaterar dem till en JSON-array och gränssnittet renderar om tabellen så att alla ser samma aktuella läge.
Du kan enkelt ändra vilka fält som spåras (till exempel lägga till ”ägare” eller ”prioritet”) så att det matchar hur teamet jobbar. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: Konfigurera webhook-triggern
Det här arbetsflödet använder flera webhook-endpoints för HTML-appen och CRUD-operationer. Konfigurera varje webhook-sökväg exakt så att den matchar anropen från front-end.
- Öppna HTML App Webhook och ställ in Path till
simple-crudmed Response Mode inställt påresponseNode. - Öppna Incoming Fetch Items och ställ in Path till
items, Response Mode tilllastNodeoch Response Data tillallEntries. - Öppna Incoming Create Item och ställ in Path till
=itemsmed HTTP Method inställd påPOST. - Öppna Incoming Update Item och ställ in Path till
=itemsmed HTTP Method inställd påPUT. - Öppna Incoming Remove Item och ställ in Path till
=itemsmed HTTP Method inställd påDELETE. - Öppna Incoming Reset Items och ställ in Path till
items-resetmed Response Mode inställt pålastNode.
⚠️ Vanlig fallgrop: Alla webhook-sökvägar är skiftlägeskänsliga. Säkerställ att anropen från front-end och webhook-sökvägarna matchar exakt, inklusive items-reset.
Steg 2: Anslut Redis
Redis lagrar och hanterar alla postrader för items. Alla Redis-noder måste dela samma inloggningsuppgifter.
- Öppna Retrieve Item Keys och välj er Redis-anslutning. Inloggningsuppgifter krävs: Anslut era redis-uppgifter.
- Upprepa valet av Redis-uppgifter för Generate Item ID, Store New Item, Modify Item Record, Delete Item Record, Clear Auto ID, List Item Keys och Remove Item Entry.
- Säkerställ att Redis-nyckelmönstren använder uttrycket för workflow-ID, till exempel
{{ $workflow.id }}--items*och{{ $workflow.id }}--itemid.
Steg 3: Konfigurera svaret för HTML-gränssnittet
HTML-front-end returneras direkt från n8n och bygger på en dynamiskt tilldelad API-URL.
- Öppna Assign API Endpoint och ställ in värdet för API_URL till webhook-URL:en för Incoming Fetch Items (ersätt platshållartexten).
- Bekräfta att Return HTML Interface är inställd på Respond With
textoch att svarsbody refererar till{{ $json.API_URL }}. - Behåll exekveringsflödet från HTML App Webhook → Assign API Endpoint → Return HTML Interface som det är.
⚠️ Vanlig fallgrop: Om API_URL lämnas som platshållare i Assign API Endpoint kommer front-end inte att kunna anropa CRUD-endpoints.
Steg 4: Konfigurera hantering för hämtning/listning
Den här vägen hämtar Redis-nycklar och formaterar dem till en JSON-lista för gränssnittet.
- I Retrieve Item Keys, ställ in Operation till
keysoch Key Pattern till{{ $workflow.id }}--items*. - Säkerställ att Format Item Records innehåller den tillhandahållna JavaScript-koden som konverterar Redis-nyckel-/värdepar till
{id, name}-objekt. - Bekräfta exekveringsflödet Incoming Fetch Items → Retrieve Item Keys → Format Item Records.
Steg 5: Konfigurera skapa-, uppdatera- och ta bort-åtgärder
Dessa vägar hanterar de centrala CRUD-operationerna för items.
- För skapa-flödet, verifiera Incoming Create Item → Generate Item ID → Store New Item och behåll Generate Item ID inställd på Operation
incrmed Key{{ $workflow.id }}--itemid. - I Store New Item, ställ in Key till
{{ $workflow.id }}--items-{{ $json['Tpn2kZa5UpfsPsiQ--itemid'] }}och Value till{{ $('Incoming Create Item').item.json.body.name }}. - För uppdateringar, verifiera Incoming Update Item → Modify Item Record och ställ in Key till
{{ $workflow.id }}--items-{{ $json.body.id }}och Value till{{ $json.body.name }}. - För borttagningar, verifiera Incoming Remove Item → Delete Item Record och ställ in Key till
{{ $workflow.id }}--items-{{ $json.body.id }}.
Steg 6: Konfigurera återställnings- och rensningsflöde
Återställnings-endpointen nollställer auto-ID-räknaren och tar bort alla lagrade items.
- Bekräfta flödet Incoming Reset Items → Clear Auto ID → List Item Keys → Build JSON List → Iterate Item Keys → Remove Item Entry.
- I Clear Auto ID, ställ in Operation till
deletemed Key{{ $workflow.id }}--itemid. - I List Item Keys, ställ in Operation till
keysoch Key Pattern till{{ $workflow.id }}--items*. - Behåll JavaScript-koden i Build JSON List för att omvandla nycklar till en lista med item-ID:n.
- Lämna alternativen i Iterate Item Keys som standard för att batch-radera poster via Remove Item Entry.
Tips: Återställningsflödet tar bort alla items genom att iterera över nyckel-ID:n, så var försiktiga när ni exponerar endpointen items-reset i produktion.
Steg 7: Testa och aktivera ert arbetsflöde
Verifiera att UI:t och CRUD-endpoints fungerar korrekt innan ni aktiverar arbetsflödet.
- Använd test-URL:en för HTML App Webhook för att öppna UI:t; det ska rendera HTML-gränssnittet utan fel.
- Lägg till ett item i UI:t och bekräfta att Incoming Create Item → Generate Item ID → Store New Item körs och att itemet visas i tabellen.
- Redigera och ta bort items för att bekräfta att Modify Item Record och Delete Item Record körs utan problem.
- Klicka på “Återställ alla items” för att bekräfta att Incoming Reset Items rensar all data och att tabellen visar tomt läge.
- När testningen är klar, växla arbetsflödet till Active för att möjliggöra användning i produktion.
Vanliga fallgropar
- Redis-credentials kan gå ut eller kräva specifika behörigheter. Om det slutar fungera, kolla först din n8n-panel för Credentials och bekräfta att Redis host/port/lösenord fortfarande stämmer.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om nedströmsnoder fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du redigera output i all evighet.
Vanliga frågor
Cirka 30–60 minuter när Redis väl kör.
Nej. Du konfigurerar främst webhook-URL:er och Redis-credentials. Den medföljande HTML:en hanterar redan de grundläggande åtgärderna i gränssnittet.
Ja. n8n har ett gratis alternativ för egen drift och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volymer. Du behöver också räkna in kostnader för Redis-hosting (ofta 5–15 USD/månad om du inte redan har en server).
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen drift på en VPS. För egen drift är Hostinger VPS prisvärd och hanterar n8n bra. Egen drift ger obegränsade körningar men kräver grundläggande serverhantering.
Ja, och det är ärligt talat den bästa delen. Du kan lägga till fält som ”prioritet”, ”ägare” eller ”status” genom att justera datan du sparar i Redis i create/update-stegen (Set- och Redis-noderna) och sedan uppdatera HTML:en så att den visar och skickar de fälten. Om du vill ha godkännanden lägger du till en ”approved”-flagga och visar bara poster i vissa vyer tills den är satt. Vissa team lägger också till en andra lista för ”klara” poster så att huvudvyn håller sig ren.
Oftast beror det på felaktiga värden för Redis host/port/lösenord i n8n Credentials, eller att Redis bara är bunden till localhost och n8n inte kan nå den. Dubbelkolla nätverksåtkomst först och regenerera eller spara om Redis-credentialn i n8n. Om flödet kan hämta nycklar men inte kan skriva är det ofta behörigheter eller en Redis ACL-regel som är boven.
Några tusen poster är normalt sett inga problem för en lätt intern tracker på Redis.
Om du vill ha ett enda flöde som serverar ett gränssnitt och exponerar flera REST-liknande endpoints är n8n betydligt bättre lämpat än de flesta Zapier-liknande verktyg. Du syr inte ihop fem separata zaps; allt finns på ett ställe, vilket gör det enklare att underhålla. Dessutom är egen drift en stor fördel när trackern blir ”alltid på” för teamet. Zapier eller Make kan fortfarande fungera bra för enkla intake-till-sheet-flöden, men de är inte byggda för att fungera som en liten webbapp. Prata med en automationsexpert om du vill ha hjälp att välja den mest robusta lösningen.
Sätt upp det här en gång, så slutar teamet att ”spåra spårningen”. Flödet håller listan prydlig, och ni kan fortsätta framåt.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.