Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

Java | Getting Started

Introduction

Installation

Install on macOS

$ brew tap adoptopenjdk/openjdk

Java 8

# Install Java 8
$ brew cask install adoptopenjdk8

# Install Java 11
$ brew cask install adoptopenjdk11
# Install Gradle
$ brew install gradle

# Install Maven
$ brew install maven

Managing different Version

Install jenv and setup

$ brew install jenv

Add java home folder to jenv

$ jenv add /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
$ jenv add /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home

Spring Boot | Getting Started

Introduction

Spring makes programming Java quicker, easier, and safer for everybody. Spring’s focus on speed, simplicity, and productivity has made it the world’s most popular Java framework.

Required Software

Java

Spring recommend AdoptOpenJDK version 8 or version 11.

Oracle AdoptOpenJDK OpenJDK

Eclipse

Eclipse IDE for Enterprise Java Developers

Sprint Tools | 4

Spring Tools 4 for Eclipse

Create a new App from CLI

Create a starter app using spring.io from the commandline

$ curl https://start.spring.io/starter.zip -d language=java -d dependencies=web,mustache,jpa,h2,devtools -d packageName=com.example.blog -d name=Blog -o blog.zip

Working with Maven

Build App./mvnw clean package
Run App./mvnw spring-boot:run

Tipps and Tricks

Change App Port Number

Add line to file src/main/resources/application.properties

server.port=9010

Learning Path

Start with the following tutorials / guides:

See Also

github

Git | Secure your sensitive data

References

https://github.com/AGWA/git-crypt

https://blog.francium.tech/secure-your-credentials-using-git-crypt-1ccbacc483c7

https://buddy.works/guides/git-crypt

TL;DR

COMMON COMMANDS

git-crypt init
git-crypt status
git-crypt lock

GPG COMMANDS

git-crypt add-gpg-user GPG_USER_ID
git-crypt unlock

SYMMETRIC KEY COMMANDS

git-crypt export-key OUTPUT_KEY_FILE
git-crypt unlock KEY_FILE

Installation

$ brew install git-crypt

Prepare Repository

$ cd <repository>
$ git crypt init
Generating key…

Create .gitattributes file

secretfile filter=git-crypt diff=git-crypt
*.key filter=git-crypt diff=git-crypt
secretdir/** filter=git-crypt diff=git-crypt
.gitattributes !filter !diff # prevent file from encrypted

React Native | Getting Started

General Readings

Create App

Expo CLI Quickstart

Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:

npm install -g expo-cli

Then run the following commands to create a new React Native project called “GettingStarted”:

expo init app-getting-started
cd app-getting-started
npm start # you can also use: expo start

React Native CLI Quickstart

npx react-native init app-getting-started

or create new project based on a template

npx react-native init app-getting-started--template react-native-template-typescript

Start App

Step 1: Start Metro

First, you will need to start Metro (Docs), the JavaScript bundler that ships with React Native. Metro “takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.”

npx react-native start

Then, visit the Website or the Metro Page (http://localhost:8081/)

Step 2: Start your application

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

# For running app on iOS
npx react-native run-ios

# For running app on Android
npx react-native run-android

Ansible | Getting Started

Installation

Install Python 3

Install Ansible

pip install ansible

Setup virtual machines

In this example, we use Vagrant. But using docker is also a good choice

Create Vagrantfile

Change IP Address and Hostname for each virtual machine

Vagrant.configure("2") do |config|
  config.vm.box = "hashicorp/bionic64"
  config.vm.network "public_network", ip: "172.16.2.191", bridge: "en0: Ethernet"

  config.vm.synced_folder "./data", "/DATA"
  config.vm.hostname = "host1"
end

Start virtual machine

vagrant up
vagrant ssh

Configure virtual machine

Install required programm sshpass for running ansible commands as root on target machines.

sudo apt-get install sshpass

Setup SSH permissions

Create ssh key

ssh-keygen -t rsa

Add id_rsa_<user>.pub to virtual machines into $HOME/.ssh/authorized_keys

Setup config files

etc/ansible/hosts

ansible1
ansible2
ansible3

etc/ansible/ansible.cfg

Create Ansible configuration file in current directory with this content:

[defaults]
interpreter_python = auto

Ansible searches for configuration files in the following order, processing the first file it finds and ignoring the rest:

  1. $ANSIBLE_CONFIG if the environment variable is set.
  2. ansible.cfg if it’s in the current directory.
  3. ~/.ansible.cfg if it’s in the user’s home directory.
  4. /etc/ansible/ansible.cfg, the default config file.

First Test

 ansible -i etc/ansible/hosts all -m ping -u vagrant

Set default Python version on Ubuntu

update-alternatives --install /usr/bin/python python /usr/bin/python3.6 1

Working with Playbooks

Create simple playbook

Create file httpd.yaml

---
- hosts: webservers
  remote_user: ansible
  tasks:
  - name: Ensure apache is installed and updated
    yum:
      name: httpd
      state: latest
    become: yes

Run playbook

ansible-playbook -i etc/ansible/hosts  httpd.yaml -kK

Troubleshooting

Allow SSH root login

$ sudo sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config

Azure | Certification Path

Certifications: 1 2

Azure Solutions Architect Expert

Qualification

  • Implementierung von Management- und Sicherheitslösungen
  • Implementieren und Überwachen einer Azure-Infrastruktur
  • Implementieren Sie Lösungen für Apps
  • Implementierung und Verwaltung von Datenplattformen
  • Entwurfsüberwachung
  • Entwurf Identität und Sicherheit
  • Entwerfen eines Datenspeichers
  • Entwicklung von Geschäftskontinuität
  • Infrastruktur entwerfen

Exams

Exams

  • Implementieren und Überwachen einer Azure-Infrastruktur (50-55%)
  • Implementierung von Management- und Sicherheitslösungen (25-30%)
  • Implementieren Sie Lösungen für Apps (10-15%)
  • Implementierung und Verwaltung von Datenplattformen (10-15%)
  • Entwurfsüberwachung (10-15%)
  • Entwurf Identität und Sicherheit (25-30%)
  • Entwerfen eines Datenspeichers (15-20%)
  • Entwicklung von Geschäftskontinuität (10-15%)
  • Infrastruktur entwerfen (25-30%)

Exam Preparation

Readings

Learning Path

AZ-303 / AZ-304

Entwerfen einer Computeinfrastruktur in Azure12
Entwerfen einer Speicherinfrastruktur in Azure9
Entwerfen einer Computeinfrastruktur in Azure9
Entwerfen von Infrastrukturvorgängen in Azure5
Entwerfen einer Datenplattform im Azure10
Entwerfen von Nachrichtenbrokern und serverlosen Anwendungen in Azure8
Entwerfen moderner Anwendungen in Azure8
Entwerfen einer API-Integration in Azure5
Entwerfen von Migration, Geschäftskontinuität und Notfallwiederherstellung in Azure9

NestJS | Getting started – Part 1

Introduction

NestJS (just Nest from here on out), is a Node framework meant to build server-side applications. Not only is it a framework, but it is also a platform to meet many backend application needs, like writing APIs, building microservices, or doing real-time communications through web sockets.

Nest is also heavily influenced by Angular, and you will immediately find its concepts familiar. The creators of Nest strived to make the learning curve as small as possible, while still taking advantage of many higher level concepts such as modules, controllers, and dependency injection.

Installation

Install NodeJS

Download NodeJS from here and install as described here.

For example, on macOS using Homebrew

brew install node

Or download the package

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg</a>.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Install NextJS

npm i -g @nestjs/cli

Create server App

Create new server App

nest new demo.server

Start server App

cd demo.server
npm run start:dev

Now open browser on http: localhost:3000

App Structure

main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

app.controller.ts

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

Add Functionality

Create service and controller

nest g service missions
nest g controller missions

Modify mission service

@Injectable()
export class MissionsService {
  missions: Mission[] = [
    { id: 1, title: 'Rescue cat stuck in asteroid', reward: 500, active: true, },
    { id: 2, title: 'Escort Royal Fleet', reward: 5000, active: true, },
    { id: 3, title: 'Pirates attacking the station', reward: 2500, active: false, },
  ];

  async getMissions(): Promise<Mission[]> {
    return this.missions;
  }
}

Modify mission controller

@Controller('missions')
export class MissionsController {
  constructor(private missionsService: MissionsService) {}

  @Get()
  getMissions() {
    return this.missionsService.getMissions();
  }
}

Open in browser: http://localhost:3000

Create Frontend App

Create new frontend App

ionic start demo.frontend sidemenu

Working with Database and TypeORM

Create / Sync database with schema

Add command to package.json

"scripts": {
    "typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js"
}
npm run typeorm schema:sync

TypeORM Commands

schema:sync         
Synchronizes your entities with database schema. It runs schema update queries on all connections you have. To run update queries on a concrete connection use -c option.
schema:log          
Shows sql to be executed by schema:sync command. It shows sql log only for your default connection. To run update queries on a concrete connection use -c option.
schema:drop         
Drops all tables in the database on your default connection. To drop table of a concrete connection's database use -c option.
query               
Executes given SQL query on a default connection. Specify connection name to run query on a specific connection.
entity:create       
Generates a new entity.
subscriber:create   
Generates a new subscriber.
migration:create    
Creates a new migration file. [Aliase: migrations:create]
migration:generate  Generates a new migration file with sql needs to be executed to update schema. [Aliase: migrations:generate]
migration:run       
Runs all pending migrations. [Aliase: migrations:run]
migration:show      
Show all migrations and whether they have been run or not
migration:revert    
Reverts last executed migration. [Aliase: migrations:revert]
version             
Prints TypeORM version this project uses.
cache:clear         
Clears all data stored in query runner cache.
init                
Generates initial TypeORM project structure. If name specified then creates files inside directory called as name. If its not specified then creates files inside current directory.

Additional readings

Frontend | Toolbox

Installation Overview

NodeJS

Angular

Ionic

Install

npm install -g @ionic/cli

Create App

ionic start Getting-Started tabs --type react

Start App

ionic serve

React / ReactJS

Install

React Native

Stencil

npm init stencil
npm install --save-exact @stencil/core@latest 
npm install --save-dev @types/jest@26.0.12 jest@26.4.2 jest-cli@26.4.2 
npm install --save-dev @types/puppeteer@3.0.1 puppeteer@5.2.1
npm test
npm start

Gatsby

NextJS

NestJS

Usefull Libraries

VideoJSHTML5 player frameworkVideoHomeGithub
Animate on ScrollAnimationHomemichalsnik/aos
ScrollMagicAnimationHome
ScrollRevealJSAnimationHome/jlmakes/scrollreveal
PixiJSGraphicsHomepixijs/pixi.jsthub
AnimeAnimationHomejuliangarnier/anime
ThreeJSGraphicsHomemrdoob/three.js
animate.cssAnimationHomeanimate-css/animate.css
HowlerJSAudio libraryAudioHomeGithub
RevealJSHTML Presentation FrameworkPresentationHomeGithub
ChartJSChartHomeGithub
anime.jsHome
granim.jsCreate fluid and interactive gradient animationsGraphicsHomesarcadass/granim.js
Multiple.jsSharing background across multiple elements using CSSHomeNeXTs/Multiple.js
choreographer-jsA simple library to take care of complicated animations.Homechristinecha/choreographer-js
cleave.jsFormat your <input/> content when you are typingHomenosir/cleave.js
premonishHomemathisonian/premonish
SplittingAnimationHomeCodepenshshaw/splitting/

More to read