Giter VIP home page Giter VIP logo

gutenberg's Introduction

Gutenberg - Offline-first Ebook Reader

Introduction

This project is a demo of an Offline First web application that allows the user to:

  • browse a library of Victorian fiction, imported from Project Gutenberg
  • choose which books you would like on your device and download them
  • read each book, even when not connected to the internet

screenshot

mobile screenshot

Demo

You can try it for yourself at http://glynnbird.github.io/gutenberg/.

Architecture

This application is a simple web application using the following technologies

  • PouchDB to store data in the browser and replicate it from the cloud
  • Cloudant to store data in the cloud
  • Bootstrap for responsive HTML
  • jQuery for DOM manipulation

A publicly readable database, ebooks, contains a list of the available books. The documents in the database look like this:

{
    "_id": "1023",
    "_rev": "1-e61d156a503cd4d9ae73debd9bc2b035",
    "url": "https://www.gutenberg.org/ebooks/1023",
    "title": "Bleak House",
    "author": "Charles Dickens",
    "year": 1853,
    "db_name": "ebook_1023",
    "download_url": "http://www.gutenberg.org/cache/epub/1023/pg1023.txt",
    "num_docs": 369
}

storing meta data about the book, and where it was downloaded from.

Separately, the text of each book is stored in a separate database - one per book. So "Bleak House"" is stored in the database ebook_1023, with each document in that database containing around 20 paragraphs of text.

{
    "_id": "1005",
    "_rev": "1-ec2e18e806164bf900489c965a67da22",
    "txt": "Dinner was over, and my godmother and I were ...."
}

When the web app is first visited, the ebooks database is replicated to an in-browser copy using PouchDB:

var ebooksdb = new PouchDB("ebooks");
var stub = "https://54a13c72-3351-4bb4-a93c-79a723b29443-bluemix.cloudant.com";
ebooksdb.replicate.from(stub + "/ebooks");

When a used elects to download a book, that book's database is replicated to an in-browser copy in the same way:

  var db_name = "ebook_1023";
  var pdb = new PouchDB(db_name);  
  pdb.replicate.from(stub + "/" + db_name)
    .on('complete', function (info) {
      // re-render the ebook list
    })
    .on('change', function (info) {
      // update the progress bar
    })

How did the data get in there in the first place?

In the scripts directory of this repository, there is an import.js which downloads an ebook from Project Gutenberg, splits the text into paragraphs, uploads documents to Cloudant and saves the meta data in the ebooks database.

The import.sh script runs this script once for each book.

To do

  • this isn't a true "offline first" app yet, because the html, js & css needed to render the page are not cached offline.
  • your place in the book is not stored yet

Acknowledgements

Many thanks to Project Gutenberg for creating this library of out-of-copyright works and publishing them for free.

gutenberg's People

Contributors

glynnbird avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.