Making the Vino App with ChUI: Part 1

vino screen california wines

Background

The Vino app was inspired by a combination of two things, our love for (and proximity to) California wines, and the Sourcebits desire to always be innovating (See our iOS 8, iPhone 6, and iPhone 6+ whitepaper, for example). We decided to test the limits of mobile Web app framework ChocolateChip-UI, which gives the look and feel of a native app, by making a template on how to build an app that could function as a standalone Web app, or as the basis for a hybrid app. Voila! With this powerhouse combo, you have Vino, a reference app about the wines of Northern California.

Let’s dig in to how we made it.

Launching the App

vino-2When you launch Vino, you are presented with top picks of red and white wines, as well as the ability to search for a wine by type, body and price. You can tap a wine in the “returned search” list to see more details about the wine. From there you can choose to purchase, or you can check the location of the winery, which differ depending on the platform.

  1. Android: Google Maps
  2. iOS: Apple Maps
  3. Windows: Bing

From there, you can see customer reviews, ratings, driving directions, etc of each winery.

We have organized Vino into three platform-specific versions for a very good reason, because we wanted each version to have the ability to serve as a standalone app that can be converted into a hybrid app.

Because Vino is a reference app, we are not actually going to go through a complete purchase process, we are just showing what it could look like, as shown below.

vino-7In this post we will cover the first 6 major parts of the app, and the next 6 in the following post. Here, we’ll be covering data gathering, customization, the development approach, the home screen, the initial data setup, and horizontal scroll panels.

Data

This was a huge step. We gathered data on over two hundred wines, varying in type, body and price to give us a good range. Since we know large data sets provide a rough user experience (scrolling through unnecessarily long lists), we provided ways to reduce the data into convenient chunks for the user.

Customization

Our designers wanted certain customizations of the default look and feel of certain stock controls. This app has themes for Android, iOS and Windows Phone 8, and because of differences in mobile platforms, we made some variations in HTML, CSS and JavaScript.

Development Approach

  1. We gathered and then reduced the data
  2. We went to our design team with ideas in mind
  3. The home screen would have carousels of top picks.
  4. Tapping one would take you to the detail view for that wine.
  5. You could perform a search based on several parameters.
  6. We wanted the search controls to fit available screen size, whatever the device.
  7. With these in place, we were able to start building the app, making changes as we went along.

Home Screen

For the home screen hero image, we’ll use the navigation bar. By attaching a background image to the navigation bar and another one for the text in the heading, we can achieve our design goals. We do need to increase the height of the navigation bar, and that means we need to change the top position of the article that follows it.

Initial Data Setup

Before we do anything, we need to get the wine data into memory so that our app can use it. Since we’ve broken our data into two sets – top picks, and all wines – we need to expose the complete wine data in the variable wines, and also expose the top picks of reds and whites as bestReds and bestWhites. After we get the data back, we use ChocolateChip-UI to publish it, which introduces a very clean separation between getting the top picks wine data and rendering out the carousels.

Horizontal Scroll Panels

Next up, we need two scroll panels, one for red wines and one for whites. When the user taps a scroll panel item, the app will navigate to the wine’s detail view. Rather than defining the scroll panel multiple times, we’ll use the template engine native to ChocolateChip-UI to simplify, and then insert it into the code. Here are the finished carousels:

vino-8

What We Learned

From this first half of our Vino experiment, we learned a few things, the biggest being that getting the relevant data together was harder than actually making the app! Additionally, figuring out how to get map integration working the same for iOS, Android and Windows Phone was more work than anticipated, simply because there wasn’t up-to-date information out there. The actual implementation for launching maps on the various platforms was very simple but slightly different for each, and Bing Maps took the most time to sort out.

Stay tuned for our second post on the making of Vino! We’ll go over the detail view, the bottom toolbar, the data binding for range input, the search results, the return to the detail screen, and the payment workflow.

Try Out Chocolate Chip-UI

Piotr Gajos, Chief Innovation Officer

Piotr is Sourcebits Chief Innovation Officer. A 2006 Apple Design Award winner, Piotr draws much of his inspiration from film and music, and focuses on leading our Innovation Strategy Workshops, generating new ideas for Sourcebits, and consulting on projects.