Ionic 3/Angular 5 – Enable Swipe All Directions

By default Ionic 3 gestures only allow left and right swipe. Follow this step to enable all directions swipe, including up and down.
This will work on Angular application as well.

1. Install HammerJS
npm install –save hammerjs

2. Create new HammerJS config
Create new class (Typescript file). The class should have following definition:

import * as Hammer from 'hammerjs';
import {HammerGestureConfig} from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    'swipe': {direction: Hammer.DIRECTION_ALL}
  }
}

3. Register new HammerJS config
In app.module.ts, register HammerJS config.
Most important lines are the import at the beginning, which import new HammerJS config class and register in providers section of @NgModule.

import {MyHammerConfig} from '../HammerConfig'; // Add this line

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig} // Add this line
  ]
})
export class AppModule {
}

4. Use Ionic gestures as usual, see https://ionicframework.com/docs/components/#gestures, now Ionic should be smart enough to detect swipe up and down events.

Swipe up and swipe down event through Chrome’s developer tools.

Advertisements

 

Ionic 3 Change App Icon and Splash Screen

The easiest way to change App Icon and Splash screen in Ionic is to let Ionic handle creation of different versions of icon and splash sizes.

When an app first created, there are 2 files in resources folder, icon.png and splash.png.

Replace these 2 files with your desired icon and splash files.

• File name must be the same
• Size of icon.png must be minimum 1024×1024 and splash.png must be minimum 2732×2732

Once icon.png and splash.png files have been replaced. Follow this steps:

1. You must have FREE Ionic account. This is because the icon and splash generation/transformation is using Ionic server.
2. On your project folder, run following command: ionic login
3. Then enter your email and password.
4. On project folder, run (replace ios with android if you building Android app): ionic cordova resources ios
5. Ionic will transform your icon and splash files into different versions that your target platform requires.
6. In the process, config.xml, will also be updated.

 

C# Dynamic-Typed Parameter Trap

A little tricky lesson today in C#.

Passing a dynamic-typed parameter to a method that has defined return type (ie: string, int, etc) will not return the defined type, instead the method will return dynamic type.

class Program
{
	static void Main(string[] args)
	{
		FooBarClass fooBar = new FooBarClass();

		var result1 = fooBar.Foo("Foo");

		dynamic bar = "Bar";
		var result2 = fooBar.Foo(bar);
	}
}

public class FooBarClass
{
	public string Foo(string fooArg)
	{
		return "This is Foo";
	}
}

In the above example, type of result1 is string, but type of result2 is dynamic, even though they both call same method that return string type.

This is because compiler do not evaluate dynamic type until runtime therefore it can’t determine return type at compile time.

This is important to point out because if we apply extension method to result2, it will throw exception at runtime, not compile time.

Example of extension method.

public static class FozBazClass
{
	public static void Foz(this string fozArg)
	{
		fozArg = "Test..." + fozArg;
	}
}

result1.Foz(); // this will execute normally
result2.Foz(); // this will throw exception

Just another reason we should avoid dynamic type.

 

Event Sourcing Design Pattern

What is Event Sourcing?

Is a architecture design pattern that uses append-only store to record full series of events that happen on specific data. The store also acts as publisher to all subscribers whenever an event is recorded.

Characteristics

• Append-only store. Some implementation may be different.
• Event store as system of record.
• Materialized object is constructed from events.
• Provide audit trails.
• Fast performance.

Considerations

• Undo is adding another event. Perform undo can only be done by adding compensating event since update is not allowed in Event Store
• Migration to new format. All existing events must be updated.
• Consistency. Multi-threaded applications may store events in the same event store. The consistency and order must be maintained.
• Lack of transactions. Event store by its nature is not transactional and it’s eventual consistency. It’s possible to have event to reduce the inventory count while customer is placing order for the same item.
• Performance. Replaying large amount of events can slow down the result for materialized view.

Reference
Microsoft Docs

 

Angular – Call Child Component’s Method in Parent Component’s Template

You have ParentComponent and ChildComponent that looks like this.

parent.component.html

parent.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor() {
  }
}

child.component.html

<p>
  This is child
</p>

child.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor() {
  }

  doSomething() {
    console.log('do something');
  }
}

When serve, it looks like this:

When user focus on ParentComponent’s input element, you want to call ChildComponent’s doSomething() method.

Simply do this:
1. Give app-child selector in parent.component.html a DOM variable name (prefix with # – hashtag), in this case we call it appChild.
2. Assign expression value (of the method you want to call) to input element’s focus event.

The result:

 

SQL Server Concurrency Effects

Lost Update

Happens when one transaction update overwrites another, causing the update to be lost.

Dirty Reads

Reading uncommitted records.

Phantom Reads

Reading while another transaction is adding new record, result in different number of rows being returned.

Repeatable Reads

When the same query to read is executed, it will return the same result.

Reference

MSDN

 

Application Insights Intrumentation Key in Web.config

When using Azure Application Insights in ASP.Net application, by default, Visual Studio insert IntrumentationKey in ApplicationInsights.config.

To allow multiple environments tracking, move IntrumentationKey to Web.config by following this steps:

1. Remove IntrumentationKey from ApplicationInsights.config. If you have MVC application, don’t forget to modify ApplicationInsights’ script (usually in View\Shared\_Layout.cshtml), replace:

   {instrumentationKey:"your instrumentation key"}
   

   with:

   {instrumentationKey:"@Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey"}
   

2. Add new app settings for IntrumentationKey in Web.config under <appSettings>

   <add key="InstrumentationKey" value="your instrumentation key" />
   

3. In Global.asax.cs, Application_Start() method, add:

   Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey = System.Web.Configuration.WebConfigurationManager.AppSettings["InstrumentationKey"];
   

That’s it for the configuration changes. Everything else is the same including tracking custom event or page view.
With this configuration, you will be able to define InstrumentationKey in Release management for each environments.