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
Visualization is the best way to understand DevOpsThoughts architecture, below is a list of useful diagrams to explain this.
- Architecture Diagram: which is a graphical representation of concepts, elements and their usage within the application
- Use Case Diagram: a representation for all interractions within the solution.
- Project Explorer View: A screenshot from Visual Studio for the whole solution.
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 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
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 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.
- 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.
- 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.
Below is the sample for Vendor's login Initial PBI.
Another sample for Vendor's login Detailed PBI.
You can click here to view the complete list of all Basic Work Flow PBIs
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 are the most abstract form of test cases made with conceptual input only for purpose of conceptualizing the flow itself.
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 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 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.
- 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.
Another sample for Display Products List Detailed Use Case Scenario.
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.
Mockups are usually made using a basic photo edition application like MS Paint or Paint.NET.
Mockups usually represents only an abstract view of a webpage, Only spaces occupied and by which elements, doesn't include icons, content nor colors.
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.
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.
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
- External: Which is making sure that the web page matches 100% the provided PSD.
- Internal: Which is checking for source code quality, readability and if the code is minified.
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.
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.
-
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 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.
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.
Below a screenshot from Microsoft Visual Studio's Solution Explorer for the different layers used in DevOpsThoughts.
This is the complete list of BWF PBIs:
- Display special offer products in a slider
- Display top featured products in a slider
- Display top new arrival products in a slider
- Display top hot sale products in a slider
- Display top best selling products in a slider
- Display random products in a slider
- Display all main and sub categories of products
- Display products of a selected category
- Provide paging for product lists
- Access shopping cart from the home page
- Display product detailed information
- Add product to the shopping cart
- Remove product from shopping cart
- Review products in shopping cart
- Add delivery address for the order
- Review order before checkout
- Place order after review as member
- Place order after review as guest
- Display all order made by visitors and members
- Update completed order
- Display orders history for members
- Provide membership for visitors
- Login to the member site
- Login to the vendor panel
- Login to the admin panel
- Add product to the store
- Display all added products
- Update product data
- Display all orders made by all users for all vendors
- Update order status
- Display order detailed information
- Recover forgotten password
- Change password
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.