One of the many interesting projects we work on here at CustomMayd are the collaborations with the Microsoft Learning Team in the creation of developer training courses. 

As today is the start of a new quarter, the latest round of courses have been published:

The process of developing a course with Microsoft is an interesting one. It usually starts with a high-level “one liner” description such as ‘We want to help Windows Forms developers refresh their legacy applications’. We usually then engage in an iterative design phase where we consider a broader set of objectives that align with the design goal and the constraints of the format - it is typical for these courses to contain 4 modules and target 10-15 hours of activity for the learner.

Once we have sign-off on the design, we then start work on the detailed design. This usually entails the creation of a detailed course outline, demo apps and other resources with the intent of confirming the feasibility of delivering the objectives within the timeline and budget. The outcome of this stage is a detailed design.

Once that is signed off, we commence the creation of the modules. Our training materials are typically detailed hands-on style labs with a lot of detailed commentary explain not only “what” is to be done, but also “why” – best practices, etc. as well as collating external references for the learner that wishes to dive deeper into the subject matter. As we proceed through the labs, we take snapshots of source code, etc. so that a learner can easily detect any errors they may have made, etc. We create the courses using MarkDown and our preferred editor is Visual Studio Code.

2018-04-02 11_07_32-03-Connect App to Azure SQL Database.md - DEV332x_Extend_Your_Application_with_R 

Once the labs are complete, we usually record a number of supporting videos – either as screen captures or in the Microsoft recording studios as “talking heads”.

2018-04-02 11_09_56-Anatomy of a Module _ Module Syntax _ DEV314x Courseware _ edXPrescriptionManagerVideo

Recording the videos in the studio is usually entertaining – we tend to batch them into a number of days which can get pretty exhausting as well!

Take a look at the courses and let us know if you or your organization would like some custom training created. We actually have many more courses published on EdX.org as well as Channel 9 and Microsoft Virtual Academy:

EdX.org

Channel 9

Microsoft Virtual Academy

    Following on from my blog post https://www.darenmay.com/blog/angular-cli-support-in-vs-2017/ I decided to take a look at what it would take to update the original sample (you can find a copy of that here). The result of the migration is located https://github.com/darenm/custommayd-bank

    As the project layout is quite different, I started by creating a new project using the latest template as documented on the Microsoft Docs site: Use the Angular project template with ASP.NET Core.

    Overall, the new solution is much more streamlined – unlike the old solution, there are no MVC views necessary to get things started – the Angular app runs from Index.html as you would expect. The folder structure of the ClientApp has changed slightly, but this results in fully supporting Angular CLI (also configured via a custom .angular-cli.json). Once the solution was created, t was really just a case of deleting the “sample” code from new application and adding in the files from the original solution. I used the ng command to generate the stubs for all my components, services, pipes and classes and then just copied over the code. There were only two things I changed (the app ran “as-is” but I wanted to move off of deprecated items), the account.service and references to the currency pipe.

    Account Service Changes

    In the original code, ‘account-service.ts’ looked like this:

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/Rx';
    
    import { AccountSummary } from './account-summary.type';
    import { AccountDetail } from './account-detail.type';
    import { AccountType } from './account-type.enum';
    
    @Injectable()
    export class AccountService {
        constructor(private http: Http) {
    
        }
    
        getAccountSummaries() {
            return this.http.get('api/Bank/GetAccountSummaries')
                .map(response => response.json() as AccountSummary[])
                .toPromise();
        }
    
        getAccountDetail(id: string) {
            return this.http.get(`api/Bank/GetAccountDetail/${id}`) // note string interpolation
                .map(response => response.json() as AccountDetail)
                .toPromise();
        }
    }

    The code is using Http from @angular/http which has been deprecated, so I updated the code to use HttpClient – one of the nice things about HttpClient is it handles json better and makes it easier to return strongly-type results:

    import { Injectable } from '@angular/core';
    import { HttpClient } from "@angular/common/http";
    import 'rxjs/Rx';

    import { AccountSummary } from './account-summary';
    import { AccountDetail } from './account-detail';


    @Injectable()
    export class AccountService {

      constructor(private http: HttpClient) {

      }

      getAccountSummaries() {
        return this.http.get<AccountSummary[]>('api/Bank/GetAccountSummaries')
          .toPromise();
      }

      getAccountDetail(id: string) {
        return this.http.get<AccountDetail>(`api/Bank/GetAccountDetail/${id}`) // note string interpolation
          .toPromise();
      }
    }

    As you can probably see, the HttpClient.Get allows the return type to be specified using this.http.get<AccountSummary[]>('api/Bank/GetAccountSummaries') etc. which means we no longer need the map operator.

    Currency Pipe Changes

    This was a subtle change but a warning indicated the parameters to the currency pipe had changed in Angular v5. Instead of:

    <h3>{{ account.balance | currency:"USD":true:"1.2-2" }}</h3>

    It is now:

    <h3>{{ account.balance | currency:"USD":"symbol":"1.2-2" }}</h3>

    Note that the true parameter has changed to “symbol” providing more flexibility on what is displayed for the currency type (options are now “code” which would display “USD”, “symbol” which would show “$” and “symbol-narrow” which for some currencies shows a narrower symbol, but for USD, still shows “$”).

    Wrap Up

    Overall, the migration was a low-friction exercise and the simplification of the solution together with the Angular CLI support makes it worthwhile embracing the new template.