07 Dez

Learning Ionic | Tag 4: Grundlagen Ionic – Vorbereitung

Bereitstellen einer lokalen Ionic Dokumentation

In Zielverzeichnis wechseln

Für Windows

cd C:\Enrichtment\Daten

Für Linux/Mac OS

cd /Enrichtment/Daten

Dokumentation installieren

Repository clonen

git clone https://github.com/ionic-team/ionic-docs.git

Dokumentation erstellen

cd ionic-docs
npm install
npm run docgen

Dokumentation anzeigen

npm run dev

Abbrechen und zurück ins Datenverzeichnis

<STRG>-C drücken
cd ..

Ionic installieren/aktualisieren

npm i -g ionic
npm i -g capacitor

Apps vorbereiten

mkdir 10_enrichment_app
cd    10_enrichment_app

Preview Apps erstellen

git clone https://github.com/ionic-team/component-preview.git
cd component-preview
npm install
cd ..
git clone https://github.com/ionic-team/ionic-preview-app.git
cd ionic-preview-app
npm install
cd ..

Basis für Workshop erstellen

mkdir 10_enrichment_app
cd    10_enrichment_app
ionic start EnrichmentApp sidemenu --type angular --no-link

13 Nov

Learning Ionic | Tag 2: Grundlagen HTML und CSS

Heute lernen wir HTML und CSS anzuwenden. Am Ende gibts es auch noch ein paar Übungen und Fragen

Erste Schritte

Die nachfolgenden Beispiele setzen auf eine vorhandene Ionic App auf. Als Beispiel wir einen App verwendet, die mit der Vorlage sidemenu erstellt wurde.

ionic start sidemenu sidemenu --type angular --no-link

Titel ändern

Wir ändern den Titel der Seite home. Die Änderung erfolgt in der Datei home.page.html:

<ion-title>Arbeiten mit CSS</ion-title>

Farbe des Titels

Den geänderten Titel formatieren wir nun mit einer individuellen Farbe. Die Änderung erfolgt in der Datei home.page.css:

ion-title {
	color: #3880ff;
}

Farbe des Hintergrund

Jetzt setzen wir den Hintergrund des Titels:

ion-title {
	color: #ffffff;
	background-color: #ff0000;
}

Weiterer Text und Formatierung

In nächsten Schritt fügen wir weiter Überschriften in die Seite ein:

<ion-content padding>
	<h1>Überschrift H1</h1>
	<h2>Überschrift H2</h2>
</ion-content>

Überschrift H1

Überschrift H2

Für diese Überschriften passen wir nun auch die Formatierung an:

h1 {
    color: #ff0000;
    background-color: #000000;
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    color: #000000;
    background-color: #ff0000;
    font-style: italic;
}

Überschrift 1

Überschrift 2

Weitere Beispiele

Und zum Abschluss weiter Textelemente und Formatierungen:

<ion-content padding>
  <h1>Überschrift 1</h1>
  <h2>Überschrift 2</h2>
  <h3>Überschrift 3</h3>
  <h4>Überschrift 4</h4>

  Normaler Text
  Die Welt ist <b>rund</b> und gross.
</ion-content>
ion-title {
    color: #ffffff;
    background-color: #00ff00;
}
h1 { color: greenyellow;}
h2 { color: red;}
h4 {
    background-color: aqua;
    font-family: 'Courier New';
}

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Normaler Text Die Welt ist rund und gross.

Grundlagen HTML

Detaillierte Informationen zur den HTML-Tags gibt es hier und hier:

HTML Elemente

Grundlegende HTML Tags

<div>Block element</div>
Block element
<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>

Page title

Subheading

Tertiary heading

Quaternary heading

<p style="text-align: center;">text</p>

text

<img src="http://blog.via-internet.de/wp-content/uploads/2018/03/logo-toolbox.png" alt="description" height="48" width="100" />
description
<a href="https://htmlg.com/" target="_blank" rel="nofollow">Click here</a>
<a href="mailto:info@http://ionicteam.de/?Subject=Hi%20mate" target="_top">Send Mail</a>
Sprung an eine andere Stelle
<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Sprungstelle

Sprung an eine andere Stelle

Jump to footnote

Sprungstelle

<strong>Bold text</strong>
Bold text

<em>Italic text</em>
Italic text
<span style="text-decoration: underline;">
    Underlined text
</span>
Underlined text
<abbr title="Hypertext Markup Language">
    HTML
</abbr>
HTML
<!-- HTML
Comment -->
Vorher<hr />Nachher
Vorher
Nachher
Vorher<br />Nachher
Vorher
Nachher
<q>Success is a journey not a destination.</q>
Success is a journey not a destination.
<blockquote cite="https://ruwix.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote> 
The Rubik’s Cube is the World’s best selling puzzle toy.

Gliederungen und Textformatierungen

<table>
    <tr>
        <td>1.1</td><td>1.2</td>
    </tr
    <tr>
        <td>2.1</td><td>2.2</td>
    </tr>
</table>
1.11.2
2.12.2

Tabelle mit Überschrift und mehreren Spalten

<table><caption><b>Telefonnummern</b></caption>
<thead>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Mustermann</td>
        <td>1234567</td>
        <td>577855</td>
    </tr>
    <tr>
        <td>Musterfrau</td>
        <td>0789</td>
        <td>98765</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td> </td>
        <td>Vorwahl</td>
        <td>Rufnummer</td>
    </tr>
</tfoot>
</table>
Telefonnummern
Name Phone
Mustermann 0123 1234567
Musterfrau 0789 98765
  Personal Office

Tabellen mit verbundenen Spalten und Zeilen

<table border="1">
 <tr>
  <td colspan="2">Row 1 - Col 1 & Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td>Row 2 - Col 2</td>
 </tr>
</table>
Row 1 – Col 1 & Col 2
Row 2 – Col 1 Row 2 – Col 2
<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td rowspan="2">Row 1 & Row 2 - Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
 </tr>
</table>
Row 1 – Col 1 Row 1 & Row 2 – Col 2
Row 2 – Col 1
<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td>Row 1 - Col 2</td>
  <td>Row 1 - Col 3</td>
  <td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
 </tr>
 <tr>
  <td>Row 3 - Col 1</td>
 </tr>
 <tr>
  <td>Row 4 - Col 1</td>
 </tr>
 <tr>
  <td colspan="2">Row 5 - Col 1 & 2</td>
  <td colspan="2">Row 5 - Col 3 & 4</td>
 </tr>
 <tr>
  <td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
 </tr>
</table>
Row 1 – Col 1 Row 1 – Col 2 Row 1 – Col 3 Row 1, 2, 3 & 4 – Col 4
Row 2 – Col 1 Row 2, 3 & 4 – Col 2 & 3
Row 3 – Col 1
Row 4 – Col 1
Row 5 – Col 1 & 2 Row 5 – Col 3 & 4
Row 6 – Col 1, 2, 3 & 4

Listen

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets </dd>
</dl>
HTML
Hypertext Markup Language
CSS
Cascading Style Sheets

Listen

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

Grundlagen CSS

Detaillierte Informationen zur den HTML-Tags gibt es hier und her:

Einbinden von CSS

Es gibt verschiedene Arten, CSS-Definitionen in eine Webseite oder eine ganzen Web-App einzubinden.

Inline CSS

Hier wird die CSS-Definition direkt im HTML-Code eingefügt. Eine einfache Möglichheit mit dem Nachteil, das sie nu an dieser Stelle und für das verwendete Element gültig ist.

<h1 style="color: blue">
    Hello world!
    </h1>

Internal CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

CSS Selectors

Element

Der erste Möglichkeit, ein HTML Element zu formatieren ist, den Namen des HTML-Elementes selbst zu verwenden. Die Formatierung gilt dann nur für das angegebene Element, im nachfolgenden Beispiel also h1 und p:

h1 {
    font-size: 50px;
}

Überschrift 1

p {
    color: green;
}

Dies ist der Tag p

div {
    background-color:red;
}
Tag div

Class

Eine andere Möglichkeit ist die Verwendung einer CSS Klasse. Hier wird über einen Namen (dem Namen der Klasse) die Formatierung zusammengefasst. Der Name der Klasse wird dann im HTML-Element verwendet.

Vorteil: Die Formatierung kann mehreren, auch unterschiedlichen HTML-Elementen zugewiesen werden:

<h1 class='container'>
    Beispiel 1
</h1>
<h1>
    Beispiel 1
</h1>
<p class='container'>
    Beispiel 3
</p>
.container {
    background-color: #F39C12;
}

Beispiel 1

Beispiel 2

Beispiel 3

ID

Eine weitere Möglichkeit der Zuweisung von CSS-Formatierung ist die Verwendung einer ID. Diese erfolgt ebenfalls wie bei einer Klasse über den Namen der ID.

Im Unterschied zu einer Klasse darf eine ID nur einmal in einer HTML Seite verwendet werden:

<div>
<p>Paragraph</p>
<p id='para1'>Paragraph</p>
<p>Paragraph</p>
</div>
#para1 {
    color: green;
    font-size: 16px;
}

Paragraph

Paragraph

Paragraph

Fonts & Colors

<div class='container'>
    <h1 class='heading1'>
        CSS ist toll!
    </h1>
</div>
.container {
    width: 200px;
    height: 100px;
    background-color: red;
    text-align: center;
}
.heading1 {
    font-family: 'Courier New';
    color: white;
}

CSS ist toll!

09 Nov

Ionic 4 | Installation on Unix

Prepare environment

Install nvm and Node

Change to users home and create users’s profile .bash_profile (if not exist)

cd $HOME
touch .bash_profile

Download nvm install script and run it. The installation script also modifies the users’s profile .bash_profile

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Run users’s profile, so nvm will be installed. This ist done automatically after login.

. .bash_profile

Install latest Node LTS version

# install latest version
nvm install node --reinstall-packages-from=node

# install a specific version
npm -install 8.12.0

# set nvm aliases (used in direnv configuration)
nvm alias latest 8.12.0
nvm alias default 8.12.0

# install additioal packages
npm -g install ionic@latest
npm -g install capacitor@latest

Create Ionic sample Apps

mkdir -p daten
cd daten
ionic start tabs tabs --type angular —-no-link
ionic start sidemen sidemenu --type angular —-no-link

Install direnv

Installation on macOS

For more  information read here

brew install direnv

Installation on Linux

Ubuntu Linux

sudo apt-get update  
sudo apt-get install direnv  

Configfile for direnv

#!/bin/bash

#-------------------------------------------------------------------------------

	SELF=$BASH_ARGV
	HERE="$(cd $(dirname "$SELF"); pwd)"
	SELF="$(basename "$SELF")"

#-------------------------------------------------------------------------------
PRINT()
{
	GRP="$1"; shift
	CMD="$1"; shift
	PAR="$*"

        printf "%-20s: %-10s (%s)\n" "$GRP" "$CMD" "$PAR"
}

#-------------------------------------------------------------------------------
	PRINT "config" "$HERE" "$SELF"

	PYTHON_VERSION=2.7.14
	NODE_VERSION=latest

	export NVM_DIR="$HERE/.env/nvm"

	PRINT "setup" "nvm" "$NVM_DIR"
	. /usr/local/opt/nvm/nvm.sh

	PRINT "set latest" "nvm" "$NODE_VERSION"
        nvm use $NODE_VERSION --silent

	PRINT "set latest" "pyenv" "$PYTHON_VERSION"
        pyenv local $PYTHON_VERSION 2>&-

        PRINT "Enabled" "nvm"      "$(nvm      --version)"
        PRINT "Enabled" "node"     "$(node     --version | sed '1,$s/v//g')"
        PRINT "Enabled" "npm"      "$(npm      --version)"
        PRINT "Enabled" "python"   "$(python   --version 2>&1)"
        PRINT "Enabled" "python2"  "$(python2  --version 2>&1)"

.bashrc


# setup direnv
eval "$(direnv hook bash)"