2. Introduction
My name is Artur Janka.
I’m student of Higher Diploma in Science in Cloud Computing at NCIRL.
I’m a new Rubyist user as everything is much easier to create.
I have a hunger for acquiring a new knowledge in every aspect and I find it
interesting.
So, my pathway look like this for now:
3. Introduction
The purpose of this document is to set out the
requirements for the development of Indoor
beach volleyball& soccer club with
eCommerce site.
As we know one of the most common and
essential scenarios for business is e-
commerce.
4. Introduction
I choose the e-commerce at this stage
because this is essential part of business site
which have no geographical limits and it
continues to gain more supporters and
constantly growing.
It is not only the way of buying things but of
selling them as well.
So, I decide connect ecommerce with subject
I like and have experience the most.
5. Introduction
install rails environment
rails install gem
create rails application
rails new artvballecommerce
Start server
cd artvballecommerce
rails server
rails server -b $IP -p $PORT
7. Introduction
Create your navigation site & product site
rails g controller Pages about contact rental gallery blog
rails g scaffold Listing name description:text price:decimal
8. Introduction
set up roots, so go to bash and type ‘rake
routes’ first.
get '/home' => 'pages#home'
get '/about' => 'pages#about'
get '/contact' => 'pages#contact'
get '/gallery' => 'pages#gallery‘
root 'listings#index'
10. Introduction
The intended customers are players of the
volleyball teams who want join for the game
or a new player which is intend to join club,
The customers who want to buy a volleyballs
product.
11. Introduction
First problem occur with devise gem in which I
follow instruction on github I decide to put
username into registration form
14. Goals
1. I have changed ‘permit’ to ‘for’
devise_parameter_sanitizer.for(:sign_up) <<
:username
And registration form start working fine without
issue.
2. avatar name which has been changed to
image.
3. Unfortunately I did not resolve this issue yet.
15. Introduction
During planning which project I could choose I
realize as my inspiration from youth age was
always volleyball.
I’m involved in this sport even today and I use
to play in tournament inside hall or during
summer time on the beach.
16. Introduction
I was tried to achieve to create and image of
the sport company with e –commerce site.
Present service with contact email which
should working fine without issue.
Use a new skills and knowledge in a practical
setting.
17. Introduction
The first step is to setup development and
testing environments according to the chosen
technologies.
The second step is developing service that
allow customer to send different requests.
These requests are to allowing customer to
register to site with ability to buy any product
available on site.
18. Introduction
The third step is developing customer
applications for sending email, chatting and
allow to join to club and participate into
volleyball game.
19. Central theories
The technical approach is developing an
indoor beach volleyball centre with
marketplace&social blog web-based
application hosted on a Cloud platform
Heroku.
Language: Ruby2, Ruby on Rails4/5
Technologies: Git, GitHub, Heroku
Web Development: HTML5, CSS3, JavaScript
and JQuery
Application: Cloud9
20. Central theories
Operating System: Windows 8, Linux, Ubuntu
Database: SQLite, PostgreSQL
Nitrous – no installation required, start coding
in our cloud IDE in sec
Subline text – is a sophisticated text editor for
code, markup and prose. The slick user
interface, extraordinary features and amazing
performance.
21. Central theories
TOOLS WE HAD TO KNOW AND USE:
The command line
Ruby
Ruby gems
Bundler
Rake
Git
Heroku
DNS records
22. Central theories
Help and documentation for the Ruby programming language
http://ruby-doc.org/
http://documenting-ruby.org/
https://www.ruby-lang.org/en/
These guides are designed to make you immediately
productive with Rails, and to help you understand how all of
the pieces for together.
http://guides.rubyonrails.org/
Free Ruby on Rails Screencasts
http://railscasts.com/
Ruby on Rails tutorial – learn Web Development with Rails
book and screencast by Michael Hartl
23. Central theories
https://www.railstutorial.org/book
Learn-rails.com ‘Learn Ruby on Rails’ tutorial by Daniel
Kehoe
https://updatey.com/media/uploads/projects/posts/files/jmif3s8lar
4uaf67j2ni.pdf
A gem for every occasion: 11 great Rails libraries we use on
every project
https://infinum.co/the-capsized-eight/articles/a-gem-for-every-
occasion-11-great-ruby-libraries-we-use-on-every-project
Learning to build a modern web application is daunting. Ruby
on Rails makes it much easier and more fun… with the
support of our large, friendly community.
http://rubyonrails.org/
30. Implementation
First level navigation and all sitemap should be
working fine with easy access to registration form
and log in. Administration portal and dashboard
should let the admin to easy works across all
pages and manage ecommerce modules.
The scope of this plan is to test all functionality
covered in the requirements specification.
The system being tested is a volleyball club with
ecommerce site allowed customers for buying
volleyball products.
31. Implementation
The new registration can be created by a new
customer-user. After registration the new user can
edit his profile, check navigation bar without issue,
make review of products. The user can add the
items into basket – items and if he/she change a
mind can easily remove all items from basket as
we.
The user has ability to purchase product typing
into the site form his address and make a
payment.
The customer can also make the reservation and
book the volleyball area for playing game.
32. Implementation
Project Nam e:
Artorius inside beach volleyball club
and ecommerce
Artur Janka
Module Name: numbers of test case 29/07/2016
Release Version: #
#
Test Case number Test Title Test Data Expected Result Actual Result
test case 1: Testing the Registration form 29/07/2016
Registration form is displayed and
after full the form with valid data
c ustomer rec eive message
suc c essful registration
PASS
test case 2:
Testing the Log in and Log out
of the new c ustomer
29/07/2016
If use valid email and password
the ac c ess to website is granted
PASS
test case 3:
Testing the new registered user
Edit Profile
29/07/2016
Customer c an easily make
c hanges into his profile
PASS
test case 4:
Testing Administration site with
ability to c hec k users and
purc hase via dashboard
29/07/2016
The Admin has a right to log into
dashbourd and manage c ustomer
and orders
PASS
test case 5:
Testing the Home, Contac t,
About pages
29/07/2016
As expec ted the User has been
brought to Navigation site without
delay
PASS
test case 6:
Testing the ability for register
user to add one or more items
into basket and review and
delete them
29/07/2016
As Expec ted applic ation allowed
the c ustomer to add items into
c art, to remove items from basket-
c art and to add more items and
detec t the sum of pric e
PASS
test case 7: Produc t c ategory page 29/07/2016
As expec ted. The applic ation let
the reg.c ustomer to searc h
produc t type and pic k up any type
of items
PASS
test case 8:
Testing the ability of register
user to make a purc hase
29/07/2016 As expec ted pass PASS
test case 9:
CRUD operation for reservation
volleyball c ourt for play a game
29/07/2016 As expec ted pass PASS
Test Designed by:
Test Designed date:
Test Executed by:
Test Execution date:
33. Implementation
Step # Step Details Expected Results Actual Results Pass / Fail / Not
executed /
Suspended
1 Navigate to the site Site should open As Expected. The application opened the site Pass
2 Sign up Enter valid
Username & valid Email with valid
Password
The application should display the home page and customer have a
right to show items, add items to cart and make a payment
As Expected, the application should display ability for
buying stuff. Login processed
Pass
3 Sign up with leaving empty
username box
The application should display an error message and ask customer to
enter username
As expected. Error message displayed FAIL
4 Sign up with leaving empty email
box
The application should display an error message and ask customer to
enter email for confirmation
As expected. Error message displayed FAIL
5 Sign up with leaving empty
password box
The application should display an error message and ask customer to
enter password for confirmation
As expected. Error message displayed FAIL
6 Sign up with leaving empty
password box
The application should display an error message and ask customer to
enter password for confirmation
As expected. Error message displayed FAIL
7 Sign up with email already taken The application should display an error message and ask customer to
enter a new email due old one was already taken
As expected. Error message displayed FAIL
8 Sign up with misspell password The application should display an error message and ask customer to
type in the correct password duplicated in first box
As expected. Error message displayed FAIL
9 Sign up with short password The application should display an error message and ask customer to
type in the proper long password
As expected. Error message displayed FAIL
9 Sign up with invalid partition of
password
The application should display an error message and ask customer to
type in the proper long password
As expected. Error message displayed FAIL
34. Evaluation
During development the application I decide
add gem active_admin to let administrator to
access and manage app data through
ActiveAdmin, a Rails engine that runs ––
separately from the core of your app to give
you full control over your data.
I realize that I need email functionality so I
added gem ‘mail_form’.
35. Evaluation
Additional of futures:
1. ActiveAdmin, - a Rails engine that runs ––
separately from the core of your app to give
you full control over your data.
2. Gem mail_form with sendgrid Heroku
addons let me send message from my site to
email without issue
36. Discussions
Advantages:
I have created site where register user have
access to view volleyball products. He/she
can check information about product.
Customer can add to cart(basket) many
products he want and ability to make
transaction. The register customer also have
a right to remove items from basket.
37. Discussions
Disadvantages
Order is not connect with any ability to make
transaction. Unfortunately I did not have
enough spare time to add gem stripe or
PayPal functionality.
Ability to book the court by team is not
finished I started with view html but again
PayPal is not added.
38. Discussions
Opportunities and limits
More interested for active people, addictive
into sport.
My idea was to give opportunities to play a
beach game inside club, warehouse in rainy
days.
39. Discussions
Future perspectives
Increase my future prospect of the volleyball club
careful planning challenging part and execution.
My contributions to the projects included
researching of beach indoor volleyball club’s in
Ireland upon learning that there are no any club’s
around.
So, I have opportunity to create structure to help
me with market and corporation with union
institution to open such one in Dublin.
Brief history of Ruby:
Invented by Yukihiro “Matz” Matsumoto
Version 1.o released in 1996 Japan
Popularized by Ruby on Rails in 2005 start
Dynamic
Object-oriented: object-possessed, almost everything is object
Elegant, expressive and declarative
Influenced by Perl, Smalltalk, Eiffel and Lisp
“Designed to make programmers happy”
History of (RoR) Ruby on Rails
Framework for making dynamic web applications
Created in 2004-2005 by David Heinemeier Hansson
Used by: hulu, twitter, GitHub, livingsocial, whitepages, GROUPON
Why use Rails?: (COC) Conventional Over Configuration, less code to write as some code are automatically generates for you
Database Abstraction Layer: no need to deal with low level DB details, important to understand the SQL generated, no more SQL (almost)
Agile friendly
Don’t repeat yourself
Cross-platform
Open source
Modular
What is the context of your project?.
What is the context of your project?.
provide for user a profile using gem ‘devise’
adding admin to user a profile with special rights
allow a user to book the court, send email, add pictures to gallery and sell his all equipment’s with buying option as well.
provide an active-admin a profile with dashboard
allows search functionality
install gem ‘’kaminari’ and integrate in Rails app for large applications with lots of data, pagination is a necessity.
design patterns decorator which let you add extra’s
set up Git & deploy to GitHub
set up application environments to work with Heroku & create Heroku account & deploy to Heroku
added map, location and contact for Contact page
provide for user a profile using gem ‘devise’
adding admin to user a profile with special rights
allow a user to book the court, send email, add pictures to gallery and sell his all equipment’s with buying option as well.
provide an active-admin a profile with dashboard
allows search functionality
install gem ‘’kaminari’ and integrate in Rails app for large applications with lots of data, pagination is a necessity.
design patterns decorator which let you add extra’s
set up Git & deploy to GitHub
set up application environments to work with Heroku & create Heroku account & deploy to Heroku
added map, location and contact for Contact page
provide for user a profile using gem ‘devise’
adding admin to user a profile with special rights
allow a user to book the court, send email, add pictures to gallery and sell his all equipment’s with buying option as well.
provide an active-admin a profile with dashboard
allows search functionality
install gem ‘’kaminari’ and integrate in Rails app for large applications with lots of data, pagination is a necessity.
design patterns decorator which let you add extra’s
set up Git & deploy to GitHub
set up application environments to work with Heroku & create Heroku account & deploy to Heroku
added map, location and contact for Contact page
provide for user a profile using gem ‘devise’
adding admin to user a profile with special rights
allow a user to book the court, send email, add pictures to gallery and sell his all equipment’s with buying option as well.
provide an active-admin a profile with dashboard
allows search functionality
install gem ‘’kaminari’ and integrate in Rails app for large applications with lots of data, pagination is a necessity.
design patterns decorator which let you add extra’s
set up Git & deploy to GitHub
set up application environments to work with Heroku & create Heroku account & deploy to Heroku
added map, location and contact for Contact page
Here are the gems used by the application:
https://www.codeschool.com/screencasts/all?filters%5Bpath%5D=ruby
https://code.tutsplus.com/courses/essential-rails-gems
Devise
Devise is basically a gem that handles User authentication for you.
Allow me to add quick User to the site. Devise is popular gem which is useful for quickly ability to add multiply user accounts at the same time.
Also allow users to sign up, in & sign out.
A user model is for application for user management and authentication.
The user get property that tells if he is admin or original user.
Devise takes on the responsibility of creating that user model.
Allows you to have multiple models signed in at the same time;
Devise is a flexible authentication solution for Rails
Links: https://github.com/plataformatec/devise
https://github.com/plataformatec/devise/wiki
http://andrewsunglaekim.github.io/Getting-a-handle-on-devise/
ActiveAdmin
To access and manage your Rails app data is through ActiveAdmin, a Rails engine that runs ––separately from the core of your app to give you full control over your data.
Links: https://github.com/activeadmin/activeadmin
My choice of front-end framework:
‘bootstrap-sass’
Bootstrap is a framework that makes it easy for a developer to create a nice design for a website or web application. There are predefined css classes for creating common components such as widgets, typography elements, lists, forms, and more. The framework also provides Javascript which makes it easy to create things like modals, popovers, scrollspies, accordions, and more. Their documentation is very thorough, providing example code for most, if not all of the components that Bootstrap provides.
Bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
Links: https://github.com/twbs/bootstrap-sass
https://gorails.com/episodes/styling-with-bootstrap-sass
https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1
‘autoprefixer-rails’
Autoprefixer is a tool to parse CSS and add vendor prefixes to CSS rules using values from the can I use. This gem provides Ruby and Ruby on Rails integration with this JavaScript tool.
Links: https://github.com/ai/autoprefixer-rails
‘paperclip’
Paperclip is intended as an easy file attachment library for ActiveRecord. The intent behind it was to keep setup as easy as possible and to treat files as much like other attributes as possible. This means they aren't saved to their final locations on disk, nor are they deleted if set to nil, until ActiveRecord::Base#save is called. It manages validations based on size and presence, if required. It can transform its assigned image into thumbnails if needed, and the prerequisites are as simple as installing ImageMagick (which, for most modern Unix-based systems, is as easy as installing the right packages). Attached files are saved to the filesystem and referenced in the browser by an easily understandable specification, which has sensible and useful defaults.
https://github.com/thoughtbot/paperclip
Paperclip is distributed as a gem, which is how it should be used in your app.
Include the gem in your Gemfile:
gem "paperclip", "~> 5.0.0"
ImageMagick must be installed and Paperclip must have access to it. To ensure that it does, on your command line, run which convert (one of the ImageMagick utilities). This will give you the path where that utility is installed. For example, it might return /usr/local/bin/convert.
‘mini_magick’
ImageMagick is a software suite to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 200) including PNG, JPEG, JPEG-2000, GIF, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colours, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.
Related links: https://github.com/carrierwaveuploader/carrierwave
‘country_select’
Provides a simple helper to get an HTML select list of countries. The list of countries comes from the ISO 3166 standard. While it is a relatively neutral source of country names, it will still offend some users. Users are strongly advised to evaluate the suitability of this list given their user base.
Links: https://github.com/stefanpenner/country_select
https://github.com/jamesds/country-select
‘puma’
Puma A Ruby Web Server Built For Concurrency. Puma is a simple, fast, and highly concurrent HTTP 1.1 server for Ruby web applications. It can be used with any application that supports Rack, and is considered the replacement for Webrick and Mongrel. It was designed to be the go-to server for Rubinius, but also works well with JRuby and MRI. Puma is intended for use in both development and production environments.
Links: https://github.com/puma/puma
Kaminari
Bootstrap-kaminari-views
For large applications with lots of data, pagination is a necessity.
Kaminari comes to the rescue in a really comfortable, meaningful fashion.
Links: https://github.com/amatsuda/kaminari
https://github.com/matenia/bootstrap-kaminari-views
‘mail_form’
MailForm allows you to send an e-mail straight from a form.
Links: https://github.com/plataformatec/mail_form
http://l4u.github.io/articles/create-a-rails-4-site-with-contact-us-form/
https://rubyonrailshelp.wordpress.com/2014/01/08/rails-4-simple-form-and-mail-form-to-make-contact-form/
https://www.youtube.com/watch?v=QIoORYeBdhs
https://rubygems.org/gems/mail_form/versions/1.5.1
Install the Required Gems
$ bundle install
$ gem list
Contributing
Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request
Who is your customer (if applicable)?
Which problem did you approach?
How did you solve the problem?
What did you try to achieve?
What did you try to achieve?
What did you try to achieve?
What did you try to achieve?
Theoretical background
Theoretical background
Cloud9 –
“…combines a powerful online code editor with a full Ubuntu workspace in the cloud”. They have just launched the latest version of their online IDE, which includes workspaces hosted through Docker in containers running on Ubuntu. You can choose from an existing workspace (and there seem to be ones for some of the most popular development tools), or create your own. You can also customize the underlying container directly through sudo access from your command line.”
Theoretical background
Data requirements
Ruby on Rails is working with SQLite by default as is ideally for small application and files which are easy to created and moved around.
For connection with Heroku production database I have to move on to PostgreSQL which Heroku provides production grade databases as a service.
Relevant literature
System
Main algorithms
Flow chart showing Indoor Beach Volleyball club with & marketplace
Section showing ability of customer or new user which can search product in ecommerce volleyball section and purchase them.
Brief overview of main requirements
The following are the major functionalities of the application.
Creating account:
The business user creates account to register business; and will have username and password to log into the system to manage deals/offers, joining to the club, join to conversation and chatting, send email.
Login/Logout:
The User can login/logout to the site after successfully creating account.
Adding product:
After logging into the system, user can add product into cart.
Deleting shopping cart:
The user can delete his product from shopping cart.
Viewing offer:
Customers can view deals/offers available in eCommerce page.
Brief overview of main requirements
The following are the major functionalities of the application.
UML conceptual class diagram
Purpose: An example of UML conceptual class diagram for Volleyball Ecommerce
Summary: The Customer can make customer purchase the product from his Cart, also check an order status.