Useful background information
+ +Appmaker is an online tool that lets you add "Bricks" to easily build fun and useful mobile apps. + A brick is a piece of code that allows a user to cause an interaction. You can add bricks to your app by clicking on them. To learn more about each brick, hover over the ? icon to the right of each brick.
+Appmaker is the newest tool in the Webmaker collection, and we're eager for feedback!
+ +A finished version of the two page app we'll build is available for reference (and remixing!) here.
+ +Let's get started.
+ +-
+
-
+
Open the Appmaker Designer at http://apps.webmaker.org/designer and explore the interface. On the left, there is a tray with the various "Bricks" Appmaker has preprogrammed, in the middle you'll see your working space, and on the right you'll see the customization panel. +
+
+
+ -
+
Name your App
+Give your project a name and description, and be sure to add any tags you'd like to use so that people can easily find your app on Webmaker.org +
+
+
+ -
+
Add a Header and Give it a Name
+ +Click "Header" in the Brick tray to add a Header brick. Bricks are functional as soon as they've been added to your project. The Header brick displays a title for a page in your app and lets you navigate to that page.
+ +Rename your header. Simply change the label text in the customization panel. You can also change the color of your header here. +
+
+
+ -
+
Add a Button
+ +Click "Button" in the Brick tray to add a Button brick. Rename your button. +
+
+ Press the button a few times on the phone in your working space. Whenever the button is pressed, it sends out a "Press" signal. We can customize the channel that signal is sent along and which brick "hears" it. This way we can initiate a corresponding reaction. +
+
+ The "Press" signal is being sent from the Button Brick whenever it's pressed. All Appmaker bricks can send and receive signals.
+
+
+ -
+
Add a New Page
+ +Click the plus sign at the top of the interface, next to "Page 1". This will add a new page to your app. Each page can contain unique bricks and can send and receive signals to other pages. This allows the display of different screens based on how the user interacts with your app.
+Repeat steps 3 and 4 on your new page. You'll need a header brick and a button brick on your second page. Change the Header brick title to "Second Page" and the Button brick label to "Go to Page 1". +
+
+
+
+ -
+
SAVE!
+ +We've done a lot, we should save our work! Click on the "Sign In" button in the top-right of Appmaker Designer. If you already have a Persona-enabled account, this process will be familiar to you. Otherwise, when a window pops up, follow the instructions to sign up for a Persona account or connect an existing account (e.g. GMail). Once you've signed in, you can save and publish your app. Click on the "App" menu, and choose "Save As". When prompted, type in a name for your app. Notice the title of your app appear on the phone display. +
+
+
+
+ -
+
Assign Channels
+Now we'll set the channel for the Button on the first page to send a signal to the Header on the second page. First, look at the header on the second page. Take note of the Channel it's on.
+In this demo, the second page header is set to the "B" Channel. Click on the page 1 tab, and set the Button channel to "B" by clicking the grey arrow and then clicking the "A Press" dialog. The Channels are revealed, and you can select "B".
+Switch the 2nd Page's button to point to the Header brick on Page 1. +
+
+ Press your button and watch your app switch between pages!
+
+ -
+
Publish!
+You've just created a two page Appmaker app! Click on the "App" menu, and choose "Publish". You can now install your app on your phone or view the app in the browser. +
+
+ Don't forget to share what you're making with @MozillaAppmaker
+
+