How to Build a RSS Feed Reader using Windows Phone App Studio?



Everyone wants to build their apps, whether you are a geek or not. And when you have a website or blog with RSS, it’s by nature to build a RSS phone of your blog. A developer who has knowledge of programming can easily start with that. But what about non-techie?

 

Microsoft has recently launched a tool called “App Studio” which will allow you to build a Windows Phone app without any programming skill. Today we will discuss how to use this tool.

 

Using App Studio, it is very easy to build a Windows Phone application choosing an existing template. You can also easily create applications from scratch using the blank template. You don’t need any programming knowledge in order to build app using this tool.

 

Let’s start building a RSS reader of your blog. For next 15 minutes forget that you are also a developer or have knowledge on Windows Phone app programming. Just make sure you have a valid RSS feed. We will just follow few clicks and the app will be ready for you to publish in the Windows Phone store.

 

If you don’t know about this tool or have not registered for your free account, follow this blog post:  http://bit.ly/18bTZmL

 

Building a RSS Blog Reader for WP

Once you login to the Windows Phone App Studio, you can choose any of the listed template shown in the home page but for this demo, we will use the blank template to get started with it. To do this, click the “Create an empty app” as shown below:

 

 

1. Creat an empty Windows Phone app

 

In the first section of the wizard, enter the application information like Title, Description and Logo of the app that you are going to build. Once filled up, you will be able to see a live demo at the right side of the screen. Click next to continue.

 

2. Provide app information, description and logo

 

In the next screen, you will be able to create Data Source and different Sections for your app interface. Click the “+” icon in the screen to open up the drop down as shown here:

 

3. Configure app content

 

From the drop down menu, you can choose either “Add Section” or “Add Menu”. The first one will create a page for you. You can create 6 sections in each app. The second one will create a list of menus where you can provide URLs to web.

 

4. Create application sections and menus from the drop down

 

Click on “Add Section” which will navigate you to the section page where you will be able to choose different type of sections. Proceed with “RSS” as we are going to build an RSS application for Windows Phone. Provide a name to the section and data source. Click Save Changes to commit the data source.

 

5. Add RSS feed sections to your application

 

Now click on edit section to open up a dialog to modify different parameters to it like URL of the RSS data source, pages etc. Click on the data source “RSSDataSource” the we just created.

 

6. Configure the RSS DataSource

 

In this screen, enter the URL of the RSS and click “Refresh” to view the RSS content in the grid. Click “Save Changes” to save the content and navigate to the previous screen.

 

7. Enter your valid RSS feed URL

 

Now click on the “LatestPosts” page if you want to change the layout of the page. Choose from a variety of predefined layouts that best suit your design. Leave the other fields in this page intact with the default values. Click “Preview” to view it live in the preview panel. Click “Save Changes” to save the settings and navigate back to the previous page.

 

8. Customize the layout of RSS feed page

 

In case you want to change the layout of the detail screen, edit it and choose the proper layout from a predefined set. In this page, you will be able to modify some extra settings like enabling support to Text-to-Speech, Sharing content and Pin to Start screen. Leave the other fields intact. Click “Save Changes” to commit the settings that you modified and navigate back to the previous screen.

 

9. Edit page info and extra settings like TTS, sharing etc.

 

In case you want to add some menus like Twitter URL, Facebook URL etc., you can click on “+” as shown below to add menu items in a page. Else, continue to the next section.

 

10. Enter additional sections or menu items (URLs)

 

In the third section, you can configure various parameters like styles, tiles, splash & lock screen. The “style” section allows you to set various colors or image to your application.

 

11. Configure app style

 

Tiles screen allows you to choose different styles of tile. Choose the appropriate tile template and click edit to change the icons and text of each tiles. You can preview it at the right panel of the screen.

 

12. Configure app tiles

 

If you want to change the splash screen of lock screen of the application, you can also do that here. Click “+” icon to add image from your local resource or choose from the default templates. Click next to proceed to the next screen.

 

13. Configure Splash Screen and Lock Screen images

 

This is the final step building your application with the Windows Phone App Studio. Preview the summary and when you are ready to generate the application, hit “Generate”. You can also preview and share the application to general public to showcase your creation.

 

14. Review the summary of the app building process

 

Once you hit “Generate”, the online tool will start building the application for you. Wait for a few seconds to minutes (based on the content of your app) and watch the progress the build.

 

15. Generate your RSS Reader app

 

At the end you will see a confirmation page like the below one with link to install a certificate in your phone device (in case you want to download the XAP and install directly to your phone), link to download the source code, link to download the published package and a link to share the app by email.

 

16. Download your first Windows Phone app build with Windows Phone App Studio

 

In general, download the “Publish Package”, so that, you can upload it to Windows Phone Store. If you have any Windows Phone device, just scan the QR code and install directly in your phone.

 

If you want to download the source code to see what it actually did, you can do so here but frankly speaking, it’s very difficult to understand the whole project structure.

 

It was a very long post. Isn’t it? But yes, you will get a basic idea to create a RSS reader application for your blog within just 15 minutes. In case you want to go with the default settings, it will not take more than 4-5 minutes. I hope that the post was useful to you to understand how to create a Windows Phone app from scratch using the App Studio. Let me know your feedback. Don’t forget to subscribe to my blog and connect with me on Twitter and Facebook. Cheers. Enjoy using the App Studio beta.

18 comments

  1. Replies
    1. Thank you for the feedback. I hope the explanation was easy enough to understand it in better way.

      Delete
  2. For some reason the rss reader refuses to read images/featured images from my Blog. Any solution?

    ReplyDelete
    Replies
    1. Hi Hakeem,

      That could be due to RSS format. The syndication API is unable to process your RSS. Try with a different RSS. You could try this one to test:
      http://feeds.feedburner.com/kunal2383

      Regards,
      Kunal

      Delete
    2. I have tried creating a feedburner RSS feed and It still fails to work. This is my rss feed url: http://feeds.feedburner.com/windowsphoneplace/feeds

      Delete
    3. Hi Hakeem,

      I checked the RSS feed that you shared. It does not have valid entries of images and hence a default image comes up when you load it in the app. Try configuring your feed or create a new one if your blog post has valid images but not loading in this one.

      I hope, this answers your query.

      Regards,
      Kunal

      Delete
    4. I tried recreating a feedburner feed at http://feeds.feedburner.com/windowsphoneplace/feedburner and it still fails to work. Maybe its a wordpress issue. This has been holding me back for awhile

      Delete
    5. That could be an issue there. I can not see any images in your existing feed. BTW, the new feed address has some other issue. Try running the feed directly in browser and check for the exact problem.

      Delete
    6. I try to create one app RSS... The problem happens in blogger too. When I change in app the view, all the options doesn't function properly.

      I try to make in any ways, but everytime I have a error...

      the site update the layout and now get more errors...

      I don't know how to make this happens... =[

      Delete
    7. I use http://feeds.feedburner.com/ but in blogger I forgot to change the RSS in settings.

      This works perfectly. Only images lost their quality, but no problem.

      I use the new link I had created in feedburner and now it's works !

      thanks!

      Delete
    8. Great. Glad to know that Djaysel Pessôa.

      Delete
  3. For those who use Wordpress, it is good to know featured images are not included in your RSS feed. But there exist some plugins doing it for you ;) (just search for "featured image rss" or something similar)

    ReplyDelete
  4. I personnally do have a problem with the {Context.Content} since it does not show the from the RSS feed but . It can be annoying but you can pass that problem too by removing the (seems like content just looks for the first big part of text or something like that)

    ReplyDelete
  5. I am a WP developer and found this article pretty easy to comprehend, good work.
    Although I think this tool is very limited it gives a good start to enthusiasts, if someone is serious about developing for windows phone I suggest he/she get the proper SDK.

    ReplyDelete
  6. Hi? My rss details page displays a summary of the content with 3 dots at the end[...] instead of the whole article, what could be the problem?

    ReplyDelete
  7. Hi? Ho do I display the content in the info page in full, and not as a summary?

    ReplyDelete
  8. In my case I tried but nothing shows up now in rss feeds section of my app. But at the time of creation half post with no images were shown and now completely blank. My feeds here: feeds.feedburner.com/Igadgetsworld . And ya it's hosted at WordPress and I came to know app studio is not working with WordPress feeds. But half feeds were shown in others case. Y I am seeing a blank screen and no feeds??

    ReplyDelete
    Replies
    1. That's because, WordPress feeds are not supported in AppStudio.

      Delete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top