#allcountjs

First you'd want to define the views in your application config file

Here's an example of defining Multiple Views for an Entity:

Your_Entity_Name: { fields: { Your_Entity_Field_1: Fields.date("Sample Date Field").required(), Your_Entity_Field_2: Fields.text("Sample Text Field").required(), Your_Entity_Field_3: Fields.integer("Sample Integer Field").required(), Your_Entity_Field_4: Fields.textarea("Sample Text Area Field").required(), Your_Entity_Field_5: Fields.money("Sample Money Field"), status: Fields.fixedReference("Status", "Status") }, views: { Sample_View_Grid: { showInGrid: ['Your_Entity_Field_1', 'Your_Entity_Field_2', 'Your_Entity_Field_3'] }, Sample_View_Board: { customView: "view_name" } } }, Status: { fields: { name: Fields.text("Name").required(), order: Fields.integer("Order").required() }, sorting: [['order', 1]], referenceName: "name" }

As you can see, we want only specific fields to be shown in the Grid View and we've chosen 3 fields for that view

Next you'd want to define the board view in your view_name.jade file

extends project/card-board block panelBody .panel-body h4 {{item.Your_Entity_Field_1}} p {{item.Your_Entity_Field_2}} p {{item.Your_Entity_Field_5}}

You can note that in the board view, we want 3 other fields to be displayed. It's also important to note the need for a status field for the board view.

Hope this helps you in defining Multiple Views for an Entity in your application.

In case you have further queries on this, please feel free to join us in the Chat Room on Gitter https://gitter.im/allcount/allcountjs

Here's an example Menu Structure:

menuItems: [ { name: "Parent Menu", children: [ { name: "Child Menu 1", entityTypeId: "Your_Custom_View" }, { name: "Child Menu 2", entityTypeId: "Your_Custom_View" }, { name: "Child Menu 3", entityTypeId: "Your_Custom_View" } ] } ]

As you can see, defining a Child Menu is as simple as this and all you need to do is to create customView to correspond to the menu item.

Hope this helps you in customizing your application's menu, in case you have further queries on this, please feel free to join us in the Chat Room on Gitter https://gitter.im/allcount/allcountjs

A few words about this particular case

Assume we recently found that it is hard to search and buy moto parts here in Russia today. And local bikers community is hopefully quite big. So we've decided to build a moto parts aggregator: A place where all the price lists are available and are combined into the one super-list with the user-friendly search. "All moto parts in one place", the Google for moto parts.

MVP

Getting started

If you haven't installed Node.js, MondoDB and AllcountJS yet you should do it. I’ll assume that you already know how to create basic AllcountJS configuration, so I won’t go in detail about that here.

The Model

We need actual stores to get the parts from. So the providers:

Provider: { fields: { name: Fields.text("Provider name").required(), priceUrl: Fields.text("URL for price list").required(), siteUrl: Fields.text("Provider's site"), phone: Fields.text("Phone number"), parseMethod: Fields.text("XLS parse method").required() }, referenceName: "name", permissions: { read: ['admin'] } }

The "referenceName" property is needed to let the framework know how to show references (what field should be used for references labels).

We have 3 providers so far and all of them provide XLS (MS Excel) files containing price lists. Therefore, "parseMethod" indicates what function (by its name) should be used to parse these XLS files. You'll learn about functions later when we'll discuss about how to setup the content.

Moto parts should be connected to providers and information about parts availability should exist:

PartAvailability: { fields: { name: Fields.text("Original name").required(), part: Fields.reference("The part", "Part"), provider: Fields.reference("Provider", "Provider"), price: Fields.money("Price"), siteUrl: Fields.text("Site URL"), phone: Fields.text("Phone number"), sku: Fields.text("Stock-keeping unit"), isAvailable: Fields.checkbox("Is available") }, sorting: [['price', 1], ['name', 1]], permissions: { write: ['admin'] } }

Now we have data storage. Let's move on to the user's interface.

The View

Everyone likes simple clear interfaces, and so do we! Do you remember Google's search interface? Just one field on the screen. So let's use that valuable experience and build something like that:

include mixins include main-mixins - var hasToolbar = false - var entityTypeId = 'PartAvailability' doctype html html head +defaultHead() block head body(style="padding-top:20px") div(ng-app='allcount', ng-init="viewState = {mode: 'list', filtering: {}}", ng-controller="SearchController") .splash(style="padding: 2em 0 2em; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/splash.jpg');background-position-y: -700px;background-position-x: center;") .container .row .col-lg-12(ng-if="!viewState.filtering.textSearch") span.app-logo i(class="fa fa-search fa-fw") h1 zrum.ru h2 All moto parts in one place .col-lg-12(ng-if="viewState.filtering.textSearch").ng-cloak h1 i(class="fa fa-search fa-fw") | zrum.ru .container .row.text-center: .col-xs-12 h1(ng-if="!viewState.filtering.textSearch") Search available moto parts input.form-control.input-lg(style="margin-top: 10px", placeholder="Enter name of the part", ng-model="viewState.filtering.textSearch", ng-model-options="{ debounce: 700 }") div(style="margin-top: 20px", ng-if="viewState.filtering.textSearch") +pagingControl() .screen-container(ng-cloak, ng-if="viewState.filtering.textSearch") +defaultList()(ng-show="viewState.paging && viewState.paging.count > 0") .row(ng-repeat="item in items") .col-lg-9.col-md-8 h3: a(ng-href="{{item.siteUrl}}", target="_blank", ng-click="trackNavigate(item)") {{item.name}} h4 {{item.provider.name}} h4: a(ng-href="tel:{{item.phone}}", ng-click="callItem(item)") {{item.phone}} .col-lg-3.col-md-4.text-right h2 {{(item.price / 100) | currency}} h3.text-success(ng-if="item.isAvailable") Available h3.text-danger(ng-if="!item.isAvailable") Not available +noEntries() +defaultEditAndCreateForms() include core-scripts script. angular.module('allcount').config(["$locationProvider", function ($locationProvider) { $locationProvider.html5Mode({enabled: false}); }]); angular.module('allcount').controller('SearchController', ['$scope', function ($scope) { $scope.$watch('viewState.filtering.textSearch', function (textSearch) { lc.track('search', {query: textSearch}); }) $scope.$watch('viewState.paging.count', function (count) { if (count === 0 && $scope.viewState && $scope.viewState.filtering && $scope.viewState.filtering.textSearch) { lc.track('not-found', {query: $scope.viewState.filtering.textSearch}); } }) $scope.trackNavigate = function (item) { lc.track('navigate', {item: item}); } $scope.callItem = function (item) { lc.track('call', {item: item}); } }]);

Surely we have some CSS (or rather LESS) files under the hood, but it's not so important now. One thing you should definitely know is that these LESS files should be put under ./public/assets/less directory where . is the directory where application's config is.

The content

One of the most interesting questions here is how to fill the price list. There is no way to involve end users into this process. So the solution is to scrape and parse data from the actual moto parts shops. We'll divide this process into two stages:

get data from the shop's XLS price lists

scrape the data (i.e. links) from web sites in order to allow end users to actually buy the parts

Each of this stages we could divide into two subtasks:

service itself (worker's code)

UI invoking that service

Let's implement each service.

Link scrapping

Every moto parts provider has their own web site and their own data formats, hence we need to implement custom functions for each of them to get actual information about moto parts. Let's create ./services/scraper.js file:

var request = require('request'); var cheerio = require('cheerio'); var rp = require('request-promise'); var _ = require('underscore') module.exports = function (Q) { var pool = {maxSockets: 2}; return { parseLbaMoto: function () { var self = this; var lbaRootLink = 'http://www.lbamoto.ru'; return this.cheerioRequest(lbaRootLink).then(function ($) { var categoriesList = $('a', $('ul.level1')).map(function (i, el) { return $(this).attr('href'); }).get(); categoriesList = _.unique(categoriesList); console.log(categoriesList.join("\n")); //categoriesList = _.take(categoriesList, 10); //TODO return Q.all(categoriesList.map(function (categoryLink) { var categoryUrl = lbaRootLink + categoryLink + '/results,0-1000'; return self.cheerioRequest(categoryUrl).then(function ($) { console.log('Scraping: ' + categoryUrl); return _.filter($('.row > .product').map(function () { var link = $('a', $(this)); if (!link.text()) { return; } var priceBlock = $('.product-price__base', $(this)); if (!priceBlock || !priceBlock.text()) { return; } var priceMatch = priceBlock.text().match(/(\d+)\s+руб/); if (!priceMatch) { return; } return { name: link.text().trim(), siteUrl: lbaRootLink + link.attr('href'), price: parseInt(priceMatch[1]) * 100 }; }).get(), _.identity); }) })).then(_.flatten); }) }, parseMrMoto: function () { var self = this; var entryLink = 'http://www.mr-moto.ru/Netshop/shop/charges/'; var rootLink = 'http://www.mr-moto.ru'; function drillDown(categoriesList, selector) { return Q.all(categoriesList.map(function (categoryUrl) { return self.cheerioRequest(categoryUrl).then(function ($) { var collectHrefs = self.collectHrefs($); return collectHrefs($(selector), rootLink); }) })).then(_.flatten); } return this.cheerioRequest(entryLink).then(function ($) { var collectHrefs = self.collectHrefs($); var categoriesList = collectHrefs($('.divmenu1 a'), rootLink); console.log(categoriesList.join("\n")); return drillDown(categoriesList, '.divmenu2 a').then(function (secondList) { return drillDown(secondList, '.divmenu3 a').then(function (thirdList) { return _.unique(_.union(categoriesList, secondList, thirdList)); }) }).then(function (allCategories) { console.log(allCategories.join("\n")); //allCategories = _.take(allCategories, 10); //TODO return Q.all(allCategories.map(function (categoryLink) { var categoryUrl = categoryLink + '?portion=-1'; return self.cheerioRequest(categoryUrl).then(function ($) { console.log('Scraping: ' + categoryUrl); return _.filter($('.tovblock').map(function () { var link = $($('a', $(this))[1]); var priceBlock = $($('div', link)[1]); if (!priceBlock || !priceBlock.text()) { return; } var priceMatch = priceBlock.text().trim(); if (!priceMatch) { return; } return { name: $($('div', link)[0]).text().trim(), siteUrl: rootLink + link.attr('href'), price: parseInt(priceMatch) * 100 }; }).get(), _.identity); }) })).then(_.flatten); }) }); }, parseDriveBike: function () { var self = this; var entryLink = 'http://www.drivebike.ru/zapchasti'; return this.cheerioRequest(entryLink).then(function ($) { var collectHrefs = self.collectHrefs($); var categoriesList = collectHrefs($('.amshopby-cat-level-1 a')); console.log(categoriesList.join("\n")); return categoriesList; }).then(function (allCategories) { console.log(allCategories.join("\n")); allCategories = _.unique(allCategories); //allCategories = _.take(allCategories, 0); //TODO return Q.all(allCategories.map(function (categoryLink) { var categoryUrl = categoryLink + '?limit=60&mode=grid'; function scrapePage(pageUrl) { return self.cheerioRequest(pageUrl).then(function ($) { console.log('Scraping: ' + pageUrl); var itemsOnPage = _.filter($('li.item').map(function () { var link = $('.product-name a', $(this)); var priceBlock = $('.price-box .regular-price, .price-box .special-price', $(this)); if (!priceBlock || !priceBlock.text()) { return; } var priceMatch = priceBlock.text().trim().replace(/\s/g, '').match(/(\d+)/); if (!priceMatch) { return; } var manufacturer = $('.manufacturer-name', $(this)); return { name: ((manufacturer && manufacturer.text().trim() + ' ') || '') + link.text().trim(), siteUrl: link.attr('href'), price: parseInt(priceMatch[1]) * 100 }; }).get(), _.identity); var nextPage = $('a.i-next'); if (!nextPage || !nextPage.attr('href')) { return itemsOnPage; } return scrapePage(nextPage.attr('href')).then(function (nextPageItems) { return _.union(itemsOnPage, nextPageItems); }) }) } return scrapePage(categoryUrl); })).then(_.flatten).then(function (items) { return _.unique(items, _.property('name')); }); }); }, collectHrefs: function ($) { return function ($el, root) { return _.unique(_.filter($el.map(function (i, el) { if (root && $(this).attr('href').indexOf('/') !== 0) { return; } return (root || '') + $(this).attr('href'); }).get(), _.identity)); } }, cheerioRequest: function (url, retries) { var self = this; return Q(rp({ url: url, transform: function (body) { return cheerio.load(body) }, pool: pool })).catch(function (e) { console.error(e); if (retries === 0) { throw e; } return self.cheerioRequest(url, (retries || 3) - 1); }); } } }

Here you can see "parse <provider's name>" function which actually parses web sites of the shop with name "<provider's name>". I won't stop on technical aspects at this moment, you are very welcome to contact us if you're interested in such details.

Parsing XLS price lists

The same is about parsing the XLS files: every provider has their own quirky price lists. So we need some custom services implementation:

var request = require('request'); var XLSX = require('xlsx'); var _ = require('underscore') var querystring = require("querystring"); module.exports = function (Q) { var qRequest = Q.nfbind(request); return { parsePartAvailabilities: function (provider, url, parseMethod) { var self = this; if (url.indexOf('https://yadi.sk') !== -1) { return qRequest({ method: 'GET', url: 'https://cloud-api.yandex.net/v1/disk/public/resources?public_key=' + url, json: true }).then(function (resourceUrl) { console.log(resourceUrl[1]); var item = _.find(resourceUrl[1]._embedded.items, function (item) { return item.name.indexOf('xls') !== -1; }) console.log(item); var getDownloadUrl = 'https://cloud-api.yandex.net/v1/disk/public/resources/download?' + querystring.stringify({ public_key: item.public_key, path: item.path }); console.log(getDownloadUrl); return qRequest({ method: 'GET', url: getDownloadUrl, json: true }).then(function (downloadUrl) { console.log(downloadUrl[1]); return qRequest({ method: 'GET', url: downloadUrl[1].href, encoding: null }).then(function (res) { return self[parseMethod](provider, res[1]); }) }) }) } if (url.indexOf('mr-moto.ru') !== -1) { return self.extractMrMoto(provider, url, parseMethod); } return Q.nfcall(request, { method: 'GET', url: url, encoding: null }).then(function (res) { console.log(res[0]); return self[parseMethod](provider, res[1]); }) }, extractMrMoto: function (provider, url, parseMethod) { var self = this; return qRequest({method: 'GET', url: url}).then(function (res) { var fileUrl = res[1].match(/\<a\s+href\=\'(.*?)\'(.*?)\>остатки(.*?)\<\/a\>/)[1]; console.log(fileUrl); return qRequest({ method: 'GET', url: 'http://www.mr-moto.ru' + fileUrl, encoding: null }).then(function (res) { console.log(res[0]); return self[parseMethod](provider, res[1]); }) }) }, parseLbaMoto: function (provider, xlsxBinary) { var workbook = XLSX.read(xlsxBinary); var first_sheet_name = workbook.SheetNames[0]; var worksheet = workbook.Sheets[first_sheet_name]; function cellValue(c, r) { var cell = worksheet[XLSX.utils.encode_cell({c: c, r: r})]; //console.log(cell); return cell && cell.v; } var result = []; for (var i = 10; cellValue(3, i); i++) { if (!cellValue(23, i) || !cellValue(0, i)) { continue; } result.push({ sku: cellValue(0, i), name: cellValue(3, i), price: cellValue(23, i) * 100, provider: {id: provider.id, name: provider.name}, isAvailable: !!cellValue(21, i) }) } return result; }, parseMrMoto: function (provider, xlsxBinary) { var workbook = XLSX.read(xlsxBinary); var first_sheet_name = workbook.SheetNames[0]; var worksheet = workbook.Sheets[first_sheet_name]; function cellValue(c, r) { var cell = worksheet[XLSX.utils.encode_cell({c: c, r: r})]; //console.log(cell); return cell && cell.v; } var result = []; for (var i = 10; cellValue(0, i); i++) { if (!cellValue(5, i)) { continue; } result.push({ name: cellValue(0, i), price: cellValue(5, i) * 100, provider: provider, isAvailable: !!cellValue(8, i) }) } return result; }, parseDriveBike: function (provider, xlsxBinary) { var workbook = XLSX.read(xlsxBinary); var first_sheet_name = workbook.SheetNames[0]; var worksheet = workbook.Sheets[first_sheet_name]; function cellValue(c, r) { var cell = worksheet[XLSX.utils.encode_cell({c: c, r: r})]; //console.log(cell); return cell && cell.v; } var result = []; for (var i = 1; cellValue(0, i); i++) { if (!cellValue(5, i)) { continue; } result.push({ name: cellValue(5, i).replace("[", "").replace("]", ""), price: cellValue(7, i) * 100, provider: provider, isAvailable: true }) } return result; } } }

While this implementation looks mysterious, giant and overall scary, trust me, it is much more concise than it was in times of Java EE applications' prosperity!

Service usage

It's time to use our new services within our application's config. Basically we need to implement actions that would trigger our services. Let's do it! Here is the final config:

A.app({ appName: "zrum.ru - Мотозапчасти", appIcon: "heart", theme: 'cosmic', forceLocale: 'ru', googleAnalyticsId: '***', menuItems: [ { name: "Запчасти", icon: "box", entityTypeId: "Part", }, { name: "Поставщики", icon: "box", entityTypeId: "Provider", }, { name: "Наличие", icon: "box", entityTypeId: "PartAvailability", } ], entities: function (Fields) { return { Part: { fields: { name: Fields.text("Наименование").required() }, permissions: { read: ['admin'] }, referenceName: "name" }, Provider: { fields: { name: Fields.text("Название").required(), priceUrl: Fields.text("Ссылка на прайс-лист").required(), siteUrl: Fields.text("Адрес сайта"), phone: Fields.text("Телефон"), parseMethod: Fields.text("Метод разбора XLS").required() }, referenceName: "name", permissions: { read: ['admin'] }, actions: [{ id: 'reload', name: 'Загрузить', actionTarget: 'single-item', perform: function (Crud, Actions, ExcelParser, Console, Q, Pipes) { var crud = Crud.actionContextCrud(); return crud.readEntity(Actions.selectedEntityId()).then(function (provider) { return loadAvailabilityForProvider(provider, Crud, Actions, ExcelParser, Console, Q, Pipes); }).then(function () { return Actions.refreshResult(); }); } }, { id: 'scrape', name: 'Scrape', actionTarget: 'single-item', perform: function (Crud, Actions, Console, Q, Scraper, Pipes) { var crud = Crud.actionContextCrud(); return crud.readEntity(Actions.selectedEntityId()).then(function (provider) { return Scraper[provider.parseMethod]().then(function (result) { result.forEach(function (item) { item.provider = provider; item.phone = provider.phone; }) Console.log("Syncing " + result.length + " items for " + provider.name); var crud = Crud.crudFor('PartAvailability'); return Pipes.oneWayImportSync(result, 'PartAvailability', {filtering: {provider: provider.id}}, { keyFn: function (i) { return i.name }, equals: function (a, b) { return a.siteUrl === b.siteUrl && a.name === b.name && a.price.toString() === b.price.toString() && a.phone === b.phone; } }) }).then(function () { Console.log("Sync finished for " + provider.name); return Actions.refreshResult(); }); }); } }] }, PartAvailability: { fields: { name: Fields.text("Оригинальное название").required(), part: Fields.reference("Запчасть", "Part"), provider: Fields.reference("Поставщик", "Provider"), price: Fields.money("Цена"), siteUrl: Fields.text("Сайт"), phone: Fields.text("Телефон"), sku: Fields.text("Артикул"), isAvailable: Fields.checkbox("Есть в наличии") }, sorting: [['price', 1], ['name', 1]], actions: [{ id: 'reload', name: 'Загрузить', actionTarget: 'all-items', perform: function (Crud, Actions, ExcelParser, Console, Q, Pipes) { return Crud.crudFor('Provider').find({}).then(function (providers) { return Q.all(providers.map(function (provider) { return loadAvailabilityForProvider(provider, Crud, Actions, ExcelParser, Console, Q, Pipes); })) }).then(function () { return Actions.refreshResult(); }) } }], permissions: { write: ['admin'] } } } } }); function loadAvailabilityForProvider(provider, Crud, Actions, ExcelParser, Console, Q, Pipes) { return ExcelParser.parsePartAvailabilities(provider, provider.priceUrl, provider.parseMethod).then(function (availabilities) { var partsCrud = Crud.crudFor('PartAvailability'); Console.log("Syncing " + availabilities.length + " items for " + provider.name); return Pipes.oneWayImportSync(availabilities, 'PartAvailability', {filtering: {provider: provider.id}}, { keyFn: function (i) { return i.name }, equals: function (a, b) { return a.price.toString() === b.price.toString() && a.isAvailable === b.isAvailable; }, writeCrud: { createEntity: function () { }, deleteEntity: function () { }, updateEntity: partsCrud.updateEntity } }).then(function () { Console.log("Sync finished"); }); }) }

Labels are in Russian here. As you can see, we've pasted actions properties to the entities descriptions. AllcountJS will automatically place buttons to the appropriate interfaces for us. Nice! But it still won't work because we've injected ExcelParser and Scraper services into the actions, but AllcountJS knows nothing about where to get this services. In order to let it know that we should do a little bit customization in application's start up. Let's write app.js file right in the project's root directory:

var injection = require('allcountjs'); injection.bindFactory('port', process.env.PORT || 9080); injection.bindFactory('dbUrl', process.env.MONGOLAB_URI || 'mongodb://localhost:27017/motochast'); injection.bindFactory('gitRepoUrl', 'app-config'); injection.bindFactory('ExcelParser', require('./services/excel-parser')); injection.bindFactory('Scraper', require('./services/scraper')); var server = injection.inject('allcountServerStartup'); server.startup(function (errors) { if (errors) { throw new Error(errors.join('\n')); } });

You should run this by node app.js command as any usual Node.js application. Our MVP is ready to see the world now!

What's next?

Considering model

First things first so let’s start with the essential thing -- items which we are going to sale.

Item: { fields: { name: Fields.text("Name"), stock: Fields.integer("Stock").computed('sum(transactions.quantity)'), price: Fields.money("Price"), transactions: Fields.relation("Transactions", "Transaction", "item") }, referenceName: "name" }

The most interesting thing here is the stock field. It should be computed according to quantities of this items involved into transactions. So that's what we exactly wrote in our configuration: integer field stock is computed as sum of transactions' quantity - but with parentheses, dots and quotes. And the “transactions” here is the field defined as “relation” with currently absent entity. Relation is defined by it’s name, related entity type and the field’s name of the related entity which reference to this item. So let’s add the Transaction entity type:

Transaction: { fields: { item: Fields.reference("Item", "Item"), order: Fields.reference("Order", "Order"), orderItem: Fields.reference("Order item", "OrderItem"), quantity: Fields.integer("Quantity") }, showInGrid: ['item', 'order', 'quantity'] }

As you can see, field “item” is referencing to the Item and maintaining the relation previously defined. So nothing special here except “showInGrid” option -- it tells the view to show only listed fields by its identifiers. Next let’s define the central part of our POS:

Order: { fields: { number: Fields.integer("Order #"), date: Fields.date("Date"), total: Fields.money("Total").computed('sum(orderItems.finalPrice)'), orderItems: Fields.relation("Items", "OrderItem", "order") }, beforeSave: function (Entity, Dates, Crud) { if (!Entity.date) { Entity.date = Dates.nowDate(); } return Crud.crudFor('OrderCounter').find({}).then(function (last) { if (!Entity.number) { Entity.number = last[0].number; return Crud.crudFor('OrderCounter').updateEntity({id: last[0].id, number: last[0].number + 1}); } }) }, beforeDelete: function (Entity, Crud, Q) { var crud = Crud.crudFor('OrderItem'); return crud.find({filtering: {order: Entity.id}}).then(function (items) { return Q.all(items.map(function (i) { return crud.deleteEntity(i.id) })); }); }, referenceName: "number", views: { PointOfSale: { customView: 'pos' } } }

I called it “central” because this is the part where we define our main view: the “Point Of Sale” as a custom view located in file “pos.jade” which we will tackle with later. Also you’ve surely noticed “beforeSave” and “beforeDelete” functions. They are handlers which triggers when the appropriate event happens. More about such as functions you can learn from our documentation. I’ll just mention that we need this functions here to update order’s counter when order is completed and clear up all related items from this order when it’s removed. You can also see relational and computed fields here. The latter is to show up total price of particular order and the former is the relation with entities which should be considered as items containing this order:

OrderItem: { fields: { order: Fields.reference("Order", "Order"), item: Fields.fixedReference("Item", "Item").required(), quantity: Fields.integer("Quantity").required(), finalPrice: Fields.money("Final price").readOnly().addToTotalRow() }, showInGrid: ['item', 'quantity', 'finalPrice'], beforeSave: function (Crud, Entity) { return Crud.crudFor('Item').readEntity(Entity.item.id).then(function (item) { Entity.finalPrice = Entity.quantity * item.price; }) }, afterSave: function (Crud, Entity) { var crud = Crud.crudForEntityType('Transaction'); return removeTransaction(Crud, Entity).then(function () { return crud.createEntity({ order: Entity.order, orderItem: {id: Entity.id}, item: Entity.item, quantity: Entity.quantity * -1 }) }) }, beforeDelete: function (Crud, Entity) { return removeTransaction(Crud, Entity); } }

Now you might noticed that every entity type which participate in the relational fields have its own “showInGrid” configuration. This is because usually we don’t want to show user the owner entity -- he get himself there through it. But certainly you have an ability to customize this behaviour as you’d like. Here we have the CRUD-hooks too: we need to update total price according to ordered quantity before save this particular order’s item, we need to remove transaction and create a new one when editing of order’s items is successfully completed and we need to remove the transaction made with ordered item if it exists when this order’s item is going to be removed. Also we mark the “final price” field as a total-row-participant by calling the “add to total row” function on it. By the way, we worship of DRY principle, hence we’ve reused function removing transation:

function removeTransaction(Crud, Entity) { var crud = Crud.crudForEntityType('Transaction'); return crud.find({filtering: {orderItem: Entity.id}}).then(function (transactions) { if (transactions.length) { return crud.deleteEntity(transactions[0].id); } }); }

Just in case of the consecutive numbering of orders we’ve got singleton counter of orders:

OrderCounter: { fields: { number: Fields.integer("Counter") } }

POS main view

Recently we’ve mentioned this view as an essential thing for such as applications. Remember yourself tackling horrible and overloaded user’s interfaces. And how happy you might be pushing just a few big colored buttons and getting your job done by it. That’s why we emphasize our customizability of UI. The bottom line is: if you have an outstanding UX, you can easily express it in the UI! And this is what we exactly going to do now -- create a file called ‘pos.jade’ with the following content:

extends main include mixins block vars - var hasToolbar = false block content div(ng-app='allcount', ng-controller='EntityViewController') +defaultList() .container.screen-container(ng-cloak) .row(ng-controller="PosController") .col-md-8 .items-bar.row.btn-toolbar(lc-list="'Item'", paging="{}") .col-lg-4.col-md-6.col-xs-12(ng-repeat="item in items") button.btn.btn-lg.btn-block.btn-default(ng-click="addItem(item)") p {{item.name}} p {{(item.price / 100) | currency}} .container-fluid h1 Total: {{viewState.editForm.entity().total/100 | currency}} .row.btn-toolbar .col-md-4 button.btn.btn-lg.btn-danger.btn-block(ng-click="deleteEntity()", ng-disabled="!viewState.formEntityId") Cancel .col-md-4(ng-hide='viewState.isFormEditing') +startFormEditingButton()(ng-disabled="!viewState.formEntityId").btn-block.btn-lg .col-md-4(ng-show='viewState.isFormEditing') +doneFormEditingButton()(ng-disabled="!viewState.formEntityId").btn-block.btn-lg .col-md-4 button.btn.btn-lg.btn-success.btn-block(ng-click="viewState.mode = 'list'; viewState.formEntityId = undefined", ng-disabled="!viewState.formEntityId") Finish .col-md-4 +defaultEditForm()(ng-show="true") +defaultFormTemplate() block js +entityJs() script. angular.module('allcount').controller('PosController', ['$scope', 'lcApi', '$q', function ($scope, lcApi, $q) { $scope.addItem = function (item) { var promise; if (!$scope.viewState.formEntityId) { promise = lcApi.createEntity({entityTypeId: 'Order'}, {}).then(function (orderId) { $scope.navigateTo(orderId) return orderId; }) } else { promise = $q.when($scope.viewState.formEntityId); } promise.then(function (orderId) { return lcApi.findRange({entityTypeId: 'OrderItem'}, {filtering: {order: orderId}}).then(function (items) { var existingOrderItem = _.find(items, function (i) { return i.item.id === item.id; }) return (existingOrderItem ? lcApi.updateEntity({entityTypeId: 'OrderItem'}, { id: existingOrderItem.id, quantity: 1 + existingOrderItem.quantity }) : lcApi.createEntity({entityTypeId: 'OrderItem'}, { order: {id: orderId}, item: item, quantity: 1 }) ).then(function () { return $scope.editForm.reloadEntity(); }) }) }) } }]) style. .items-bar .btn-block { margin-bottom: 10px; }

We are not going to stop on its content this time, but you can see it in action by running the demo!

Putting all things together

Alright, so far we’ve defined our nice and nifty view, decided about model and some business logic. If you follow our blog you should be familiar with starting up AllcountJS. I’ll be brief with it:

Create directory somewhere on your computer (e.g. mkdir pos-example)

Create the app.js file inside it with the following content (as you can see we’ve added menus there and some sample data just for the sake of presentability):

A.app({ appName: "POS and inventory", appIcon: "calculator", onlyAuthenticated: true, menuItems: [ { name: "Transactions", entityTypeId: "Transaction", icon: "send-o" }, { name: "Items", entityTypeId: "Item", icon: "cubes" }, { name: "Orders", entityTypeId: "Order", icon: "shopping-cart" }, { name: "POS", entityTypeId: "PointOfSale", icon: "calculator" } ], entities: function (Fields) { return { Transaction: { fields: { item: Fields.reference("Item", "Item"), order: Fields.reference("Order", "Order"), orderItem: Fields.reference("Order item", "OrderItem"), quantity: Fields.integer("Quantity") }, showInGrid: ['item', 'order', 'quantity'] }, Item: { fields: { name: Fields.text("Name"), stock: Fields.integer("Stock").computed('sum(transactions.quantity)'), price: Fields.money("Price"), transactions: Fields.relation("Transactions", "Transaction", "item") }, referenceName: "name" }, Order: { fields: { number: Fields.integer("Order #"), date: Fields.date("Date"), total: Fields.money("Total").computed('sum(orderItems.finalPrice)'), orderItems: Fields.relation("Items", "OrderItem", "order") }, beforeSave: function (Entity, Dates, Crud) { if (!Entity.date) { Entity.date = Dates.nowDate(); } return Crud.crudFor('OrderCounter').find({}).then(function (last) { if (!Entity.number) { Entity.number = last[0].number; return Crud.crudFor('OrderCounter').updateEntity({ id: last[0].id, number: last[0].number + 1 }); } }) }, beforeDelete: function (Entity, Crud, Q) { var crud = Crud.crudFor('OrderItem'); return crud.find({filtering: {order: Entity.id}}).then(function (items) { return Q.all(items.map(function (i) { return crud.deleteEntity(i.id) })); }); }, referenceName: "number", views: { PointOfSale: { customView: 'pos' } } }, OrderItem: { fields: { order: Fields.reference("Order", "Order"), item: Fields.fixedReference("Item", "Item").required(), quantity: Fields.integer("Quantity").required(), finalPrice: Fields.money("Final price").readOnly().addToTotalRow() }, showInGrid: ['item', 'quantity', 'finalPrice'], beforeSave: function (Crud, Entity) { return Crud.crudFor('Item').readEntity(Entity.item.id).then(function (item) { Entity.finalPrice = Entity.quantity * item.price; }) }, afterSave: function (Crud, Entity) { var crud = Crud.crudForEntityType('Transaction'); return removeTransaction(Crud, Entity).then(function () { return crud.createEntity({ order: Entity.order, orderItem: {id: Entity.id}, item: Entity.item, quantity: Entity.quantity * -1 }) }) }, beforeDelete: function (Crud, Entity) { return removeTransaction(Crud, Entity); } }, OrderCounter: { fields: { number: Fields.integer("Counter") } }, } }, migrations: function (Migrations) { return [ { name: "demo-records-1", operation: Migrations.insert("Item", [ {id: "1", name: "Snickers", price: 299}, {id: "2", name: "Coffee", price: 199}, {id: "3", name: "Tea", price: 99} ]) }, { name: "demo-records-2", operation: Migrations.insert("Transaction", [ {id: "1", item: {id: "1"}, quantity: "50"}, {id: "2", item: {id: "2"}, quantity: "100"}, {id: "3", item: {id: "3"}, quantity: "200"} ]) }, { name: "order-counter", operation: Migrations.insert("OrderCounter", [ {id: "2", number: 1} ]) } ] } }); function removeTransaction(Crud, Entity) { var crud = Crud.crudForEntityType('Transaction'); return crud.find({filtering: {orderItem: Entity.id}}).then(function (transactions) { if (transactions.length) { return crud.deleteEntity(transactions[0].id); } }); }

Place recently introduced pos.jade file right behind app.js

Install allcountjs-cli if you haven't done it yet.

Run the server by command allcountjs -c app.js (Note: you should already have Mongo DB service up and running)

Afterword

So let’s start. If you missed the Blog post about how to bootstrap your mobile app you could check it out for detailed explantation of how to do it. But for now I’ll go pretty quick with it.

Tools:

$ npm install -g allcountjs-cli cordova ionic

Bootstrapping and starting CusDev CRM AllcountJS application:

$ allcountjs init --template cusdev-crm

I’m using crm-app-allcountjs name for my newly created application.

$ cd crm-app-allcountjs && npm install $ allcountjs run

Bootstrapping ionic application with:

$ ionic start crm-app blank $ cd crm-app $ bower install allcountjs-ionic --save

Updating sources from previous blog post.

www/index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/underscore/underscore.js"></script> <script src="lib/jquery/dist/jquery.js"></script> <script src="lib/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="lib/allcountjs-angular-base/allcount-base.js"></script> <script src="lib/allcountjs-ionic/allcount-mobile.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html>

www/js/app.js

angular.module('starter', ['ionic', 'allcount-mobile']) .run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); });

Now run ionic serve and you should see your AllcountJS mobile app is showing auth modal for your AllcountJS backend.

Cool! Project bootstrap part has been done and now we’re going to add our custom view. Let’s start with minimum viable setup and make 3 changes.

Add view for our FlowBoard (www/flow-board.html)

<ion-view view-title="{{title}}"> <ion-nav-buttons side="right"> <a class="button button-icon icon ion-ios-plus-empty" ng-href="#/app/entity/{{mainEntityTypeId}}/new"></a> </ion-nav-buttons> <ion-content> <ion-list lc-list="mainEntityTypeId" paging="{start: 0, count: 20}" publish-methods="viewState.gridMethods" infinite-scroll-end="viewState.infiniteScrollEnd" > <ion-item ng-repeat="item in items" ng-href="#/app/entity/{{mainEntityTypeId}}/{{item.id}}" class="card"> <h2>{{item.name}} from {{item.company}}</h2> <p>{{item.lastContactDate | date}}</p> </ion-item> <p ng-if="items && !items.length" class="padding" style="text-align: center"><b lc-message="No records"></b></p> </ion-list> <ion-infinite-scroll ng-if="!viewState.infiniteScrollEnd" on-infinite="loadNextItems()" distance="1%" immediate-check="true"> </ion-infinite-scroll> </ion-content> </ion-view>

Add FlowBoardController controller to the end of www/js/app.js (don’t forget to remove trailing ; before it)

.controller('FlowBoardController', function ($scope) { $scope.viewState = {}; $scope.mainEntityTypeId = 'FlowBoard'; $scope.$on('$ionicView.enter', function () { $scope.viewState.gridMethods.updateGrid(); } ); $scope.loadNextItems = function () { $scope.viewState.gridMethods.infiniteScrollLoadNextItems().then(function () { $scope.$broadcast('scroll.infiniteScrollComplete'); }) }; });

And register new app.flowBoard state in our config() in www/js/app.js just after setupStandardAllcountMainState()

.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .state('app.flowBoard', { url: "/entity/FlowBoard", views: { 'menuContent': { templateUrl: "flow-board.html", controller: 'FlowBoardController' } } }) .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); })

What was done so far? We use lc-list directive in our view to load FlowBoard entity type items, ng-repeat to render these items as cards (please note card class for item) and ion-infinite-scroll along with FlowBoardController logic to fetch items while scrolling. The most tricky moment here is app.flowBoard state overrides standard AllcountJS app.entity state and allows us to replace view for this entity flawlessly. Now if you run your ionic app you’ll see card view of your Board menu item.

Nice! But it isn’t kanban board actually. So what we’re going to do is to load our statuses, wrap our lc-list with ion-slide repeated for each status in ion-slide-box in order to slide between status columns and filter items for each lc-list with corresponding status id.

So our modified www/flow-board.html will look like

<ion-view view-title="{{title}}"> <ion-nav-buttons side="right"> <a class="button button-icon icon ion-ios-plus-empty" ng-href="#/app/entity/{{mainEntityTypeId}}/new"></a> </ion-nav-buttons> <ion-slide-box on-slide-changed="updateTitle($index)" style='height:100%'> <ion-slide ng-repeat="column in boardColumns"> <ion-content> <ion-list lc-list="mainEntityTypeId" paging="{start: 0, count: 20}" filtering="columnFiltering(column)" publish-methods="column.gridMethods" infinite-scroll-end="column.infiniteScrollEnd" > <ion-item ng-repeat="item in items" ng-href="#/app/entity/{{mainEntityTypeId}}/{{item.id}}" class="card"> <h2>{{item.name}} from {{item.company}}</h2> <p>{{item.lastContactDate | date}}</p> </ion-item> <p ng-if="items && !items.length" class="padding" style="text-align: center"><b lc-message="No records"></b></p> </ion-list> <ion-infinite-scroll ng-if="!column.infiniteScrollEnd" on-infinite="column.loadNextItems()" distance="1%" immediate-check="true"> </ion-infinite-scroll> </ion-content> </ion-slide> </ion-slide-box> </ion-view>

And www/js/app.js with changes to controller

angular.module('starter', ['ionic', 'allcount-mobile']) .run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .state('app.flowBoard', { url: "/entity/FlowBoard", views: { 'menuContent': { templateUrl: "flow-board.html", controller: 'FlowBoardController' } } }) .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); }) .controller('FlowBoardController', function ($scope, lcApi, $ionicSlideBoxDelegate) { $scope.mainEntityTypeId = 'FlowBoard'; $scope.$on('$ionicView.enter',function () { $scope.boardColumns && $scope.boardColumns.forEach(function (column) { column.gridMethods.updateGrid(); }) }); lcApi.getFieldDescriptions($scope.mainEntityTypeId).then(function (descriptions) { var statusFieldDescription = _.find(descriptions, function (d) { return d.field === 'status'; }); return lcApi.referenceValues(statusFieldDescription.fieldType.referenceEntityTypeId); }).then(function (statusReferenceValues) { $scope.boardColumns = statusReferenceValues; $scope.boardColumns = _.filter($scope.boardColumns, function (obj) { return !!obj.id; }) $scope.boardColumns.forEach(function (column) { column.loadNextItems = function () { column.gridMethods.infiniteScrollLoadNextItems().then(function () { $scope.$broadcast('scroll.infiniteScrollComplete'); }) }; }) $ionicSlideBoxDelegate.update(); $scope.updateTitle(0); }); $scope.updateTitle = function (columnIndex) { $scope.title = $scope.boardColumns[columnIndex].name; } $scope.columnFiltering = function (column) { return {filtering: {status: column.id}}; } });

Let’s build it and see the result. I’m using iOS but you can use Android as well. Don’t forget to override your server url to accessible one for emulator and to set up security policy properly (See previous blog post)

Let’s start with backend and web UI. For this example I'll use twenty two lines hello world application template. If you haven’t set up AllcountJS develeopment environment yet please visit our Getting Started or watch Video tutorial from one of our previous blog posts.

Let’s init our backend project repository with

$ allcountjs init

I’m using default name helloworld-app for my project. The next step is to install dependencies as CLI suggests:

$ cd helloworld-app && npm install

And to get our server up and running we should execute following command at the project dir (don’t forget to startup your local MongoDB instance)

$ allcountjs run

If all went ok we should see something like

Using db url: mongodb://localhost:27017/helloworld-app Failed to fetch "app-config". Trying to use as regular directory. Application server for "app-config" listening on port 9080

So when you open http://localhost:9080/ you’d see your application up and running.

First part is finished here and we’re going to create mobile application as our next.

If you haven’t installed ionic it’s time to do that: Getting Started. Actually it’s as simple as

$ npm install -g cordova ionic

Now let’s change directory to parent of our helloworld-app and run init for ionic:

$ ionic start helloworld-app-mobile blank

Now let’s change current directory to newly created ionic app’s directory and run ionic serve in order to check what we have now:

$ cd helloworld-app-mobile && ionic serve

If all went nice you’d see blank ionic starter app. Now let’s install allcountjs-ionic with (if you haven’t installed bower yet please run npm install -g bower)

$ bower install allcountjs-ionic --save

Then open helloworld-app-mobile/www/index.html and add AllcountJS dependencies just right after ionic.bundle.js declaration

<script src="lib/underscore/underscore.js"></script> <script src="lib/jquery/dist/jquery.js"></script> <script src="lib/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="lib/allcountjs-angular-base/allcount-base.js"></script> <script src="lib/allcountjs-ionic/allcount-mobile.js"></script>

And also replace contents of <body ng-app="starter"></body> with

<ion-nav-view></ion-nav-view>

So we should get something like in our index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/underscore/underscore.js"></script> <script src="lib/jquery/dist/jquery.js"></script> <script src="lib/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script> <script src="lib/allcountjs-angular-base/allcount-base.js"></script> <script src="lib/allcountjs-ionic/allcount-mobile.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html>

Then let’s change helloworld-app-mobile/www/js/app.js. First we need to add allcount-mobile module dependency using

angular.module('starter', ['ionic', 'allcount-mobile'])

Then we need to setup our server url by requiring lcApiConfig dependency in module run() and setting url as following

.run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); ... })

The last one thing is to add standard AllcountJS routes by adding config() call

.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); });

Final app.js should look like

angular.module('starter', ['ionic', 'allcount-mobile']) .run(function($ionicPlatform, lcApiConfig) { lcApiConfig.setServerUrl('http://localhost:9080'); $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .setupStandardAllcountMainState('app', 'lib/allcountjs-ionic/templates') .setupStandardAllcountStates('app', 'lib/allcountjs-ionic/templates'); $urlRouterProvider.otherwise('/app/main'); });

Let’s check our result by running ionic serve from helloworld-app-mobile directory. You should see login dialog where you could just enter admin/admin. After login you’d see your app menu described in AllcountJS app config.

Cool! But let’s go further and build and run native iOS application then. In order to do this we’d need to add cordova ios platform

$ ionic platform add ios

But before you’ll run app on emulator you should change your app server url to something accessible for it. For myself I used my IP on local network. Let’s change it in helloworld-app-mobile/www/js/app.js

lcApiConfig.setServerUrl('http://192.168.0.16:9080');

Then run

$ ionic build ios $ ionic emulate ios

Another one thing I definitely need to mention is the new Apple security policy for iOS 9. So in order to use insecure http endpoints you should add this to your platforms/ios/helloworld-app-mobile/helloworld-app-mobile-Info.plist just after first <dict> tag before run (see http://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9 for details):

<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

After all you would see something like:

Pretty same list of operations are required to build and emulate on android as well

$ ionic platform add android $ ionic build android $ ionic emulate android