A document that describes how Squork Mapping has been created using Encanvas Secure&Live. It goes under the covers and studies some of the clever capabilities found in Encanvas that Squork Mapping exploits.
An Encanvas Use Case StorySquork Mapping - Mining the hidden depthsHow we built Squork Mapping [with Encanvas]16th January 2012Encanvas is a registered trademark of Encanvas Inc. All other trademarks and trade namesused in this publication are recognised as belonging to their respective owners. Copyrightexists on this material. No part of this document may be replicated or reused without theprior written consent of Encanvas Inc.
ABOUT ENCANVASEncanvas is an application fabric used to design, deploy and operate cloud applications. It levers theadvantages of the Microsoft Web Platform to create and operate industry standard web-borne (anddatabase-driven) business applications.Encanvas is designed to service the long-tail of ‘situational applications’ demanded by businessprofessionals when pre-authored software applications are too big, too small, too complicatedtoopoorly integrated or just not as good as they could be. This means the economics of Encanvas mustallow for its applications to be used for a short time and discarded when no longer needed. It is theecosystem where situational applications (we call them ‘canvases’) are born and exist.Our award winning software is unique for several reasons: It’s based around ‘canvases’ – web based documents powered by relational databases. It enables the design, deployment and operation of web applications without authors and operators needing to have programming or scripting skills. It includes advanced version control features that mean applications stay in-tune with the operating platform. It integrates painlessly with existing data sources and supports multi-threaded data integration. It supports a hybrid user-identity environment. It creates a Master Data Management model creating a single version off the truth. It automates the creation of web forms and data repositories. It produces cross-browser compatible applications. It employs ready-made engines for file and image management, search, printing – so that applications can be created without having to weld together third party components. It manages the full life-cycle of applications from a single blob of code.The design interface of Encanvas Create is friendly and easy to use. It looks like this: 2
OVERVIEW TO THIS USE CASE EXAMPLESquork Mapping is a Software-as-a-Service (SaaS) application that provides business people with theability to upload, plot, manage and share geo-referenceable data on global maps. It has beendeveloped and is operated using Encanvas software. The application consists of: 1. An outer marketing site – incorporating payment processing through integration with the Sage Pay Payment Gateway. This site has been largely coded in PHP (because we had the resource to do so), with database-centric components authored in Encanvas - though we could probably have produced the entire site in Encanvas had we chosen to do so. 2. The main application site – where registered users of Squork Mapping (i.e. site administrators) design, publish and manage their site. This site is wholly created in Encanvas. 3. The viewer sites - where named users and visitors to the mapping site (published by the Squork Mapping registered user / administrator) view the maps. 4. The Technical Administration site – employed by Squork to manage the SaaS application and all related activities such as publishing mapping resources, managing enquiries, help administration, user permissions and account settings etc. 1. Outer Marketing Site 2. Application Site 3. Published Map Sites 4. Technical Administration SiteIn this document we summarise what makes it an interesting case story. 3
PROJECT OUTLINEApril 2010 – The project team decided to produce an application using Encanvas that could givecasual users of digital mapping the means to securely publish and share their geo-referenceable dataon maps to give it a geo-context. The development team consisted of a product manager (me), ourfinance director (Nick) and a single developer (Andrew). The team spent five days huddled around atable and a computer iteratively developing the application. The result was pretty pleasing but therewas a list of things we weren’t happy with. Our initial idea was to develop Squork Mapping for the UK market adopting the Ordnance Survey free mapping resources and based around Eastings and Northings – but mid way through we decided it would be cool to support overseas partners with an international map set – and international maps require longitude and latitude plotting which we were unable to support. Uploading data is never easy and we were confident that we would have an issue if non- experts tried uploading their own data without excellent wizards and human readable error reports. The original Encanvas mapping engine was designed for use by people that use maps frequently so we provided lots of ways of selecting data pins and presenting data in tables. But for casual users, we knew this level of map complexity was too much We hadn’t had time to develop ‘user user’ tools for people that were presented with maps – like search data, print, share etc. In addition to all of the above Encanvas didn’t have a billing application layer or user administration.BREAK – ….so we had a 17-month break on other projects.Sept 2010 – We re-visited Squork Mapping and set to work finishing it off. January 12 th 2012 we finishedthe first cut.RELATED ENCANVAS DEVELOPMENTSDuring the course of this project the Encanvas development team added the following features: Secure Socket Layer (SSL) security on canvases used in User login/registration Integration with Sage Pay HTML template for producing header site navigation (Help, My Account, Login/Out) Improvements to wizard control Embedding of canvases into HTML pages Improved search controls Web printing Further development on image selection and publishing to the Web Improved mapping control: longitude/latitude support, mouse wheel zoom, hover over controls… Enhancements to simplify CSV data upload template Improved User reporting on reasons for upload failure Creation of User Help administration system (admin pages for simple topic/article creation and publishing, and user pages to browse topics and review articles) 4
User Registration and Secure Socket Layer StuffRegistering on Squork Mapping is a simple task (we’ve made sure of that) but behind the scenes we’reemploying Secure Socket Layer (SSL) technology to make sure that transacted information is secure.This ability to use SSL is integrated into the configuration options provided by Encanvas Web ServerManager.eCRM / Scheduled Email IntegrationAs soon as someone registers on Squork Mapping it registers with our schedule based eCRMcomponent – also developed in Encanvas – that schedules a series of pre-templated emails to ‘on-board’ the new registrant and provide them with help, guidance and encouragement to not only usethe application but also, after 14-days, to invest in it.Sage Pay Payment Gateway IntegrationEncanvas integrates seamlessly with Sage Pay Payment Gateway and provides a trustworthy, easy touse mechanism to transact payments via Encanvas created websites. We chose the Sage PayPayment Gateway as a simple secure online payment procesisng service because we’d heaerd goodthings about their customer support and the quality of their API tools (all of which has so far proven tobe correct!). The team at Sage Pay were able to advise us on how to setup a Merchant Accountintegration with HSBC bank – something we’d never done before. Sage Pay processes millions ofsecure payments each month for over 30,000 businesses including easyJet and Lovefilm.com - certainlybig enough to cater for our requirements. 5
Screen-shot of ‘BUY IT’ page options showing catalogue and the on-ramping point for the close integration with the Sage Pay Payment Gateway.Product Catalogue IntegrationWe worked with textyouhome.com founder Allanna Lawrie-Fussey to develop and perfect the glue-ware to bind Encanvas to Sage Pay Payment Gateway. Thankfully, Alanna had done this before forher business and was able to provide the team at Squork with good advice on how to develop aproduct catalogue and integrate it with the payment processing system. Behind the scenes theapplication needs to take care of upgrades, renewals, repeat payments, invoice generation and manyother details that need to be properly managed to avoid labour overheads. 6
‘Contact Us’ WizardThe ‘Contact Us’ Wizard guides users through the choices that define the reason for theiir enquiry andhelp to direct the enquiry to resolution as quickly and painlessly as possible. It’s created using a canvasembedded into an HTML page (though you won’t be able to see the joins!).Log files and recording of user activityUnder the covers there’s a lot that goes on in a SaaS platform. One of the essential ingredients ismonitoring user activity to facilitate the learning process and for marketing purposes. Understandinghow users interact with the application(s) and improving the user experience at every touch-point isessential to the health and profitability of the business. Encanvas makes it easy to create the activitymonitoring and click-stream analysis needed to expose behaviours and provide the dashboards andreports that bring the activity data to life. 7
Getting the navigation hierarchy rightWe recognised that it had to be easy for users to appreciate which aspects of the site were generic tothe Squork Site and which features were peculiar to the Squork Mapping application. Therefore theheader HTML feature provided by Encanvas was used to create a top-line site menu forming ahierarchy to the menus so that users would not get confused between the ‘SITE MENU’ (‘Help’, ‘MyAccount’ and ‘Login’) and the ‘APPLICATION MENU’.Getting familiar with Squork Mapping… (the start wizard)The first time users visit Squork Mapping we were concerned that they wouldn’t know where to start! Sowe created a wizard using Encanvas to guide users through the things they really need to know. We’veused the action layer rules to set a condition that this only appears once – so the second (and future)times users access the application, they don’t have the hassle of walking through the welcome wizardagain. If users aren’t that patient they have the option to skip the guide (there’s a video if they care touse it too!). Users can always visit the help section and click on the link to re-visit the start guide at anytime should they need to. (We also added a check-box for administrators within the user administrationpage so they can check accounts that don’t require the wizard to appear.) 8
Downloading TemplatesWe created a way for users to organise their data ready for uploading by providing CSV templates thatnon expert users could easily use. This overcame the challenge of users putting the wrong data incolumns. It also meant that users could automatically define field names by simply changing thecolumn headings in the downloaded template. Notice in the example below how the drop-downconditionally selects the download.Uploading TemplatesWe also produced a wizard to aid the uploading of templates. The challenge for users when uploadingdata is to know why an upload didn’t work. For this reason we’ve enhanced the user reporting toexplain in English why an upload hasn’t worked correctly. (Also notice the little question marks thatpop-up help using the information text feature of Encanvas.)Custom Pin SelectionHaving uploaded a data-set, users can select their own pins or tags to personalise their map. This usesEncanvas image management upload and download. There is significant complexity in the use andmanagement of images on the web that Encanvas takes care of here. 9
UsersThanks to Encanvas features to manage user permissions, we were able to create secure named userviews, administration and public map views. In addition, when creating a new account, we’ve usedthe conditional rules again to only ‘switch on’ the Add New when the Password and Confirm Passwordmatch. These labels are colour coded using link rules to turn from red to green when a rule applies. Acheck box creates another data rule that gives administrator the means to enable users to changetheir own password.Having created a user, administrators have full control over the data-sets they permit users to see, editand download – fully exploiting the rule-based conditional linking of Encanvas. It demonstrates thenecessity for close relationship between data linking, logic and presentation that Encanvas supportsthrough its real-time ‘around the table’ design approach. 10
ViewsThe map views exploit the dexterity of the Encanvas GIS engine which means users can drag and slewmaps, zoom in and out (using the map controls or mouse wheel) and view pin data simply by hoveringover the map. The position of the mouse on the map denotes the point of zoom. All of these featureswork in a similar way to Google Maps (given the popularity of Google Maps, most people presume thatall maps should work this way). On the administrator and named user views, pins can also be plottedand associated data added. This is made possible by having a separate canvas for these views withdifferent data link relationships.User control features (search data, print, select data-layer, set default view, plot dataThe user control buttons use three action levels (select, hover and toggle) so that users can enjoy amore interactive ‘Web 2.0’ button experience. They also can be confident of the action they’ve madesuch as selection.Use of a toggle button means that conditions can be applied to the ‘toggle on’ state – in this case weused this feature to allow users to show multiple conditional panels and realise which buttons wereaffected. 11
The use of Encanvas’s conditional panels and action rules means that the SAME page area can beutilised for several different aspects of the application without reducing the available map space forbrowsing. This is particularly important on mapping applications when customers want to maximise theavailable browsing space for the map itself!SearchThe search feature searches the data uploaded on the map, not the map itself. This means a searchalgorithm had to be developed for Encanvas to enable searching across the Microsoft SQL Serverdatabase that users publish their mapping data to. The algorithm assumes an ‘and’ ‘and’ operator butthis could have just as easily been ‘and’ ‘or’, or some such other structure.Web PrintWe created a web page print feature to enable users to print the map they are looking at.Select Visible Data SetsSquork mapping users enjoy a great deal of control over their data sets and specify who can see eachdata set, who can edit them and download them. A simple check box is employed to enableadminsitrators to ‘go public’ with their data. The ‘Select Visible Data Set’ user controlSelect Default ViewThis feature enables the Squark Mapping administrator to set a precise default view of the map anddata (i.e. a specific position and level of zoom) to share with colleagues and present a part of theworld that is relevant to the map audience. 12
SharingSome considerable amount of effort went into enabling map sharing using dedicated URLs andengineering Microsoft IIS to enable simpler references on URLs. A dedicated sharing page providesusers with the ability to access a variety of copy and paste sharing options. Not only can users copyand paste dedicated URL links into messages that take recipients to a specifc map view (subject topermissions), they can also copy and paste HTML code to embed mapss into their websites or blog.Creating and managing helpHelp administration on a SaaS site is a big influencer on customer satisfaction but maintaining it can bea real challenge. Using Encanvas we were able to create an administration canvas to create helptopics and articles online which then presents its content using topic based results (user view below). 13
Behind the scenesFor SaaS platforms, the entire business model is based around many customers being professionallyserviced through the online portal. To make the economics work of the business model demands thatcustomer service, user administration, product delivery, marketing and promotion, payment processing,renewals etc. are automated through the SaaS platform. In the case of Squork Mapping, this is madepossible through the creation of a technical Administration site that includes a series of canvases usedto manage every aspect of day-to-day administration; some aspects associated with themanagement of customer accounts while other relate specifically to the operation of the mappingapplication itself (such as uploading mapping resources).HOW MUCH OF THE SQUORK MAPPING PLATFORM IS RE-USABLE?Given that Squork Mapping has been almost exclusively developed using Encanvas, many of thecanvases (and processes) we’ve created for this application can be used time and time again forother, similar applications.These include (not a complete list): General site navigation and look and feel Welcome wizard User registration, login/log out, SSL security, forgotten password controls etc. Payment processing (via the Sage Pay Payment gateway integration) Account forms and help administration tool-set Automated templated email / eCRM Data upload via CSS templates (useful for a variety of data-centric web applications from business intelligence to email marketing!) including simple English error reporting Data download and archival URL sharing Embedded HTML Web printing Data searchMORE INFORMATIONFor more information about Encanvas or for details about Squork, please visit www.encanvas.com,email us on firstname.lastname@example.org or call us on +1 201 777 3398 (usa) or +44 1865 596151 (europe).Visit Squork at www.squork.com. 14