http://git-wip-us.apache.org/repos/asf/predictionio-site/blob/9d2bd407/demo/tapster/index.html
----------------------------------------------------------------------
diff --git a/demo/tapster/index.html b/demo/tapster/index.html
index 40b74e6..fe39c89 100644
--- a/demo/tapster/index.html
+++ b/demo/tapster/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><title>Comics Recommendation Demo</title><meta
charset="utf-8"/><meta content="IE=edge,chrome=1"
http-equiv="X-UA-Compatible"/><meta name="viewport"
content="width=device-width, initial-scale=1.0"/><meta class="swiftype"
name="title" data-type="string" content="Comics Recommendation Demo"/><link
rel="canonical" href="https://predictionio.apache.org/demo/tapster/"/><link
href="/images/favicon/normal-b330020a.png" rel="shortcut icon"/><link
href="/images/favicon/apple-c0febcf2.png" rel="apple-touch-icon"/><link
href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet"/><link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet"/><link href="/stylesheets/application-eccfc6cb.css"
rel="stylesheet" type="text/css"/><script
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><script
src="//cdn.mathjax.org/mathjax/la
test/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script
src="//use.typekit.net/pqo0itb.js"></script><script>try{Typekit.load({ async:
true });}catch(e){}</script></head><body><div id="global"><header><div
class="container" id="header-wrapper"><div class="row"><div
class="col-sm-12"><div id="logo-wrapper"><span id="drawer-toggle"></span><a
href="#"></a><a href="http://predictionio.apache.org/";><img alt="Apache
PredictionIO" id="logo"
src="/images/logos/logo-ee2b9bb3.png"/></a><span>®</span></div><div
id="menu-wrapper"><div id="pill-wrapper"><a class="pill left"
href="/gallery/template-gallery">TEMPLATES</a> <a class="pill right"
href="//github.com/apache/incubator-predictionio/">OPEN
SOURCE</a></div></div><img class="mobile-search-bar-toggler hidden-md
hidden-lg"
src="/images/icons/search-glass-704bd4ff.png"/></div></div></div></header><div
id="search-bar-row-wrapper"><div class="container-fluid"
id="search-bar-row"><div class="row"><div class="col-md-9 col-sm-11 col-xs-11"><
div class="hidden-md hidden-lg"
id="mobile-page-heading-wrapper"><p>PredictionIO Docs</p><h4>Comics
Recommendation Demo</h4></div><h4 class="hidden-sm hidden-xs">PredictionIO
Docs</h4></div><div class="col-md-3 col-sm-1 col-xs-1 hidden-md hidden-lg"><img
id="left-menu-indicator"
src="/images/icons/down-arrow-dfe9f7fe.png"/></div><div class="col-md-3
col-sm-12 col-xs-12 swiftype-wrapper"><div class="swiftype"><form
class="search-form"><img class="search-box-toggler hidden-xs hidden-sm"
src="/images/icons/search-glass-704bd4ff.png"/><div class="search-box"><img
src="/images/icons/search-glass-704bd4ff.png"/><input type="text"
id="st-search-input" class="st-search-input" placeholder="Search
Doc..."/></div><img class="swiftype-row-hider hidden-md hidden-lg"
src="/images/icons/drawer-toggle-active-fcbef12a.png"/></form></div></div><div
class="mobile-left-menu-toggler hidden-md
hidden-lg"></div></div></div></div><div id="page" class="container-fluid"><div
class="row"><div id="left-menu-wr
apper" class="col-md-3"><nav id="nav-main"><ul><li class="level-1"><a
class="expandible" href="/"><span>Apache PredictionIO®
Documentation</span></a><ul><li class="level-2"><a class="final"
href="/"><span>Welcome to Apache PredictionIO®</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Getting
Started</span></a><ul><li class="level-2"><a class="final"
href="/start/"><span>A Quick Intro</span></a></li><li class="level-2"><a
class="final" href="/install/"><span>Installing Apache
PredictionIO</span></a></li><li class="level-2"><a class="final"
href="/start/download/"><span>Downloading an Engine Template</span></a></li><li
class="level-2"><a class="final" href="/start/deploy/"><span>Deploying Your
First Engine</span></a></li><li class="level-2"><a class="final"
href="/start/customize/"><span>Customizing the
Engine</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Integrating with Your App</span></a><ul><li class="level-2"
><a class="final" href="/appintegration/"><span>App Integration
>Overview</span></a></li><li class="level-2"><a class="expandible"
>href="/sdk/"><span>List of SDKs</span></a><ul><li class="level-3"><a
>class="final" href="/sdk/java/"><span>Java & Android SDK</span></a></li><li
>class="level-3"><a class="final" href="/sdk/php/"><span>PHP
>SDK</span></a></li><li class="level-3"><a class="final"
>href="/sdk/python/"><span>Python SDK</span></a></li><li class="level-3"><a
>class="final" href="/sdk/ruby/"><span>Ruby SDK</span></a></li><li
>class="level-3"><a class="final" href="/sdk/community/"><span>Community
>Powered SDKs</span></a></li></ul></li></ul></li><li class="level-1"><a
>class="expandible" href="#"><span>Deploying an Engine</span></a><ul><li
>class="level-2"><a class="final" href="/deploy/"><span>Deploying as a Web
>Service</span></a></li><li class="level-2"><a class="final"
>href="/batchpredict/"><span>Batch Predictions</span></a></li><li
>class="level-2"><a class="final" href="/deploy/moni
toring/"><span>Monitoring Engine</span></a></li><li class="level-2"><a
class="final" href="/deploy/engineparams/"><span>Setting Engine
Parameters</span></a></li><li class="level-2"><a class="final"
href="/deploy/enginevariants/"><span>Deploying Multiple Engine
Variants</span></a></li><li class="level-2"><a class="final"
href="/deploy/plugin/"><span>Engine Server Plugin</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Customizing an
Engine</span></a><ul><li class="level-2"><a class="final"
href="/customize/"><span>Learning DASE</span></a></li><li class="level-2"><a
class="final" href="/customize/dase/"><span>Implement DASE</span></a></li><li
class="level-2"><a class="final"
href="/customize/troubleshooting/"><span>Troubleshooting Engine
Development</span></a></li><li class="level-2"><a class="final"
href="/api/current/#package"><span>Engine Scala
APIs</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Collecting and Anal
yzing Data</span></a><ul><li class="level-2"><a class="final"
href="/datacollection/"><span>Event Server Overview</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/eventapi/"><span>Collecting Data with
REST/SDKs</span></a></li><li class="level-2"><a class="final"
href="/datacollection/eventmodel/"><span>Events Modeling</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/webhooks/"><span>Unifying Multichannel Data with
Webhooks</span></a></li><li class="level-2"><a class="final"
href="/datacollection/channel/"><span>Channel</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/batchimport/"><span>Importing Data in
Batch</span></a></li><li class="level-2"><a class="final"
href="/datacollection/analytics/"><span>Using Analytics
Tools</span></a></li><li class="level-2"><a class="final"
href="/datacollection/plugin/"><span>Event Server
Plugin</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span
>Choosing an Algorithm(s)</span></a><ul><li class="level-2"><a class="final"
>href="/algorithm/"><span>Built-in Algorithm Libraries</span></a></li><li
>class="level-2"><a class="final" href="/algorithm/switch/"><span>Switching to
>Another Algorithm</span></a></li><li class="level-2"><a class="final"
>href="/algorithm/multiple/"><span>Combining Multiple
>Algorithms</span></a></li><li class="level-2"><a class="final"
>href="/algorithm/custom/"><span>Adding Your Own
>Algorithms</span></a></li></ul></li><li class="level-1"><a class="expandible"
>href="#"><span>ML Tuning and Evaluation</span></a><ul><li class="level-2"><a
>class="final" href="/evaluation/"><span>Overview</span></a></li><li
>class="level-2"><a class="final"
>href="/evaluation/paramtuning/"><span>Hyperparameter
>Tuning</span></a></li><li class="level-2"><a class="final"
>href="/evaluation/evaluationdashboard/"><span>Evaluation
>Dashboard</span></a></li><li class="level-2"><a class="final"
>href="/evaluation/metricchoose/"><span>Choosing
Evaluation Metrics</span></a></li><li class="level-2"><a class="final"
href="/evaluation/metricbuild/"><span>Building Evaluation
Metrics</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>System Architecture</span></a><ul><li class="level-2"><a
class="final" href="/system/"><span>Architecture Overview</span></a></li><li
class="level-2"><a class="final" href="/system/anotherdatastore/"><span>Using
Another Data Store</span></a></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>PredictionIO® Official
Templates</span></a><ul><li class="level-2"><a class="final"
href="/templates/"><span>Intro</span></a></li><li class="level-2"><a
class="expandible" href="#"><span>Recommendation</span></a><ul><li
class="level-3"><a class="final"
href="/templates/recommendation/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="f
inal" href="/templates/recommendation/evaluation/"><span>Evaluation
Explained</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/recommendation/reading-custom-events/"><span>Read Custom
Events</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/customize-data-prep/"><span>Customize Data
Preparator</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/customize-serving/"><span>Customize
Serving</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/training-with-implicit-preference/"><span>Train
with Implicit Preference</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/blacklist-items/"><span>Filter Recommended
Items by Blacklist in Query</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/batch-evaluator/">
<span>Batch Persistable Evaluator</span></a></li></ul></li><li
class="level-2"><a class="expandible" href="#"><span>E-Commerce
Recommendation</span></a><ul><li class="level-3"><a class="final"
href="/templates/ecommercerecommendation/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/ecommercerecommendation/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/ecommercerecommendation/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/ecommercerecommendation/train-with-rate-event/"><span>Train
with Rate Event</span></a></li><li class="level-3"><a class="final"
href="/templates/ecommercerecommendation/adjust-score/"><span>Adjust
Score</span></a></li></ul></li><li class="level-2"><a class="expandible"
href="#"><span>Similar Product</span></a><ul><li class="level-3"><a
class="final" href="/templates/similarproduct/quickstart/"><span>Quick
Start</span></a></li><li cla
ss="level-3"><a class="final"
href="/templates/similarproduct/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/similarproduct/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/similarproduct/multi-events-multi-algos/"><span>Multiple
Events and Multiple Algorithms</span></a></li><li class="level-3"><a
class="final"
href="/templates/similarproduct/return-item-properties/"><span>Returns Item
Properties</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/train-with-rate-event/"><span>Train with Rate
Event</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/rid-user-set-event/"><span>Get Rid of Events
for Users</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/recommended-user/"><span>Recommend
Users</span></a></li></ul></li><li class="level-2"><a class="expandible"
href="#"><span>Classification</span></a><ul><li
class="level-3"><a class="final"
href="/templates/classification/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/classification/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/classification/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/classification/add-algorithm/"><span>Use Alternative
Algorithm</span></a></li><li class="level-3"><a class="final"
href="/templates/classification/reading-custom-properties/"><span>Read Custom
Properties</span></a></li></ul></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>Engine Template Gallery</span></a><ul><li
class="level-2"><a class="final"
href="/gallery/template-gallery/"><span>Browse</span></a></li><li
class="level-2"><a class="final"
href="/community/submit-template/"><span>Submit your Engine as a
Template</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><spa
n>Demo Tutorials</span></a><ul><li class="level-2"><a class="final active"
href="/demo/tapster/"><span>Comics Recommendation Demo</span></a></li><li
class="level-2"><a class="final" href="/demo/community/"><span>Community
Contributed Demo</span></a></li><li class="level-2"><a class="final"
href="/demo/textclassification/"><span>Text Classification Engine
Tutorial</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="/community/"><span>Getting Involved</span></a><ul><li class="level-2"><a
class="final" href="/community/contribute-code/"><span>Contribute
Code</span></a></li><li class="level-2"><a class="final"
href="/community/contribute-documentation/"><span>Contribute
Documentation</span></a></li><li class="level-2"><a class="final"
href="/community/contribute-sdk/"><span>Contribute a SDK</span></a></li><li
class="level-2"><a class="final"
href="/community/contribute-webhook/"><span>Contribute a
Webhook</span></a></li><li class="level-2"><a class="final" href="/co
mmunity/projects/"><span>Community Projects</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Getting
Help</span></a><ul><li class="level-2"><a class="final"
href="/resources/faq/"><span>FAQs</span></a></li><li class="level-2"><a
class="final" href="/support/"><span>Support</span></a></li></ul></li><li
class="level-1"><a class="expandible"
href="#"><span>Resources</span></a><ul><li class="level-2"><a class="final"
href="/cli/"><span>Command-line Interface</span></a></li><li class="level-2"><a
class="final" href="/resources/release/"><span>Release
Cadence</span></a></li><li class="level-2"><a class="final"
href="/resources/intellij/"><span>Developing Engines with IntelliJ
IDEA</span></a></li><li class="level-2"><a class="final"
href="/resources/upgrade/"><span>Upgrade Instructions</span></a></li><li
class="level-2"><a class="final"
href="/resources/glossary/"><span>Glossary</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><sp
an>Apache Software Foundation</span></a><ul><li class="level-2"><a
class="final" href="https://www.apache.org/";><span>Apache
Homepage</span></a></li><li class="level-2"><a class="final"
href="https://www.apache.org/licenses/";><span>License</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/foundation/sponsorship.html";><span>Sponsorship</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/foundation/thanks.html";><span>Thanks</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/security/";><span>Security</span></a></li></ul></li></ul></nav></div><div
class="col-md-9 col-sm-12"><div class="content-header hidden-md
hidden-lg"><div id="breadcrumbs" class="hidden-sm hidden xs"><ul><li><a
href="#">Demo Tutorials</a><span class="spacer">></span></li><li><span
class="last">Comics Recommendation Demo</span></li></ul></div><div
id="page-title"><h1>Comics Recommendation Demo</h1></div></div><div id="table-of
-content-wrapper"><h5>On this page</h5><aside id="table-of-contents"><ul> <li>
<a href="#introduction">Introduction</a> </li> <li> <a
href="#tapster-demo-application">Tapster Demo Application</a> </li> <li> <a
href="#apache-predictionio-setup">Apache PredictionIO Setup</a> </li> <li> <a
href="#import-data">Import Data</a> </li> <li> <a
href="#connect-demo-app-with-apache-predictionio">Connect Demo app with Apache
PredictionIO</a> </li> <li> <a href="#links">Links</a> </li> <li> <a
href="#conclusion">Conclusion</a> </li> </ul> </aside><hr/><a
id="edit-page-link"
href="https://github.com/apache/incubator-predictionio/tree/livedoc/docs/manual/source/demo/tapster.html.md";><img
src="/images/icons/edit-pencil-d6c1bb3d.png"/>Edit this page</a></div><div
class="content-header hidden-sm hidden-xs"><div id="breadcrumbs"
class="hidden-sm hidden xs"><ul><li><a href="#">Demo Tutorials</a><span
class="spacer">></span></li><li><span class="last">Comics Recommendation
Demo</span></li></ul></div>
<div id="page-title"><h1>Comics Recommendation Demo</h1></div></div><div
class="content"> <h2 id='introduction'
class='header-anchors'>Introduction</h2><p>In this demo, we will show you how
to build a Tinder-style web application (named "Tapster")
recommending comics to users based on their likes/dislikes of episodes
interactively.</p><p>The demo will use <a
href="https://predictionio.apache.org/templates/similarproduct/quickstart/";>Similar
Product Template</a>. Similar Product Template is a great choice if you want
to make recommendations based on immediate user activities or for new users
with limited history. It uses MLLib Alternating Least Squares (ALS)
recommendation algorithm, a <a
href="http://en.wikipedia.org/wiki/Recommender_system#Collaborative_filtering";>Collaborative
filtering</a> (CF) algorithm commonly used for recommender systems. These
techniques aim to fill in the missing entries of a user-item association
matrix. Users and products are described by a smal
l set of latent factors that can be used to predict missing entries. A
layman's interpretation of Collaborative Filtering is "People who like
this comic, also like these comics."</p><p>All the code and data is on
GitHub at: <a
href="https://github.com/PredictionIO/Demo-Tapster";>github.com/PredictionIO/Demo-Tapster</a>.</p><h3
id='data' class='header-anchors'>Data</h3><p>The source of the data is from <a
href="http://tapastic.com/";>Tapastic</a>. You can find the data files <a
href="https://github.com/PredictionIO/Demo-Tapster/tree/master/data";>here</a>.</p><p>The
data structure looks like this:</p><p><a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/data/episode_list.csv";>Episode
List</a> <code>data/episode_list.csv</code></p><p><strong>Fields:</strong>
episodeId | episodeTitle | episodeCategories | episodeUrl |
episodeImageUrls</p><p>1,000 rows. Each row represents one episode.</p><p><a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/data
/user_list.csv">User Like Event List</a>
<code>data/user_list.csv</code></p><p><strong>Fields:</strong> userId |
episodeId | likedTimestamp</p><p>192,587 rows. Each row represents one user
like for the given episode.</p><p>The tutorial has four major steps:</p> <ul>
<li>Demo application setup</li> <li>PredictionIO installation and setup</li>
<li>Import data into database and PredictionIO</li> <li>Integrate demo
application with PredictionIO</li> </ul> <h2 id='tapster-demo-application'
class='header-anchors'>Tapster Demo Application</h2><p>The demo application is
built using Rails.</p><p>You can clone the existing application with:</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1
+<!DOCTYPE html><html><head><title>Comics Recommendation Demo</title><meta
charset="utf-8"/><meta content="IE=edge,chrome=1"
http-equiv="X-UA-Compatible"/><meta name="viewport"
content="width=device-width, initial-scale=1.0"/><meta class="swiftype"
name="title" data-type="string" content="Comics Recommendation Demo"/><link
rel="canonical" href="https://predictionio.apache.org/demo/tapster/"/><link
href="/images/favicon/normal-b330020a.png" rel="shortcut icon"/><link
href="/images/favicon/apple-c0febcf2.png" rel="apple-touch-icon"/><link
href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet"/><link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
rel="stylesheet"/><link href="/stylesheets/application-eccfc6cb.css"
rel="stylesheet" type="text/css"/><script
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><script
src="//cdn.mathjax.org/mathjax/la
test/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script
src="//use.typekit.net/pqo0itb.js"></script><script>try{Typekit.load({ async:
true });}catch(e){}</script></head><body><div id="global"><header><div
class="container" id="header-wrapper"><div class="row"><div
class="col-sm-12"><div id="logo-wrapper"><span id="drawer-toggle"></span><a
href="#"></a><a href="http://predictionio.apache.org/";><img alt="Apache
PredictionIO" id="logo"
src="/images/logos/logo-ee2b9bb3.png"/></a><span>®</span></div><div
id="menu-wrapper"><div id="pill-wrapper"><a class="pill left"
href="/gallery/template-gallery">TEMPLATES</a> <a class="pill right"
href="//github.com/apache/predictionio/">OPEN SOURCE</a></div></div><img
class="mobile-search-bar-toggler hidden-md hidden-lg"
src="/images/icons/search-glass-704bd4ff.png"/></div></div></div></header><div
id="search-bar-row-wrapper"><div class="container-fluid"
id="search-bar-row"><div class="row"><div class="col-md-9 col-sm-11
col-xs-11"><div class=
"hidden-md hidden-lg" id="mobile-page-heading-wrapper"><p>PredictionIO
Docs</p><h4>Comics Recommendation Demo</h4></div><h4 class="hidden-sm
hidden-xs">PredictionIO Docs</h4></div><div class="col-md-3 col-sm-1 col-xs-1
hidden-md hidden-lg"><img id="left-menu-indicator"
src="/images/icons/down-arrow-dfe9f7fe.png"/></div><div class="col-md-3
col-sm-12 col-xs-12 swiftype-wrapper"><div class="swiftype"><form
class="search-form"><img class="search-box-toggler hidden-xs hidden-sm"
src="/images/icons/search-glass-704bd4ff.png"/><div class="search-box"><img
src="/images/icons/search-glass-704bd4ff.png"/><input type="text"
id="st-search-input" class="st-search-input" placeholder="Search
Doc..."/></div><img class="swiftype-row-hider hidden-md hidden-lg"
src="/images/icons/drawer-toggle-active-fcbef12a.png"/></form></div></div><div
class="mobile-left-menu-toggler hidden-md
hidden-lg"></div></div></div></div><div id="page" class="container-fluid"><div
class="row"><div id="left-menu-wrapper" cla
ss="col-md-3"><nav id="nav-main"><ul><li class="level-1"><a class="expandible"
href="/"><span>Apache PredictionIO® Documentation</span></a><ul><li
class="level-2"><a class="final" href="/"><span>Welcome to Apache
PredictionIO®</span></a></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>Getting Started</span></a><ul><li
class="level-2"><a class="final" href="/start/"><span>A Quick
Intro</span></a></li><li class="level-2"><a class="final"
href="/install/"><span>Installing Apache PredictionIO</span></a></li><li
class="level-2"><a class="final" href="/start/download/"><span>Downloading an
Engine Template</span></a></li><li class="level-2"><a class="final"
href="/start/deploy/"><span>Deploying Your First Engine</span></a></li><li
class="level-2"><a class="final" href="/start/customize/"><span>Customizing the
Engine</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Integrating with Your App</span></a><ul><li class="level-2"><a
class=
"final" href="/appintegration/"><span>App Integration
Overview</span></a></li><li class="level-2"><a class="expandible"
href="/sdk/"><span>List of SDKs</span></a><ul><li class="level-3"><a
class="final" href="/sdk/java/"><span>Java & Android SDK</span></a></li><li
class="level-3"><a class="final" href="/sdk/php/"><span>PHP
SDK</span></a></li><li class="level-3"><a class="final"
href="/sdk/python/"><span>Python SDK</span></a></li><li class="level-3"><a
class="final" href="/sdk/ruby/"><span>Ruby SDK</span></a></li><li
class="level-3"><a class="final" href="/sdk/community/"><span>Community Powered
SDKs</span></a></li></ul></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>Deploying an Engine</span></a><ul><li
class="level-2"><a class="final" href="/deploy/"><span>Deploying as a Web
Service</span></a></li><li class="level-2"><a class="final"
href="/batchpredict/"><span>Batch Predictions</span></a></li><li
class="level-2"><a class="final" href="/deploy/monitoring/"><
span>Monitoring Engine</span></a></li><li class="level-2"><a class="final"
href="/deploy/engineparams/"><span>Setting Engine Parameters</span></a></li><li
class="level-2"><a class="final" href="/deploy/enginevariants/"><span>Deploying
Multiple Engine Variants</span></a></li><li class="level-2"><a class="final"
href="/deploy/plugin/"><span>Engine Server Plugin</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Customizing an
Engine</span></a><ul><li class="level-2"><a class="final"
href="/customize/"><span>Learning DASE</span></a></li><li class="level-2"><a
class="final" href="/customize/dase/"><span>Implement DASE</span></a></li><li
class="level-2"><a class="final"
href="/customize/troubleshooting/"><span>Troubleshooting Engine
Development</span></a></li><li class="level-2"><a class="final"
href="/api/current/#package"><span>Engine Scala
APIs</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Collecting and Analyzing Data
</span></a><ul><li class="level-2"><a class="final"
href="/datacollection/"><span>Event Server Overview</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/eventapi/"><span>Collecting Data with
REST/SDKs</span></a></li><li class="level-2"><a class="final"
href="/datacollection/eventmodel/"><span>Events Modeling</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/webhooks/"><span>Unifying Multichannel Data with
Webhooks</span></a></li><li class="level-2"><a class="final"
href="/datacollection/channel/"><span>Channel</span></a></li><li
class="level-2"><a class="final"
href="/datacollection/batchimport/"><span>Importing Data in
Batch</span></a></li><li class="level-2"><a class="final"
href="/datacollection/analytics/"><span>Using Analytics
Tools</span></a></li><li class="level-2"><a class="final"
href="/datacollection/plugin/"><span>Event Server
Plugin</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Choosing
an Algorithm(s)</span></a><ul><li class="level-2"><a class="final"
href="/algorithm/"><span>Built-in Algorithm Libraries</span></a></li><li
class="level-2"><a class="final" href="/algorithm/switch/"><span>Switching to
Another Algorithm</span></a></li><li class="level-2"><a class="final"
href="/algorithm/multiple/"><span>Combining Multiple
Algorithms</span></a></li><li class="level-2"><a class="final"
href="/algorithm/custom/"><span>Adding Your Own
Algorithms</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>ML Tuning and Evaluation</span></a><ul><li class="level-2"><a
class="final" href="/evaluation/"><span>Overview</span></a></li><li
class="level-2"><a class="final"
href="/evaluation/paramtuning/"><span>Hyperparameter Tuning</span></a></li><li
class="level-2"><a class="final"
href="/evaluation/evaluationdashboard/"><span>Evaluation
Dashboard</span></a></li><li class="level-2"><a class="final"
href="/evaluation/metricchoose/"><span>Choosing Evaluation
Metrics</span></a></li><li class="level-2"><a class="final"
href="/evaluation/metricbuild/"><span>Building Evaluation
Metrics</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>System Architecture</span></a><ul><li class="level-2"><a
class="final" href="/system/"><span>Architecture Overview</span></a></li><li
class="level-2"><a class="final" href="/system/anotherdatastore/"><span>Using
Another Data Store</span></a></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>PredictionIO® Official
Templates</span></a><ul><li class="level-2"><a class="final"
href="/templates/"><span>Intro</span></a></li><li class="level-2"><a
class="expandible" href="#"><span>Recommendation</span></a><ul><li
class="level-3"><a class="final"
href="/templates/recommendation/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final" href
="/templates/recommendation/evaluation/"><span>Evaluation
Explained</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/recommendation/reading-custom-events/"><span>Read Custom
Events</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/customize-data-prep/"><span>Customize Data
Preparator</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/customize-serving/"><span>Customize
Serving</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/training-with-implicit-preference/"><span>Train
with Implicit Preference</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/blacklist-items/"><span>Filter Recommended
Items by Blacklist in Query</span></a></li><li class="level-3"><a class="final"
href="/templates/recommendation/batch-evaluator/"><span>Batc
h Persistable Evaluator</span></a></li></ul></li><li class="level-2"><a
class="expandible" href="#"><span>E-Commerce Recommendation</span></a><ul><li
class="level-3"><a class="final"
href="/templates/ecommercerecommendation/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/ecommercerecommendation/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/ecommercerecommendation/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/ecommercerecommendation/train-with-rate-event/"><span>Train
with Rate Event</span></a></li><li class="level-3"><a class="final"
href="/templates/ecommercerecommendation/adjust-score/"><span>Adjust
Score</span></a></li></ul></li><li class="level-2"><a class="expandible"
href="#"><span>Similar Product</span></a><ul><li class="level-3"><a
class="final" href="/templates/similarproduct/quickstart/"><span>Quick
Start</span></a></li><li class="level-
3"><a class="final"
href="/templates/similarproduct/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/similarproduct/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/similarproduct/multi-events-multi-algos/"><span>Multiple
Events and Multiple Algorithms</span></a></li><li class="level-3"><a
class="final"
href="/templates/similarproduct/return-item-properties/"><span>Returns Item
Properties</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/train-with-rate-event/"><span>Train with Rate
Event</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/rid-user-set-event/"><span>Get Rid of Events
for Users</span></a></li><li class="level-3"><a class="final"
href="/templates/similarproduct/recommended-user/"><span>Recommend
Users</span></a></li></ul></li><li class="level-2"><a class="expandible"
href="#"><span>Classification</span></a><ul><li class="lev
el-3"><a class="final"
href="/templates/classification/quickstart/"><span>Quick
Start</span></a></li><li class="level-3"><a class="final"
href="/templates/classification/dase/"><span>DASE</span></a></li><li
class="level-3"><a class="final"
href="/templates/classification/how-to/"><span>How-To</span></a></li><li
class="level-3"><a class="final"
href="/templates/classification/add-algorithm/"><span>Use Alternative
Algorithm</span></a></li><li class="level-3"><a class="final"
href="/templates/classification/reading-custom-properties/"><span>Read Custom
Properties</span></a></li></ul></li></ul></li><li class="level-1"><a
class="expandible" href="#"><span>Engine Template Gallery</span></a><ul><li
class="level-2"><a class="final"
href="/gallery/template-gallery/"><span>Browse</span></a></li><li
class="level-2"><a class="final"
href="/community/submit-template/"><span>Submit your Engine as a
Template</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="#"><span>Demo Tut
orials</span></a><ul><li class="level-2"><a class="final active"
href="/demo/tapster/"><span>Comics Recommendation Demo</span></a></li><li
class="level-2"><a class="final" href="/demo/community/"><span>Community
Contributed Demo</span></a></li><li class="level-2"><a class="final"
href="/demo/textclassification/"><span>Text Classification Engine
Tutorial</span></a></li></ul></li><li class="level-1"><a class="expandible"
href="/community/"><span>Getting Involved</span></a><ul><li class="level-2"><a
class="final" href="/community/contribute-code/"><span>Contribute
Code</span></a></li><li class="level-2"><a class="final"
href="/community/contribute-documentation/"><span>Contribute
Documentation</span></a></li><li class="level-2"><a class="final"
href="/community/contribute-sdk/"><span>Contribute a SDK</span></a></li><li
class="level-2"><a class="final"
href="/community/contribute-webhook/"><span>Contribute a
Webhook</span></a></li><li class="level-2"><a class="final" href="/community/pr
ojects/"><span>Community Projects</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Getting
Help</span></a><ul><li class="level-2"><a class="final"
href="/resources/faq/"><span>FAQs</span></a></li><li class="level-2"><a
class="final" href="/support/"><span>Support</span></a></li></ul></li><li
class="level-1"><a class="expandible"
href="#"><span>Resources</span></a><ul><li class="level-2"><a class="final"
href="/cli/"><span>Command-line Interface</span></a></li><li class="level-2"><a
class="final" href="/resources/release/"><span>Release
Cadence</span></a></li><li class="level-2"><a class="final"
href="/resources/intellij/"><span>Developing Engines with IntelliJ
IDEA</span></a></li><li class="level-2"><a class="final"
href="/resources/upgrade/"><span>Upgrade Instructions</span></a></li><li
class="level-2"><a class="final"
href="/resources/glossary/"><span>Glossary</span></a></li></ul></li><li
class="level-1"><a class="expandible" href="#"><span>Apache
Software Foundation</span></a><ul><li class="level-2"><a class="final"
href="https://www.apache.org/";><span>Apache Homepage</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/licenses/";><span>License</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/foundation/sponsorship.html";><span>Sponsorship</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/foundation/thanks.html";><span>Thanks</span></a></li><li
class="level-2"><a class="final"
href="https://www.apache.org/security/";><span>Security</span></a></li></ul></li></ul></nav></div><div
class="col-md-9 col-sm-12"><div class="content-header hidden-md
hidden-lg"><div id="breadcrumbs" class="hidden-sm hidden xs"><ul><li><a
href="#">Demo Tutorials</a><span class="spacer">></span></li><li><span
class="last">Comics Recommendation Demo</span></li></ul></div><div
id="page-title"><h1>Comics Recommendation Demo</h1></div></div><div
id="table-of-content-w
rapper"><h5>On this page</h5><aside id="table-of-contents"><ul> <li> <a
href="#introduction">Introduction</a> </li> <li> <a
href="#tapster-demo-application">Tapster Demo Application</a> </li> <li> <a
href="#apache-predictionio-setup">Apache PredictionIO Setup</a> </li> <li> <a
href="#import-data">Import Data</a> </li> <li> <a
href="#connect-demo-app-with-apache-predictionio">Connect Demo app with Apache
PredictionIO</a> </li> <li> <a href="#links">Links</a> </li> <li> <a
href="#conclusion">Conclusion</a> </li> </ul> </aside><hr/><a
id="edit-page-link"
href="https://github.com/apache/predictionio/tree/livedoc/docs/manual/source/demo/tapster.html.md";><img
src="/images/icons/edit-pencil-d6c1bb3d.png"/>Edit this page</a></div><div
class="content-header hidden-sm hidden-xs"><div id="breadcrumbs"
class="hidden-sm hidden xs"><ul><li><a href="#">Demo Tutorials</a><span
class="spacer">></span></li><li><span class="last">Comics Recommendation
Demo</span></li></ul></div><div id="page-title"
><h1>Comics Recommendation Demo</h1></div></div><div class="content"> <h2
>id='introduction' class='header-anchors'>Introduction</h2><p>In this demo, we
>will show you how to build a Tinder-style web application (named
>"Tapster") recommending comics to users based on their
>likes/dislikes of episodes interactively.</p><p>The demo will use <a
>href="https://predictionio.apache.org/templates/similarproduct/quickstart/";>Similar
> Product Template</a>. Similar Product Template is a great choice if you want
>to make recommendations based on immediate user activities or for new users
>with limited history. It uses MLLib Alternating Least Squares (ALS)
>recommendation algorithm, a <a
>href="http://en.wikipedia.org/wiki/Recommender_system#Collaborative_filtering";>Collaborative
> filtering</a> (CF) algorithm commonly used for recommender systems. These
>techniques aim to fill in the missing entries of a user-item association
>matrix. Users and products are described by a small set of latent fact
ors that can be used to predict missing entries. A layman's interpretation
of Collaborative Filtering is "People who like this comic, also like these
comics."</p><p>All the code and data is on GitHub at: <a
href="https://github.com/PredictionIO/Demo-Tapster";>github.com/PredictionIO/Demo-Tapster</a>.</p><h3
id='data' class='header-anchors'>Data</h3><p>The source of the data is from <a
href="http://tapastic.com/";>Tapastic</a>. You can find the data files <a
href="https://github.com/PredictionIO/Demo-Tapster/tree/master/data";>here</a>.</p><p>The
data structure looks like this:</p><p><a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/data/episode_list.csv";>Episode
List</a> <code>data/episode_list.csv</code></p><p><strong>Fields:</strong>
episodeId | episodeTitle | episodeCategories | episodeUrl |
episodeImageUrls</p><p>1,000 rows. Each row represents one episode.</p><p><a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/data/user_list.csv";>User
Like Event List</a>
<code>data/user_list.csv</code></p><p><strong>Fields:</strong> userId |
episodeId | likedTimestamp</p><p>192,587 rows. Each row represents one user
like for the given episode.</p><p>The tutorial has four major steps:</p> <ul>
<li>Demo application setup</li> <li>PredictionIO installation and setup</li>
<li>Import data into database and PredictionIO</li> <li>Integrate demo
application with PredictionIO</li> </ul> <h2 id='tapster-demo-application'
class='header-anchors'>Tapster Demo Application</h2><p>The demo application is
built using Rails.</p><p>You can clone the existing application with:</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3</pre></td><td class="code"><pre><span class="gp">$ </span>git clone
https://github.com/PredictionIO/Demo-Tapster.git
<span class="gp">$ </span><span class="nb">cd </span>Demo-Tapster
@@ -7,11 +7,11 @@
2</pre></td><td class="code"><pre><span class="gp">$ </span>rake db:create
<span class="gp">$ </span>rake db:migrate
</pre></td></tr></tbody></table> </div> <p>At this point, you should have the
demo application ready but with an empty database. Lets import the episodes
data into our database. We will do this with: <code>$ rake
import:episodes</code>. An "Episode" is a single <a
href="http://en.wikipedia.org/wiki/Comic_strip";>comic strip</a>.</p><p><a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/lib/tasks/import/episodes.rake";>View
on GitHub</a></p><p>This script is pretty simple. It loops through the CSV
file and creates a new episode for each line in the file in our local
database.</p><p>You can start the app and point your browser to <a
href="http://localhost:3000";>http://localhost:3000</a></p><div class="highlight
shell"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl"
style="text-align: right"><pre class="lineno">1</pre></td><td
class="code"><pre><span class="nv">$rails</span> server
-</pre></td></tr></tbody></table> </div> <p><img alt="Rails Server"
src="/images/demo/tapster/rails-server-997d690e.png"/></p><h2
id='apache-predictionio-setup' class='header-anchors'>Apache PredictionIO
Setup</h2><h3 id='install-apache-predictionio' class='header-anchors'>Install
Apache PredictionIO</h3><p>Follow the installation instructions <a
href="http://predictionio.apache.org/install/";>here</a> or simply run:</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td
class="code"><pre><span class="gp">$ </span>bash -c <span
class="s2">"</span><span class="k">$(</span>curl -s
https://raw.githubusercontent.com/apache/incubator-predictionio/master/bin/install.sh<span
class="k">)</span><span class="s2">"</span>
+</pre></td></tr></tbody></table> </div> <p><img alt="Rails Server"
src="/images/demo/tapster/rails-server-997d690e.png"/></p><h2
id='apache-predictionio-setup' class='header-anchors'>Apache PredictionIO
Setup</h2><h3 id='install-apache-predictionio' class='header-anchors'>Install
Apache PredictionIO</h3><p>Follow the installation instructions <a
href="http://predictionio.apache.org/install/";>here</a> or simply run:</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td
class="code"><pre><span class="gp">$ </span>bash -c <span
class="s2">"</span><span class="k">$(</span>curl -s
https://raw.githubusercontent.com/apache/predictionio/master/bin/install.sh<span
class="k">)</span><span class="s2">"</span>
</pre></td></tr></tbody></table> </div> <p><img alt="PIO Install"
src="/images/demo/tapster/pio-install-2d870aed.png"/></p><h3
id='create-a-new-app' class='header-anchors'>Create a New App</h3><p>You will
need to create a new app on Apache PredictionIO to house the Tapster demo. You
can do this with:</p><div class="highlight shell"><table style="border-spacing:
0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre
class="lineno">1</pre></td><td class="code"><pre><span class="gp">$ </span>pio
app new tapster
</pre></td></tr></tbody></table> </div> <p>Take note of the App ID and Access
Key.</p><p><img alt="PIO App New"
src="/images/demo/tapster/pio-app-new-5a8ae503.png"/></p><h3 id='setup-engine'
class='header-anchors'>Setup Engine</h3><p>We are going to copy the Similar
Product Template into the PIO directory.</p><div class="highlight shell"><table
style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align:
right"><pre class="lineno">1
2</pre></td><td class="code"><pre><span class="gp">$ </span><span
class="nb">cd </span>PredictionIO
-<span class="gp">$ </span>git clone
https://github.com/apache/incubator-predictionio-template-similar-product.git
tapster-episode-similar
+<span class="gp">$ </span>git clone
https://github.com/apache/predictionio-template-similar-product.git
tapster-episode-similar
</pre></td></tr></tbody></table> </div> <p>Next we are going to update the App
ID in the âengine.jsonâ file to match the App ID we just created.</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3</pre></td><td class="code"><pre><span class="gp">$ </span><span
class="nb">cd </span>tapster-episode-similar
@@ -171,7 +171,7 @@ end
</pre></td></tr></tbody></table> </div> <p>In total the script takes about 4
minutes to run on a basic laptop. At this point all the data is now imported to
Apache PredictionIO.</p><p><img alt="Import"
src="/images/demo/tapster/pio-import-predictionio-1ecd11fd.png"/></p><h3
id='engine-training' class='header-anchors'>Engine Training</h3><p>We train the
engine with the following command:</p><div class="highlight shell"><table
style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align:
right"><pre class="lineno">1
2</pre></td><td class="code"><pre><span class="gp">$ </span><span
class="nb">cd </span>tapster-episode-similar
<span class="gp">$ </span>pio train -- --driver-memory 4g
-</pre></td></tr></tbody></table> </div> <p><img alt="PIO Train"
src="/images/demo/tapster/pio-train-7edffad4.png"/></p><p>Using the
--driver-memory option to limit the memory used by Apache PredictionIO
(incubating). Without this Apache PredictionIO can consume too much memory
leading to a crash. You can adjust the 4g up or down depending on your system
specs.</p><p>You can set up a job to periodically retrain the engine so the
model is updated with the latest dataset.</p><h3 id='deploy-model'
class='header-anchors'>Deploy Model</h3><p>You can deploy the model with:
<code>$ pio deploy</code> from the <code>tapster-episode-similar</code>
directory.</p><p>At this point, you have an demo app with data and a Apache
PredictionIO (incubating) server with a trained model all setup. Next, we will
connect the two so you can log the live interaction (likes) events into Apache
PredictionIO (incubating) event server and query the engine server for
recommendation.</p><h2 id='connect-demo-app-wit
h-apache-predictionio' class='header-anchors'>Connect Demo app with Apache
PredictionIO</h2><h3 id='overview' class='header-anchors'>Overview</h3><p>On a
high level the application keeps a record of each like and dislike. It uses
jQuery to send an array of both likes and dislikes to the server on each click.
The server then queries Apache PredictionIO for a similar episode which is
relayed to jQuery and displayed to the user.</p><p>Data flow:</p> <ul> <li>The
user likes an episode.</li> <li>Tapster sends the "Like" event to
Apache PredictionIO event server.</li> <li>Tapster queries Apache PredictionIO
engine with all the episodes the user has rated (likes and dislikes) in this
session.</li> <li>Apache PredictionIO returns 1 recommended episode.</li> </ul>
<h3 id='javascript' class='header-anchors'>JavaScript</h3><p>All the important
code lives in <code>app/assets/javascripts/application.js</code> <a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/app/assets/
javascripts/application.js">View on GitHub</a></p><p>Most of this file is just
handlers for click things, displaying the loading dialog and other such
things.</p><p>The most important function is to query the Rails server for
results from Apache PredictionIO.</p><div class="highlight shell"><table
style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align:
right"><pre class="lineno">1
+</pre></td></tr></tbody></table> </div> <p><img alt="PIO Train"
src="/images/demo/tapster/pio-train-7edffad4.png"/></p><p>Using the
--driver-memory option to limit the memory used by Apache PredictionIO. Without
this Apache PredictionIO can consume too much memory leading to a crash. You
can adjust the 4g up or down depending on your system specs.</p><p>You can set
up a job to periodically retrain the engine so the model is updated with the
latest dataset.</p><h3 id='deploy-model' class='header-anchors'>Deploy
Model</h3><p>You can deploy the model with: <code>$ pio deploy</code> from the
<code>tapster-episode-similar</code> directory.</p><p>At this point, you have
an demo app with data and a Apache PredictionIO server with a trained model all
setup. Next, we will connect the two so you can log the live interaction
(likes) events into Apache PredictionIO event server and query the engine
server for recommendation.</p><h2
id='connect-demo-app-with-apache-predictionio' class='header-an
chors'>Connect Demo app with Apache PredictionIO</h2><h3 id='overview'
class='header-anchors'>Overview</h3><p>On a high level the application keeps a
record of each like and dislike. It uses jQuery to send an array of both likes
and dislikes to the server on each click. The server then queries Apache
PredictionIO for a similar episode which is relayed to jQuery and displayed to
the user.</p><p>Data flow:</p> <ul> <li>The user likes an episode.</li>
<li>Tapster sends the "Like" event to Apache PredictionIO event
server.</li> <li>Tapster queries Apache PredictionIO engine with all the
episodes the user has rated (likes and dislikes) in this session.</li>
<li>Apache PredictionIO returns 1 recommended episode.</li> </ul> <h3
id='javascript' class='header-anchors'>JavaScript</h3><p>All the important code
lives in <code>app/assets/javascripts/application.js</code> <a
href="https://github.com/PredictionIO/Demo-Tapster/blob/master/app/assets/javascripts/application.js";>View
on Git
Hub</a></p><p>Most of this file is just handlers for click things, displaying
the loading dialog and other such things.</p><p>The most important function is
to query the Rails server for results from Apache PredictionIO.</p><div
class="highlight shell"><table style="border-spacing: 0"><tbody><tr><td
class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
@@ -261,7 +261,7 @@ queryPIO: <span class="k">function</span><span
class="o">()</span> <span class="
render json: @episode
end
-</pre></td></tr></tbody></table> </div> <p>On the first line we make a
connection to Apache PredictionIO. You will need to set the
<code>PIO_ENGINE_URL</code>. This can be done in the <code>.env</code> file.
The default URL is: <a
href="http://localhost:8000";>http://localhost:8000</a>.</p><p>Next we decode
the JSON sent from the browser.</p><p>After that we check to see if the user
has liked anything yet. If not we just return a random episode.</p><p>If the
user has likes then we can send that data to Apache PredictionIO (incubating)
event server.</p><p>We also blacklist the dislikes so that they are not
returned.</p><p>With our response from Apache PredictionIO itâs just a matter
of looking it up in the database and rendering that object as JSON.</p><p>Once
the response is sent to the browser JavaScript is used to replace the existing
comic and hide the loading message.</p><p>Thats it. Youâre done! If Ruby is
not your language of choice check out our other <a href="http://predi
ctionio.apache.org/sdk/">SDKs</a> and remember you can always interact with
the Event Server though itâs native JSON API.</p><h2 id='links'
class='header-anchors'>Links</h2><p>Source code is on GitHub at: <a
href="https://github.com/PredictionIO/Demo-Tapster";>github.com/PredictionIO/Demo-Tapster</a></p><h2
id='conclusion' class='header-anchors'>Conclusion</h2><p>Love this tutorial
and Apache PredictionIO? Both are open source (Apache 2 License). <a
href="https://github.com/PredictionIO/Demo-Tapster";>Fork</a> this demo and
build upon it. If you produce something cool shoot us an email and we will link
to it from here.</p><p>Found a typo? Think something should be explained
better? This tutorial (and all our other documenation) live in the main repo <a
href="https://github.com/apache/incubator-predictionio/blob/livedoc/docs/manual/source/demo/tapster.html.md";>here</a>.
Our documentation is in the <code>livedoc</code> branch. Find out how to
contribute documentation at <a href="http:
//predictionio.apache.org/community/contribute-documentation/">http://predictionio.apache.org/community/contribute-documentation/</a>].</p><p>We
♥ pull requests!</p></div></div></div></div><footer><div
class="container"><div class="seperator"></div><div class="row"><div
class="col-md-6 footer-link-column"><div
class="footer-link-column-row"><h4>Community</h4><ul><li><a
href="//predictionio.apache.org/install/"
target="blank">Download</a></li><li><a href="//predictionio.apache.org/"
target="blank">Docs</a></li><li><a
href="//github.com/apache/incubator-predictionio"
target="blank">GitHub</a></li><li><a
href="mailto:[email protected]"; target="blank">Subscribe
to User Mailing List</a></li><li><a
href="//stackoverflow.com/questions/tagged/predictionio"
target="blank">Stackoverflow</a></li></ul></div></div><div class="col-md-6
footer-link-column"><div
class="footer-link-column-row"><h4>Contribute</h4><ul><li><a
href="//predictionio.apache.org/community/contrib
ute-code/" target="blank">Contribute</a></li><li><a
href="//github.com/apache/incubator-predictionio" target="blank">Source
Code</a></li><li><a href="//issues.apache.org/jira/browse/PIO"
target="blank">Bug Tracker</a></li><li><a
href="mailto:[email protected]"; target="blank">Subscribe to
Development Mailing List</a></li></ul></div></div></div><div class="row"><div
class="col-md-12 footer-link-column"><p>Apache PredictionIO, PredictionIO,
Apache, the Apache feather logo, and the Apache PredictionIO project logo are
either registered trademarks or trademarks of The Apache Software Foundation in
the United States and other countries.</p><p>All other marks mentioned may be
trademarks or registered trademarks of their respective
owners.</p></div></div></div><div id="footer-bottom"><div
class="container"><div class="row"><div class="col-md-12"><div
id="footer-logo-wrapper"><img alt="PredictionIO"
src="/images/logos/logo-white-d1e9c6e6.png"/><span>®</span></div><div id
="social-icons-wrapper"><a class="github-button"
href="https://github.com/apache/incubator-predictionio"; data-style="mega"
data-count-href="/apache/incubator-predictionio/stargazers"
data-count-api="/repos/apache/incubator-predictionio#stargazers_count"
data-count-aria-label="# stargazers on GitHub" aria-label="Star
apache/incubator-predictionio on GitHub">Star</a> <a class="github-button"
href="https://github.com/apache/incubator-predictionio/fork";
data-icon="octicon-git-branch" data-style="mega"
data-count-href="/apache/incubator-predictionio/network"
data-count-api="/repos/apache/incubator-predictionio#forks_count"
data-count-aria-label="# forks on GitHub" aria-label="Fork
apache/incubator-predictionio on GitHub">Fork</a> <script id="github-bjs"
async="" defer="" src="https://buttons.github.io/buttons.js";></script><a
href="https://twitter.com/predictionio"; target="blank"><img alt="PredictionIO
on Twitter" src="/images/icons/twitter-ea9dc152.png"/></a> <a
href="https://www.faceboo
k.com/predictionio" target="blank"><img alt="PredictionIO on Facebook"
src="/images/icons/facebook-5c57939c.png"/></a>
</div></div></div></div></div></footer></div><script>(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+</pre></td></tr></tbody></table> </div> <p>On the first line we make a
connection to Apache PredictionIO. You will need to set the
<code>PIO_ENGINE_URL</code>. This can be done in the <code>.env</code> file.
The default URL is: <a
href="http://localhost:8000";>http://localhost:8000</a>.</p><p>Next we decode
the JSON sent from the browser.</p><p>After that we check to see if the user
has liked anything yet. If not we just return a random episode.</p><p>If the
user has likes then we can send that data to Apache PredictionIO event
server.</p><p>We also blacklist the dislikes so that they are not
returned.</p><p>With our response from Apache PredictionIO itâs just a matter
of looking it up in the database and rendering that object as JSON.</p><p>Once
the response is sent to the browser JavaScript is used to replace the existing
comic and hide the loading message.</p><p>Thats it. Youâre done! If Ruby is
not your language of choice check out our other <a
href="http://predictionio.apach
e.org/sdk/">SDKs</a> and remember you can always interact with the Event
Server though itâs native JSON API.</p><h2 id='links'
class='header-anchors'>Links</h2><p>Source code is on GitHub at: <a
href="https://github.com/PredictionIO/Demo-Tapster";>github.com/PredictionIO/Demo-Tapster</a></p><h2
id='conclusion' class='header-anchors'>Conclusion</h2><p>Love this tutorial
and Apache PredictionIO? Both are open source (Apache 2 License). <a
href="https://github.com/PredictionIO/Demo-Tapster";>Fork</a> this demo and
build upon it. If you produce something cool shoot us an email and we will link
to it from here.</p><p>Found a typo? Think something should be explained
better? This tutorial (and all our other documenation) live in the main repo <a
href="https://github.com/apache/predictionio/blob/livedoc/docs/manual/source/demo/tapster.html.md";>here</a>.
Our documentation is in the <code>livedoc</code> branch. Find out how to
contribute documentation at <a href="http://predictionio.apache.o
rg/community/contribute-documentation/">http://predictionio.apache.org/community/contribute-documentation/</a>].</p><p>We
♥ pull requests!</p></div></div></div></div><footer><div
class="container"><div class="seperator"></div><div class="row"><div
class="col-md-6 footer-link-column"><div
class="footer-link-column-row"><h4>Community</h4><ul><li><a
href="//predictionio.apache.org/install/"
target="blank">Download</a></li><li><a href="//predictionio.apache.org/"
target="blank">Docs</a></li><li><a href="//github.com/apache/predictionio"
target="blank">GitHub</a></li><li><a
href="mailto:[email protected]"; target="blank">Subscribe
to User Mailing List</a></li><li><a
href="//stackoverflow.com/questions/tagged/predictionio"
target="blank">Stackoverflow</a></li></ul></div></div><div class="col-md-6
footer-link-column"><div
class="footer-link-column-row"><h4>Contribute</h4><ul><li><a
href="//predictionio.apache.org/community/contribute-code/"
target="blank">Contrib
ute</a></li><li><a href="//github.com/apache/predictionio"
target="blank">Source Code</a></li><li><a
href="//issues.apache.org/jira/browse/PIO" target="blank">Bug
Tracker</a></li><li><a href="mailto:[email protected]";
target="blank">Subscribe to Development Mailing
List</a></li></ul></div></div></div><div class="row"><div class="col-md-12
footer-link-column"><p>Apache PredictionIO, PredictionIO, Apache, the Apache
feather logo, and the Apache PredictionIO project logo are either registered
trademarks or trademarks of The Apache Software Foundation in the United States
and other countries.</p><p>All other marks mentioned may be trademarks or
registered trademarks of their respective owners.</p></div></div></div><div
id="footer-bottom"><div class="container"><div class="row"><div
class="col-md-12"><div id="footer-logo-wrapper"><img alt="PredictionIO"
src="/images/logos/logo-white-d1e9c6e6.png"/><span>®</span></div><div
id="social-icons-wrapper"><a class="github-bu
tton" href="https://github.com/apache/predictionio"; data-style="mega"
data-count-href="/apache/predictionio/stargazers"
data-count-api="/repos/apache/predictionio#stargazers_count"
data-count-aria-label="# stargazers on GitHub" aria-label="Star
apache/predictionio on GitHub">Star</a> <a class="github-button"
href="https://github.com/apache/predictionio/fork";
data-icon="octicon-git-branch" data-style="mega"
data-count-href="/apache/predictionio/network"
data-count-api="/repos/apache/predictionio#forks_count"
data-count-aria-label="# forks on GitHub" aria-label="Fork apache/predictionio
on GitHub">Fork</a> <script id="github-bjs" async="" defer=""
src="https://buttons.github.io/buttons.js";></script><a
href="https://twitter.com/predictionio"; target="blank"><img alt="PredictionIO
on Twitter" src="/images/icons/twitter-ea9dc152.png"/></a> <a
href="https://www.facebook.com/predictionio"; target="blank"><img
alt="PredictionIO on Facebook" src="/images/icons/facebook-5c57939c.png"/></a>
</di
v></div></div></div></div></footer></div><script>(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
