workshop #1 tutorial

klxrb · Jan 9, 2015 · 4b77c69 · 4b77c69
1 parent ded2192
commit 4b77c69
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 6 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -44,6 +44,8 @@
       <script src="{{ site.url }}/js/vendor/respond.min.js"></script>
     <![endif]-->
 
+    <script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>
+
   </head>
 
   <body>
@@ -58,17 +60,16 @@
       {% include footer.html %}
     </div>
 
-    <script src="{{ site.url }}/js/vendor/jquery-1.9.1.min.js"></script>
     <script src="{{ site.url }}/js/main.js"></script>
-    
+
     {% if page.toc == true %}
     <script type="text/javascript">
       $('.toc').toc({
         'selectors': 'h2', //elements to use as headings
         'container': '.page-content', //element to find all selectors in
         'smoothScrolling': true, //enable or disable smooth scrolling on click
         'prefix': 'toc', //prefix for anchor tags and class names
-        'onHighlight': function(el) {}, //called when a new section is highlighted 
+        'onHighlight': function(el) {}, //called when a new section is highlighted
         'highlightOnScroll': true, //add class to heading that is currently in focus
         'highlightOffset': 100, //offset to trigger the next headline
         'anchorName': function(i, heading, prefix) { //custom function for anchor name

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -144,7 +144,7 @@
 #main {
 	.inner-wrap {
 		@include media($medium) {
-			@include span-columns(9);
+			@include span-columns(12);
 		}
 	}
 	.toc {
@@ -282,7 +282,7 @@
 	}
 }
 // make image flush with edges on small screens
-.page-image {	
+.page-image {
 	position: relative;
 	margin-left: -1 * $gutter;
 	margin-right: -1 * $gutter;
@@ -306,7 +306,7 @@
 	}
 }
 // breadcrumbs
-.breadcrumbs { 
+.breadcrumbs {
 	@include row;
 	margin-top: $gutter;
 	@include font-size(10,no);

diff --git a/js/vendor/jquery.storageapi.min.js b/js/vendor/jquery.storageapi.min.js
diff --git a/workshops/1/index.md b/workshops/1/index.md
@@ -0,0 +1,151 @@
+---
+layout: article
+title: "Workshop #1 Tutorial"
+date: 2015-01-04T08:53:00+08:00
+modified:
+excerpt:
+tags: []
+image:
+  feature:
+  teaser:
+  thumb:
+toc: true
+share: false
+---
+
+## Before you continue
+
+Please make sure you have done the following :
+
+- A [Github](https://github.com) account
+- A [Digital Ocean](https://digitalocean.com) account & cash-in the voucher given earlier
+- Have Ruby 1.9.3 installed  
+- Have Redis Server installed locally
+- Prepare SSH key for your machine
+
+
+## Outline
+
+In this tutorial we are building 2 simple apps - Shopping Cart & Customer Relationship Management (CRM) portal.
+
+The Shopping Cart will have a catalogue of products, then customers can buy and sales will be captured. And in the end the customer's information is sent to the CRM.
+
+In addition to that, we want to queue up the API requests so that the purchase process is not blocked / slowed down.
+
+And finally, we need to write an automated deployment script to deploy both apps to their respective servers.
+
+
+## Step 1: Creating the Shopping Cart
+
+Estimate time: 20 mins
+
+<input type="checkbox" id="c1_1"> User login using [Devise](https://github.com/plataformatec/devise)  
+<input type="checkbox" id="c1_2"> Setup [Upmin Admin](https://github.com/upmin/upmin-admin-ruby) on /admin  
+<input type="checkbox" id="c1_3"> Scaffold "Products" Model  
+<input type="checkbox" id="c1_4"> Checkout Page  
+<input type="checkbox" id="c1_5"> Sales Report in Admin area
+
+
+## Step 2: Creating the CRM
+
+Estimate time: 30 mins
+
+<input type="checkbox" id="c2_1"> User login using [Devise](https://github.com/plataformatec/devise)  
+<input type="checkbox" id="c2_2"> Scaffold Customers Model   
+<input type="checkbox" id="c2_3"> Setup [Upmin Admin](https://github.com/upmin/upmin-admin-ruby)  
+<input type="checkbox" id="c2_4"> "API Applications" Model  
+<input type="checkbox" id="c2_5"> Setup API with [Grape](https://github.com/intridea/grape)  
+<input type="checkbox" id="c2_6"> Setup API Documentation with [Grape-Swagger-Rails](https://github.com/BrandyMint/grape-swagger-rails)  
+
+
+## Step 3: Integrating with API
+
+Estimate time: 20 mins
+
+<input type="checkbox" id="c3_1"> Setup [Rails Config](https://github.com/railsconfig/rails_config)  
+<input type="checkbox" id="c3_2"> Generate API token for Shopping Cart app   
+<input type="checkbox" id="c3_3"> Use API token to send customer data to CRM  
+
+
+## Step 4: Queue Up Jobs
+
+Estimate time: 15 mins
+
+<input type="checkbox" id="c4_1"> Setup [Sidekiq](http://sidekiq.org/)  
+<input type="checkbox" id="c4_2"> Use [Sidekiq](http://sidekiq.org/) to queue up jobs  
+
+
+## Step 5: Setup Digital Ocean
+
+Estimate time: 15 mins
+
+<input type="checkbox" id="c5_1"> Generate / Get public SSH Key for machine  
+<input type="checkbox" id="c5_2"> Add SSH Key  
+<input type="checkbox" id="c5_3"> Create two (2) 14.04 x64 Ubuntu droplets with private networking
+
+
+## Step 6: Prep the Servers
+
+Estimate time: 20 mins
+
+<input type="checkbox" id="c6_1"> Install [rbenv](https://github.com/sstephenson/rbenv) with [ruby-build](https://github.com/sstephenson/ruby-b id="c6_1"uild)  
+<input type="checkbox" id="c6_2"> Install PostgreSQL  
+<input type="checkbox" id="c6_3"> Install Redis Server  
+<input type="checkbox" id="c6_4"> Security tweaks: change SSH port and disable root access
+
+
+## Step 7: Deployment
+
+Estimate time: 15 mins
+
+<input type="checkbox" id="c7_1"> Setup [Capistrano](https://github.com/capistrano/capistrano) with [Capistrano Rbenv](https://github.com/cap id="c5_1"istrano/rbenv) + [Capistrano Sidekiq](https://github.com/seuros/capistrano-sidekiq) + [Capistrano Unicorn Ngi id="c5_1"nx](https://github.com/capistrano-plugins/capistrano-unicorn-nginx)  
+<input type="checkbox" id="c7_2"> Create & upload production settings  
+<input type="checkbox" id="c7_3"> Finally ... Deploy Live !!  
+
+---
+
+### Overall Progress: <span id="progress">0</span>%
+
+<script src="{{ site.url }}/js/vendor/jquery.storageapi.min.js"></script>
+<script>
+$(function(){
+  ns = $.initNamespaceStorage('klxrb_ruby_workshop_1');
+  storage = ns.localStorage;
+
+  checked_items = storage.get('checked_items');
+
+  function recheck(){
+    if(checked_items.length > 1){
+      $(checked_items.join(',')).prop('checked', true);
+    }
+  }
+
+  function recalculate(){
+    $('#progress').html(parseInt($('input[type=checkbox]:checked').length / $('input[type=checkbox]').length * 100));
+  }
+
+  function savestate(){
+    checked_items = []
+    $('input[type=checkbox]:checked').each(function(){
+      checked_items.push('#' + $(this).prop('id'))
+    })
+    storage.set('checked_items', checked_items);
+  }
+
+  if(typeof checked_items === 'undefined'){
+    checked_items = [];
+  }else{
+    recheck();
+  }
+
+  $('input[type=checkbox]').change(function(){
+    recalculate();
+    savestate();
+  })
+
+  recalculate();
+
+});
+
+</script>
+