Belege für die Ausgabenverwaltung
Der Nutzer scannt einen zerknitterten Kassenbon, der Scanner glättet und beschneidet ihn, und dein Backend speichert die Datei und liest Betrag, Datum und Händler per OCR oder KI-Modell aus.
Was Nutzer in Vibe-Coding-Apps scannen
Verträge und unterschriebene Formulare
Mehrseitige Scans von Mietverträgen, Einwilligungen oder Onboarding-Unterlagen landen direkt in der Kundenakte, statt als verschwommene Fotos per E-Mail anzukommen.
Außendienst und Lieferungen
Lieferscheine, Prüfprotokolle, handschriftliche Arbeitsaufträge: Teams scannen vor Ort, und das Büro sieht eine Minute später ein sauberes, lesbares Dokument.
Keine neue Oberfläche nötig
Der Scanner hängt sich in jedes Standard-<input type="file">. Hat Claude Code schon einen Upload-Button, erscheint der Scan-Eintrag dort, sobald die Einstellung aktiv ist.
Prompt für Claude Code
Füge das in Claude Code ein, um die Web-App-Seite umzusetzen. Prüfe das Ergebnis, veröffentliche und teste dann in der WebViewGold-App.
Prompt für Claude Code
Prompt für Claude Code: Lies https://www.webviewgold.com/docs/iOS/document-scanner/ und https://www.webviewgold.com/docs/android/document-scanner/. Dann: 1) Liste jeden Datei-Upload in diesem Repository mit accept-Attribut, Größenlimit und Speicherziel auf. 2) Sorg dafür, dass Dokumenten-Uploads über ein Standard-input type="file" image/*,application/pdf akzeptieren, und erhöh die Limits, damit ein fünfseitiger PDF-Scan hineinpasst (20 MB). 3) Prüf Typ und Größe auf dem Server und speichere Dateien in privatem Object Storage mit Zugriff pro Nutzer und kurzlebigen Download-Links. 4) Füge einen Test hinzu, der ein mehrseitiges PDF-Fixture hochlädt und prüft, dass es gespeichert und verarbeitet wird. 5) Wenn navigator.userAgent meinen eigenen WebViewGold-Token enthält, zeig den Hinweis „Scanne das Dokument für eine saubere Kopie“. 6) Entwirf die Nutzungsbeschreibung für die Kamera und die Einträge für App Privacy und Datensicherheit zu gespeicherten Dokumenten. 7) Halte in CLAUDE.md fest, dass der Scanner nativ aktiviert wird und kein JavaScript braucht.
Mit einer gut optimierten Version Ihrer Web-App können Sie innerhalb von wenigen Minuten eine beeindruckende mobile App erstellen. Zusätzlich dazu ist der Kundenservice sehr nett und hilfsbereit! Ich kann WebViewGold nur empfehlen :-)
Einschalten und deine Uploads scan-tauglich machen
Eine halbe Stunde, inklusive Test auf zwei Smartphones.
Die Einstellung aktivieren
iOS:
var kVisionKitEnable = truein Config.swift. Android:ENABLE_ML_KIT_DOCUMENT_SCANNER = truein Config.java. Setz den jeweiligen Wert auf false, um den Eintrag wieder auszublenden.PDFs genauso akzeptieren wie Bilder
Android liefert pro Scan ein PDF mit bis zu 5 Seiten, und der Upload-Dialog richtet seine Einträge nach dem
accept-Attribut des Eingabefelds. Nutze zum Beispielaccept="image/*,application/pdf"und stell sicher, dass dein Upload-Code und dein Speicherapplication/pdfannehmen.Realistische Dateigrößen erlauben
Ein mehrseitiger Scan ist größer als ein Profilfoto. Prüf die Größenlimits deiner Upload-Route und deines Storage-Buckets und zeig einen Fortschritt an, während die Datei über mobile Daten unterwegs ist.
Eine ehrliche Nutzungsbeschreibung für die Kamera schreiben
Der Scanner nutzt die Kamera, deshalb sollte die Nutzungsbeschreibung für die Kamera Dokumente erwähnen, zum Beispiel „um Belege zu scannen und an deine Spesenabrechnungen anzuhängen“.
Auf echten Geräten testen
iOS braucht iOS 18.4 oder neuer und ein Gerät, das die VisionKit-Dokumentenkamera unterstützt; sonst blendet sich der Eintrag selbst aus. Android braucht Google Play Services. Simulatoren und Emulatoren sind kein realistischer Test.
iOS und Android im Überblick
| iOS | Android | |
|---|---|---|
| Scanner | Dokumentenkamera von Apple VisionKit | Google ML Kit Document Scanner |
| Einstellung | kVisionKitEnable in Config.swift | ENABLE_ML_KIT_DOCUMENT_SCANNER in Config.java |
| Eintrag im Upload-Dialog | Dokumentenscan, neben Kamera und Fotomediathek | Dokumentenscan, neben den Einträgen für Foto, Video und Galerie, die das accept-Attribut erlaubt |
| Was dein Eingabefeld bekommt | Den fertigen Scan, wie jede hochgeladene Datei | Ein PDF, bis zu 5 Seiten pro Scan |
| Voraussetzungen | iOS 18.4 oder neuer auf einem unterstützten Gerät | Google Play Services |
| Eingebaut | Kantenerkennung, Zuschneiden, Bildverbesserung, weitere Seiten | Kantenerkennung, Zuschneiden, Bildverbesserung, weitere Seiten, Import aus der Galerie |
Ein Upload-Handler, der für Scans bereit ist
Funktioniert für Fotos, Scans und PDFs, im Browser und in der App. Richte /api/documents auf deine Upload-Route; bei deiner Claude Code-App liegt sie in Deine eigenen API-Routen, Serverless Functions oder Supabase.
javascript
// <input type="file" id="doc" accept="image/*,application/pdf">
document.getElementById("doc").addEventListener("change", async function (e) {
var file = e.target.files && e.target.files[0];
if (!file) return;
var isPdf = file.type === "application/pdf" || /\.pdf$/i.test(file.name);
if (file.size > 20 * 1024 * 1024) { showError("Dieser Scan ist zu groß. Versuch es mit weniger Seiten."); return; }
var form = new FormData();
form.append("file", file, file.name || (isPdf ? "scan.pdf" : "scan.jpg"));
showStatus((isPdf ? "Dokument" : "Foto") + " wird hochgeladen…");
var res = await fetch("/api/documents", { method: "POST", body: form });
showStatus(res.ok ? "Gespeichert. Wir lesen es jetzt aus." : "Upload fehlgeschlagen. Bitte versuch es noch einmal.");
});Checkliste für Review und Datenschutz
- Guideline 4.2: Ein Kamerascanner mit Kantenerkennung ist etwas, das eine Website auf dem iPhone nicht bieten kann. Erwähne ihn in den Review-Notizen und zeig ihn auf einem Screenshot.
- App Privacy und Datensicherheit: Wenn Scans hochgeladen und gespeichert werden, gib sie an (zum Beispiel als „Other User Content“ bei Apple und „Files and docs“ bei Google Play), zusammen mit dem Zweck, für den du sie nutzt.
- Scans von Ausweisen, Kontoauszügen oder medizinischen Formularen sind sensibel: Halte den Speicher privat, liefere Dateien über kurzlebige Links aus und lass Nutzer ihre Dokumente löschen (Guide zur Kontolöschung).
- Gib dem Reviewer einen Demo-Account, der bis zu einem Upload-Bildschirm kommt; sonst sieht er den Scanner nie.
Häufig gestellte Fragen
Muss ich meine Web-App für den Dokumentenscanner ändern?
Meist nicht. Jedes Standard-Datei-Eingabefeld bekommt den Scan-Eintrag, sobald die Einstellung aktiv ist. Prüf, dass das Feld neben Bildern auch PDFs annimmt, weil Android ein PDF liefert, und dass dein Upload-Limit mehrseitige Dateien erlaubt.
Welches Dateiformat bekomme ich?
Auf Android ein PDF mit bis zu 5 Seiten pro Scan. Auf iOS kommt der VisionKit-Scan über dasselbe Datei-Eingabefeld an; akzeptiere Bilder und PDFs und teste das Ergebnis auf einem Gerät, bevor du etwas baust, das vom Format abhängt.
Liest der Scanner den Text (OCR)?
Der Scanner erfasst die Seiten, schneidet sie zu und verbessert sie. Den Text auszulesen ist Sache deines Backends: Schick die hochgeladene Datei auf dem Server an einen OCR- oder KI-Extraktionsdienst und speichere das Ergebnis neben dem Dokument.
Warum fehlt der Scan-Eintrag auf manchen iPhones?
Der Eintrag braucht auf iOS die Version 18.4 oder neuer und ein Gerät, das die VisionKit-Dokumentenkamera unterstützt. Auf anderen Geräten wird er automatisch ausgeblendet, und Nutzer sehen weiterhin Kamera und Fotomediathek.
Kostet das Scannen etwas pro Seite?
Nein. VisionKit ist Teil von iOS, und der ML Kit Document Scanner läuft über Google Play Services, es fallen also keine Gebühren pro Scan an. Kosten entstehen nur, wenn du die Dateien an einen kostenpflichtigen OCR- oder KI-Dienst schickst.
Drei Wege, deine App in die Stores zu bringen
Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.
Selbst machen
$109 pro Plattform, einmalig
Die WebViewGold-Lizenz: ein fertiges Xcode- oder Android-Studio-Projekt. URL einfügen, Name und Icon setzen, Features einschalten, bauen und einreichen. Kostenlose Updates für immer.
Pakete auf der Hauptseite ansehenCloud Builder
$349 pro Lizenz, einmaliges Add-on
Kein Mac, kein Xcode, kein Android Studio: Du konfigurierst im Browser, wir bauen beide Apps in der Cloud und übergeben sie an App Store Connect und die Play Console.
So funktioniert der Cloud Builder Kostenlose Demo ausprobierenFull Service
$698 pro Plattform $798
Schick uns deine URL und dein Icon. Unser Team konfiguriert, baut und liefert deine App innerhalb von 72 Stunden, White-Label, inklusive Quellprojekten. Beide Plattformen für $1,158.
Full-Service-Details Powered by
Winter-Sale-Preise gültig bis 31. Dezember 2026.