Composite C1 CMS for Windows Store Apps

Learn how to do Content Management for your Windows Store Apps. Create a Windows Store Application with Content without knowing anything about C#. Maintain the Application content from an Azure Website.

Learn how to do Content Management for your Windows Store Apps. Create a Windows Store Application with Content without knowing anything about C#. Maintain the Application content from an Azure Website. 

We will be setting up an application like this, where content is powered from a Composite C1 CMS.

Getting the website online.

I am going to show you two ways of creating your websites, the click and play and the click-click and play version. The first method is using the Gallery (Composite C1 v.3.2) and in the other one, we will deploy a beta build of the 4.0 version that is going to be release in a few weeks.

I will be speaking about Composite C1 on Azure. (Still have to decide what would be cool to show).

Gallery

Assuming that you know just a little bit about the WindowsAzure Management Portal you should create a new website from gallery.

Then find the Composite C1 CMS entry and create your site.

When the setup is completes you can navigate to the chosen url and start the setup of a Composite C1 Site. I will cover this part after the introduction to publishing from GitHub.

Github

I pushed the latest of the 4.0 build to Github www.github.com/s093294/composite-c1-4.0 that I will be using for showing another easy way to deploy a site. Create a new Azure Website using the Custom Create entry. If you want to do this, just fork the repository.

After pressing create, Windows Azure will do its magic and under Deployments, the deployed website from Github is available.

I used Visual Studio Tools for Git to push the Website to Github and forgot about default settings for the .gitignore. This means that the /bin folder will not be pushed resulting in a Runtime Error on the site. Updating the .gitignore and pushing the dlls to Github, Windows Azure automatic detects the newly changes and redeploys.

Setting up Composte C1

Either way, if you used the gallery to get a 3.2 site or used git to get a 4.0 site. The configuration process is the same. You should see a screen like the following when you visit the site for the first time. I am continuing with the 4.0 site from here, having the new Twitter Bootstrap starter site available. You should try it out :)

I will be using the new Twitter Bootstrap Starter Site: Open Cph Starter Site. If you are using 3.2, just select the ASP.Net Razor Based starter site. The content we will be providing for our application in a short while fits the theme of the Open Copenhagen. The site is live at http://c1gitmagazine.azurewebsites.net/ 

Assuming that you have not seen the Composite Console before, I will be showing a few more images. If you already know how the console works, locate the two packages:

  1. Composite.AppFeed.Provider.Magazine
  2. Composite.AppFeed.Server from Composite.Tools. 

In the System Perspective, you can find Packages -> Available Packages -> Composite.Tools and you should see the two packages mentioned before. This goes for both 3.2 and 4.0 sites.

Double Tap those two and press the Install button at the TabControl. Remember to install the AppFeed.Server first. Going to the Content Perspective will show you the newly created groups and articles like in the image below where I am editing the Copenhagen Metro article.

If you have made it this far, we will move on to the Windows Store App.

Marcus Wendt, my boss, made an awesome app that is ready to download and press F5. Fork it from here:   https://github.com/ CompositeC1/Win8MagazineApp

Time to create a Magazine App.

In the solution, you find an option.js in the js folder that you can modify as I have done here:

Running the App should give you some views like the following, notice the public transpotation that you saw just above:

Submitting to the store.

To avoid the classical not approved trap of not providing a privacy url, we will use our new CMS to create this page. Notice how we already did set the settings in the options.js file for http://c1gitmagazine.azurewebsites.net/privacy. Let us create this page.

Going back to the Console at http://c1gitmagazine.azurewebsites.net/Composite/top.aspx and right click "Front Page" under websites, Add Page and give it the name privacy. The Editor pops up and you can now enter your privacy statement. Save and Publish the page.

Conclusion

That is it folks, you have now seen how we leverage CMS for Windows Store Apps. I also hope you enjoyed seeing how I used git to publish. Now there is one flaw right now, as soon as i push a change to my git. Ect when i update it to a new trunk build, WindowsAzure will notice this and redeploy it and I can start all over. In my next post, I will show how we create a backup of the live website, setting up a staging site locally using WebMatrix and IIS Express and redeploying it directly from WebMatrix. Then we can remove the git deployment and the site will work as any other hosted site.



comments powered by Disqus