Software Development

is all it is about
Follow Me

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!

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!

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. 



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!

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!

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 :)

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!