Windows Phone App Studio
So, Windows Phone App Studio has been updated. I haven’t used it really. I just tried it, somewhere in the beginning, but you couldn’t really do anything more than put a list on the screen, but that’s about 2 years ago now. I decided to see what it looks like now and try an make and app. My knowledge has shifted from Windows Phone to Windows itself last year and I haven’t done anything with Windows Phone development for a year I guess.
I think it’s a neat idea, making it possible for anyone to make an app. It’s probably going to end end up just like all those webstores or WordPress websites. You can just use a template, add your items, include a service, publish it and you’re done. I know that there are more or less similar (3rd party) products around for iOS and Android. Let’s see what Windows Phone App Studio does!
Let’s make that app!
Go to http://appstudio.windowsphone.com, login with your Live ID (or what is it called nowadays) and start developing clicking.
Click Start new project and you’ll end up seeing all these templates. From an empty app to a catalog or you can even create apps including music or videos.
So, we have a Shiba Inu (that’s a dog) at home and let’s make an informational app about the dog breed, link the RSS-feed of my girlfriends’s weblog and do some other stuff.
Let’s select the Windows Phone App Studio template to start with. Select it and click Create.
Developing Clicking the app
You will end up in the screen below. You can swipe or click in the screen of the phone for a live preview. You can also see some Content with 5 sections, the number of screens in the panorama app. You can also add some basic sections and advanced sections, like a database connection to some collection. Maybe I should have thought a little more about this, I really don’t know my content yet 🙂 I am doing this live, really haven’t thought about it yet. Well, Let’s change that App title first! To “The Shiba Inu”. And you can see it being changed instantly in the preview. You can also click the logo to change it, upload a picture. Don’t forget to click SAVE if you change something!
You can also see some other tabs: Themes, Tiles and Publish Info. In Themes you can change the look and feel of the app. Let’s do that first and I can think of the content a little bit more! I want a different background and just select another picture, I will leave the colors as is.
Now that we’ve done this, I have thought a little bit more about the content. Let’s make 3 sections:
- About the breed (static text)
- The RSS feed of the Shibalog blog
- List of Japanese dog breeds
1. About the breed
Go back to the Content tab and start editing. I will leave the sections in place for now, because the examples can hold important information for me as a first timer. I will start and change the About page. Click the edit button on the HTML5 about section.
We can change the page paramteres over here (Pages) and we can change the data being used. On the pages tab we can determine the data binding of the content, which is nothing more than telling the page where to get its data, which data item is attacged to the context field. I can only select one binding right now: Context.Content, which is nothing more than the text under the data tab. Let’s just change the data to some appropriate text, stolen from Wikipedia 🙂
Would you be using a list of data (later on), you will have more options in the data binding popup, basically all the attributes in a list. So if you would have a list of names (Surname and Name), you would be able to choose Conext.Surname and Context.Name.
2. RSS feed
This one isn’t hard. Just click add the RSS feed by clicking the RSS icon in Basic sections. Now you’ll get a pop-up asking for the feed and the feedname. I will enter them accordingly and see what happens. Mind you, it’ll be in Dutch 🙂
I can now go into the section and edit it. I can choose the layout I’d like and determine what the data bindings are for the different RSS fields. I guess they are OK, so I’ll just keep it like this. I will only change the layout to big pictures and small text.
You can also determine what the detail page looks like (below). You’ll see the details of the first post after clicking the details page. Change it to your preferred settings and save it.
You can also add detail pages and put some more info on it. I just added a second detail page just to show the image again. Selected the image template and binded the Image field to Context.ImageUrl.
3. List of Japanese dog breeds (static data)
So now something most applications will consist of… lists. Lists are mostly dynamic, but we can also make a static list. I will make a list with several Japanese dog breeds, you can then click that image and navigate to a details page. We can achieve this by adding a Collection and make a list of dog breeds in there. So, first of, add the Collection on you home screen. I’ll call it “Japanese dog breeds”.
I can choose whether I want to use a static list or a dynamic list. I will use a list in the cloud for this one and see if we can add a dog breed later on. When you choose a list, you must also determine which attributes should be added. So if we are talking about dog breeds I will have the name of the breed, a detailed description of the breed and we will also add an image. Click confirm and your section is added to the home screen. Again, don’t forget to save.
You can now go into the collection and start editing. First of all we will add the breeds to the list. Let’s add the Akita, Shiba Inu and Shikoku. Click edit and select Data. Click Create new to start adding data to your list.
You can now go back and edit the collection page and the details page. As you can see you can now select the attributes you just made! You can select a name, description and an image. So my details page would end up looking like the picture below.
The tile
So looks like we’re almost done here. We can now change the tiles and splash screen. Let’s choose a cycle template, I want things to move on my home screen 🙂 I can choose which collection to use, and since we just put in some images in the Dog Breeds collection I can use those images! Ok, that’s cool! I am only changing the tile here, but you can go on and change the splash screen if you want to as well.
Publish the app
You can now Publiush the app. Well, you can download the package, but you have to put it in the store yourself.
Enter the publish info and generate the package. And I notice that Microsoft has a new Beta feature! You can also download the Windows 8.1 source code. Hmz, so that makes your app cross-compatible…. That’s a nice feature! Let’s generate the code, I will just fire it up in Visual Studio and see what happens! You will get an e-mail as soon as you click generate. There’s a certificate link in the e-mail. Open the e-mail from your phone and install the certificate if you want to be able to install the app on your phone before it has been published.
The Result
So of course I just want to see the result now. Except for some layout problems (caused mostly by myself) it’s just as it has shown up in the App Studio itself. That’s a pretty darn good result! I even added another breed and it has shown up in the list as promised. The Live Tile works perfectly. I am pretty excited about the result.
Then we have the Windows 8.1 app of course. Well, that result isn’t totally what I expected, but how does the generator know what I want my app to look like. For now I can just go into the app (XAML) and start editing away in the GUI to make it more like I want it to be. That sure saves some time from making the app from scratch!
In my opinion the App Studio is a pretty cool tool Microsoft has created to – of course – generate more apps. They made making an app easy for a lot of people. Sure, the apps you can create with the tool aren’t that advanced, but are there really that many advanced apps? This tool is perfect for people who don’t know code, but want to create. I know a lot of people who would like to create their own app, but they just can’t. They don’t know code. Create an app for the local baseball club! Add your results etc. It’s possible with Windows Phone App Studio, it really is! (but only for Windows Phone)
Windows Phone 8.0
Windows 8.1
