Friday, March 13, 2015

Scrum Paper Airplane Game


This is a well-known scrum game that's been around for a while already. But is one of the games that everytime it is played, it is played differently.

How we did it

Our game took 2 hours. We started with having only the Product Vision (the picture above shows that I had the vision to build an Airbus A-380). We created some Epics out of it and went into a initial Grooming where we broke down the Epics into User Stories, the team estimated them and I, as a Product Owner, prioritized them.

Right after, we jumped into the planning, where the team committed to a certain amount of Story Points, and the Sprint started.

The Sprint

We timeboxed every meeting. 
  • Grooming and Planning took 3 minutes each
  • Sprints were of "2 days", every day lasting 5 minutes
  • And every day we had a quick daily (1 additional minute)
  • At the end of the Sprint, we had the review 3 minutes
  • The Retro: 2 minutes (so they could identify some improvements and actions)
  • And then we started with the next Sprint
We did it in 4 Sprints (1 hour and 40 minutes more or less)

As the initial Grooming took a while, we only had 8 minutes for a final round to see what were the learnt lessons.

Some Pictures








Some Insights

I found it very funny, and participants too! If you want to present it, it is so flexible that you can really decide which Scrum situations you want the participants to face and learn:
  • Starting a project from scratch in Scrum is a challenge when you are not used to the methodology
  • You can define unclear USs and then reject the Increment to make them aware that they have to clarify stuff before committing to it (or either reject it)
  • Time is short, so the team has to really learn quickly to work together and self-organize
  • It is very interesting to see how they create actions in the retrospective, and even, given the time constraint, invest time on improvements that finally pay off!
  • In this concrete case, they even asked to adjust the length of the Sprint to be more efficient.
The airplane has no wheels, seets were just drawn lines on the inside, the wing brakes are post its... but let's be honest, I did not expect that they could do that much! The team impressed me!

We wanted to throw it out of the balcony in the center of Barcelona and see if the most important requirement was met ;) but with the MWC ongoing and all the security around, was not the smartest idea!

Hope you like it!

Sunday, March 8, 2015

Business Value Game


The Goal

This goal of this game is to help to understand that there is a whole world of considarations to take when it comes to balance customers and projects.

The Game

The idea is simple. There are some customers (see them on the board in the picture above) which every iteration will send the company a new request. Every request can have one or more features. 

Customers happiness might change. Every request will bring a certain level of happiness to the customer. Whenever an iteration is gone and a customer does not receive any completed request, their happiness goes down. If they reach 0 happiness, they will look for a different supplier.

The trick here is that it is not only about their happiness, but also about the earnings and the business value. 

Together with the Customers' requests cards, there are some investment cards (like, more velocity for the dev team, more release capacity), which are nice to see the ROI.

Teams here are not developers. Participants become Account Managers (all from the same company). And they have to come to an agreement on which request to prioritize, even though it is from another Account Manager and has not a personal benefit, but a global benefit.

After every iteration, every team has to sum up how much they earned considering customer happines, incomes, ROI and Business Value. The team that gets more money in the end, wins.

One trick of this game is that, sometimes, there are customers which are just not worth it. Another trick: bring chocolate for the participants!

Pictures








Especial Mentions

This one was prepared with my good friend Juanan as well, but he could not attend. If I remember correctly, his wife was giving birth in that moment!

Scrum Lego City Workshop


This is the first post I'll be making about Workshops. In this case, this was the well known Scrum Lego game. The idea behind is about teaching Scrum basics while having some fun building a "city" with Lego.

The Game and the Boards

As a coach you will play the Product Owner role during the Workshop. It is important that you have your User Stories ready and printed (one per paper sheet). Create a Size Board in the wall where the team (participants) can put the User Stories according to their estimations. 

Then create a Scrum Board for all the teams where they can put into the Sprint Backlog the committed User Stories (in the picture below, it is the board in the far-away wall, where the rows represent sprints and the columns represent teams).

I hope the picture is understandable :)


My suggestion is that teams compete between them but they build together the same city.

Estimation Round

Even though teams are competing, let them estimate all together to better have references on sizes. Grab the User Stories one by one and let them put it into the wall right below the size they think it has.


Once the User Stories are estimated, start the Sprints.

The Sprints

Run a Sprint with all its events:
  • Let them plan and commit to a Sprint Backlog
  • Work
  • Do a Sprint Review
  • And then a short Retrospective
As a coach you want to teach them several principels, and the Product Owner role will help you to. Avoid giving very detailed User Stories so they learn to ask and clarify. Be picky when accepting their work in the Sprint Review. Randomly exclude someone from the game for a couple of minutes like if she had a training or is just sick (this kind of things have a big impact on the capacity of the Team during a Sprint).






Closing Debrief

Conduct a Closing Retrospective where everybody can point what she has learnt from the game and how to apply it. Feel free to raise real-like situations and open discuss about them. For example, as you did not provided detailed enough User Stories, what could the team have done?


Especial Mentions

I would like to thank my colleague and friend Juanan with whom I prepared it. He is just an awesome Agile guy!

Saturday, January 10, 2015

Visual Studio Project Templates for Ionic Framework


[UPDATE]
This extension was removed from Visual Studio Gallery in favor of Ionic's official one.


On my previous post I wrote about how to start a project in Ionic Creator and export it to continue with development within Visual Studio.

Today, I would like to introduce the Ionic Project Template Visual Studio Extension that I created to simplify the process and be able to have a project already setup with the basic Ionic templates from Visual Studio (of course it is not a replacement for Ionic Creator, there you can drag and drop more components and set their style, but once you get familiar with Ionic, you would probably appreciate to be able to start the project quicker and apply the style yourself). You can find the extension in the Visual Studio Gallery.

Remember that you need to have the Visual Studio Tools for Apache Cordova installed first.


How to Use the Extension

Once you have the Visual Studio Tools for Apache Cordova installed, and the Ionic Project Templates extension installed (remember to restart Visual Studio after installing the extension), just go to the File menu, then New, then New project.

The New Project dialog appears (as in the picture in the beginning of the post). Under Javascript you should now see the Ionic Project Templates installed. Just select the one you would like to start with and give it a name, a path where to save it, and optionally add it to source control as you would do with any other project.

About the Templates

The templates will provide you the basic structure that you would get when exporting them from Ionic Creator. Well, maybe a little bit more. Some are tuned and with namings to help you understand what is what (like the tabs template). They also include the project structure (Ionic Creator only gives an index.html unless you export it using the Ionic CLI), with all their dependencies and the code adjusted to run with the Visual Studio Tools for Apache Cordova. Version 1.0 of the extension comes with Ionic's Beta 14.

There are 5 templates included in the VS Extension:
  • Blank Ionic App
  • A template with a built-in login page
  • A template with a built-in side menu
  • A template with a built-in signup page
  • And a template with built-in tabs

Collaborate

Do you want to improve the templates and keep the extension up to date? Feel free to join the GitHub project!

In case you have comments or questions, feel free to leave a comment either here or in the Visual Studio Gallery page.

Hope it helps!

Thursday, January 8, 2015

Ionic Creator and Visual Studio

Introduction

This time I would like to share how to easily start from scratch an Hybrid App using Ionic Framework, AngularJS and Apache Cordova. We will have two main tools for this guide: Ionic Creator and Visual Studio with Apache Cordova Tools installed.

Ionic Creator

The guys from Ionic Framework are doing a great job and developing a new framework and backend services with a very good result in a record time. They've been running for about a year and it is impressive what they've done. 

Ionic Creator is not as Ms Blend for XAML apps, it is more like the Visual Editor you find in almost every IDE.Then, what is especial about it? In the Ionic guys words: "Lets you rapidly mockup and prototype a real mobile app in minutes". More than that, you can just export it as a project and start working on the code and do the needed bindings. And that's it.

Start the project

Go to the Ionic Creator site and log in (sign up if you do not have an account). Now, we will create a project. Just give it a name and select the template you want to use.

Look at the picture below. This is how it should look like. On the Left side you have the Pages pane, where your Tabs hierarchy in this case was created. Below, you have the available components to drag to the content area (located in the center of the screen, you will recognize it as it looks like an iPhone screen). On the Right side you will find the Properties pane. It will display the properties of the selected element. Just above it, you will see a switch between Edit and Test. This will allow you to switch between edition mode (the one we are now) and the "preview" mode, to see how what we've done would look like.

Creating the UI

On the Pages pane open the Tabs node, and for every Tab node remove everything but its Content node. We only need two tabs for the sample, so remove the third one. Now, we are going to change their title and icon. For doing this, click on one Tab node. Notice that the Properties pane has been updated and now you can enter a title and select an icon. I called them "Attendees" and "Register", and selected the "ion-ios7-contact-outline" and "ion-ios7-bookmarks" icons respectively.

If you toggle to Test, you should see something like this:

Adding Extra Pages

Go to the Pages pane and click on the plus to add a new one and select the Blank template. Change its Title to "Attendees" and its Routing URL to "/attendees". Note that now that the Attendees page is selected, if you enter the Test mode you will preview this page, but if you have the Tabs page selected, you will preview the Tabs page instead.

Do exactly the same steps now for creating the "Register" page, but instead of selecting the Blank template use the Sign Up one. You will see a form with Name, Username and Password fields and a button to Sign Up. Feel free to play around with the style of the form (for instance, change the Type attribute of the Username to Email and the Type attribute of the Password to Password), but don't forget to rename the Routing URL to "/register"!

Adding Content to the Pages

As our Register page is already fine, let's add content to our Attendees one. We want to see a list with all the Attendees the Workshop will have. Select the Attendees page in the Pages pane and, from the Components list, drag and drop into the View a List.

Now, select the Item Thumbnail component and drop it in the List you just dropped in the View. Do it several times. Now we have a strange list with a mix of regular list items and thumbnails list items. In the view, select the regular list items and delete them using the "x" that appears on the top-right corner. Change the properties of the thumbnails to make them appear like they have data. It could end up looking something similar to this:

Starting to Code

Exporting from Ionic Creator

Now, on the header bar of the Ionic Creator, click on the second button (circled arrow down) that is right beside you project's name. This is the Export button. It will allow you to get your project in three different ways: using the CLI, downloading a ZIP or just copying the code. Use the ZIP option so we can use it later.

Getting Visual Studio Ready

If you didn't do it before, you will need to install the Visual Studio tools for Apache Cordova. It will install a lot of stuff for you.

Once it is installed, you will have a new project template under the Javascript language. Open Visual Studio, and create a new project for Javascript -> Apache Cordova Apps. See the picture below:

Bringing the Ionic Project into Visual Studio

Now, it is time to bring what we've done in Ionic Creator into Visual Studio. Open the index.html file that Visual Studio created for you and now let's merge it together with the one Ionic Creator generated.

From Ionic Creator's index.html file, copy the following things to the Visual Studio's index.html file:
  • Within the <head>:
    • The meta viewport tag.
    • The style for google map container (only if you will need it. If so, I would suggest to move it to your css folder instead anyway)
    • Import the references to ionic.css and ionic.bundle.js (you don't have them yet and Visual Studio will warn you. We will fix it later)
    • Add a reference to app.js (which does not exist yet)
  • From the <script> tag:
    • In Visual Studio, create an app.js file and copy there all the javascript content from <script> tag in the index.html that Ionic Creator generated.
  • Within the <body>:
    • Just copy the <body> itself with all its content. Be careful! You will still need the two references (cordova.js and platformOverrides.js) that Visual Studio created for you within the <body> tag. Make sure you keep them!
Now it is time to download the missing things:
  • ionic.css (click the download button)
  • ionic.bundle.js (comes in the zip from the link above):
  • cordova.js (there is nothing to do with this. It will be created by Visual Studio the first time you succesfully compile).
Important! If you take a look at the index.html file you will notice that the references are expecting the ionic.css and ionic.bundle.js in the "lib" folder, which does not exist. Create it and copy the files there, or organize them as you want (but update the reference path in the index.html!)

If you run the project using Ripple, you should see something like this:

I agree with you, not very impressive so far. Let's try to get our two pages within the two tabs, to see the name of the application in the header and to give a little bit of color. But first, let's do it understanding what was autogenerated.

What is the Generated Code


In the <body> tag, the first thing you will notice is the <ion-nav-bar> and the <ion-nav-view>. Remove both leaving the parent <div> empty, as we are going to move some content here.

You will also find 3 <script> tags with an Id and a Type (templates in this case). The Id is the name of the page. Take the content of the first one (<ion-tabs>) and place it within the <div> we just emptied. The <script> that is now empty, can be completely removed.
The <ion-tabs> has 2 <ion-tab>. Each of them has an <ion-content> tag. Replace them with <ion-nav-view name="">. As name, for the first one put "attendees" and for the second one "register".

You have to also add the attribute ui-sref for every ion-tab like this:
<ion-tab title="Attendees" icon="ion-ios7-contact-outline" ui-sref="attendees">
<ion-tab title="Register" icon="ion-ios7-bookmarks" ui-sref="register">

The ui-sref attribute points to a state configured in the AngularUI Router, we will see it in the app.js file.

For the other 2 <script> tags, rename their Id to "attendeespage.html" and "registerpage.html".

Go to the app.js file. It is creating and angular module called "app" with Ionic as a dependency. The next thing you will see is the ".config". Ionic uses AngularUI Router and, as we said, uses the concept of states. Defining states is the next thing you find. You probably already noticed that the tamplates URLs are not correct because we changed them in the index.html file. Let's remove the one that belongs to the tabs (as it is not a template anymore, but our main view container) and change the other two accordingly to "attendeespage.html" and "registerpage.html".

Let's do a short explanation here on states:

  • they have a name (the first string after the opening parenthesis). Remember the state we are pointing to with the ui-sref attribute?
  • they have a URL. It helps us to create the nested navigation if needed (and even indicate that parameters will be passed). In this case, we don't have that scenario, so we forget about it.
  • the templateUrl is the Id given to the template we want to use to represent the state graphycally.

Yes, you got it right. we need to do something with the names of the auto-generated states. Call them "attendees" and "register". In this way, the states names will match the ui-sref attributes of the ion-tabs.


The URLs will remain as they are (as we gave them the name already in Ionic Creator).

The last change is the "templateUrl". The "attendees" state would completely look as follows:

             .state('attendees', {
                  url: '/attendees',
                  views: {
                      attendees: {
                          templateUrl: 'attendeespage.html'
                      }
                  }
              })

If you remember, we said in one ion-tab that it would contain an ion-nav-view named "attendees", as the view we just defined for the "attendees" state. And we are saying that the template we will use for displaying that view is the content of the script with Id "attendeespage.html".

Conclusion

This is the result we've got so far.

Now, just go ahead and play with the style, with angular, remove the fake data and do actual bindings, organize the code a little bit better than we've done, add some Apache Cordova plugins to access the hardware, connect to backend services like Firebase or Azure Mobile Services, and, of course, deploy it to the different app stores. If you do it, come back and let us know what you've created ;)

Hope it helps!

Special Mention

As I used them for the sample app, I want to give special mention to my friend Drew Simmie, a great Personal Development Coach settled in Toronto. He is working close with the goverment to help young enterprenours to learn and act. You have to meet him. He will just touch you and inspire you.

And, of course, to my lovely wife, Denisse. She is just the best thing that could have happened in my life. I bet you will like her designs!

Wednesday, January 7, 2015

Scrum Introspective (I mean, Retrospective)


Introduction

Restrospective is one of the official meetings that Scrum considers. It is a timeboxed meeting where the Scrum Team gathers together at the end of every Sprint to look back and think about how things went.

Though the meeting is official, there is not an official "template" for it. It is on the Scrum Master to host it and define which format the meeting will have.

Format

Personally, I like to do different exercises for every retrospective. In this manner, it is easier to get the team involved (meetings are boring for developers and the Scrum Master has to make them attractive for the team, as he is the facilitator)

This article is not about the different exercises (maybe I will share a series of Retrospective exercices, but, in the meantime, you can take a look at the Restrospective Toolbox my colleague Jimmy did as part of his Master Piece, really great job!).

Common Mistakes

This article is about the things that could go wrong, which are a lot: not every team member participates and gives his opinion, finger pointing, not having a clear goal for the meeting, leaving the meeting without any actions, not following up on the actions agreed on the last Retrospective... but, the point I want to stress today, is to keep the focus within the team's impact area as a rule.

Making Excuses

That is what I mean with keeping the focus of the meeting within the team's impact area. I've seen too often retrospectives going away only talking about what people not belonging to the team should have done, as if the team's actions had no impact on the output of the Sprint. This is so wrong!
Do not waste time complaining about what managers should do, how the Requirements Engineer should work, or how QA should give you feedback. Focus on how the team did, what can be improved, what should stay the same, what should the team do more, and so on.

But I said "as a rule", and it means, that there can be exceptions ;)
Sometimes it is needed to point out some situations. Maybe managers interrupt developers so often day after day for weeks now, or maybe the Requirements Engineer does not deliver his work on time so that developers know what the constraints are. It is fine to point this kind of things out when they become the usual scenario, to set some action, and let the right person remove the impediment itself (most likely the Scrum Master). But it is not ok to waste Retro after Retro complaining the whole meeting about it. It must be the exception.

That is why I think it should be called Intro-Retrospective, because a team should focus (as a rule) on what they can have an impact on. 


Monday, January 5, 2015

Dev Environment for Hybrid Apps


Background

Just to let you know, I am a .Net developer certified for Store Apps development (now call Universal Apps). It means that most of the time I spent on creating mobile applications was native development. It also implies that I feel very comfortable on my Windows 8 machine with my beloved Visual Studio!

Hybrid Apps Development - Ionic + AngularJS

So, now called Hybrid Apps are supposed to run cross-platform (mostly iOS and Android, and sometimes on other environments like Windows Phone, Windows 8, Firefox, Blackberry ... )

Switching from native Store Apps to Hybrid meant I had to say goodbye to C# and XAML and adopt HTML and Javascript. 

I started to look for the right things to use. A quick search at Google will probably lead you to jQuery Mobile, Bootstrap, Kendo UI, Onsen UI... and a lot more. But, I have to say, that after giving a try to almost all of them, Ionic Framework was my winner.

Why? Several reasons: 
  • It is very well integrated with AngularJS and you can forget about some issues you will find with jQuery Mobile for instance. 
  • The look and feel is great just out of the box. Now, with update 14 (the last beta) platform specific magic is about to happen!
  • Documentation is excellent. Very easy to get started and familiar with.
  • Support is great.
  • They keep going together with AngularJS evolution. But that is not all, as they are creating other products around like the Ionic Creator to make Ionic development easier.

Hybrid Apps Dev Environment

Cool, having decided what technologies to use is one step, but now, you have to decide your setup for your dev environment. If you are like me, a Microsoft guy, you are going to have a hard time! (not really now).

Your first option will be Visual Studio (of course!). Now, with the Apache Cordova tools for Visual Studio they've made it easier. You can code, configure your plugins, debug and run (either using the emulator or a real device - not that straight forward when talking about iOS) from your Visual Studio.

But, what if, like me, you don't have the same enviroment wherever you go? Visual Studio is only installed on my work laptop ( I have no personal computer at home beside my wife's... I know, I am strange). As I do not want to polute her machine, I have a second option: Code Anywhere! I can just log in to my account and keep writing code on my wife's laptop's browser. Or even better, I can just turn on my iPad (yes, I said I am a MS guy but have an iPad, but I have my reasons for that - testing!), start the Code Anywhere app and keep going (there is a drawback here... the Code Anywhere app does not fully support keyboard: arrows don't work. They promised to fix it in the November 2014 release, but there was no release yet)

You might be thinking about how to move code back and forth between both. There are two options here: you can copy paste (just kidding, forget about it), or use a Git repository (this is specially helpful for making builds, but we will talk about it in the next section).

Testing your Apps

As I said before, you can run the emulator or the App on a device directly from Visual Studio. This is only "true" for Android and Windows devices. Ok, it is also true for iOS, but Visual Studio alone won't do the magic. Now you need a Mac machine listening, and, I personally do not have it (yet).

Now you probably understand why I have an iPad. The other alternative to test it as a native App beside using Visual Studio is using PhoneGap Build. Still you will need your Apple Developer Certificate when building for iOS devices.

If you are not using plugins at all, you can run it directly from CodeAnywhere as well. If you are in the browser, a new tab will open with your App. If you are using the iPad, Safari will be launch and you will see your App there.

Conclusion

Developing Hybrid Apps is funny and possible switching from different environments. It does not matter where you are and what device you are on. Technologies like Ionic and Angular make it easy to deliver a high quality app with a beautiful modern look and feel. All the development process will be almost free (as Visual Studio has released its community version now). But when it comes to test it on a real iOS device, you will need either a Mac or an active iOS Developer account. 

Feel free to leave your comments and share your experience or your setup. I am sure you will have some hints to improve my current scenario. 

Hope it helps!

Sunday, January 4, 2015

Scrum in the Dev Process - Part I (Dev phase)


You might be familiar with the picture above. Agile methodologies (I will put the focus on Scrum here) are fancy and trendy for a long time now, but still teams struggle to integrate it in their heavy development processes.

In these series of articles I would like to give only a few insights on how Scrum fits in the different phases of a project. Part I is about the development phase.

Development Phase

Development phase is the one where the development of new features of the software takes place. It usually has several Releases, having each one several Sprints (the number of Releases and the number of Sprints per Release will vary depending on the size of the project).

During this phase, the Scrum Team (and some other "traditional" roles that you can usually see in projects applying Scrum - like the Architect or the Requirements Engineer) focus on bringing forth an incremental version of the product, following the picture above. 

Roles You Will Probably Need

Applying Scrum, pure Scrum, you will only have the Scrum Team(s): Product Owner, Scrum Master and the Development Team.

But, of course, you will need more: Quality Assurance (Testers), an Architect (ok, you could give the decission making power to the most experienced developer in terms of design) and a Requirements Engineer I would say (we can discuss in the future who could take this role and how much time of a person is sufficient).

Of course, the number of Teams, POs, SMs, Developers and Testers you will need depends on the size of the project: you could have 50% a Scrum Master or 6 if you have 6 distributed teams.

Scrum Flow

The Scrum flow is well known (and already depicted in the first picture above). But the picture above is very general. Where are the other meant-to-happen meetings and who takes care of what?

Sprints are meant to be short to get early feedback. It means, Developers have no much time to get a new potentially shippable version of the product (2-4 weeks!). Boosting developers is a key factor to succesfully achieve this goal. Therefore, Requirements, User Stories, Design and Test Cases should be ready a little bit ahead (just a little! remember we're agile).

Take a look at the following proposal, the idea is that, when the Development Sprint starts, developers have everything they need to start coding:

(I know what you are thinking, "Sprint Dev + 1" is missing, but for the purpose of this article, the picture is fine until that point)

So, this would be one option to be sure that everything that is needed for development is ready on time:
  • Requirements Engineer and Product Owner are two Sprints ahead and have enough User Stories in the state of Ready in the Backlog
  • Architect and Test Engineer prepare before the Development Sprint (when it makes sense) the Architecture Design and the Test Cases
  • When Sprint Planning arrives, developers have all they need to start the User Stories as they are ready (Mockups, AC, Reqs), Architecture was done before and is known by Devs, and they also know thanks to the Test Cases what scenarios are meant to be covered.
The following picture shows how the calendar of a Sprint would look like according to this process:


Some things to mention here:
  • Of course, Daily Scrum meeting is included, I was just too lazy to paint all the lines :(
  • At Sprint Change, Sprint Review, Sprint Retro and Sprint Planning are held
  • Near to the end of the Sprint (not mandatory this point in time, but I like to have, if they fit, all the meetings in the same day to avoid disturbing team members from their work), following things should happen:
    • Ready User Stories should be handed over to Architect and TE to get them ready until planning. It can be with a short meeting, or with no meeting at all if User Stories are clear enough and the maturity of the proccess / team has shown that both, PO and Team have the same understanding of User Stories (it barely happens though!)
    • From time to time, the team should Groom the Backlog and Estimate it. I see it as a good chance to show the Dev Team the Desing and Test Cases for the upcoming User Stories, so, when they arrive to the planning, they already know the candidates User Stories and "what to do" with them.

Remember this is just a process and that every project, team and setup is different. I will keep going with these series of articles on "Scrum in the Dev Process" with the Pre-Dev phase. In the mean time, feel free to leave your comments and impressions.

Hope it helps!

Wednesday, February 13, 2013

Deploying a Lightswitch app in a 2 Tier scenario

Welcome back everybody!

After struggling a little bit with Lightswitch deployment, I would like to share straight steps that I noted down during the process in the past days trying to get it done.

Development Scenario
Visual Studio 2012
Ligthswitch C# app
Deployment mode: Desktop

Production Scenario
We will have a server (for testing purposes I created a Windows 7 VM) where the Database is going to be hosted in a SQL Server Express instance.  The app will be installed in this server that will act as a client also, and in other network computers (clients).

Creating the deployment package
1.      Go to the Solution Explorer and double click the properties node of the project.
2.      Click on the Application Type tab and click the Publish button.
3.      Follow the Wizard paying attention to:
a.       Application Type: Desktop
b.      The application will be hosted locally
c.       Select the path where you want VS to drop the output (installation files) and select the option "Create a script file to install and configure the database"
d.      Write a default connection string for now (if you already know what it should be like, write it). Something like this should do (replace ChosenDatabaseName with the name you will give to your database):
Server=localhost\SQLEXPRESS; Database=ChosenDatabaseName; Integrated Security=true;
e.       Check the "Generate the SQL database script and specify the name to the database"
f.       Select what is most appropriate for you with the prerequisites
g.      Specify a certificate if you have it
h.      Publish
4.      Go to the output folder and grab the generated files. Copy them to the server

Configuring the Server
1.      Install the prerequisites (at least, .Net Framework 4 has to be installed. This, you will have to, or won’t have to, depending on the OS you are targetting)
2.      Install the latest Silverlight version
3.      Download MS Sql Server 2008 R2 Express
5.      Install them
6.      Put the Sql files that were included in the output in C:\ and execute them. For example, to create the database, you would move the MyApp.sql file from the path were you placed the output to C:\, open a command line window and type the following:
sqlcmd  -S  ServerName\SQLEXPRESS  -i  C:\MyApp.sql
Wait until the process finishes.
7.       Now, if you did not write the actual connection string in the publishing wizard, modify it in the web.config file that is found among the output files inside the Application Files folder. The connection strings section should look something like this:
<connectionStrings>
    <add name="_IntrinsicData" connectionString="Server=ServerName\SQLEXPRESS;Database=DatabaseName;Integrated Security=true;" />
</connectionStrings>
8.      Execute the Setup file.

If you configure the web.config like shown above and then execute the setup in any other machine connected to the same network, now you have your scenario clients-server scenario implemented (make sure your Server is reachable from the clients).

Final Words
Visual Studio Lightswitch is a great tool that saves you a lot of time and makes it easier to write business applications, but deploying your app can be a little bit tricky, especially the first time. As always, please feel free to write your comments, doubts, suggestions, concerns, whatever you want =D (if it is related of course). Hope it helps.

Thanks for reading :)

Wednesday, May 23, 2012

Cannot Write to the Registry Key


Welcome back to my blog!

I've been very busy with some projects that I almost forgot I have a blog :-S
Maybe I will share some stuff in future posts about the WP7 and Windows 8 projects I've been working on.

But for today, just one small tip for writing in the Windows Registry.
RegistryKey windowsRegKey = Registry.LocalMachine.OpenSubKey("pathToTheWantedSubKey");

If you then want to add a sub key, or a value, and write something like this
windowsRegKey Registry.LocalMachine.OpenSubKey("nameOfMyNewSubkey");
you will get an error saying something like "Cannot Write to the Registry Key".

First thing that comes to mind is if the application is running under administrator privileges... this is also needed, but is not the only point. Whenever you open a Registry Subkey use the overloaded method, and pass a true to specify that you will edit it. Something like this:
RegistryKey windowsRegKey = Registry.LocalMachine.OpenSubKey(ShutdownEventTrackerSubkey, true);

Hope it was helpful. As always, feel free to leave any comment, question or suggestion. Thanks for reading!

Thursday, January 5, 2012

Silverlight Overlay Notification


Welcome back to my blog!

This is the first post of 2012, so just before getting started, I'd like to wish you a happy new year.

Introduction

This time I want to share something very simple for Silverlight. I do not like applications that continuosly bother me with popup messages to make me aware that something happened. I do not like a message box coming up saying "Changes were saved succesfully" right after pressing the save button. I want to keep working or doing some other stuff without being interrupted. I would like to be told that it worked if it allows me to keep going, and of course, I want to know if something went wrong.

You know during Christmas a lot of messages full of best wishes are going around . I sent one of those to one friend and after a while an Overlay Notification appeared at the bottom of my Galaxy's screen saying "Message received by [contact]". Then I realized that this is the kind of notification that I, as an user, like. Therefore, is the kind of notification, that I, as a developer, would like to use henceforth (unless until I find something better :-D ).

The Code

Let us create a User Control. Our control will be the already mentioned Overlay Notification. We'll make it appear and disappear after a while without user interaction. This could be the XAML code:

<UserControl x:Class="SilverlightTestApp.Controls.OverlayNotification"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <UserControl.Resources>
        <Storyboard x:Name="ShowMessage" Completed="ShowMessage_Completed">
            <DoubleAnimation
            Duration="00:00:06"
            From="0.00"
            To="1.00"
            AutoReverse="True"
            Storyboard.TargetName="Popup"
            Storyboard.TargetProperty="Opacity"/>            
        </Storyboard>        
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" >
        <Border BorderBrush="Black" BorderThickness="1" MinWidth="150" MaxWidth="550" MaxHeight="75"
                   CornerRadius="4" Background="Transparent" Visibility="Collapsed" Opacity="0" x:Name="Popup">
            <TextBlock x:Name="lblMessage" HorizontalAlignment="Center" TextWrapping="Wrap" MaxWidth="400" MaxHeight="75"></TextBlock>
        </Border>
    </Grid>    

</UserControl>


We have a Storyboard that will be triggered whenever we want to show the Notification. It will last 6 seconds (plus another 6 because of the AutoReverse=true). And will change the Opacity of our notification area to give the impression that it fades in and out.

Then we have a Border with rounded corners. We'll have to make it visible whenever we want to show the message and hide it when the Storyboard is done. Inside of this Border we will have a Textblock where our message will be displayed.

Let's take a look at the code behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace SilverlightTestApp.Controls
{
    public partial class OverlayNotification : UserControl
    {
        private string _message;
        public string Message
        {
            get
            {
                return _message;
            }
            set
            {
                _message = value;
                lblMessage.Text = value;
                Popup.Visibility = Visibility.Visible;
                ShowMessage.Begin();
            }
        }

        private System.Windows.Media.Color _color;
        public System.Windows.Media.Color Color
        {
            get
            {
                return _color;
            }
            set
            {
                _color = value;
                var newBrush = new SolidColorBrush();
                newBrush.Color = value;
                lblMessage.Foreground = newBrush;
            }
        }

        public OverlayNotification()
        {
            InitializeComponent();
        }

        private void ShowMessage_Completed(object sender, System.EventArgs e)
        {
            Popup.Visibility = Visibility.Collapsed;
        }
    }
}

We will expose at least the Message property (we also have the Color property for the font). Notice that everytime we set the Message property we update the Textblock's text, make the Border visible and trigger the Storyboard. Also noticed that we handle the Storyboard's completed event to hide the Border.

To use it, just add this new User Control into the view where you want to use it in the same way that you would place a Textbox or any other control:

<my:OverlayNotification x:Name="myOverlayNotification"/>

Then, whenever you want to show a Notification, just set the Message property with the message you want to display:

 myOverlayNotification.Color = Colors.Red;
 myOverlayNotification.Message = "This is a test notification";

Final Comments

Feel free to play around with it modifying the layout and appeareance of the control in the XAML or adding more properties to be able to customize it more, for example, adding a BackgroundColor property. Please share your changes in the comments so everybody can learn or use your improvements.
This is just a simple example, but you could also adapt it to use it with the MVVM pattern.

As always, thank you very much for reading. Leave any comment, concern, question or suggestion that you may have.

Hope it helps!