iOS/Android App Development for Kingston First

Working in partnership with the UK’s first Business Improvement District (BID), The Web Orchard have contributed to the ongoing success of the ‘Keep It Kingston’ campaign developed by not-for-profit membership organisation, Kingston First.

Launched in 2017, the Keep It Kingston scheme offers multiple benefits to members; including free marketing opportunities through which to promote their brands and businesses as well as fantastic benefits for their employees that provide them with exclusive discounts across the town.

Originally launched as a card with a directory of offers on a section of the Kingston First website (which was also designed and built by The Web Orchard), the Keep It Kingston initiative experienced fast success and quickly grew amongst Kingston First’s members and employees; over 13,000 cards were in circulation in 2019. With greater traffic going through the Kingston First website to access information on the Keep It Kingston scheme, the management team decided to reconsider the customer journey that their online users were experiencing, Kirsten Henly, Chief Executive at Kingston First comments:

“As the scheme grew, and following feedback from our members and users, we decided to evolve the scheme and provide a fully digital Keep it Kingston function. Our priorities were to make the scheme more user-friendly and create a platform which enabled understand more clearly how the service was performing and being used. We tasked The Web Orchard with creating a bespoke Keep It Kingston App and a linked website. The Web Orchard were already our existing chosen partner with respect to our main B2B website, so we had no hesitation in turning to them for help with this new project.”

Pete White Director at The Web Orchard expands:

“Further to designing and building the website to enable Kingston First to promote themselves, the town and the businesses within the BID, we very quickly saw an opportunity to increase reach, accessibility and interactivity for the Keep It Kingston scheme via the development of a complementary App. Applicable for iPhone and Android devises, the new App enables Kingston’s business community to quickly and easily take advantage of the array of money saving opportunities developed by Kingston First.”

On the new App and her experience of working with The Web Orchard, Kirsten concludes:

“The new App has been overwhelmingly popular and well received by our members, with 5,000 users on board in just 3 months. It’s one of our most accessed services which is great for both members who have employees using the scheme and for members who are providing offers.

“The Web Orchard team took the time to understand our goals and have translated our brief into an excellent product. We continue to work with The Web Orchard on further developments for the App and benefit from their insight and straightforward approach to problem-solving, alongside supporting us to get the best out of App for our members.

Thai venture turns to Shropshire business’s expertise for new website

Two Shropshire based companies have recently established links with the Far East after developing a brand new website for one of the only Vespa rental companies in Thailand.

Launched earlier this year VESPOi offers the latest Vespa scooters with GPS in Thailand’s northern capital city, Chiang Mai. With well over 200 Buddhist temples and over 2 million people living in the city, VESPOi believe that the best way to enjoy and explore the busy medieval city is on an iconic Vespa scooter.

A number of accessories are also available for hire with the Vespa scooters, including GoPro cameras with SD cards, Nancy Chandler map packs, and extra helmets for pillion-passengers.

Simon from VESPOi said, “After launching Nam’s Guesthouse earlier this year we wanted to offer something different to visitors to Chiang Mai, so we decided to offer GPS Vespas – something that hasn’t really been done in Thailand before.

“These allow our guests and customers to create their own itinerary, discover whichever part of the city they want at their own pace and never get lost in the complexity of Chiang Mai’s myriad of Sois and bazaars.”

With the summer season fast approaching, VESPOi approached ERUP Creative and The Web Orchard to develop the new website in preparation for visitors to the city. The new website is fully responsive to mobile and tablets, as well as desktop computers, which means users will be able to use the website and book rentals in advance during their travels around Chiang Mai and the rest of Thailand.

Ron Gale, Creative Director at ERUP, said, “When VESPOi first approached us to design their new website I was excited by the challenge of creating new branding and a mobile friendly website for such an exotic location. I think that we’ve been able to achieve the perfect website to suit their new, contemporary brand.”

Peter White, Director at The Web Orchard who worked on the website, said, “We love working with a diverse range of customers – whether they’re from Shrewsbury or from further afield! Our expertise in Drupal gives the perfect combination between usability and ease of website management.”

Simon summed up the final site “Thanks to ERUP and Web Orchard the VESPOi e-commerce site came in on time and on a tight budget.

“Developing an idea into a new e-commerce website or transferring an existing business into an online model takes skill, vision and technical ability. You also need a team that takes time to get under the skin of your idea or business and also your customers. This is what they did from the get go. Once they understood our “pitch”…their ideas just kept flowing.

“The result is a visually appealing e-commerce site that enables our target audience in the UK and Europe to book a holiday rental through our Thai based business using a credit card.

“Together ERUP & Web Orchard worked to deliver a new business for us. We just sit back and watch the bookings come through like magic. I recommend these guys very highly, it was fun as well.”

County Firm’s Website Appears on TV’s Dragons Den

A Shrewsbury based web-development and IT company is celebrating this week – along with their client, who successfully received funding on Dragons Den.

It’s been a winning combination and partnership for The Raw Chocolate Company who enlisted the help and assistance of The Web Orchard when it came to designing and building their web presence.

The new website received over 60,000 hits within the first 30 minutes after the pitch by The Raw Chocolate Company on this week’s episode – and the site stayed online and live during this surge, thanks to the planning and implementation of The Web Orchard team.

The Web Orchard built a Drupal 7 website allowing The Raw Chocolate Company to fully promote their product range, fully manage products and content ‘behind the scenes’.

Kris McGowan Customer Insight Manager said “It was great working with Pete and his team. We were really up against it and they put all their resources into getting the website ready and functional on time. The Dragons Den team said we would not be able to keep the website running due to shear volume of hits, but the WebOrchard team did it brilliantly. We couldn’t be happier.”

The Raw Chocolate Company received £72,000 in funding from entrepreneur Deborah Meadon.

Pete White of The Web Orchard said “This has been a fantastic week all round. It’s been great for our client who have received the financial backing of Deborah Meadon and TV exposure – but also superb for The Web Orchard, demonstrating our professional ability to create truly winning website designs with top quality technical assistance and planning.”

For more information on The Raw Chocolate Company and to visit their new website: www.therawchocolatecompany.com For The Web Orchard and an overview of their portfolio and services: www.theweborchard.com

Drupal Views with Openlayers 3.0-beta1

The new beta of the Openlayers module brings some much needed updates to the project though the way it works with views is a little different from the previous version. After spending half a day working it out here are my step by step notes for creating a map based on latitude/longitude stored against a node using the location module. Feel free to re-use, copy, and modify the below:

Modules

1. Enable the following modules:

  • Openlayers, Openlayers Block, Openlayers Block Switcher, OpenLayers Contextual Links, OpenLayers Examples, OpenLayers Geofield, OpenLayers Services, OpenLayers UI, OpenLayers Views
  • Location, Gmap, Location Entity, Node Locations
  • GeoJson
    (as well as any other required modules such as Views & CTools)

Install the Openlayers library (I’m using version 3.2.1)

Content Types

2. Setup a content type with location fields, the important part here is latitude & longitude. (How you get the lat/long is up to you, I’m using a map but you could Geocode this if needed.)

Views

3. Create a new view of content and add a display of a Feed. Set the format to GeoJSON Feed and add in your fields for title, latitiude, longitude & description. Under Format settings, map the Fields to the Data Sources.

Make sure the display style for latitude and longitude is set to ‘Decimal Degrees’.

Untitled-4

(In previous versions of OpenLayers you would create an OpenLayers Data layer – I’m not sure if this method still works however this is where my example differs from other tutorials.)

Openlayers

4. Go to Structure > Openlayers > Layers

Add a new layer, give it a suitable title and click continue. Set the layer type to be Vector and choose the source to be the views feed that you just created.

Untitled-5

Continue with the defaults until you have a completed layer.

Maps

5. Go to the maps tab and add a new map. Give it a suitable name and click continue.

On the map settings page you can set the maps default position, zoom & expose it as a block. (If the map doesn’t appear you most likely haven’t installed the Openlayers library in the sites/all/libraries folder).

On Layers and Sources you need to select your data layer plus a mapping layer, in this case I’m using Google Maps: The data layer is the one we created above.

Untitled-6

The next tab allows you to add controls such as Zoom and Full Screen.

Interactions allows dragging, mouse wheel zoom etc.

Components allows additional options such as popups – for instance someone can click on a popup to see the title and description (that we added in the view).

Finally the Preview tab will show you the map with the markers – if it doesn’t, check all of the settings on the previous tabs as well as the preview of the GeoJSON in the View. If you get stuck at any point check some of the examples in both Openlayers & Views and compare the settings/outputs against what you have.

Components

6. To get the popup to work you will need to go back to Structure > Openlayers and click on Components. Add the component as a popup, select the layer as the view you created.

Untitled-7

You can then edit the components section of your Map and select this Popup.

Untitled-8

Blocks

7. Finally go to blocks and move the map block onto the region that you want it to show.

If the map doesn’t show as it didn’t for me set a height to the content class within the block e.g.

#block-openlayers-block-1f73a9b8-mapblock .content{
 height:500px;
} 

This should be everything you need to get Location + Views + Openlayers working in Drupal 7x.

Configuring Facebook Pull

The Drupal Facebook Pull module allows you to easily show Facebook feeds on your site, such as the latest posts on your profile or page feed. It’s an easy module to setup however there are a couple of areas that can cause confusion, hopefully the following steps will clear them up.

  1. First install the module like any other on your Drupal site.
  2. Visit the Facebook Developer site and login with your Facebook account.
  3. In the menu click Apps -> create a new app.
  4. Enter a display name and namespace.
  5. Click Create App and fill in the captcha if prompted.
  6. Navigate to www.yoursite.com/admin/config/services/facebook-pull (you must be the sites superuser, simply giving permissions to an admin role won’t work).
  7. Enter the App ID and App Secret from your newly created App.
  8. The graph ID can be found in the URL of the page/profile you are trying to show. For instance for my page the URL is http://www.facebook.com/theweborchard so the graph ID would simply be theweborchard.
  9. The Object Type would be what you are trying to display, in this case the pages feed.
  10. Finally the Limit is the number of posts you want to show.
  11. Click Save Configuration then navigate to either blocks. In blocks you will see a disabled block called Facebook Stream, simply drag this onto the area where you want the feed to be displayed.

 

Smarter Web Development

Over the past year we’ve significantly changed the way we develop Drupal websites, we’re using newer technologies and more efficient workflows to ultimately achieve better quality websites. Our web team has gone from strength to strength growing to five people plus outside contractors, agencies and partners.

Drush

In February 2013 I attended Drupal Camp London, it was my first Drupal specific web conference and it was fascinating to see how other companies managed similar Drupal workflows as to what we did. One common denominator was the use of Drush, the Drupal command line tool.

Since then we completely changed our setup from developing on shared hosting accounts to developing on our own internal Linux virtual machine. We wrote scripts for setting up development areas using Drush to install Drupal, a base theme and common modules we used. Once the site was then ready to go live we had further scripts for uploading the files and database to whatever hosting the customer wanted to use.

Drush has the added benefits of being able to update modules, it meant that we could quickly and easily test updates before making them live.

The overall result is that we could very quickly create development areas with up to date modules and any other common assets we use.

Trello & Basecamp

Project management tools have become essential as we’ve grown and worked closer with external agencies. With services such as OpenAtrium, Trello and Basecamp we can setup projects and assign tasks and tickets between each other. With email you can quickly get into a mess with hundreds of emails but with a project management tool its easy to stay on top of the job.

Creative Cloud

One common theme for a lot of the other web companies I’ve spoken to recently is the uptake of Adobe Creative Cloud. I’ve always been against renting software in this way however I seemed to be in the minority so we finally decided to sign up. It’s a jump I’m glad we made, having access to the same software that our partners use has a lot of advantages and the new tools its introduced us to has helped enhance our workflow further.

LESS

We’ve played with a lot CSS extensions over the past year and finally decided on using LESS. The tools fit in well with our Linux development server and our Drupal workflow.

YAML & Twig

Two of the big changes in Drupal 8 have been making their way into some of our other projects. We’ve been writing custom applications by writing configuration files in YAML and theme files in Twig. It’s given us a great head start for when we start developing Drupal 8 based sites later in the year.

2014

We’re already putting our enhanced skills to work on a number of projects in 2014. If you’re interested in a website from The Web Orchard or working with us then email [email protected] or call 01743 343411

Drupal Camp London Photos

Here are a few of my photos from Drupal Camp London.

Untitled

Keynote from one of the founders of MYSQL.

Untitled

Automating Drupal Development with Patterns.

Untitled

Agile Project Management

Untitled

After Party

Drupal Camp London

I’ve got my ticket booked for Drupal Camp London 2013. It will be my first time at such an event and I’m not going to know anyone so if you’re going please introduce yourself!

It’s always interesting to see how other people tackle development issues in Drupal, when we ran a Drupal 7 launch party a couple of years ago I was introduced to features such as Drush.

Hopefully some of my experience will be of use to people as well.