16 Mrz

Ionic 4 | Starting with Capacitor

Introduction

Git Repository is here

npm -g install ionic

ionic start SampleApp super  --no-link

cd SampleApp

npm install --save @capacitor/core @capacitor/cli

npx cap init sample-app com.example.sampleapp
npm install -save @capacitor/core
npx cap add ios

npm run build

npx cap copy
npx cap copy ios
npx cap open ios

Installation

Requirements

Working with Ionic and Capacitor needs additional software like node and python.

To separate our development environment from other parts of our system, we will use virtual environments for both parts:

To automatically setup this environment when entering the directory, additionally we will use direnv. Read this post to get more detailled information about direnv.

Setup under Mac OS

Install components

Use Homebrew to install the required components

$ brew install direnv nvm pyenv

Configure direnv

Configure your shell to use direnv. Add the following into your .profile or .bashrc.

eval "$(direnv hook bash)"

Change to your development directory and setup direnv

cd <your development dir>

Use this file as as starter for direnv. Copy the file into the directory with the name .envrc

After saving or creating the file .direnv, you will see the following direnv message:

direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

Just type direnv allow, to use this file

$ direnv allow
direnv: loading .envrc
setup               : nvm        (<your development directory>/.env/nvm)
set default         : nvm        (default)
N/A: version "default -> N/A" is not yet installed.

You need to run "nvm install default" to install it before using it.
set default         : python     (2.7.14)
pyenv: version `2.7.14' not installed
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.7.1)
Enabled             : npm        (5.6.0)
pyenv: version `2.7.14' is not installed (set by <your development directory>/.python-version)
Enabled    
direnv: export +NVM_RC_VERSION ~NVM_DIR         : python     ()

Install additional software components

See the error messages in line 7 and 13? You need to install node and python:

$ nvm install 10.8.0
$ pyenv install 2.7.15

The desired versions are activated by direnv because of this lines in you .envrc

# Activate Node
$ nvm use default --silent

# Activate Python
$ pyenv local $PYTHON_VERSION

Final check

Leave the directory and reenter again, or type direnv reload

direnv: loading .envrc
setup               : nvm        (<your development directory>/.env/nvm)
set default         : nvm        (default)
set default         : python     (2.7.14)
Enabled             : nvm        (0.33.8)
Enabled             : node       (9.8.0)
Enabled             : npm        (5.6.0)
Enabled             : python     (Python 2.7.14)
Enabled             : python2    (Python 2.7.14)
direnv: export ~NVM_DIR

Prepare for capacitor

Detailed description can be found here

Start with a Ionic template

Ionic 3
$ npm -g install ionic
Create sample app from template and change to the SampleApp directory
$ ionic start SampleApp super --no-link --bundle-id com.example.sampleapp
$ cd SampleApp

Important: Be sure to say NO no when asked for integration of Cordova. We will use Capacitor.

Build your app, we will need the www directory with the web files
 $ npm run build
 Add capacitor support
$ npm install --save @capacitor/core @capacitor/cli
$ npx cap init sample-app com.example.myapp
$ npm install -save @capacitor/core
$ npx cap add ios
Build your app
$ npx cap copy ios
$ npx cap open ios

The last command starts Xcode:

Now, you can build and run your iOS App

18 Feb

Ionic | Troubleshooting

Custom Components

Use ion-* components in a custom component

Create the custom html file, for example with this content

<ion-grid no-padding no-margin class="custom-component">
  <ion-row class="star">
    <ion-col text-center *ngFor="let item of items">
      <button ion-button item-end outline icon-start (click)="itemSelected(item)">
        <ion-icon name='star'></ion-icon>{{ item }}
      </button>
    </ion-col>
  </ion-row>
</ion-grid>

Create a components.module.ts file and add this to the imports:

imports: [
  IonicModule
],

General Build Errors

How to fix TypeError: Cannot read property ‚Private‘ of undefined

$

How to fix TypeError: AppScripts.serve is not a function

$ npm install --save-dev @ionic/app-scripts@latest

How to fix Error: Cannot find module ‚@ionic/app-scripts‘

$ npm install --save-dev @ionic/app-scripts@latest

How to fix Error: Cannot find module ‚@angular/tsc-wrapped/src/tsc‘

$ npm install --save-dev @angular/tsc-wrapped@latest

How to fix Error: Cannot find module ‚@angular/compiler-cli‘

$ npm install --save-dev @angular/compiler-cli@latest

How to fix Error: Cannot read property ‚replace‘ of undefined

Read here for details

$ npm install ios-sim@latest

Or edit line 283 in file lib.js and follow https://github.com/phonegap/ios-sim/pull/213/files

vi platforms/ios/cordova/node_modules/ios-sim/src/lib.js

Change to

list.push(util.format('%s, %s', name_id_map[ filterDeviceName(devicename) ].replace(/^com.apple.CoreSimulator.SimDeviceType./, ''), runtime.replace(/^iOS /, '')));

How to fix Error: spawn EACCES

$ ionic hooks add

How to fix Cannot find variable WebpackJsonp

$

How to fix Class ‚Subject<T>‘ incorrectly extends base class ‚Observable<T>‘. Types of property ‚lift‘ are incompatible

Update your typescript module

 

 

 

 

 

 

 

03 Feb

Ionic 3 | Working with moments.js

Introduction

With moment.js, you can

Parse, validate, manipulate, and display dates and times in JavaScript.

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

Preparation

Create your empty app

$ ionic start working-with-moments blank --no-git --no-link

Install npm Module

$ cd  working-with-moments
$ npm install moment
+ moment@2.20.1
added 1 package in 3.001s

Start Editor and serve your app

$ vscode .
$ ionic serve

Add moments.js functionality

Change pages/home/home.ts

Add the moments.js reference to pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as moment from 'moment';

Create a var for the current date/time

export class HomePage {
  public date: any;

  constructor(public navCtrl: NavController) {
    this.date = moment();
  }
}

Change pages/home/home.html

<ion-content padding>
  The current date/time is {{ date }}
</ion-content>

Summary

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

$ ionic start app https://github.com/ionic-toolbox/working-with-moments

 

02 Jul

Ionic 3 | App from Scratch: Linkes und Rechtes Menu

Definieren der beiden Seitenmenüs in app.html

<ion-menu [content]=“contentLeft“> ….</ion-menu> <ion-menu side=“right“ [content]=“contentRight“>….</ion-menu> …. <ion-nav [root]=“rootPage“ #contentLeft #contentRight swipeBackEnabled=“false“></ion-nav>

<ion-menu [content]="contentLeft"> 
	....
</ion-menu> 
<ion-menu side="right" [content]="contentRight">
	....
</ion-menu> 
.... 
<ion-nav [root]="rootPage" 
	#contentLeft 
	#contentRight 
	swipeBackEnabled="false">
</ion-nav>

Zwei Schaltflächen hinzufügen

<ion-header>
   <ion-navbar>
      <button ion-button start menuToggle>
         <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Demo of two Sidemenus</ion-title>
      <button ion-button end menuToggle="right">
         <ion-iconname="menu"></ion-icon>
      </button>
   </ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>

Ergebnis

Github Repository

Hier liegt der Beispielcode.

02 Jul

Ionic 3 | App from Scratch: Two Sidemenus

Define two sidemenus in app.html
<ion-menu [content]="contentLeft"> ....</ion-menu>
<ion-menu side="right" [content]="contentRight">....</ion-menu>
 ....

 <ion-nav [root]="rootPage" #contentLeft #contentRight swipeBackEnabled="false"></ion-nav>
Add buttons to page
<ion-header>
   <ion-navbar>
      <button ion-button start menuToggle>
         <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Demo of two Sidemenus</ion-title>
      <button ion-button end menuToggle="right">
         <ion-iconname="menu"></ion-icon>
      </button>
   </ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Result

Github Repository

You can find the code here