Freigeben über


AppMakr Walkthrough - Non-coders Can Build Windows Phone 7 Apps

Update 2011-04-27 : The app was approved but there were a few lessons learned. Those are blogged here - https://blogs.msdn.com/b/devfish/archive/2011/04/27/appmakr-app-approved-few-items-to-note.aspx

One very popular scenario for mobile applications is basic social media consumption.  Aka apps that consume and present RSS and ATOM type feeds. Scenarios include personal vanity apps, simple app presence, or someone looking "app-ify" information already on the web into a mobile application. A number of social media scenarios present themselves.  

How can you accelerate the development process of a social media application? One possible solution for accelerating social media applications is the Oz based Windows Phone Social Viewer Application Template. The social viewer template requires a bit of knowledge re Silverlight and CSharp coding, however, and may be daunting to non-coders

Non-coders? Don't know how to code? Yet want to build a social media Windows Phone app? Yes, I said "don't know how to code".  Do I have a solution for the "non-coder" market!

Check out AppMakr. AppMakr is an application generator (note its not a code generator) for Windows Phone Silverlight Type Applications. Gather up some images, RSS / ATOM feeds, or Flickr lists for photos.  Then plug the feeds into AppMakr, which will build a deployable XAP for you.

I'm going to walk you through the AppMakr process of building a @bytemaster (Kevin Wolf) tribute application. Kevin's a WP7 (and fruit and android) dev in Florida, deserving of his own tribute app. Yet he doesn't have one. So I'm building it for him. I was going to build one for myself, but hey, that's cheesy. 

Step1 - Go to https://www.appmakr.com and setup an account.

Step2 - Click Create New App

Step3 - Art Tab
AppName="ByteMaster Tribute App"
Choose App Icon - I chose to load an image from disk here. I used a 200x200 PNG and it worked fine.
Choose App Splash Screen - I used a nice collage of bytemaster photos as a 480x800 PNG ready to go.
Click Save - the Simulator on the right should update with a rough look at your app

art Art Tab

Step4 - Tabs
I setup three tabs using AppMakr's stock icons. Feeds can be RSS or ATOM based.  Respective feeds for Kevin are below:

Blog - https://new.efficientcoder.net/feeds/posts/default?alt=rss
Twitter - https://twitter.com/statuses/user_timeline/8304232.atom
You Tube - https://gdata.youtube.com/feeds/base/videos?q=bytemaster+kevin&alt=rss&client=ytapi-youtube-search&v=2

At this point you can test drive the app in the Simulator.  Click the icon, in the phone simulator and the app will run. You can visually verify everything is looking and working kind of correctly at this point. Note the initial menu is off, and sometimes my feeds wouldn't show up but you get an idea of what's going to happen.

tabs Tabs tab

Step5 - Customize
The only thing I modified here was the header image. I used a set of "wolf eyes" to give a cool Wolf glare across the top. The PNG for the header image needs to be 640x88.

headerimage wolf eyes

Step6 - App Info
Fill in as many fields as you can here. This is mainly for the appmakr marketplace, and won't affect your app. Unforunately, the contact info you fill in here is NOT pulling into your app at this point im time. The info here does, however, give you a nice page to showcase your app, along with a copy of the app running in the Simulator. Here's the URL for Kevin's app - https://www.appmakr.com/app_gallery/156932 . Right now there's a bug in the system which tries to run the app in the fruitphone simulator, not the wp7 simulator. Hopefully that will get fixed soon.

appinfo app info

Step7 - Monetize
Want to make some money using the Microsoft Ad SDK? Simply create an Application ID and Ad Unit for this app and enter them here. AppMakr will automatically setup ads for you in the bottom of your app. The ads will not show up until the ad is published, however. Not sure how to do the ad unit stuff? Here's a great link from leventoz showing you how.

Step8 - AppMakr Publish
Now its time to build the app. Go to the Publish tab, click Build App, and AppMakr will go about making a XAP for you. When the app is built it will show up as a download under App Builds tab.

publish.buildinprocess build in process
publish.downloadapp ready to download

Step9 - Working with the app
The XAP comes down as a ZIP. Rename the ZIP to XAP. You can now load the app into the Windows Phone Emulator (availalbe in the Windows Phone Tools) or begin the process of deploying it to the Windows Phone Marketplace. Setting the art for the marketplace actually took longer than it did for me to build the app.

Below you can the screens of the application running in the emulator. I've submitted the app to the Windows Phone Marketplace. We'll see how it does!

screen.blog blog area screen.twitter twitter area screen.youtube youtube area

Find a good RSS feed that's public? Want a vanity app? AppMakr provides an easy route to crank out some feed driven solutions. Enjoy.

Comments

  • Anonymous
    June 08, 2011
    Thanks Joe! One note: you need to make sure to set IE 9 to "compatibility mode" or the picture uploads won't work.

  • Anonymous
    June 09, 2011
    bliz - thanks - yah, i got hit by that too but forgot to blog it.  got about 8 pending bugs w them right now.