Wednesday, March 15, 2017

SAP HANA Express - XSA - XS Advanced Application Resource Files

- mta.yaml -> MTA development descriptor

Development descriptor for a multi-target application (MTA). The information in the mta.yaml file provides instructions for the MTA development and build process.


- xs-app.json -> The XS Advanced Application Router Descriptor

The application descriptor is a file that contains the configuration information used by the application router. The file is named xs-app.json and its content is formatted according to JavaScript object Notation (JSON) rules. The following example of an xs-app.json file shows the configuration for a XS application consisting of static resources and JavaScript files.




References:
https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/2.0.00/en-US/8635e0b43f6744d6b40ba247b11b352e.html
https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/2.0.00/en-US/4486ada1af824aadaf56baebc93d0256.html
https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/1.0.12/en-US/96c7545f62504d55b669010d8fb9c41e.html
https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/1.0.12/en-US/5f77e58ec01b46f6b64ee1e2afe3ead7.html

Tuesday, March 14, 2017

SAP HANA Express - XSA - NPM errors

In a fresh HANA express install, some variables must be set in order to the system download and install the NPM packages correctly.

error message:

npm ERR! 404 no such package available : jade

Some configuration must be set in di-local-npm-registry application.

Solution:

$ xs set-env di-local-npm-registry UPSTREAM_LINK http://registry.npmjs.org/
$ xs restage di-local-npm-registry
$ xs restart di-local-npm-registry


References:
https://answers.sap.com/questions/42964/hana-express-vm-tutorials-packagejson-dependencies.html
https://blogs.sap.com/2017/02/02/xs-advanced-nodejs-upstream-registry/
- https://bitbucket.org/alunde/mta_upstream_registry
https://archive.sap.com/discussions/thread/3921267

Wednesday, March 8, 2017

#1.6 Angular 2 Basics

1. Start installing the angular cli:

$ sudo npm install -g angular-cli


2. in the app directory, run the below command in order to create the angular "app" folder, which is the source for the frontend angular app:

$ ng new angular-src
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.

Installed packages for tooling via npm.
Project 'angular-src' successfully created.


3. in the newly created folder "angular-src" edit the file "angular-cli.json" as below:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",

change "outDir" from "dist" to "../public" which is an existing directory in the root app directory;


4. Some comments on files that are generated by Angular:

a) angular-src/src/app/app.module.ts -> declaration of all modules / components / services:
components -> declaration section;
modules -> imports section;
services -> providers section;

b) angular-src/src/app/app.component.ts -> has a decorator for the component, allowing to add metadata e.g. selector (html tag), template (html), style (css) and main class for the component;


5. Components and services can be generated by angular-cli e.g.: create a separated directory for components (angular-src/src/app/components) and, once into the components directory, run the following command:

$ ng g component <component_name>

where g stands for "generate";

e.g.: create component home:
$ ng g component home
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

installing component
  create src/app/components/home/home.component.css
  create src/app/components/home/home.component.html
  create src/app/components/home/home.component.spec.ts
  create src/app/components/home/home.component.ts
  update src/app/app.module.ts

At the same time, the app modules file is updated with the newly created component;


6. Router definition:

a) in angular-src/src/app/app.module.ts -> import RouterModule and Routes from '@angular/router';
import {RouterModule, Routes} from '@angular/router';

b) include the router modules in the imports section;
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
]

c) define appRoutes object array with all the routes, e.g.:
const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent },
  { path: "dashboard", component: DashboardComponent },
  { path: "profile", component: ProfileComponent }
]

d) change app.component.html in order to add the router tag:
<h1>
  {{title}}
</h1>
<app-navbar></app-navbar>
<div class="container">
    <router-outlet></router-outlet>
</div>


7. Create the navbar component and the corresponding links to home, register and login:
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MEAN App</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/login']">Login</a></li>
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/register']">Register</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>



References:
https://youtu.be/zrViDpWiNVE?list=PLillGF-RfqbZMNtaOXJQiDebNXjVapWPZ
http://getbootstrap.com/examples/starter-template/
- https://bootswatch.com/