The PetSounds app was a nice way to learn about playing media, but we have
commercial aspirations with our app. So, in this lesson we'll sit down and think about
designing and developing a more robust version of PetSounds -- a sound board app
with many different types of categories of sounds, and perhaps even the ability to record your own sounds.
So, our game plan in this lesson ...
1. We'l sketch some ideas on the user interface and user's interaction with the app
2. We'l set up the new app, creating a new project, copying assets into the project, setting
up the AppResources.resx ... all things we learned about before, but tasks we now need
to perform for our brand new project
1. Sketch out the screens in a low-tech mockup
As we set out to think through designing our first commercial app, I would recommend
you take some time and read through this:
Windows Phone 8 Design Process
Also, there's also a template for sketching a "low tech mockup":
These templates are not only useful for getting your ideas down on paper, but also for
thinking through the users interaction with the app, and what feedback we can show the
user about the functionality of the app. I can also use a "low tech mockup" to
communicate my design and interaction ideas to other to gather their feedback before I
waste time developing the app -- just to realize I made a major flaw because I assumed
too much.
So, I use that template to sketch my ideas for the SoundBoard app:
The design was largely inspired by the Pivot App Project template ... there will be
several PivotItems ("views" or "types") each containing a number of sound tiles. When
you tap on a tile, it will play the sound.
I also want to be able to record a sound. I have a app bar at the bottom of the main
page ... tapping that will allow you to record a sound. After thinking I needed three
buttons, we had the idea that we could provide some visual feedback ... we can easily
create a reel, like those old reel-to-reel players from the 1960's, and animate that while
recording. That would offer some great visual feedback to the user. Clicking a save
application bar button would then allow you to provide a name for the sound and it
would be displayed in a PivotItem titled "mine" or "custom" or something like that.
Now, besides the design process, there's always some effort in getting the assets you
need for a project like this. In this case, we're providing you with the sounds and the
images to follow along. Truth be told, Clint spent a few hours working with a sound guy
and a graphic artist. In my experience, the effort required to bring in creative types, or to
build creative assets yourself, should not be underestimated. It can be challenging even
in a simple app. If you have serious commercial aspirations, I would find someone well
versed in those areas that you are not an expert. You can waste a lot of time trying to
make your images and sounds just right, and still fall far short of something that can
pass as professional quality. Whether it be websites or apps I've worked on, I've neverregretted paying professional designers for their help. It's made me look more
professional than I really am.
At any rate, with just a little planning up front and some time spent acquiring the assets
I'll need, I have a good direction for my app. Let's go ahead and get started developing
the app.
2. Create the Sound Board project based on the Windows Phone Pivot App project
template File | New | Project ... menu opens the New Project dialog:
Just like we did earlier in this lesson:
1. Make sure you're in the Installed | Templates | Visual C# | Windows Phone section
2. This time, choose the Windows Phone Pivot App project template
3. Change name to Sound Board
4. Click OK
3. Replace project assets
In the Solution Explorer, open the Assets folder and delete all files and sub folders:
... and confirm the deletions ...
In the assets file that is available wherever you originally downloaded this document or
watched the associated videos, there's a subfolder called: SoundBoard_Assets ... select all files and subfolders ...
... and drag and drop into the SoundBoard project's Assets folder in the Solution
Explorer:
4. Confirm the project icons are properly referenced
In the Properties folder, open the WMAppManifest.xml file:
... and confirm that the App Icon, Small Icon and Medium Icon are set properly ...
Windows Phone 8 supports three Tile templates: flip, iconic, and cycle. This link does a
nice job explaining the different types:
In this app, our needs are simple. Later on in this series, we'll use a Cycle template and
see how to programmatically give it a list of images to cycle through. Personally? I love
any type of data visualization so I love those apps that use the iconic template for
anything that has a lot of updatable information that can be displayed in a tile. For
example, on my own phone, I have a weather app that updates the tile with the
temperature, humidity, wind and visibility, I have another app the displays the amount of
battery remaining in an iconic tile, and a countdown app with a count down until I take a
vacation. I have actively sought apps like these in the Store because I think they make
my Start page look cool.
5. Configure the title of main page to pull from the AppResources.resx file
While we don't plan on localizing our application completely, I will go ahead and set up
the app so that we could easily add it in the future.
Open the MainPage.xaml and locate the <phone:Pivot> element's Title attribute.
Change it to:
Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource
LocalizedStrings}}"
Now I'll change the app's title in the AppResources.resx. You'll find it in the Resources
folder.
Change the ApplicationTitle value to "SoundBoard". Save and close the file.
Recap
To recap, not much new in this lesson per se, but these are the types of tasks we need
to perform each time we undertake a new project. We did talk about a few new topics,
like focusing on the design and interaction of the app, and choosing from the different
types of tile templates that are available.
No comments:
Post a Comment