Shrubs & Muddles – Anatomy of an App

Programming this third Hugomatica App, the team leveraged the key learnings from the prior two apps and built on it. This one was pretty simple because we had the basics in place. We knew how to randomize, create a table of favorites and store information in Core Data. We had not done Vector Graphics, a custom TableView Cell format or an AlertViewController before though, so we jumped right in and figured them out. Below are the geeky details.

Vector Graphics for Visual Interest

We needed a large number of graphics for the TableView Cell for the favorite drink recipes.  For this, we used the Apple “Graphic” app and created a series of vector drawings which:

  • minimize file size
  • scale and zoom with the same clarity as the original size
  • retain smoothness of line for arcs and circles at any resolution
  • maintain quality, without degradation, even if moving, rotating, filling or scaling

The large number of graphic elements gives the app more visual interest.

3 Muddle ImagesCustom TableView Cell With Thumbnail Image

In order to take advantage of the vector graphics, we created a Custom Class for the TableView Cell. For prior apps, we had just used the default style for the TableView Cells.

We used a Custom Class to add a thumbnail UIImageView of a specific height to the UITableViewCell. Then we added our titles and labels for the associated cell. In order to put the right image and labels in the correct cells, we used the “cellForRowAtIndexPath” method which passes the row number and section number . Hence, our table was populated correctly with corresponding thumbnail image for each row.

UIAlertController – Pop-up Dialog Box

The UIAlertController is interlinked with the ViewController and when the pop-up occurs, it is initialized with a title and a message. In the case of Shrubs & Muddles, the pop-up message suggests a “name” for the recipe associated with the shrub or muddle. The name can be used or overwritten.

The Alert or Pop-up is presented modally in the center of the view controller.

Save New Muddle Graphic
Sample of the Pop-up Screen

Pop up Keyboard Using First Responder

In order to provide the ability for the App users to create their own names for their drink designs, we added a popup keyboard, within the UIAlertController. The user can backspace over the suggested name and type in any name for the recipe. Once the user clicks on Save, the record is saved to the Favorites table and the keyboard is dismissed. The code lines for activating and dismissing the keyboard are:

  • myTextField.becomeFirstResponder()
  • myTextField.resignFirstResponder()

Big Data – It Knows What You Like

There are some combinations of ingredients that did not work together and we did some special programming to take that into consideration. Shrubs & Muddles learns what you like and creates solutions that adapt to your tastes. This part is proprietary.

What’s Next for Shrubs & Muddles

A coffee or juice company needs to acquire this app and add to their business model. Why? Both shrubs and muddles have are caffeine-free and less caloric than a pure fruit drink. It is an alternative for those who are not going to drink coffee, tea or that much juice in one serving.