Great Apps Built in NYC: Cooking Companion

Leave a comment
Worskhops and WebCast
nYCdev

Poster Designed using Be Clam a Windows Phone App

Cooking Companion

Cooking

Cooking Companion

I see a lot of really cool  app ideas during my  academic and community workshops. One of my favorites to have come out of them is Cooking Companion  developed by Moriel Schottlender.A perfect cooking companion to recipe apps(in split mode) and  cookbooks. This single page app is both really well designed and easy to use.   Moriel’s choice of  app name and color scheme  as well as her personal marketing through her blog get this app noticed.I had the pleasure of meeting Moriel earlier this year while I was doing a series of  Windows 8 workshops at  NYIT; from the get go she was a star.  Last week I  had the lovely opportunity to interview Moriel  about her App development experience on Windows 8.  I hope she inspires you to build great apps.

MeetMoriel

Me : So, Moriel tell me a little bit about yourself.
Moriel: I’m a Computer Science Masters student, with a bachelors in Physics. I love programming and figuring out ways to create new products people can use, especially ones that cover scientific and mathematical subjects. I also run a science advocacy website, and I hope to continue mixing the two subjects to develop science-related applications.

 Me:When did you start developing applications ?
Moriel: I’ve been programming since I was rather young, mostly as a hobby. A couple of years ago I’ve started developing small web applications, mostly related to science, like a force calculator and some physics demonstrations. I’ve developed a couple of extensions to CMS systems like WordPress and Joomla, but I only got into actual mobile development with Windows 8 applications.

 Me: How did you get started building Windows 8 apps?
Moriel:Well, one day my school sent out a mass-email notifying us there would be a Microsoft Windows 8 App Development workshop at campus, and invited us to register, and I did. That was my first introduction to Windows 8 apps. I thought that the ability to develop an app with HTML5/Javascript was insanely cool – because it meant I could take the existing small web applications I already had on my website and translate them into mobile apps. That led to a great semester of developing Windows 8 apps — getting into the libraries and Windows 8 UI and testing the range of what I could do and where I could take my ideas.

Me:Which development tools did you typically use?

Moriel: When I got into the Windows 8 app development, I started working with VisualStudio 2012, and I love (love love!) its features. The most helpful feature when I develop HTML5/JS applications is the DOM Explorer. It holds a permanent place of honor in my pinned tabs. Also, the Windows 8 ‘standard’ color list is extremely helpful. There’s a list of those colors in a post in StackOverflow.

Me: What are  three top computing libraries and why ?

Moriel:

jQuery- Beyond the fact it reduces the complexity of programming raw javascript, jQuery also has its own list of extremely cool features to work with and handle DOM elements (like native effects and value sanitation, etc.) Also, there is a huge variety of plugins to choose from and the community is large, so there are lots of answers and examples online to draw ideas and get solutions from.

MathJax – By far and without question MathJax is the best mathematics display engine for Javascript. It works in all browsers and allows for an incredible range of configuration options, callback functions, and localization control. Most importantly in my opinion, MathJax uses special fonts to render Mathematical expressions, and not images like other APIs. This lets users do awesome things such as copy/paste the equations, change the content quickly without re-rendering an image, etc. It’s absolutely a must-have if your application displays math symbols. The version “out of the box” is rather large, but a Windows8 app doesn’t need all the features in the web version, and the one I used for my Physics Reference app was significantly reduced, and worked like a charm.

RaphaelJS – A vector graphics Javascript library. It has incredible power producing and controlling SVG elements with built-in animations and path control, click events, drag-drop API and much-much more. It also allows for plugins.

Me:You are talented and creative developer.  What was you inspiration for the building the cooking companion?
Moriel:First of all, thank you. I try :) Cooking Companion is actually the surrogate child of a much nerdier (and math-heavier) app I made earlier that summer: “ConvertThat!”. That app was built to be a full blown unit converter – with attitude. It can convert between scientific units but also deals with some more down-to-earth units meant to demonstrate the size differences. So, you could convert the distance to the moon in how many Empire State buildings fit into it, or see the mass of a standard car by the number of cats that equal that mass. The internet loves cats.During the summer, I went to the App Workshop at Microsoft, and while showing the ConvertThat! application around, Stacey Mulcahy suggested that I create a simplified version of the application with common conversions for cooking. I took her idea and ran with it – producing Cooking Companion.

Me:How long did it take you to build this app ?
Moriel: The initial “ConvertThat!” app took about a week, including my learning curve with the Metro UI and collecting all the conversion factor data. Remaking the original converter into Cooking Companion took about a day, but I had to redesign the app to be more kitchen-friendly with big bright buttons and simplified interface. Then, the only thing that was left was to research and add the substitutions – that took a couple of hours to add. So, overall, two apps in about a week and a half.  I’d say that’s not too shabby!

Me:An app is only as good as it’s content.  The beautiful simplicity of Cooking Companion demonstrates this.  Your provides app user with easy conversion from one metric   system to the other. On top of this the common substitutes to cooking essentials is deifnitely a winning feature for me.What programming language did you use?
Moriel:Cooking Companion is made with Javascript, jQuery and a jQuery plugin called “MSDropDown”that provides a simple method of redesigning drop-down components like adding images or checkboxes to them.

Me: Can you tell us a little bit about how you built  this ?
Moriel: “ConvertThat!” app, the base parent of “Cooking Companion” is a full blown unit converter that’s written in Javascript, HTML5, and takes its data from local text files with json strings. When I started thinking about how to make the converter, I wanted to make sure that I could add more units in the future without having to redesign the code.

I ended up reducing the code to a simple method that executes a formula according to the data in the json files. The json file contains data about all the units – the display name, the unit representation, and most importantly, the conversion factor. The conversion factor is then used to convert from one unit to the other.
Here’s a snippet of the json file I use:

{
“length”: {
“display”: “Length”,
“desc”: “Convert units of length”,
“notes”: “”,
“units”: {
“Meters”: {
“short”: “m”,
“factor”: 1
},
“Centimeters”: {
“short”: “cm”,
“factor”: 0.01
},
“Millimeters”: {
“short”: “mm”,
“factor”: 0.001
}
}

The app code then reads the data into jsonData object and uses it to convert the units from one to the other:

var value = $(“#conversionFromValue”).val();
var facFrom = jsonData[currentCategory].units[fromUnit].factor;
var facTo = jsonData[currentCategory].units[toUnit].factor;
// CALCULATE!
result = value * (facFrom / facTo);

The procedure boils down to a fairly simple code. Then, there’s the fluff — making sure the conversion is done with either scientific notation or should be rounded to a certain number of decimals. Temperature conversion was a little more complicated, because the conversion isn’t just done with a simple multiplication of some factor – each temperature unit has its own formula, but the idea is very similar, and using all the data and the conversion factors in json files meant that adding or removing (or editing!) the calculations doesn’t involve changing any of the working code.

At the end, I wanted to add something a little amusing to the converter; I know a lot of people hate math, so I thought what better than to have not only a cool helpful multi-unit calculator, but one that talks back to you? I know, right? I added random quotes to the app, some of them based on the results you get (try getting 42.0 as conversion result) and unleashed it onto the world.Cooking Companion works exactly the same way, only with about a third of the units, and with some more specifically cooking-related units.

Me: I suspect you may have used an API for Common Substitutues.  Which one did  you use ?
Moriel:Actually, I couldn’t find a free trust-worthy cooking API that I could use with the app, so I built my own data file. I went online to find the most commonly used cooking substitutions and added them in. I’m considering trying to make the data file crowd-sourced, so people can add their own substitutions, validate them, and then the app can read them off of the cloud like a proper API.

Me: I love the design of your app. Can you tell us about  your design inspiration ?
Moriel: Microsoft Application Workshop should take some of the blame for my design choices in Cooking Companion, and in specific you and Stacey. I took everyones suggestion for the Cooking Companion and then brought it back the next week and discussed some design ideas with the team. You all gave me lots of inspiration; I looked for examples from other cooking apps, made sure the buttons are big and bright and that the numbers and text are clearly visible, so you can see them while you cook. I was a little worried about the pastel colors of the app (I usually prefer darker palette) – but I sent screenshots to friends and tested the reaction. It seemed to be positive, so I went with it, despite the overwhelming pink :)

Me: I really like the scroll menu you have on conversion calculator.  How did you do this ?
Moriel:The categories in “ConvertThat!” use ListView (WinJS.Binding.List() object). It’s a really simple and very cool Metro UI scrolling menu option, and it’s very easy to work with once you learn the principle.You can see an example of how to use ListView in HTML/JavaScript apps here.

Me: how would you describe your windows development so far?
Moriel: I love developing Windows 8 store apps! Since the summer, I’ve worked on a couple of other mobile projects, but the Windows 8 app development remains my favorite. I love how easy it is to see fairly immediate results that look great, and yet it’s also possible to create relatively powerful graphics and apps with the use of some jQuery libraries. The fact I can migrate my existing web applications over to mobile apps is an added bonus.

Me: What has been your favorite teaching resource ?
Moriel: Windows Developer Center’s “How to” and “Samples” are incredible resources when getting into WinJS and Metro UI libraries.  CodeProject.com has very helpful samples and tutorials for Windows 8 development in Javascript and in C#.And, finally and as always, StackOverflow.com should be permanently bookmarked in any developer’s work browser.

And there you have it !   Cooking companion is one of  those apps that do one thing really well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>