Introduction

The javascript library jsPDF, is a Client-side JavaScript PDF generation for everyone.

With a npm-Module, you can integrate this functionality into your Ionic App.

This Git Repository with the code for this blog is here.

Preparation

Create your empty app

❯ mkdir Ionic_Working-with_jsPDF
❯ cd Ionic_Working-with_jsPDF

❯ ionic start app sidemenu  --type angular
√ Preparing directory .app in 2.63ms
√ Downloading and extracting sidemenu starter in 665.67ms
? Integrate your new app with Capacitor to target native iOS and Android? No

❯ cd app

Install npm Module

❯ npm install        jspdf
❯ npm install @types/jspdf

oder

❯ yarn add        jspdf
❯ yarn add @types/jspdf

Start Editor and serve your app

❯ vscode .
❯ ionic serve

Add new Page for PDF functionality

Create new Page

❯ ionic generate page pages/PDF

Add page to sidemenu

Edit app.components.ts

public appPages = [
	{	title: 'PDF',	url: '/pdf',		icon: print'	},
	{	title: 'Inbox',	url: '/folder/Inbox',	icon: 'mail',	},

Add jsPDF functionality

Add jspfs reference to pages/pdf/pdf.page.ts

import { jsPDF } from 'jspdf';

Create a function for converting to PDF

public downloadPDF() {
	var data = document.getElementById('printcontent') as HTMLElement;

	let pdf = new jsPDF('p', 'mm', 'a4');

	pdf.html(data, {
		callback: (pdf) => {pdf.output('dataurlnewwindow');}
	});
}

Add download button

Change pages/pdf/pdfhtml

<div>
	<input type="button" value="Convert" (click)="downloadPDF()" />
</div>

Summary

A lot more examples could be found in my repository. Just create a starter app with this template and begin to play

11Jan

Installation

Install current Version (3.2.8)

❯ pip install django==3.2.8

Install next Version (4.0)

❯ pip install --pre django

Check installed version

❯ python -m django --version

❯ django-admin.exe version

First steps

The following steps are based on a summary of the Django Tutorial

Create project

django-admin startproject main
cd working_with_django
python manage.py migrate
python manage.py runserver 8080
python manage.py startapp app_base

Create view

Create view in app_base/views.py

from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

Add view to app_base/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

Add urls to project main/urls.py

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app_base/', include('app_base.urls')),
]

Create admin user

$ python manage.py createsuperuser
Username (leave blank to use 'user'): admin
Email address: admin@localhost
Password: 
Password (again): 
Superuser created successfully.

Create data and database

Create database model in app_base/models.py

from django.db import models

class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

Activating models in main/settings.py

INSTALLED_APPS = [
    'app_base.apps.AppBaseConfig',

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

$ python manage.py makemigrations app_base
$ python manage.py sqlmigrate app_base 0001

Make app modifiable in the admin (app_base/admin.py)

from django.contrib import admin
from .models import Question

admin.site.register(Question)

Writing more views

Create views in app_base/views.py

def detail(request, question_id):
    return HttpResponse("You're looking at question

def results(request, question_id):
    response = "You're looking at the results of question
    return HttpResponse(response

def vote(request, question_id):
    return HttpResponse("You're voting on question

Add new views into `app_base/urls.py`

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),

    path('<int:question_id>/', views.detail, name='detail'),
    path('<int:question_id>/results/', views.results, name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]

Add template in app_base/templates/polls/index.html

    <ul>
    
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    
    </ul>

    <p>No polls are available.</p>




Modify view in app_base/views.py



from django.shortcuts import render
...
def index(request):
    latest_question_list = Question.objects.order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    return render(request, 'polls/index.html', context)
Raising a 404 error in app_base/views.py
from django.http import HttpResponse
from django.shortcuts import render, get_object_or_404

from .models import Question
# ...
def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    return render(request, 'polls/detail.html', {'question': question})
Create template app_base/templates/polls/detail.html
<h1>{{ question.question_text }}</h1>
<ul>

    <li>{{ choice.choice_text }}</li>

</ul>
Removing hardcoded URLs in app_base/templates/polls/index.html
<li>
   <a href="
</li>
The way this works is by looking up the URL definition as specified in the app_base/urs.py
...
# the 'name' value as called by the 
path('<int:question_id>/', views.detail, name='detail'),
...
Namespacing URL names in app_base/urls.py
app_name = 'app_base'

urlpatterns = [
...
Then, modify link in app_base/templates/polls/index.html
from url ‘detail’ to url ‘app_base:detail’
<li>
    <a href="
</li>
Use generic views: Less code is better
Create class in app_views/views.py
class HomeView(generic.TemplateView):
    template_name = 'index.html'
Create template app_views/templates/index.html
<h1>App Views:</h1>
Welcome
Modify app_views/urls.py
urlpatterns = [
    path('', views.HomeView.as_view(), name='home'),
]
Add another app to main project
Create app
$ python manage.py startapp app_view
Modify main/urls.py
urlpatterns = [
    path('admin/',     admin.site.urls),
    path('app_base/',  include('app_base.urls')),
    path('app_views/', include('app_views.urls')),
]
Add data model in app_views/models.py
from django.db import models

class DataItem(models.Model):
    text = models.CharField(max_length=200)
    data = models.IntegerField(default=0)

    def __str__(self):
        return self.text
Register data in app_views/admin.py
from django.contrib import admin
from .models import DataItem

admin.site.register(DataItem)
Activate models
$ python manage.py makemigrations app_views
$ python manage.py sqlmigrate app_views 0001
$ python manage.py migrate app_views
Navigation / Redirection
Set root page of Django project
When accessing your Django project, the root page will normaly doesn’n show your app homepage.
To change this, you hate to modiy the url handling.
In the following sample, replace <appname> with the name of your app
Define a redirection view in your app (/<appname>/urls.py)
def redirect_to_home(request):
    return redirect('/<appname>')
Define path in the global urls.py  (/main/urls.py)
from django.contrib import admin
from django.urls import include, path
from django.shortcuts import redirect

from <appname> import views

urlpatterns = [
    path('',            views.redirect_to_home, name='home'),
    path('<appname>/',  include('<appname>.urls')),
    path('admin/',      admin.site.urls)
]
Highlight current page in navigation menu
<div class="list-group">
    <a href="
            Basic Upload
    </a>
    <a href="
            Progress Bar Upload
    </a>
</div>
Using PostgresSQL Database
Install PostgresSQL
Create Superuser
createuser.exe --interactive --pwprompt
Logging
Additional reading
Tutorials
https://realpython.com/django-redirects/
https://django-best-practices.readthedocs.io/en/latest/
https://www.geeksforgeeks.org/tag/python-django/
https://www.django-rest-framework.org
Testing
https://tox.readthedocs.io/en/latest/#
Blogs and Posts
Django Basics for a Beginner at medium.com
Django Quiz
Resolving problems
Wrong template is used
The template system is using a search approach to find the specified template file, e.g. ‘home.html’.
If you created more than one apps with the same filenames for templates, the first one will be used.
Change the template folders and add the app name, e.g.
template/
        app_base/
                home.html
Resolving error messages and erors
‘app_name’ is not a registered namespace
One reason for this error is the usage of a namespace in a link.
Back to <a href="



If you want to use this way of links, you have to define the namespace/appname in your <app>/urls.py file



app_name = 'app_views'
urlpatterns = [
    path('', views.HomeView.as_view(), name='home'),
]
dependencies reference nonexistent parent node
Recreate database and migration files
Remove all migration files under */migrations/00*.py
Remove all pycache folders under */__pycache__ and */*/__pycache__
Run migration again
$ python manage.py makemigrations
$ python manage migrate
ValueError: Dependency on app with no migrations: customuser
$ python manage.py makemigrations
Project Structure
Running tasks with Makefile
PREFIX_PKG := app

default:
	grep -E ':\s+#' Makefile

clearcache:	# Clear Cache
	python3 manage.py clearcache

run:		# Run Server
	python3 manage.py runserver 8000

deploy:		# Deploy
	rm -rf dist $(PREFIX_PKG)*
	rm -rf polls.dist
	cd polls && python3 setup.py sdist
	mkdir polls.dist && mv polls/dist/* polls/$(PREFIX_PKG)* polls.dist

install_bootstrap:	# Install Bootstrap Library
	cd .. && yarn add bootstrap
	rm -rf  polls/static/bootstrap
	mkdir   polls/static/bootstrap
	cp -R ../node_modules/bootstrap/dist/* polls/static/bootstrap

install_jquery:		# Install jQuery Library
	cd .. && yarn add jquery
	rm -rf polls/static/jquery
	mkdir  polls/static/jquery
	cp ../node_modules/jquery/dist/* polls/static/jquery

install_bootstrap_from_source:	# Install Bootstrap from Source
	mkdir -p install && \
	wget https://github.com/twbs/bootstrap/releases/download/v4.1.3/bootstrap-4.1.3-dist.zip -O install/bootstrap-4.1.3-dist.zip && \
	unzip install/bootstrap-4.1.3-dist.zip -d polls/static/bootstrap/4.1.3

28Dec

Angular | Getting Started with matter.js

by Ralph Angular, matter.js

Matter.js is a 2D rigid body physics engine for the web written in JavaScript.

Creating an angular app with pages using matter.js is easy. Complete code is here.

For a more details post, please take a look at here: Angular | Working with matter.js

Create starter app

First, create a default angular app with ng new.

❯ ng new app-starter
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

cd app-starter

Add matter.js

Matter.js is a javascript library, so we have to add the corresponding files to our angular app. We will use the npm module matter-js.

npm install matter-js

We also add the type definitions, so that Visual Studio code knows how to check our code.

npm install @types/matter-js --save-dev

Clear content of app.component.html

To keep out demopage clean, we will remove unnecessary code from app.component.html.

Remove all of the content and just keep the last line

<router-outlet></router-outlet>

Create pager for MatterJS democode

We will use a seperate Angular component/page for our matter.js demo

 ng generate component pages/Demo

app-routing.module.ts

Next, we add a routing for our demopage.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DemoComponent } from './pages/demo/demo.component';

const routes: Routes = [
  { path: 'demo', component: DemoComponent },
  { path: '',   redirectTo: '/demo', pathMatch: 'full' },
  { path: '**', redirectTo: '/demo', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Start App

Ready to take a first look at our app.

yarn start

demo.component.scss

Now, we do a little styling

.demo {
    background-color: lightgray;
    border: 4 dotted black;
}

demo.component.ts

And finally the matter.js code. Starting with the default imports for a angular app

import { Component, OnInit } from '@angular/core'

Next, we import the required matter.js parts

import { Engine, Runner, Render, World, Constraint, MouseConstraint, Bodies} from 'matter-js'

Following the definition for our DemoComponent

@Component({
	selector: 'app-minimal',
	templateUrl: './demo.component.html',
	styleUrls: ['./demo.component.scss'],
})
export class DemoComponent implements OnInit {
	constructor() {}

	ngOnInit() {
		this.demo()
	}

	demo() {
	}
}

The main code of out demo will be in the function demo()

	demo() {
		var engine = Engine.create()
		var render = Render.create({
			element: document.body,
			engine: engine,
			options: {
				width: 800,
				height: 400,
				wireframes: false,
			},
		})

		var boxA = Bodies.rectangle(400, 200, 80, 80)
		var ballA = Bodies.circle(380, 100, 40, {})
		var ballB = Bodies.circle(460, 10, 40, {})
		var ground = Bodies.rectangle(400, 380, 810, 60, {
			isStatic: true,
		})

		World.add(engine.world, [boxA, ballA, ballB, ground])

		Engine.run(engine)
		Render.run(render)
	}
}

19Oct

General Readings

https://reactjs.org/

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

Add Typescript Support

yarn create react-app app-getting-started-with-typescript --folder-name
cd app-getting-started-with-typescript

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Testing: Tools and Frameworks

ReactJS related

React Testing Utilities – Home
Jest – Delightful JavaScript Testing Framework with a focus on simplicity – Home
Jasmine – Home | Github
Enzyme – Home | Github

Others

Karma – Home | Github

9Oct

Readings

The official docs

The Beginner’s Guide to ReactJS by Kent C. Dodds

Fundamentals of React by Samer Buna

React Holiday by michael chan

React Enlightenment by cody lindley

Advanced React Component Patterns by Kent C. Dodds

React Patterns by michael chan

Learning Path

Fundamentals Props and State
- Create React App
- JSX
- Function Components
- Class Components
- useState and useEffect Hooks
- setState and Component Lifecycle Methods
- Conditional Rendering
- Lists and Keys
- Building Simple Forms
Advanced Topics
- Hooks
  - useContext
  - useReducer
  - useRef
  - useMemo
  - useCallback
  - Custom Hooks
- Context
- Higher Order Components
- Render Props
- Refs
- Error Boundaries
- Portals
- HTTP Requests
  - GET
  - POST
Ecosystem
- State Management
  - Redux/ Mobx
  - Apollo Client
- Routing
  - React Router
- Styling
  - Styled Components/ Emotion
  - Tailwind CSS
  - Chakra UI / Material UI / Ant Design
- Forms
  - Formik
  - React Hook Form
- Testing
  - Jest + React Testing Library
  - Cypress
- Misc
  - TypeScript
  - React i18Next
  - Storybook
  - Firebase
  - Practical React Libraries
- Next Steps
  - Gatsby
  - Next.js
  - React Native

Topics

Create React App
Functional Components
Class Components
JSX
Props And State
useState and useEffect Hooks
setState and Component Lifecycle Methods
Conditional Rendering
Lists and Keys
Building Simple Forms

Get Started

Create App

Run the following commands to create a new React Native project called “app-getting-started”:

npx create-react-app  app-getting-started
cd app-getting-started

Start App

npm start

23Sep

React Native | Getting Started

by Ralph React, React Native, ReactJS

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

7Sep

NestJS | Getting started – Part 1

by Ralph AngularJS, Ionic, NestJS

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

23Feb

Django | Build a Dashboard with Django and Bootstrap: Part 3

by Ralph Bootstrap, Django

This is Part 3 of Building a Dashboard with Django and Bootstrap:

Part 1: Building a base Django project
Part 2: Prepare for dynamic content
Part 3: Handling navigation and the side menu
Part 4: Deploy Django App to Azure

Introduction

If you follow the first part of this blog topic, you have a running Django dashboard.

But, the content ist still static. Lets review the current state:

Prepare our Django project

Right now, the whole content of our Django project is provided by the dashboard template

dashboard/template/site/base.html

Looking at our web site, you will see the different side menu items. So, intentionally, our web site should display different pages. And each page should provide the dynamic content.

The final goal of this part is to change our web app, so that each side item navigates us to a different page. For this, we have to take care about two things:

Navigation: how to we get to another page in our app
Project Structure: where to place the required components for each page

Basics of Navigation

Navigation usually is the process of getting from one page to another by clicking on a link.

So, we need to things:

the source page, containing the link
the destination page
the link, pointing to the destination page

Let’s take a look into the site template with the side menu:

The corresponding code in the side template is

<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
	<div class="bg-white py-2 collapse-inner rounded">
		<h6 class="collapse-header">Custom Components:</h6>
		<a class="collapse-item" href="buttons.html">Buttons</a>
		<a class="collapse-item" href="cards.html">Cards</a>
	</div>
</div>

This is the result:

Linking to a html page is not possible, because Django does not work with html pages. Navigation in Django works with urls (in urls.py) and views in (views.py).

We must replace the html link tag (<a href="buttons.html">) with an Django-conform code. Read here for more details and the basics.

The idea behind the navigation is