{"id":11310,"date":"2014-05-07T12:50:23","date_gmt":"2014-05-07T16:50:23","guid":{"rendered":"http:\/\/webmakerblog.wpengine.com\/?p=11310"},"modified":"2019-02-26T12:42:08","modified_gmt":"2019-02-26T20:42:08","slug":"conquering-the-empty-canvas-in-appmaker","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/conquering-the-empty-canvas-in-appmaker\/","title":{"rendered":"Conquering the Empty Canvas in Appmaker"},"content":{"rendered":"<p>Last week in San Francisco, mozillians from around the globe gathered for the Mozilla Foundation All-hands meeting. We sat in circles, discussed, agreed, disagreed, agreed to disagree and just plain got stuff done. It was an awesome experience and I talked to a lot of great folks about how to introduce new users to <a href=\"https:\/\/apps.webmaker.org\/\">Appmaker<\/a>.<br \/>\nWhen building a new app, the <a href=\"https:\/\/apps.webmaker.org\/designer\">Appmaker designer<\/a> presents us with a blank app and a poorly sorted list of components. It\u2019s like staring at an empty canvas and not even knowing how a paint brush works!<br \/>\nWe had some great ideas, and I want to share five of them with you&#8230;<\/p>\n<h4>1. Remixable Starter Apps<\/h4>\n<p>Starting the app making process by remixing a simple starter app would immediately expose you to a set of connected components working to achieve a familiar task. Just by using the app within the designer, you would see the relationships between the different components that made up the app and learn how they communicate.<br \/>\nThe learning process could start by changing some of those interactions, or by introducing a new component to the mix. Even with a few small changes, you could publish the app and feel like you\u2019ve made something unique and personal to you.<\/p>\n<h4>2. Themed Appmaker<\/h4>\n<p>A related idea would be to launch Appmaker in a mode that is themed around a particular kind of app: an app for drawing, an app for doing math or a music app. This would limit the available components to a set that worked well together. This would encourage learning by making it less likely to run into scenarios where components you\u2019re using have no useful way of working with each other.<br \/>\nA potential list of components in a Music theme:<\/p>\n<ul>\n<li>Button<\/li>\n<li>Drum<\/li>\n<li>Metronome<\/li>\n<li>Trumpet<\/li>\n<li>Cymbal<\/li>\n<\/ul>\n<p>After feeling comfortable in this limited environment you could gain access to more components and continue learning by making more complicated apps.<\/p>\n<h4>3. Games &amp; Puzzles<\/h4>\n<p>Drawing inspiration from video games, we could introduce Appmaker concepts and components in a tutorial-like fashion. Each level in the tutorial mode could introduce a new Appmaker concept, a component and a way it can interact with another component. The tasks would get more complicated and reward you by unlocking access to new components and features.<br \/>\nBy the time you finish the tutorial, you\u2019ll have experience with a variety of interactions and component types and have access to an unrestricted version of the Appmaker designer.<\/p>\n<h4>4. Whimsy!<\/h4>\n<p>In our demos of Appmaker, we\u2019ve gotten a lot of mileage out of the <a title=\"Remix the fireworks component starter app.\" href=\"https:\/\/apps.webmaker.org\/designer?remix=http%253A%252F%252Froomy-tin-222.appalot.me%252Findex.html\">Fireworks component<\/a>. There are good reasons for that: it\u2019s fun, visual and satisfying to use! We need more of that.<br \/>\nWe could introduce Appmaker through a set of fun components that work well together to create unique and unexpected visual and aural experiences. There might not be any real-world utility for what you\u2019re building, but you\u2019ll be rewarded for playing and experimenting with the components and Appmaker interface.<\/p>\n<h4>5. Offline Approaches<\/h4>\n<p>Using Appmaker does not have to be the first step in building an app. A lot of useful design and planning work can happen before dragging your first component onto a page. We\u2019ve had success in the past with a workshop that helped participants think through their app in teams and create a paper prototype. Participants were encouraged to break their apps into small interconnected pieces of functionality, preparing them for engaging with the Appmaker model.<\/p>\n<h4>Onwards with Onboarding<\/h4>\n<p>Over the coming weeks we will be experimenting with approaches that fall into these categories. We\u2019re also excited to hear your ideas and learning experiences that you\u2019ve enjoyed with other tools&#8230;<\/p>\n<ul>\n<li>Leave a comment below!<\/li>\n<li>Say hi on <a title=\"Appmaker Twitter\" href=\"https:\/\/twitter.com\/MozillaAppmaker\">Twitter<\/a>.<\/li>\n<li>Drop by on\u00a0<a title=\"Appmaker github repository\" href=\"https:\/\/github.com\/mozilla-appmaker\/appmaker\">github<\/a> and get involved.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Last week in San Francisco, mozillians from around the globe gathered for the Mozilla Foundation All-hands meeting. We sat in circles, discussed, agreed, disagreed, agreed to disagree and just plain got stuff done. It was an awesome experience and I &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/foundation-archive\/mozilla-learning\/conquering-the-empty-canvas-in-appmaker\/\">Continue reading<\/a><\/p>\n","protected":false},"author":144,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[378228],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/11310"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/users\/144"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/comments?post=11310"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/posts\/11310\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/media?parent=11310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/categories?post=11310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/foundation-archive\/wp-json\/wp\/v2\/tags?post=11310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}