Bangun Google Docs Anda sendiri seperti App

Beberapa pelanggan telah menghubungi kami dan bertanya bagaimana mereka dapat membuat Google Documents seperti aplikasi web menggunakan API kami. Google Docs adalah pengolah kata yang memungkinkan pengguna membuat dan mengedit file secara online sambil berkolaborasi dengan pengguna lain secara real-time. Entri blog ini menjelaskan betapa mudahnya membuat versi lite Google Docs yang memiliki fitur berikut:

• Pengeditan Teks Kaya (mengubah font teks, ukuran, warna, gaya (tebal, miring), perataan, dll.).

• Pengeditan kolaboratif waktu-nyata dari dokumen yang sama. Banyak pengguna dapat mengakses dokumen secara bersamaan dan memodifikasinya.

• Unggah konten Dokumen Word yang ada ke dalam editor.

• Simpan teks dalam editor sebagai dokumen MS Word, PDF, TXT atau HTML. Produk akhir kami akan terlihat sebagai berikut:

  

• Alat dan Teknologi

• Integrasikan Firepad

• Unggah Konten Dokumen Word yang Ada ke Editor

• Integrasikan GroupDocs.Editor

• Bentuk Penanganan Data

Alat dan Teknologi – Buat Google Documents seperti Aplikasi

Kami akan mengembangkan Google Docs seperti aplikasi web di ASP.NET Core dan menggunakan dua pustaka berikut:

• Firepad adalah editor teks kolaboratif sumber terbuka. Ia menggunakan Firebase Realtime Database sebagai backend sehingga tidak memerlukan kode sisi server dan dapat ditambahkan ke aplikasi web apa pun hanya dengan menyertakan file JavaScript.
• GroupDocs.Editor for .NET memberi kami kemampuan untuk mengedit format dokumen paling populer menggunakan editor WYSIWYG tanpa aplikasi tambahan. Kami akan memuat dokumen melalui GroupDocs.Editor ke dalam Firepad, mengedit dokumen sesuai keinginan dan menyimpannya kembali ke format dokumen asli. Saya telah menggunakan Visual Studio for Mac sebagai IDE. Namun, Anda dapat mengunduh Visual Studio edisi komunitas gratis, bergantung pada platform Anda, dari di sini. Ayo mulai. Buat proyek Aplikasi Web Inti ASP.NET baru dan beri nama proyek “GoogleDocsLite”.

    // Get Firebase Database reference.
    var firepadRef = getExampleRef();
    
    // Create CodeMirror (with lineWrapping on).
    var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
    // Create a random ID to use as our user ID (we must give this to firepad and FirepadUserList).
    var userId = Math.floor(Math.random() * 9999999999).toString();
    // Create Firepad (with rich text features and our desired userId).
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
                { richTextToolbar: true, richTextShortcuts: true, userId: userId });
    // Create FirepadUserList (with our desired userId).
    var firepadUserList = FirepadUserList.fromDiv(firepadRef.child('users'),
    document.getElementById('userlist'), userId);
}

// Helper to get hash from end of URL or generate a random one.
function getExampleRef() {
    var ref = firebase.database().ref();
    var hash = window.location.hash.replace(/#/g, '');
    if (hash) {
        ref = ref.child(hash);
    } else {
        ref = ref.push(); // generate unique location.
        window.location = window.location + '#' + ref.key; // add it as a hash to the URL.
    }
    if (typeof console !== 'undefined') {
        console.log('Firebase data: ', ref.toString());
    }
    return ref;
}