Challenges

Crafting Design Studio

OVERVIEW

The client is pioneer in providing crafting products and solutions over last four decades in USA and Canada. Products include a range of die and head cutting machines along with the crafting design solutions. Client wanted to create a full-fledged web based Crafting design studio which not only offers new and advance tools for craft designing but also guide naïve crafters and inspire part-time crafters.

THE CHALLENGE

Crafting Design Studio has to be created from scratch. There were several key requirements posing challenges while design and development:

  • In spite of web browser based application, it should experience like desktop based application as all the predecessor solutions were desktop based and client want to minimize the learning and experience curve for existing customers.
  • Securing the proprietary images and other design contents which are sold separately by the client.
  • Completely web browser based solution; no installation should be done on client machine apart from cutting machine driver.
  • Cross OS and cross browser support.
  • Provide support for Scalability and ease of Maintainability and Extensibility.
Case Study Hurdles

NEWGEN SOLUTION

Newgen architecture a MV*(MVC) based Single Page Application (SPA) solution which includes a bunch of Javascript libraries with Angular Framework for front end along with Flex, HTML5 and CSS3. Web APIs are used for backend to support desktop as well as mobile based clients. Since it is a single page application, URL in the browser never changes, only content is refreshed based on the user interaction. We used Angular extensively to provide two way data binding as in desktop applications, caching for high availability, routing and performance optimization etc.

Using the design studio, end user can design its own crafting projects or customize projects shared by other users. End user can choose images, apply various types of transformations (change color, height, width, Merging etc.) on them. Once designing is complete user can purchase the proprietary images via shopping cart and then cut and share the project.

We used HTML5, CSS3 and Flex for creating UI of the application. Any type of interaction with proprietary images was handled in Flex. This was done because as of now HTML5 does not provide any standard support to encrypt DOM data. We created event based architecture to communicate between HTML and Flex.

A cross browser plugin was also created to pass encrypted messages to cutting machine. Application uses this plugin to send and receive messages and cut paths to/from cutting machine.

KEY BENEFITS

  • No installation and update packages-just go to web browser type, click and cut.
  • Anytime, anywhere access using PC, MAC or mobile web browsers with desktop like user experience.
  • Minimum or no learning curve for new and existing users.
  • Extensibility to port the solution on Mobile platforms like iOS and Android.

TOOLS & TECHNOLOGIES

Tools and Technologies

Microsoft Visual Studio .NET 2012, Angular.js, bootstrap.js, ASP .NET, C#, .NET Framework 4.5, Telerik Open Access, SQL Server 2012 with Dapper