Skip to content
This repository has been archived by the owner on Mar 30, 2019. It is now read-only.

Brick Contribution Workshop

Bobby Richter edited this page Jul 3, 2014 · 1 revision

Welcome, we're so happy you're here and ready to make your first component! This guide will walk you through that process and teach you everything you need to know. We've made some assumptions though - you're talented, attractive and familiar with HTML, CSS, Javascript and have a github account. Oh! We'll also be using Polymer - but we'll teach you the most important parts as we go, so don't worry.

#####What's a Component? Components are the basic building blocks of Appmaker apps. Page headings, buttons and counters are all examples of components -- small, distinct units of functionality or interface that can be linked together to create a complex app.

How do components communicate?

Components can broadcast and listen on colored channels. A component can have any number of named broadcast or listener methods, which a component author can configure in the Appmaker designer. Broadcast and listener methods can also be configured to be on by default. In the Appmaker app designer view, the Broadcasts are configured on the right-hand side of each component, the Listeners on the left.

Check out the...

Button & Counter Sample App

Component Tutorial Video

Buckle your hats, and let's get started...

###1. Get a component running locally First things first, let's get your first component running locally. This will allow you to edit the component on your local machine and preview it in Appmaker. You won't even need to run Appmaker locally to work on your component.

The component you'll make is a clone of the current Counter component.

Note: You'll need to have node.js running on your machine.

→ Let's get Started!

###2. Learn how a Component is Built Here you'll learn about the different parts of a component, scan through it as you explore the code in your new local Counter component.

→ Teach me!

###3. Learn about Polymer!

Oh, Polymer – wipes tear – our glorious companion Framework. It lets you build custom HTML components, and we're using it to help make component authoring easier. You can read the Polymer Docs or just head on over to our guide to learn the bare necessities.

→ Polymer & Your Component

###4. Upgrade your Component! We've got a list of fun tasks for you to complete to get comfortable hacking a component. We'll guide you through making some changes to the Counter and when you're done, you'll be so much smarter and have a way better component!

→ Yo dawg, I'm ready

###5. You're a hero! Now you can help us create awesome components to realize awesome apps. Check out this list and sign up for what you'd like to help with...

→ Most Wanted Components