Discussion Forums  >  Basics, How it Works, Is it free?

Replies: 11    Views: 190

Niraj Shah
buzztouch Evangelist
Profile
Posts: 2942
Reg: Jul 11, 2012
Cerritos
37,920
12/28/13 09:04 PM (7 years ago)

Blueprint to get started in BuzzTouch

In written form, this silly Stamps app will help you learn how to use the basics of BuzzTouch. Actually there is no Stamps app until you follow these steps yourself. It's a do-it-yourself assignment :-)

---------

Please notice the amount of time it takes before you have actually created screens. Apps usually proceed in these stages:
- An idea
- Brainstorm on the content (information, data, images, videos, files)
- Acquire and Gather the content onto your computer
- Organize the content (layout)
- Connect the content (structure and navigation)
- Make a blueprint
- Create screens
- Download, compile and test
- Clean it up
- Make marketing material (blog posts, web site, app description, keywords)
- Publish the app into an App Store
- Tell the BuzzTouch community and others about it
- Observe downloads and usage of the app (use the Flurry SDK to gain in insight)
- Do it all over again to add new features, to insert advertisements, to add a social layer, etc.
- Do it again to publish the app into the other App Store

-- Niraj
 
Niraj Shah
buzztouch Evangelist
Profile
Posts: 2942
Reg: Jul 11, 2012
Cerritos
37,920
like
12/28/13 09:12 PM (7 years ago)
First, start off with a catalog of "things" -- that will be your first app. For example, an assortment of stamps.

The stamps can be organized as a catalog that can be filtered-sorted into various collections:
- By the Country (Algeria, France, Germany, Swizerland, ...)
- By the Price (42, $1.00 - $1.99, $2.00 - $4.00. ...)
- By the Year (1992, 1998, 2002, 2003, ...)
- By the Subject (butterflies, animals, fish, people, places, etc.)

A journey down each branch of the catalog will lead the User to a Stamp. That also means one can get to the same stamp via different branches. Such as a stamp belongs to the Country branch while it is also in the People subject branch. Don't forget that stamp was released in a particular Year and it also has a Price! :-)

With this tutorial, you will learn how to create branches that lead to stamps. Also, one will learn how to connect multiple branches to the same stamp.


----- MAKE A BLUEPRINT OF THE APP ----

Using that metadata to organize and describe your catalog, draw out onto a piece of paper:
- How a single stamp will be described (think of the metadata as fields of that description)
- How one can see all the stamps for a particular Country, Price, Year, or Subject

Fold-up a piece of paper such that you will have six boxes (screens) outlined by the folds. Use a Pen and start drawing in each box, don't worry about mistakes, you can always move on to the adjacent box or get a new piece of paper.

Going from left to right:
- Box 1 is your Launch screen (or splash screen)
- Box 2 is your Home Screen (the main screen)
- Box 3 is your Countries screen
- Box 4 is your Subjects screen
- Box 5 is your Years screen
- Box 6 is your Prices screen
- Box 7 is your About this App screen

For each of those screens, draw into the Box the content you want to see and how you want to see it.

Initially, use two types of screens: Menu (rows) or Grid (buttons). For example, the Home screen could have 5 buttons laid out in a grid for Countries, Subjects, Years, Prices and About this App. The Countries screen could be a set of rows for each country.

Make a decision about each screen, will it have rows or buttons? Then draw it in the box as such.

Then connect the boxes with arrows to show how one gets to the Countries screen and then how one gets to the France screen.

Great! Now you have established:
- The content of the catalog
- The layout and structure of the catalog
- The navigation to browse through the catalog


------ UPSIDE-DOWN TREE STRUCTURE -------

Think of the boxes you connect with arrows as an upside down tree. At the top of the upside down tree is the Launch screen, followed by the Home screen. That establishes the trunk of the upside down tree.

Each branch of the tree is the Countries branch, the Subjects branch, the Prices branch, the Years branch and the About this App branch.

We still have an upside-down tree, the bottom-most level of the tree is ... fruits!

The Twigs on the Countries branch are each country. The France twig will have three fruits, one for each of the French stamps in the Catalog. The Subjects branch will have a People twig with five fruits for each Person type of stamp.

Get another piece of paper and fold it up to make more boxes such that your Catalog is fully described for each Branch-Twig-Fruit combination. Obviously, you don't need to put all five People stamps (fruits) onto the paper for the Subject-People-Person combination. Just make sure each Combination is drawn on the paper.

The paper is your primary reference. Please ensure it will be a good Blueprint by putting in enough energy into the drawing and connections from screen to screen. If helpful, use crayons and colors for the connecting lines.


------- MAKE SCREENS IN BUZZTOUCH CONTROL PANEL -------

Now you can turn to BuzzTouch.com to make the screens for the app.

When creating screens in BuzzTouch, one should start at the Fruit level of the upside-down tree structure. Create the Fruit screens first, then make the Twig screens, then the Branch screens, and finally the Home screen.

For example, let's make the Countries-Country-Stamps combination together:

(FRUITS) Make three HTML screens, one for each French stamp:
-- French stamp 1
-- French stamp 2
-- French stamp 3

(TWIG) Make a Menu with Image screen for France. Put rows into that France screen:
-- Row 1 pointing to French stamp 1 (FrenchStamp1)
-- Row 2 pointing to French stamp 2 (FrenchStamp2)
-- Row 3 pointing to French stamp 3 (FrenchStamp3)

(BRANCH) Make a Button Menu screen for Countries. Create a button item for France. Upload the French flag as the image for that button. Give it a label as France.

(TRUNK) Make a Button Menu screen for the Home screen. Make a button item for Countries. Upload a multicolor image as the image for the Countries button. Give it a label as Countries.

( launch screen can be last, not needed right now )

We started by making screens for the three French stamps (fruit-level) of the upside-down tree. The we went upwards to make France screen (twig-level), then went up again to make the Countries screen (branch-level) and then finally made the Home screen (trunk level).

All those screens should reflect the content, layout & structure and connectivity that is already drawn on your (boxes) blueprint papers.

Excited yet?


--------- DOWNLOAD AND COMPILE PROJECT -------

Now prepare your project and download it. Compile it for iOS or for Android. Then run the app in the simulator.

Looking at your blueprint, and look at your definition for the Home screen. Does it match up? If not, make adjustments on your blueprint with a red pen.

Tap your way into the Countries screen. Do a blueprint check.

Then tap into the France screen. Do a blueprint check.

Then tap into each of the French stamps. Do a blueprint check.

Excited yet? Yahoo! :-)


------- REVISE, UPDATE, REFRESH --------

For each red-color markup on the blueprint, change the screens on the BuzzTouch Control Panel.

No need to re-prepare and re-download the project. Instead, hit the refresh arrow in the up-left corner of the Home screen of the app. That will download your changes right into the app!

Go through all the taps starting from the Home screen down to each French stamp. Check against the blueprint to make sure everything was updated.


-------- USE SAME STAMP FOR MULTIPLE BRANCHES -------

A journey down each branch of the catalog will lead the User to a Stamp. That also means one can get to the same stamp via different branches. Such as a stamp belongs to the Country branch while it is also in the People subject branch. Don't forget that stamp was released in a particular Year and it also has a Price! :-)

Let's learn how to connect two branches to the same stamp. You already have three stamps on the Countries branch. Let's connect one of those to the Subject - People - Person branch.

Assuming the 2nd French stamp was about a French person, create a series of screens for either if these two combinations:
- Subject - People - French Person - French Stamp 2 combination
- Subject - People - French People - French Person - French Stamp 2 combination

Using the Refresh arrow, update the app with the newly created screens. Tap your way down to the French person stamp.

Now you have learned how to share the same fruit among different Branch-Twig-Fruit combinations! You had used the same French Stamp #2 to be displayed at the end of the Countries-Country branch and at the end of the Subject-People branch.


------ DESIGN AND COLORS ------

Next is to pick three complementary colors to establish a color theme for the app. I use the Color Scheme Designer web site.

http://ColorSchemeDesigner.com

Use the Triad menu item. Write down the hex code for the three complementary colors.

In each screen's control panel, you will see things like background color, row color, etc. Experiment with your three chosen colors to "design" your app to your taste.


--------------- THE APP IS YOUR CREATION ----------------

Experiment, try different things.

Warning -- if you want to change a Button screen into a Menu rows screen, that requires making a brand new Menu rows screens and creating new rows within that Menu screen. The Button screen and buttons cannot be magically transformed into a Menu of rows. Even though it seems like a simple thing, it's not a very high-priority item for BuzzTouch to implement.

Best fortune on your app building journey. Hope you learned a lot in building the stamps catalog app!

-- Niraj
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
12/28/13 10:16 PM (7 years ago)
Heck Niraj, *I* could use this blueprint, lol!

Concise, informative and outlined beautifully. :)

Cheers!

-- Smug
 
EdReyes
Lost but trying
Profile
Posts: 574
Reg: Oct 21, 2013
location unknow...
17,640
like
12/28/13 11:38 PM (7 years ago)
Thanks for your contribution.
 
AmberTheCommander
Aspiring developer
Profile
Posts: 3
Reg: Apr 15, 2013
Brooklyn
4,530
like
12/29/13 05:06 AM (7 years ago)
Wow! This is very helpful. I'd started drafting out my app in writing yesterday, however, your idea to fold the paper is a Much better visual aid to conceptualize how the app will actually work. Thank you SOOooOOo Much! :)
 
0z2000tv
Aspiring developer
Profile
Posts: 315
Reg: Sep 10, 2011
Nashville
11,950
like
12/29/13 09:11 AM (7 years ago)
Thank you Niraj.
 
guisante
Aspiring developer
Profile
Posts: 290
Reg: May 14, 2011
Spain
14,500
like
12/29/13 01:34 PM (7 years ago)
Good way to plan new app. Thanks for informations.
 
EnrichmentU
Lost but trying
Profile
Posts: 28
Reg: Feb 01, 2013
Dayton
3,480
like
01/02/14 06:49 AM (7 years ago)
Thanks for the information. I will make sure I use your Blueprint.
 
MsGlobalLife
Lost but trying
Profile
Posts: 16
Reg: Oct 12, 2014
Detroit
6,460
like
10/23/14 11:41 AM (6 years ago)
Ohhhh WOW, Thanks for this. Very Helpful
 
krompa
Lost but trying
Profile
Posts: 257
Reg: Jun 14, 2013
Bristol
8,820
like
10/25/14 02:57 PM (6 years ago)
Great advice Niraj.

One additional point for the original list is to look to see if similar apps are currently available and assess whether it is worth making the app.

For instance, a friend of mine suggested an idea for an app. On consideration we thought it would be a great app with universal appeal - it could be the app that enables early retirement! A quick search of Google Playstore revealed that a few similar apps already existed with the top one achieving 0.5 million downloads. I wasn't put off creating the app because of the other app's download numbers, but I was realistic that my app would not be able to add any improvement to what was already available. Ask, will your app be as good or better than the current competition, or offer something different/extra?
 
clhend
Aspiring developer
Profile
Posts: 76
Reg: Dec 23, 2014
Weatherford, TX
5,460
like
12/27/14 12:08 PM (6 years ago)
Thank you so much, Niraj. Exactly what I needed.
 
Niraj Shah
buzztouch Evangelist
Profile
Posts: 2942
Reg: Jul 11, 2012
Cerritos
37,920
like
12/27/14 01:22 PM (6 years ago)
Wow that was written almost a year ago!

Since then, some marvelous plugins have appeared in the BuzzTouch Market that will help you show off your Stamp Collection.

These three plugins allow you to show off a Stamp in unique ways, check out their screenshots:

1. Ultimate Screen Creator and DroidCreator
2. Instant Database App
3. Cubbyholes

-- Niraj
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.