boykopetevboev/gamezone-beta

Push Notifications, PouchDB, CouchDB, Sammy, Handlebars, Bootstrap

GameZone

Page ID	Template	Page Name	URL
0.0	homePage.hbs	Home	/home
0.1	homePage.hbs	Mouse	/home/mouse
0.1.1	productPage.hbs	Product Page	/home/mouse/:id
0.2	homePage.hbs	Keyboard	/home/keyboard
0.2.1	productPage.hbs	Product Page	/home/keyboard/:id
0.3	homePage.hbs	Headset	/home/headset
0.3.1	productPage.hbs	Product Page	/home/headset/:id
0.4	homePage.hbs	Mousepad	/home/mousepad
0.4.1	productPage.hbs	Product Page	/home/mousepad/:id
0.5	homePage.hbs	Accessories	/home/accessories
0.5.1	productPage.hbs	Product Page	/home/accessories/:id
1.0	login.hbs	Login	/login
2.0	register.hbs	Register	/register

PushNotifications

A push notification is the delivery of information to a computing device from an application server where the request for the transaction is initiated by the server rather than by an explicit request from the client. While 'push notification' is most often used to refer to notifications on mobile devices, web applications also leverage this technology.

• Push notifications are the first and often most important communications channel used by apps.
• Nearly every major app uses push notifications for transactions and re-engagement.
• Push notification technology is rapidly evolving from a simple message delivery system to a rich and interactive medium.

'use strict';

const applicationServerPublicKey = 'BKTY4jTJ_YSMRf4miX6GE74Z1Jg_ANPdowdcsric6mj8Wa6R2F77Sh_xWcGuA5k5iLlAB';
let isSubscribed = false;
let swRegistration = null;

function main(pushButton) {...
}
function urlB64ToUint8Array(base64String) {...
}
function initializeUI(pushButton) {...
}
function updateBtn(pushButton) {...
}
function subscribeUser(pushButton) {...
}
function updateSubscriptionOnServer(subscription) {...
}

window.main = main;
export { main }

PouchDB & CouchDB

Use PouchDB as a local database and CouchDB as a cloud database. Live sync set. Each entry in CouchDB automatically generates an entry in PouchDB.

'use strict';

const usersDB = new PouchDB('users');
const productsDB = new PouchDB('items');
const remoteUsersDB = new PouchDB('http://USERNAME:PASSWORD@localhost:5984/users', { skip_setup: true });
const remoteProductsDB = new PouchDB('http://USERNAME:PASSWORD@localhost:5984/products', { skip_setup: true });
usersDB.sync(remoteUsersDB);
productsDB.sync(remoteProductsDB);
const db = {
    users: usersDB,
    products: productsDB
};

function getData(name, id) {...
}
function putData(name, obj) {...
}
function getAllData(name) {...
}
function errorHandler(err) {...
}

export { getData, putData, getAllData }

Sammy

Sammy is a tiny javascript framework built on top of jQuery inspired by Ruby's Sinatra. Like Sinatra, a Sammy application revolves around 'routes'. Routes in Sammy are a little different, though. Not only can you define 'get' and 'post' routes, but you can also bind routes to custom events triggered by your application.

(() => {
    const app = Sammy('#eventsHolder', function () {
        this.use('Handlebars', 'hbs');
        this.get('index.html', function (ctx) { ctx.redirect('/') });
        this.get('/', function (ctx) { ctx.redirect('#/home') });
        this.get('#/home', loadHomеPage);
        this.get('#/register', loadPage);
        this.post('#/register', register);
        this.get('#/login', loadPage);
        this.post('#/login', login);
        this.get('#/logout', logout);
        this.get('#/productForm', loadPage);
        this.post('#/productForm', productForm);
        this.get('#/database', loadPage);
        this.get('#/home/mouse', loadPageCategory);
        this.get('#/home/keyboard', loadPageCategory);
        this.get('#/home/headset', loadPageCategory);
        this.get('#/home/mousepad', loadPageCategory);
        this.get('#/home/accessoaries', loadPageCategory);
        this.get('#/home/mouse/:id', loadProductPage);
        this.get('#/home/keyboard/:id', loadProductPage);
        this.get('#/home/headset/:id', loadProductPage);
        this.get('#/home/mousepad/:id', loadProductPage);
        this.get('#/home/accessoaries/:id', loadProductPage);
        this.get('#/productForm/:id', loadChangeProductPage);
        });
    })
    app.run();
})()

Handlebars

Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.

<p>{{firstname}} {{lastname}}</p>

A handlebars expression is a {{, some contents, followed by a }}. When the template is executed, these expressions are replaced with values from an input object.