Skip to content

CloudDevOpsVisions/E-Commerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 

Repository files navigation


DevOpsThoughts Logo

DevOpsThoughts

DevOpsThoughts is a community initiative aims to teach the best practices in DevOps through a multi-platform application which targets variety of technologies. DevOps is one of the most emerging topics of software development today as it improves the whole software development process, but unfortunately, there is no clear, detailed and explicit model to teach the best DevOps & Software Engineering practices on real world projects, this was the main problem that lead to DevOpsThoughts community establishment.

DevOpsThoughts teaches the best practices on a series of real world e-commerce projects, each of which is

  • Named after an animal name (We love animals, who doesn't?)
  • Built with a specific set of technologies
  • Is a branch in the DevOpsThoughts E-Commerce repository

DevOpsThoughts Architecture

Visualization is the best way to understand DevOpsThoughts architecture, below is a list of useful diagrams to explain this.

Quick Start

Run the following commands and replace the BranchName with the name of the branch you want to clone.

git clone https://github.com/DevOpsThoughts/E-Commerce.git  -b BranchName
cd E-Commerce

DevOpsThoughts Rabbit

DevOpsThoughts Rabbit is the first project in DevOpsThoughts Series. It's an e-commerce website built with the following technologies:

  • ASP.NET MVC 5
  • Microsoft SQL Server 2014
  • Modern UI Tools & Frameworks, Like Twitter Bootstrap & Font-Awesome

Below is the homepage for DevOpsThoughts Rabbit


Homepage Design

Development Steps

As we're developing a model for learning, we had to make a precise plan for the whole development process, using Scrum, user stories and behavior driven development (BDD) we can simply but the plan into this list:

User Stories & Product Backlog Items (PBIs)

  • User Story is a description of a specific functionality from an end-user perspective.
  • Product Backlog Itemis a single unit of work, here we mapped each user story to a PBI, so a PBI is a user story plus acceptance criteria, priority and tags.
For each user story, we develop a Product Backlog Item (PBI), assign proper tags to it based on publicity (Public/Private), main actor (Visitor/Member/Vendor/Admin) and work flow type (Basic/Advanced), then we add its Acceptance Criteria. Each Acceptance Criteria Consists of two main parts:
  • Action Criteria: Is the options available for use and system respond to it.
  • Input Validation Criteria: Used only when there is an input forms being used to clarify each input type, boundaries and importance.
All PBIs are made on two levels
  • Initial PBIs: Contains each PBI's Title, Order, Tag and description (Description is the user story).
  • Detailed PBIs: Contains the initial PBIs content with enhancements to maintain consistency, plus the acceptance criteria.
All BWF PBIs are added to the source control in plain text format, so we can quickly trace any changes to it.

Below is the sample for Vendor's login Initial PBI.


Vendor Login Initial

Another sample for Vendor's login Detailed PBI.


Vendor Login Detailed

You can click here to view the complete list of all Basic Work Flow PBIs


Test Cases

Test Cases are very important for Behavior driven development, In DevOpsThoughts, we have test cases written on three levels

  • Conceptual Test Cases
  • Functional Test Cases
  • Usability & Functional Test Cases

Conceptual Test Cases

Conceptual Test Cases are the most abstract form of test cases made with conceptual input only for purpose of conceptualizing the flow itself.

Functional Test Cases

Functional Test Cases made for testing the application functionality without discussing UI elements or UX, just making sure the application outputs the suitable output when some input is provided.

Usability & Functional Test Cases

Usability & Functional Test Cases are the most detailed test cases, it cares not only for functionality as functional test cases, but also for the way application responds to user actions from user experience (UX) and user interface (UI) perspective.


Use Case Scenarios

Use Case Scenario is a list of user actions and system response to it. In DevOpsThoughts, we map each PBI to a single use case scenario. Each scenario has the following:

  • Related PBI: The related PBI name & Id.
  • Main Actors List: A list of all actors involved in the specified use case.
  • Pre-conditions: A list of all conditions that must be met before the use case starts in order for the use case to be valid, example: Vendor has been logged in to his account.
  • Basic Flow: or what we call sometimes Happy Path is the normal expected flow for the use case with the default system settings, where the use case is expected to succeed as per main actors expectations.
  • Alternative Flows: If available, alternative flows of a use case are the flows where main actors expectations are not met yet.
  • Post-conditions: A list of all conditions that must be met after the use case ends in order for the use case to be valid, example: Order was saved in the application.
Also as in PBIs, use case scenarios are divided into Initial and Detailed use case scenarios.
  • Initial Use Cases: Have the above structure, but with more abstraction level, so not much attention was giving to the details, but to make simple process outlining.
  • Detailed Use Cases: Have the same structure as the initial use cases, but with more details, like the input/output information and user controls available.

Below is the sample for Display Products List Initial Use Case Scenario.


Use Case Initial

Another sample for Display Products List Detailed Use Case Scenario.


Use Case Detailed


Basic Mockups

Mockups are very basic UI representation used to deliver an abstract format of the expected to UI design to a UI developer from end-user or product owner perspective.

Making Mockups

Mockups are usually made using a basic photo edition application like MS Paint or Paint.NET.

Level of Details

Mockups usually represents only an abstract view of a webpage, Only spaces occupied and by which elements, doesn't include icons, content nor colors.


PhotoShop Designs (PSDs)

Based on Test Cases, Basic Mockups and PBIs, the final PSDs are made for the Project, A PSD file is a Photoshop Design file which can be edited later, PSD files are kept up-to-date with any modifications made to the UI.

Level of Details

PSD Designs are made while keeping attention to details. We can - from logical point of view - look to the Basic Mockups as initial designs, while the PSDs are the detailed designs.

Below is a sample for the Final PSD Design for the homepage, and it's identical with the screenshot for the homepage at the very beginning of this readme file.


PSD


Website Components (HTML, CSS and JavaScript)

Website components are simply the source code for UI, alongside with any elements used in the UI such as images, icons and libraries. The Website components isn't only used for Rabbit, but the same are used for other versions of the project which is using web as a presentation layer. Developing the website components uses PSDs as an input, each PSD is converted - as it is - to be a separate web page. We gave much importance to utilize and minify all of UI source files. After each PSD is converted, it is reviewed on two levels

  1. External: Which is making sure that the web page matches 100% the provided PSD.
  2. Internal: Which is checking for source code quality, readability and if the code is minified.

Storyboarding

A Storyboarding is an illustration for a user interaction with application story, not to be confused with user stories, in storyboarding we use visual images arrayed together for user interaction with the application to represent. Storyboards are easier to be remembered than other written Test Cases, as it shows the real UX, not just some text about it. In DevOpsThoughts we use Microsoft Office's PowerPoint, which allows develops to make an animated representation of User interaction with application UI quickly with higher quality. If we look to the PSDs and Basic Mockups as a User Interface representation, we should consider Storyboarding to be the User Experience Representation.


Products Data

To give the application some reality, we have added more than 400 Products, and we're still adding more frequently. For each product, the following information is added

  • Code: A unique alphanumerical code used to identify each product.
  • Title: The main title for the product itself.
  • Description: A detailed description about the product in text, used to promote the product but not for the technical specs, is it's described in another part.
  • Category Id: The Id for category where product is assigned too, but this isn't being displayed explicitly to application users, But it's the actual way a product is linked to category.
  • Category Name: this is what vendors see when they add the product, and members/visitors see when they search for products of a specific category.
  • Brand: This is the manufacturer brand, example: Microsoft, HP, Nokia.
  • Reward Points: Points which is added to each user so he can receive rewards after making purchases with a specific amount.
  • Price: The Original Price for the product.
  • Discount: The discount amount on the product, if any.
  • Specification: A Key, Value map of all technical specification for a product, key value maps are used to give flexibility with different kinds of products.
  • Key Features: Text representation of product Key features.
  • Image: A URL for the product image.

Pages List Grouped By User Roles

  • Visitor
    • Home page
    • Product List Page
    • Product Details Page
    • Shopping Cart (Check Out) Cascading Menu Sub Page
    • Shopping Cart (Check Out) Page
    • Login Page
    • Add/Edit Delivery Address Page
    • Order Complete Page
    • Order Confirmation email
    • Registration Page
  • Member
    • Forget the Password
    • Display/Edit Account Info
    • Order List Page
    • Addresses List Page
    • Payment Page (Note#6)
    • Dashboard (Member Home page)
  • Vendor/Admin
    • Order List Page
    • Order Details Page
    • Edit Order Page
    • Add/Edit Product
    • Dashboard (Control Panel Home page)
  • Miscellaneous
    • Confirmation Message (Sub Page)
    • Loading (Sub Page or image)
    • Notification, Error, Warning


Architecture Diagram

Architecture diagram is a graphical representation of System components and how thery're (components) are groupped together. The UML Architecture Diagram gives use a general overview of how the system works and its principles.


Architecture Diagram


Use Case Diagram

Use Case Diagram is UML Diagram used to represent different interactions with the system. The Use Case Diagram also acts as an input for making PBIs and User Stories.

Below is the Use Case Diagram we have in DevOpsThoughts.


Use Case Diagram


Project Layers

Below a screenshot from Microsoft Visual Studio's Solution Explorer for the different layers used in DevOpsThoughts.


Use Case Diagram


List of Basic Work Flow Product Backlog Items (PBIs)

This is the complete list of BWF PBIs:

  1. Display special offer products in a slider
  2. Display top featured products in a slider
  3. Display top new arrival products in a slider
  4. Display top hot sale products in a slider
  5. Display top best selling products in a slider
  6. Display random products in a slider
  7. Display all main and sub categories of products
  8. Display products of a selected category
  9. Provide paging for product lists
  10. Access shopping cart from the home page
  11. Display product detailed information
  12. Add product to the shopping cart
  13. Remove product from shopping cart
  14. Review products in shopping cart
  15. Add delivery address for the order
  16. Review order before checkout
  17. Place order after review as member
  18. Place order after review as guest
  19. Display all order made by visitors and members
  20. Update completed order
  21. Display orders history for members
  22. Provide membership for visitors
  23. Login to the member site
  24. Login to the vendor panel
  25. Login to the admin panel
  26. Add product to the store
  27. Display all added products
  28. Update product data
  29. Display all orders made by all users for all vendors
  30. Update order status
  31. Display order detailed information
  32. Recover forgotten password
  33. Change password

About The Founder

Mohamed Radwan is Visual Studio MVP (Microsoft Most Valuable Professional) for 5 consecutive years and a DevOps Practice Lead. He focuses on providing solutions for the various roles involved in software development and delivery process to enable them to build better software through Agile Methodologies and utilization of Microsoft Visual Studio ALM/DevOps Tools and Technologies.
Mohamed has been working in software development industry for more than 17 years, starting as a classic ASP developer in the year 2000 them moving to different roles as a senior developer, team leader, lead architect. For the last 7 years he has been passionate and focused about DevOps practices and automation.
Mohamed also worked in several countries in different regions, including United Kingdom, Sweden, Denmark, Egypt, Saudi Arabia, Kuwait, Oman, Libya.
Through his journey, he got the opportunity to work and help hundreds of companies to improve their software delivery practices. He also issued a lot of guides for TFS (Team Foundation Server), developed many extensions for Visual Studio, made many open source libraries and projects on GitHub and authored many tutorials on YouTube, his blog and other communities. He is also a regular speaker and participated in many local and regional conferences and events in all countries where He worked in.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •