Deploy your Angular 7 app with Cloud Foundry on SAP Cloud Platform

In this tutorial, I will show how to deploy an Angular 7 app to Cloud Foundry on SAP Cloud Platform.

Prerequisite

The first thing is to install the Angular CLI globally

sudo npm install -g @angular/cli

Note that you must have installed node (v8.9 or higher) and npm (v6.0 or higher)

Frontend

To start quickly and for the demonstration, we will download the CLI starter kit from angular.io website (https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip). Once you get the zip file, just unzip and follow the next steps with your terminal below.

cd cli-quickstart
npm install
ng serve

Open your browser on http://localhost:4200/ to test the result, you might get something like this:

Great. The project is working locally. Now if you open the package.json file, you will see different scripts to lint, test, build, e2e, etc. The command which is interesting for us is to build the project for production. In order to push this to Cloud Foundry later.

Launch the build script with the following command:

npm run-script build

Frontend is ready.

Backend

For the demo, I wanted to add an API. The steps are easy, the first step is to create a folder api at root of your project.

mkdir api

In this new folder, create two files: server.js and package.json

server.js

var express = require("express");
var app = express();

app.listen(process.env.PORT || 3000, () => {
console.log("Server running.");
});

app.get("/demo", (req, res, next) => {
res.json(["Hello","World"]);
});

package.json

{
"name": "angualar-7-backend",
"version": "0.0.1",
"scripts": {
"start": "node server"
},
"dependencies": {
"express": "^4.16.4"
}
}

Backend is ready.

Prepare for production

Now we have to create new files specifically for Cloud Foundry deployment. The first file is manifest.yml and it allows you to declare the url of the app/service, the memory, disk_quota, etc. You have to create this file at the root folder of your project:

manifest.yml

---
applications:

- name: angular-7-frontend
host: angular-7-frontend
path: dist
buildpack: staticfile_buildpack
memory: 512M
disk_quota: 512M
instances: 1
random-route: true

- name: angular-7-backend
host: angular-7-backend
path: api
buildpack: nodejs_buildpack
memory: 512M
disk_quota: 512M
instances: 1
random-route: true

The second file is .cfignore

node_modules
api/node_modules

Deployment is ready.

Push to production

Before to push, make sure you are connected (and linked to the right spaces in case you have several). To connect to CF account, execute the following command and follow the steps from the CLI:

cf login
# enter email address
# choose your space

Time to push!

cf push

Done 👍

Useful links

Build your own bus shelter for less than 10$

I want to show you how to build your own bus shelter using some basic electronic components and a 3D printer to pack all these stuffs.

The result in a short video

GitHub repo

GitHub | Arduinobribus | @joeybronner One you cloned the repo, you have to adapt some variables of the code: the missionId and the stationId where you take your bus. Please follow the few steps below…

Step 1: Mission ID

Find the id related to the mission, in the file located under https://github.com/joeybronner/arduinobribus/tree/master/json/bus_missions.json\ Mission object looks like:

{
  "id":"100100020",
  "name":"Gare de Lyon / Gare Saint-Lazare",
  "shortName":"B20",
  "image":"b20.gif"
}

Change the sMissionId value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the id of your mission.\ Example: 100100099 in my case

Step 2: Station ID

Open the following URL with your own mission ID: http://restratpws.azurewebsites.net/api/stations/ and get the id of your station.\ Station object looks like:

{
    "id":"PC3_1039_1091",
    "name":"Camille Flammarion"
}

Change the sStationId value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the id of your station.\ Example: PC3_1047_1074 in my case

Step 3: Way (A/R)

The last value is the way of the bus (“a” or “r”).\ To know the way, open the following URL with your own http://restratpws.azurewebsites.net/api/directions/.\ Direction object looks like:

[
    {
        "way":"A",
        "name":"Porte Maillot"
    },
    {
        "way":"R",
        "name":"Skanderbeg"
    }
]

Change the sWay value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the way you want to display.\ Example: “a” in my case

Schematics

Wemos PIN OLED PIN
5V VDD
GND GND
D5 SCK
D1 DC
D3 RES
D7 SDA
D8 CS

Components

All you need is available on AliExpress for less than 10$ (printing price included):

The printing model is available in the GitHub repo here: 3D models. You can print it using any cheap printer you want, it will be printed in less than 2 hours.

Below, the preview of the 3D model (.stl files)

GitHub

You can contribute or simply clone the repo here: https://github.com/joeybronner/arduinobribus

[VIDEO] one day in life of SAP software engineer: why? how? difficulty? views?

The video

Why?

I wanted to do a snapshot of my life in a moment I really like what I’m doing and in a moment I think my potential is high. I plan to do the same in few years (5?!) to compare and see how it changed (evolution, progression, etc.).

How?

For the camera, it’s a basic (and a little bit old) Sony Alpha 5000. Not expensive, I bought it second-hand for 180€ (200$). For the software part, I only used Adobe After Effects for the video editing/cutting. The sound is from the YouTube sound library (free). You can find some great musics & sound effects but the risk is to find your music in another video. The font used is the font from Apple, used on iOS : San Fransisco Display (you can find the links link at the end of the article).

Difficulty?

Definitely hard. I think French (also in Paris) are afraid by videos and when they see the camera, the reflex is to go out camera’s view. So yes, it’s not easy to get good images on natural moments. That’s a very important element for a good final result of a video like this.

Views?

That’s fun. I never posted any video on YouTube and this is my first one. I posted it in public and sent it only to my colleagues and friends: 5 days later, I get more than 1200 views, 49 likes, 19 comments. It’s not HUGE but I’m a little bit surprised :).

Some links

W14Y18 – MQTT Client for OSX, Fingerprint & HTTPS, Consola and full width embedded Youtube video

MQTT Client for OSX

For those working with OSX, I suggest you to use the most powerful MQTT client I’ve found: MQTTfx. This soft is complete. You will find all the basic features (like unsecured connection, already available on most light tools) and some very useful:

  • User/password authentication
  • SSL/TLS
  • Proxy settings

You have a large choice of certificates, which covers a lot of scenarios and platforms (SAP IoT 4.0 Platform included)

View/download MQTTfx

Fingerprint Check to verify HTTPS certificates

Sometimes, it can be useful to check if you are sending data or connected to the right website (for security purposes). In my case, when I’m connecting Arduino boards or something like this with network I’m not the owner, I’m using the fingerprint check.

Let’s see how it works.

First, you need to retrieve the fingerprint for the target website/API. For this, go to the website and click on the little “lock” icon in the address bar and click on the Certificate section.

Now, scroll down while you find the Fingerprints section and copy these two values (see below the example with Github).

The last step is to check when you establish the connection, if the fingerprint is the same or not. Below, an example in Arduino

// Check HTTPS
WiFiClientSecure client;
Serial.print("Connecting to ");
Serial.println(host);
if (!client.connect(host, httpsPort)) {
  Serial.println("Connection failed");
  return;
}

if (client.verify(fingerprint, host)) {
  Serial.println("Certificate matches");
} else {
  Serial.println("Certificate doesn't match");
}
// The rest of your code...

Consola

Logs are important when you code – If you pass your day, switching between terminal windows, it’s time to get them sexy! For this, I found Consola and I fall in love with this elegant consoler logger.

npm install consola --save

And now in your code, you can log info like this:

const consola = require('consola')

// See types section for all available types
consola.start('Starting build');
consola.success('Built!');
consola.info('Reporter: Some info');
consola.error(new Error('Foo'));

Give a try here: https://github.com/nuxt/consola

Full width embedded Youtube video

If you want to embed your Youtube video on your blog (WordPress or other), it’s possible with some custom CSS.

First go to the video link you want to embed and click on Share > Embed and get the whole iframe tag.

For example: <iframe width="560" height="349" src="http://www.youtube.com/embed/<YOUR_VIDEO_ID>" frameborder="0"></iframe>

Now, wrap the iframe tag inside a div and add the css.

<div class="youtubeVideoContainer">
    // the iframe tag here
</div>

.youtubeVideoContainer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.youtubeVideoContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That’s it. Your video will use the full width of your post.