Use Visual Studio 2015 to develop Angular2 Application

Install node.js

https://nodejs.org/en/download/

Go to the project folder, where package.json is located and run npm install command

  • Make sure you have npm installed
  • Open up your console of choice (e.g. command prompt or powershell)
  • Install typings by running npm install typings –global
  • Navigate to your project folder within the console
  • Write typings install dt~jquery –save –global

This should update your typings.json file and download the definition files.

http://stackoverflow.com/questions/37111726/the-package-rxjs5-0-0-beta-6-does-not-satisfy-its-siblings-peerdependencies-re

npm uninstall angular2

npm install –save @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6 zone.js@0.6.12

https://github.com/Urigo/angular-meteor/issues/1381

update npm:
npm install npm -g

npm install git+https://github.com/angular/angularfire2.git

http://stackoverflow.com/questions/37179236/angular2-error-at-startup-of-the-app-http-localhost3000-traceur-404-not-fo

There are multiple reason behind this error,

1)Sometimes comments mentioned on top of app.component.ts file
2)pointing to incorrect umd file
3)If you are using ts(Transcript) version, please mention the transpiler options in config.js file as below or compile your all .ts file to .js file using transpiler and then reference .js file in code:

(function (global) {

System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},

paths: {
// paths serve as alias
'npm:': 'node_modules/'
},

// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-brower-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'angular2' : ''
},

// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main',
defaultExtension: 'ts'
},

rxjs: {
defaultExtension: 'js'
},

'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
Advertisements

Apache Cordova Hide Status Bar

[DRAFT]

To remove the status bar in iOS 7 use the following entries in the plist file.

<key>UIStatusBarHidden</key>

<true/>

<key>UIViewControllerBasedStatusBarAppearance</key>

<false/>

In the configuration on XCode the following achieves the same

set
Status bar is initially hidden = YES

add row: View controller-based status bar appearance = NO

 

Edit .plist file for the iOS build by adding:

UIStatusBarHidden = true

UIViewControllerBasedStatusBarAppearance = false

 

First, we need to note this only works on Cordova (recommend v3.3.1) or another native UIWebViewwrapper. If we use Cordova, we will need to install one plugin:

$ cordova plugin add org.apache.cordova.statusbar

Then, we will use Ionic’s Platform service to listen for the device ready event and remove the status bar:

angular.module(‘myApp’, [‘ionic’])

 

.controller(‘MyCtrl’, function($scope, Platform) {


Platform.ready(function() {


// hide the status bar using the StatusBar plugin


StatusBar.hide();

});

});

 

 

My app.js

if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.hide();
StatusBar.styleDefault();
}

 

 

 

For API level 19:

In addition to setting the fullscreen flag, I also had to add the following to hide the soft keys:

View decorView = getWindow().getDecorView();

// Hide both the navigation bar and the status bar.
					

// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
					

// a general rule, you should design your app to hide the status bar whenever you
					

// hide the navigation bar.
					

int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION

              | View.SYSTEM_UI_FLAG_FULLSCREEN;

decorView.setSystemUiVisibility(uiOptions);
					

https://developer.android.com/training/system-ui/navigation.html

You can also set the sticky immersion as described here:https://developer.android.com/training/system-ui/immersive.html

 

 

This is how I do it – hides the title and makes it full screen:

// requesting to turn the title OFF

requestWindowFeature(Window.FEATURE_NO_TITLE);


// making it full screen

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

I also have this in my AndroidManifest under Application:

android:theme=“@android:style/Theme.NoTitleBar.Fullscreen”

 

 

References

 

http://stackoverflow.com/questions/21395416/cordova-how-do-you-hide-the-status-bar-on-the-splash-launch-screen

http://ionicframework.com/tutorials/fullscreen-apps/

https://forum.ionicframework.com/t/status-bar-not-hidden-in-spash-screen-in-android/38976

http://stackoverflow.com/questions/20678024/how-to-hide-navigation-bar-in-android-app-code/20680323#20680323

Universal App with Visual Studio 2015 tools for Apache Cordova – Android Distribution

Practical steps to create universal app with VS2015. Based on the oryginal post by Authored by Norm Estabrook with contributions from Raghav Katyal, Mikejo5001, rido-min,Linda Z with comments.

Before starting the process, make sure that VS has the latest updates.

Create new app

Use VS2015 wizard to create blank application

Note! Make sure there are no blank spaces in the project’s location!

Package the Android version of your app

In this section:

  • Modify the settings of your app.
  • Generate a private key.
  • Refer to that key in a configuration file.
  • Create the package.

Step 1: Modify the settings of your app

The general settings of your app appear in the Common page of the configuration designer.

  • The Display Name is the name that appears in the app store.
  • The Package Name is a string that uniquely identifies your app.

    Choose a naming scheme that reduces the chance of a name conflict.

  • The Domain Access collection lists the domains that your app needs to access.

    For example, the WeatherApp that appears in the previous image, obtains weather data from a service endpoint that has the domain https://query.yahooapis.com.

The purpose of most other settings clear from the title, but you can find more information about them here: The config.xml File.

Android-specific settings appear in the Android tab of the configuration designer.

You can read about each option in the preference section of the config.xml reference topic.

Step 2: Generate a private key

To sign your app, create a keystore. A keystore is a binary file that contains a set of private keys. Here’s how you create one.

  1. Open a Command Prompt in administrator mode.
  2. In the Command Prompt, change directories to the %JAVA_HOME%\bin folder.

    (For example: C:\Program Files (x86)\Java\jdk1.7.0_55\bin).

  3. In the Command Prompt, run the following command.
  4. keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS
    

    [/code][/code][/code][/code]

  5. Plain Text>Plain Text>Plain Text>Plain Text>-keyalg RSA -keysize 2048 -validity 10000
    

    Replace my-release-key.keystore and johnS with names that make sense to you.[/code][/code][/code][/code]

  6. Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>You'll be asked to provide a password and the Distinguished Name fields for your key.
    This series of responses gives you an idea of the kinds of information you'll provide for each prompt. Like in the previous command, respond to each prompt with information that makes sense for your app.
    Plain Text>Enter keystore password: pwd123
    

    Plain Text>Re-enter new password: pwd123
    [/code]PHP>What is your first and last name?
    [/code]PHP>[Unknown]= John Smith
    [/code]PHP>What is the name of your organizational unit?
    [/code]PHP>[Unknown]= ABC
    [/code]

    Plain Text>PHP>What is the name of your organization?
    [/code][/code][/code]
  7. Plain Text>Plain Text>Plain Text>Plain Text>key.alias=johnS
    

    [/code][/code][/code][/code]

  8. Plain Text>[/code][/code][/code]
  9. Plain Text>Plain Text>Plain Text>Plain Text> "android": {
    

    [/code][/code][/code][/code]

  10. Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>     "release": {
    

    [/code][/code][/code][/code]

  11. Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>         "keystore":"c:\\my-release-key.keystore",
    
  12. Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>Plain Text>         "storePassword":"pwd123",
    
  13. Plain Text>Plain Text>Plain Text> "alias":"johnS",
  14. Plain Text> "password":"pwd123",
  15. "keystoreType":""
  16. }
  17. }
  18. }

Step 4: Create the package

  1. On the Standard toolbar, choose the Android platform.
  2. Choose the Release build configuration.
  3. Choose one of the Android emulators.

    .

    Important: Don't choose any of the Ripple simulators. Choose only an Android emulator or the Device.

  4. On the Build menu, choose Build Solution.

    This builds a file with an .apk file extension. That is the file that you'll upload to the store.

    You can find that file in the bin/Android/Release/ folder of your project.

    It's the file that does not contain the word unaligned in the file name.

Submit your app to the store

You can publish your app to Google Play.

To prepare for the big day, review Essentials for a Successful App.

Then, see Upload an app to make your app avaialable to the world.

 

Common problems:

 

Add uses-permission INTERNET!!!

 

 

References:

https://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/

 

Resize RaspberryPi.img file

This article describes how to truncate oversized .img file

Command (on linux):

# truncate -s 4000M RSE1g.img<br></p><h1>Check file size:</h1><p>ls -l --block-size=M<br></p><h1>Make a copy of the file</h1><p>cp old.img new.img

 

Truncate command references

NAME

truncate – shrink or extend the size of a file to the specified size

SYNOPSIS

truncate OPTIONFILE

DESCRIPTION

Shrink or extend the size of each FILE to the specified size

A FILE argument that does not exist is created.

If a FILE is larger than the specified size, the extra data is lost.

If a FILE is shorter, it is extended and the extended part (hole) reads as zero bytes.

Mandatory arguments to long options are mandatory for short options too.

-c, –no-create

do not create any files

-o, –io-blocks

treat SIZE as number of IO blocks instead of bytes

-r, –reference=RFILE

base size on RFILE

-s, –size=SIZE

set or adjust the file size by SIZE bytes

–help display this help and exit

–version

output version information and exit

The SIZE argument is an integer and optional unit (example: 10K is

10*1024). Units are K,M,G,T,P,E,Z,Y (powers of 1024) or KB,MB,…

(powers of 1000).

SIZE may also be prefixed by one of the following modifying

characters: ‘+’ extend by, ‘-‘ reduce by, ‘<‘ at most, ‘>’ at least,

‘/’ round down to multiple of, ‘%’ round up to multiple of.

Changing size of the partitions on .img file

Before .img file can be truncated, make sure, that the partitions fit on the resized file.

Use GParted to resize the partitions.

References:

[1] http://www.htpcguides.com/easy-resize-and-back-up-raspberry-pi-sd-card-with-ubuntu/
[2] http://blog.gbaman.info/?p=328

Raspberry Pi Chrome Kiosk Mode

The following steps might be helpful in setting up Kiosk Mode on Raspberry Pi.

Enable SSH

You can enable or disable the SSH server on your Raspberry Pi (it is enabled by default). This is done using raspi-config:

Select “Advanced Options”

End select “Enabled”

[https://www.raspberrypi.org/documentation/remote-access/ssh/]

Install Chrome Browser

Login remotely using ssh and execute the following commands:

wget http://ftp.us.debian.org/debian/pool/main/libg/libgcrypt11/libgcrypt11_1.5.0-5+deb7u3_armhf.deb

wget http://launchpadlibrarian.net/218525709/chromium-browser_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

wget http://launchpadlibrarian.net/218525711/chromium-codecs-ffmpeg-extra_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

sudo dpkg -i libgcrypt11_1.5.0-5+deb7u3_armhf.deb

sudo dpkg -i chromium-codecs-ffmpeg-extra_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

sudo dpkg -i chromium-browser_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

[http://conoroneill.net/running-the-latest-chromium-45-on-debian-jessie-on-your-raspberry-pi-2/]

Turn-on Kiosk Mode

[http://raspberrypi.stackexchange.com/questions/38515/auto-start-chromium-on-raspbian-jessie-11-2015]

Create a new .desktop file in ~/.config/autostart/, e.g.

sudo nano ~/.config/autostart/autoChromium.desktop

Then add the following:

 

 

 

 

Name[en_US]=AutoChromium

Name=AutoChromium

Comment=Start Chromium when GNOME starts

Set Static IP

[http://sizious.com/2015/08/28/setting-a-static-ip-on-raspberry-pi-on-raspbian-20150505/]

For setting a static IP for the Raspberry Pi 2 on the latest Raspbian release available at this time (20150505 through NOOBS v1.4.1), the old method modifying the/etc/network/interfaces file isn’t so efficiency as before. In fact, if you modify the/etc/network/interfaces by settingeth0 tostatic instead ofmanual(the default setting) your Raspberry Pi will get two IP adresses for the sameeth0 interface. This sucks.

The “faulty” is thedhcpcd daemon, which is a DHCP client that seems to be run before the parsing of the/etc/network/interfaces file.

So you have 3 options there:

Setting like before in/etc/network/interfaces then disabling thedhcpcd daemon, with thesudo update-rc.d -f dhcpcd remove command (you can revert back withsudo update-rc.ddhcpcd defaults). But really, don’t do this;

Add a static DHCP entry for your Raspberry Pi in your router/gateway configuration;

Force thedhcpcd daemon to get the IP you like. It’s really the best solution for me.

To implement the latest solution, justsudo nano /etc/dhcpcd.conf then at the end of the file, add the following:

# Custom static IP address for eth0.

interface eth0

static ip_address=192.168.0.200/24

static routers=192.168.0.1

static domain_name_servers=192.168.0.1

   

Of course, adjust the IP as you wish. the 192.168.0.1 IP address is referring to my ISP router.

Update for Raspbian Jessie

Revision 2017-02

Autostart

 

/etc/xdg/lxsession/LXDE-pi/autosart

 

@lxpanel –profile LXDE-pi
@pcmanfm –desktop –profile LXDE-pi
#@xscreensaver -no-splash
@point-rpi

@xset s noblank
@xset s off
@xset -dpms

@/usr/bin/chromium-browser —noerrdialogs —disable-pinch —overscroll-history-navigation=0 —disable-session-crashed-bubble —disable-infobars —kiosk —no-first-run http://127.0.0.1:80/panel/zsStandardIndex.php

 

pi@raspberrypi:~ $ usr/bin/chromium-browser –noerrdialogs –disable-pinch –overscroll-history-navigation=0 –disk-cache-dir=/dev/null –disable-session-crashed-bubble –disable-infobars –kiosk –no-first-run http://127.0.0.1:80/panel/www/zsStandardIndex.php

Alert! problem with touch events, use the following keys:

https://github.com/Dogfalo/materialize/issues/2442

chromium –kiosk –enable-kiosk-mode –enabled –touch-events –touch-events-ui –disable-ipv6 –allow-file-access-from-files –disable-java –disable-restore-session-state –disable-sync –disable-translate –disk-cache-size=1 –media-cache-size=1 http://materializecss.com/

SAML and WS-Security Resources

 

Ref:

  1. http://docs.oasis-open.org/ws-sx/ws-trust/v1.4/ws-trust.html
  2. http://crishantha.com/wp/?p=1223 (The Web Services Trust Model (WS-Trust))
  3. https://msdn.microsoft.com/en-us/library/bb498017.aspx (Understanding WS-Federation)
  4. https://en.wikipedia.org/wiki/WS-Trust (WS-Trust)
  5. http://www.ploug.org.pl/seminarium/seminarium_XIII/pliki/problematyka_bezpieczenstwa_slajdy.pdf (Problematyka bezpieczeństwa
  6. usług Web Services)
  7. https://msdn.microsoft.com/en-us/library/ms730908.aspx (WS-Federation)
  8. http://docs.oasis-open.org/ws-sx/ws-secureconversation/200512/ws-secureconversation-1.3-os.html (WS-SecureConversation 1.3)
  9. https://en.wikipedia.org/wiki/X.509 (x.509)
  10. https://msdn.microsoft.com/en-us/library/ff650503.aspx (Brokered Authentication: Security Token Service (STS))
  11. https://msdn.microsoft.com/en-us/library/aa528862.aspx (Establishing a Secure Conversation)
  12. https://msdn.microsoft.com/en-us/library/windows/desktop/ee652302%28v=vs.100%29.aspx?f=255&MSPPError=-2147217396 (Security Token Service Endpoint)
  13. https://blogs.oracle.com/enterprisetechtips/entry/security_token_service_and_identity (Security Token Service and Identity Delegation with Metro)
  14. https://docs.oracle.com/cd/E21455_01/common/tutorials/authz_saml_assertion.html (SAML Authorization Assertion)
  15. https://www.oasis-open.org/committees/tc_home.php?wg_abbrev=wss (OASIS Web Services Security (WSS) TC)
  16. http://owulff.blogspot.com/2012/02/saml-tokens-and-ws-trust-security-token.html (SAML tokens and WS-Trust Security Token Service (STS))
  17. https://en.wikipedia.org/wiki/Security_Assertion_Markup_Language (SAML)
  18. https://www.oasis-open.org/committees/download.php/35389/sstc-saml-profiles-errata-2.0-wd-06-diff.pdf (Profiles for the OASIS Security Assertion Markup Language (SAML) V2.0 – Errata Composite)
  19. https://docs.oracle.com/cd/E28280_01/dev.1111/e15866/ws_policy.htm#OSBDV1599 (Using WS-Policy in Oracle Service Bus Proxy and Business Services)
  20. https://msdn.microsoft.com/en-us/library/aa480582.aspx (Implementing Transport and Message Layer Security)
  21. http://docs.oasis-open.org/ws-sx/ws-trust/200512/ws-trust-1.3-os.html#_Toc162064962 (WS-Trust)
  22. http://saml.xml.org/saml-specifications (SAML)
  23. https://docs.oracle.com/cd/E19159-01/820-1072/ahidd/index.html (SAML Holder of Key relaying party confirmation method)
  24. http://docs.oasis-open.org/wss/oasis-wss-saml-token-profile-1.0.pdf
  25. http://stackoverflow.com/questions/1132111/saml-assertion-with-username-password-what-do-the-messages-really-look-like (SAML assertion with username/password – what do the messages really look like?)
  26. https://www.oasis-open.org/committees/download.php/12958/SAMLV2.0-basics.pdf (SAML 2.0)
  27. https://wiki.oasis-open.org/security/FrontPage#SAML_V2.0_Standard (SAML 2.0)
  28. https://docs.jboss.org/author/display/JBWS/SAML+Holder-Of-Key+Assertion+Scenario?_sscc=t (SAML Holder-Of-Key Assertion Scenario)
  29. https://www.oasis-open.org/committees/download.php/16768/wss-v1.1-spec-os-SAMLTokenProfile.pdf (SAML Token Profile 1.1)

How to Change App Title Bar Colors in Windows 10

Article from [http://windows.wonderhowto.com/how-to/change-app-title-bar-colors-windows-10-0163059/%5D

Step 1: Copy ‘Aero’ Folder

Start by navigating to C:\Windows\Resources\Themes, then copy and paste the “aero” folder to the same directory. Note that you’ll see a dialog box stating that you need proper access to copy over the MSS files. When you see this, select “Do this for all current items” and choose the Skip option.

Once the pasting is complete, you’ll be left with a new folder call “aero – Copy.”


Step 2: Rename Folder & Files

Now rename the “aero – Copy” folder to “windows,” then rename the “aero.msstyles” file to “windows.msstyles.”


Now jump inside the “en-US” folder and rename the “aero.msstyles.mui” file to “windows.msstyles.mui.”


Step 3: Edit Theme File

Now go back to the main Themes folder (the folder we started with) and copy the “aero.theme” file to your Desktop, then rename it to “windows.theme” and open it with Notepad.


In Notepad, scroll down to the “VisualStyles” section, then replace this entry:

Path=%ResourceDir%\Themes\Aero\Aero.msstyles

With this:

Path=%ResourceDir%\Themes\windows\windows.msstyles


Now save and exit Notepad.

Step 4: Rejoice in the Glory of Colored Titlebars

The last thing to do is double-click the “windows.theme” file on your Desktop and watch the magic happen.


And that’s it. The color that shows will be whichever you set in the Personalization settings

Problem with cross-site Ajax calls and PHP

Setup

The following example is demonstrating Ajax call made to the weather service.

As long as service calls: http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139l
Ajax is returning success.

Sample Ajax request is presented below:


var jqxhr = $.ajax({

url: “http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139l&#8221;,


//url: “http://www.jaskierny.com/playground/json/testJSON.php&#8221;,

crossDomain: true,

dataType: “json”,

})

.done(function (data) {

alert(“Success”);

elements = data.weather;

 

$.each(elements, function (index, element) {

alert(element.main);

})

 

})

.fail(function (jqXHR) {

alert(“Error”);


if (jqXHR.status === 0) {

alert(‘Not connect.\n Verify Network.’);

} else
if (jqXHR.status == 404) {

alert(‘Requested page not found. [404]’);

} else
if (jqXHR.status == 500) {

alert(‘Internal Server Error [500].’);

} else
if (exception === ‘parsererror’) {

alert(‘Requested JSON parse failed.’);

} else
if (exception === ‘timeout’) {

alert(‘Time out error.’);

} else
if (exception === ‘abort’) {

alert(‘Ajax request aborted.’);

} else {

alert(‘Uncaught Error.\n’ + jqXHR.responseText);

}

 

});

 

Problem

The problem occurred when I created PHP page, wrapping up an original Ajax call; my Ajax responded with the error, although both requests, from the original site and from my PHP page responded with the identical content:

Original site: http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139l

New PHP page: http://www.jaskierny.com/playground/json/testJSON.php

Here is the source code of my PHP page:

 

<?php

$jsonContent = file_get_contents(“http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&#8221;);

$jsonContent = str_replace(“\n”,”, $jsonContent);

header(‘Content-Type: application/json’);

echo stripslashes(($jsonContent));?>

 

Solution

The problem was related to the access control mechanism, for cross-site HTTP requests. The problem was solved by adding yellow-marked header in the code below:

 

<?php

$jsonContent = file_get_contents(“http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&#8221;);

$jsonContent = str_replace(“\n”,”, $jsonContent);

header(“Access-Control-Allow-Origin: *”);

header(‘Content-Type: application/json’);

echo stripslashes(($jsonContent));?>

 

Additional resources

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS