Archiv der Kategorie: Development

Building a cross-platform app with Apache Cordova, Ionic 3, AngularFire 2, Angular 4 and Google Firebase

After reading about 50234 different tutorials, I decided to write down the steps for a development environment on Ubuntu 16.

Install node.js. Minimum version 6. Here for Ubuntu.

The first two commands to reset/cleanup your global installation. Also make sure, there is no old binary in /usr/local/bin/.

$ sudo aptitude purge nodejs
$ sudo rm -r /usr/lib/node_modules
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo aptitude install nodejs

Also install the SDKs for your target platforms. Android or iOS.

Install the needed packages (-g for global installation).
$ sudo npm install -g ionic@latest cordova typescript typings

Your system should look anything like this:

$ ionic info
Your system information:
Cordova CLI: 7.0.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.3
Xcode version: Not installed

Create a new Ionic project. This will also create the project folder.
$ ionic start hybridapp blank --v2

where hybridapp is the name of the app and blank is a starter template layout (See $ ionic start –list for more examples). –v2 is needed to build the newest ionic version. Change into the project folder. This is your home now.

Install the needed npm packages (inside your project folder).

$ npm install firebase angularfire2 –save

Following this guide, I edited the package.json file. Not needed when using the correct ionic cli version.

Go to https://firebase.google.com/ and create an account. Create a new project and select „Add Firebase to your web app“. Edit the file src/app/app.module.ts and add your details.


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { AngularFireModule } from 'angularfire2';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

export const firebaseConfig = {
apiKey: "your api key",
authDomain: "your domain",
databaseURL: "your url",
storageBucket: "your id",
messagingSenderId: "your id"
};

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Try starting the setup with

$ npm run ionic:serve

If everything works, backup your files, commit to your git so you have a working base installation.

You can now start developing. Have fun.

Trakt.Watch 1.2 update – Loading screen, watchlist

I updated the pebble watchapp to version 1.2 and added two new features:

  • Loading screen
  • Watchlist

Since most entries require a web request to get the relevant data, there is always some loading time. Depending on your bluetooth connection to your phone and your phone’s network connection, this can take a few seconds. To make it visible, that the app is working and processing your request, I added a loading screen when making a web request.

I added a new menu entry: watchlist. At the moment the menu only shows the episodes on your watchlist. I’m planing to add shows and to mark them as watched.

I would love to hear some user feedback and your feature requests.

 

Trakt.Watch v1.1 for pebble released

I got my Pebble 2 a few weeks ago and decided to tinker a little bit with the SDK. Since I’m using trakt.tv to track my tv shows and wanted to try a few things, I build a watchapp for my pebble and released it today.

At the moment the app is able to:

  • authenticate against the trakt.tv api using the API (using the watchapp configuration dialog)
  • show your „on deck“ episodes
  • add the episode to you watch history (with current timestamp)
  • show your history of watched shows
  • „unwatch“ an episode
  • show basic user information
  • show auth information

Maybe I will add some more features in the future.

You can find more info about the app here: https://qstracker.com/traktwatch/. You’re welcome to try the watchapp and leave some comment.

The process of build the app and all other things needed to operate this (oauth handler etc) was quite fun and I’m thinking about porting this for some other APIs.

node.js webserver auf einem uberspace einrichten

Ich wollte mich schon länger mal mit node.js beschäftigen und einen einfachen Webdienst damit bauen. Es gibt im uberspace wiki einen kurzen Artikel zu nodejs und auch alle weiteren benötigten Informationen findet man dort irgendwo. Aber man muss sich doch alles zusammen suchen. Deswegen hiermal alle Punkte zusammengefasst, die man beachten muss, um einen einfachen Prototyp bei den ubernauten zu betreiben.

node.js Version

Mit dem Befehl

$ node -v
v0.10.41

kann man sich die aktuell verwendete nodejs Version anzeigen lassen. Diese ist im Normalfall sehr alt. Um beim Aufruf von node eine aktuelle Version zu verwenden, ändern wir den Pfad. Alle verfügbaren installierten Versionen kann man sich anzeigen lassen:

$ ls -ld /package/host/localhost/nodejs-*

In der ~/.bash_profile fügt man in der letzten Zeile die gewünschte Version ein. z.B. 6

$ export PATH=/package/host/localhost/nodejs-6/bin:$PATH

Umgebungsvariable mit source ~/.bash_profile neuladen. Anschließend sollte die korrekte Version benutzt werden.

$ node -v
v6.9.1

Einfacher node.js webserver

Da wir nicht die einzigen auf dem uberspace host sind und die gängigen Ports 80 und 443 bereits vom Apachen verwendet werden, müssen wir unseren node.js server auf einem anderen Port starten und leiten dann die Anfragen an Port 80 an diesen um. Der Port sollte zwischen 61000 und 65535 liegen. Wir suchen uns einen aus (hier 61003) und überprüfen, ob dieser schon belegt ist:

$ /usr/sbin/ss -ln | fgrep 61003

Bekommen wir keinen Eintrag angezeigt, können wir diesen Port verwenden. Die Weiterleitung richten wir mit einer .htaccess Datei in ~/html/ ein:

RewriteEngine On
RewriteRule ^(.*) http://localhost:61003/$1 [P]

Jetzt können wir loslegen. Wir wechseln in unseren DocumentRoot und installieren das node express.js modul für einen Webserver.

$ cd ~/html
$ npm install express

Als nächstes erstellen wir die Datei index.js mit folgenden Inhalt (den Port entsprechend anpassen):

var express = require('express');

var app = express();
app.set('port', (process.env.PORT || 61003));

app.get('/', function (req, res) {
  res.send('Hello World!')
})

var server = app.listen(app.get('port'), function () {
 console.log('Started on port %s', app.get('port'));
});

Der Webserver kann nun testweise mit

node index.js

gestartet werden und ein Aufruf der eigenen uberspace url im Browser sollte ein „Hello World!“ anzeigen. Schon fertig!

Naja, fast. Wir möchten ja, dass der Dienst zukünftig auch läuft, wenn wir nicht angemeldet sind. Also müssen wir unseren Server nun als Dienst einrichten.

Als Dienst einrichten

Dem uberspace wiki folgend erstellen wir als nächstes einen Dienst. Dafür zuerst den supervisor aktivieren und anschließend den Dienst hinzufügen. Hier heißt dieser einfach nodetest. 

$ test -d ~/service || uberspace-setup-svscan 
$ uberspace-setup-service nodetest node ~/html/index.js

Dem tool uberspace-setup-service übergibt man als 1. Parameter den Name des neuen Dienstes (nodetest) und als 2. Parameter das Kommando (node ~/html/index.js). Das Ergebnis schauen wir uns gleich an. Solltet ihr das ganze testen wollen oder geht irgendetwas schief, könnt ihr so den Dienst wieder löschen:

$ cd ~/service/nodetest
$ rm ~/service/nodetest
$ svc -dx . log
$ rm -rf ~/etc/run-nodetest

Für jeden Dienst wird in ~/service ein eigener Unterordner erzeugt. Hier liegt die run Datei, welche den eigentlich Aufruf beinhaltet und die Logdateien. Seit ihr dem Artikel genau gefolgt, sollte die letzte Zeile mit dem Aufruf der ~/service/nodetest/run so aussehen:

exec /package/host/localhost/nodejs-6/bin/node /home/user/html/index.js 2>&1

Das node als 2. Parameter wurde durch den gesammten Pfad ersetzt. Möchte man das nicht und will lieber immer die eingestellte Version verwenden, den Pfad entfernen und nur node verwenden.

Gesteuert wird der Dienst mit dem tool svc. Die wichtigsten Parameter:

-u up, also Dienst starten
-d down, also Dienst beenden
-h hup, ein HUP-Signal senden (Reload)

Ein Neustart des Dienstes sähe z.B. so aus:

$ svc -du ~/service/nodetest

Logging

Das entsprechende Log des Dienstes können wir recht einfach lesen. Mit dieser kleinen Funktion in der ~/.bashrc wird es aber noch einfacher:

readlog()
{
        if [ -n "$1" ]; then
                zcat -f ~/service/$1/log/main/* | tai64nlocal | less;
        else
                echo "Usage: readlog <daemonname>";
        fi;
}

Der Aufruf geschieht dann mit:

$ readlog nodetest

Must-have Firefox Add-ons

Ich wurde vor einiger Zeit gefragt welche Firefox Add-Ons ich verwende und diese Frage möchte ich heute beantworten. Da sich einige Add-Ons nicht exakt einer Kategorie zuordnen lassen, habe ich die Kategorien nur grob eingeteilt.

Allgemein
Adblock Plus – Blockt lästige Werbung und Pop-Ups
NoScript – Selektives Erlauben/Verbieten von Javascript, Java etc. für einzelne Seiten
Omnibar – Integriert die Suchfunktion in die Adresszeile
OptimizeGoogle – Verbessert die Google Suchergebnisse und entfernt Werbung und Spam
Session Manager – Speichert geöffnete Tabs/Fenster und stellt Sie nach einem Absturz wieder her
Tab Preview – Seitenvorschau wenn der Mauszeiger über das Tab fährt
ColorfulTabs – Färbt Tabs in verschiedene Farben und verschafft so Überblick
FaviconizeTab – Verkleinert Tabs auf die Größe der Favicons
Xmarks – Synchronisiert Lesezeichen/Passwörter zwischen mehreren Firefox Installationen
Firefox Sync – Siehe Xmarks
Fast Dial – Miniaturansicht von Lesezeichen als Startseite
FEBE – Sicherung der Firefox Einstellungen, Add-Ons etc.
FlashGot – Downloadmanager
VTzilla – Untersucht download per Rechtsklick auf Viren mit VirusTotal

Entwicklung
Web Developer – Menüleiste mit verschiedenen Tools zur Webentwicklung
ColorZilla – Pipette, ColorPicker etc.
Firebug – Webentwicklungs „suite“
CodeBurner for Firebug – Erweitert Firebug um HTML und CSS Referenzen

Sicherheit / Penetration Testing
Access Me – Testet Lücken im Session Handling
Add N Edit Cookies – Kann Sessions und Cookies hinzufügen/bearbeiten
Fireforce – GET/POST Formular BruteForcer
FoxyProxy Standard – Proxy Manager
FxIF – Zeigt die EXIF Daten in den Bildeigenschaften an
HackBar – Toolbar zur Unterstützung bei der Suche nach SQL Injections
HTTPS-Everywhere – Verwendet automatisch SSL auf vielen Seiten
Live HTTP headers – Zeigt die HTTP Header einer Seite
PassiveRecon – Information Gathering Tool
ShowIP – Zeigt die IP Adresse der aktuellen Seite in der Statusleiste
SQL Inject Me – Testet verschiedene SQL Injection Schwachstellen
Tamper Data – Kann HTTP(S) Header bearbeiten und verfolgen
Wappalyzer – Erkennt die verwendete Software auf einer Webseite
XSS Me – Testet eine Seite auf XSS Schwachstellen

How to use the Twitter API with PHP and OAuth (single user)

Since a few months, applications have to use OAuth to authenticate a Twitter account using the REST API. If you want to write a php application for just one account (like your own small webclient), you don’t have to go the „ping-pong“ way of authentication. You only need this to authenticate different users and as we only need access for one single user, it is possible to simplify the oauth authentication step. Nevertheless I find it much more comfortable to you a finished library. In this example we will use Abraham Williams‘ awesome TwitterOAuth library for PHP, which requires a minimum PHP version of 5.2.x, cURL and OpenSSL.

First you have to visit http://dev.twitter.com/apps an register a new application. Choose „Browser“ as application type and set the default access level to „Read & Write“. You will need the printed „Consumer key“ and „Consumer secret“ in the next step. Also you will need the „Access Token (oauth_token)“ and „Access Token Secret (oauth_token_secret)“, which can be found under „My Access Token“ in the right menu.

Include the library in your PHP script. Change the path accordingly.

require_once(‚twitteroauth/twitteroauth.php‘);

Open your config file and define the 4 needed keys like:

define(‚CONSUMER_KEY‘, ‚aAaAaAaAaAaAaAaAaAaA‘);
define(‚CONSUMER_SECRET‘, ‚bBbBbBbBbBbBbBbBbBbB‘);
define(‚OAUTH_TOKEN‘, ‚cCcCcCcCcCcCcCcCcCcC‘);
define(‚OAUTH_TOKEN_SECRET‘, ‚dDdDdDdDdDdDdDdDdDdD‘);

To connect to Twitter, add in your PHP script:

$twitter = new TwitterOAuth (CONSUMER_KEY, CONSUMER_SECRET, OAUTH_TOKEN, OAUTH_TOKEN_SECRET);

You can now use the $twitter object to interact with the Twitter API. For example fetch your user information or post an update.

$twitter->get(‚account/verify_credentials‘);
$twitter->post(„statuses/update“, array(„status'“=> „First tweet using my own Twitter app!“));

Check out the TwitterOAuth documentation for more options and the Twitter documentation for available ressources.

I hope this small guide helps you getting started and I would love to see some of your results. Questions? Comments!

Android Entwicklung unter Ubuntu Linux – Eclipse mit ADT Plugin

Das eigene Programm auf dem neuen Mobiltelefon oder professionell Geld verdienen. Google und Android machen es einem einfach (wenn man weiß wie es geht). Google bietet neben der direkten Verwendung des Android SDK auch die Möglichkeit dieses mit dem Android Development Tools (ADT) Plug-in in die beliebte Entwicklungsumgebung Eclipse zu integrieren. Ich möchte hier die Installation und Konfiguration auf einem 64 Bit Ubuntu 10.4 Lucid Lynx beschreiben.

Installation von Eclipse

Bei Verwendung einer 64 Bit Version, werden zusätzlich die 32 Bit Bibliotheken benötigt. Unter Ubuntu installiert man diese mit

$ aptitude install ia32-libs

Außerdem wird Eclipse und das Java Development Kit (JDK) benötigt. Die aktuelle Version im Ubuntu-Repository ist 3.5.2, neuere Versionen findet man auf der Downloadseite von Eclipse, allerdings findet sich auf der Android Seite zu den Systemvoraussetzungen der Hinweis, dass die Android Development Tools mit Eclipse 3.6 (noch) nicht kompatibel ist.

Caution: There are known issues with the ADT plugin running with Eclipse 3.6. Please stay on 3.5 until further notice.

Wir bleiben also bei der 3.5.2 Version im Repository. Man hat nun Wahl zwischen verschiedenen Eclipsepaketen, wobei laut offizieller Installationsanleitung seit Eclipse 3.5 die „Eclipse Classic“ Version ausreicht. Unter Ubuntu braucht benötigt man allerdings aufgrund eines Bugs auch das „Eclipse Plug-in Development Environment“ (PDE), da die Installation eines Plug-ins (gilt auch für PDT oder CDT) mit der Fehlermeldung

Session context was:(profile=PlatformProfile,  phase=org.eclipse.equinox.internal.provisional.p2.engine.phases.Install,  operand=null –> [R]org.eclipse.cvs 1.0.400.v201002111343,  action=org.eclipse.equinox.internal.p2.touchpoint.eclipse.actions.InstallBundleAction).
The artifact file for osgi.bundle,org.eclipse.cvs,1.0.400.v201002111343 was not found.

abbricht. Installiert wird dieses zusammen mit dem benötigten Java Development Kit (JDK) mit

$ aptitude install sun-java6-jdk eclipse eclipse-pde

Installation des Android SDK

Als nächstes benötigen wir das „Android SDK Starter Paket“ mit dessen Hilfe wir die restlichen benötigten Daten installieren. Für unser Ubuntusystem laden wir uns das aktuelle Linux (i386) Paket runter. Nach dem Wechsel in den Downloadordner und Entpacken das Pakets mit

$ tar xfv android-sdk_r06-linux_86.tgz

kann, wer mag, den Ordner noch an einen anderen Ort verschieben (ich bevorzuge /opt). Allerdings ist es in diesem Fall erforderlich entweder die Zugriffsrechte oder den Besitzer des Ordners zu ändern, da wir später Schreibzugriff auf das Verzeichnis brauchen.

$ cp -r android-sdk-linux_86 /opt/
$ chown -R pat:root /opt/android-sdk-linux_86

Wer möchte, kann (nicht unbedingt erforderlich) außerdem den Verzeichnispfad /opt/android-sdk-linux_86/tools zur PATH Variablen hinzufügen und die enthaltenen Kommandozeilentools ohne Angabe des vollständigen Pfades ausführen. Dafür einfach ~/.bash_profile oder ~/.bashrc öffnen und PATH erweitern. Gibt es PATH noch nicht, folgendes in eine der beiden Dateien schreiben

$ vim ~/.bashrc
export PATH=${PATH}:/opt/android-sdk-linux_86/tools

Einrichten von Eclipse und den Android Development Tools

UPDATE: Unter Umständen kann es an diesem Punkt zu einem Fehler kommen (siehe Kommentare). Der Fehler kann allerdings recht einfach behoben werden. Im Menü Help -> Install New Software auswählen und im neuen Fenster auf den Link Available Software Sites klicken. Sollte es dort keinen Eintrag wie „Galileo Update Site“ o.ä. geben, auf Add klicken und bei Location die url http://download.eclipse.org/releases/galileo eintragen. OK und das sollte es gewesen sein. Sollte ein anderes Release als Galileo verwendet werden, findet man hier die angepassten urls.

Als nächstes Eclipse starten und einen „workspace“ einrichten, hier speichert Eclipse Projekte und Quellcode. Danach die Android Development Tools (ADT) als Plug-in hinzugefügt. Dazu im Menü Help -> Install New Software auswählen und im im neuen Fenster auf Add klicken.

Repository hinzufügen

Dem Plug-in einen Namen geben (z.B. ADT) und bei Location die URL

https://dl-ssl.google.com/android/eclipse/

eintragen. Mit Ok bestätigen. Im Fenster sollte jetzt der Punkt „Developer Tools“ hinzugekommen sein. Links daneben das Häkchen setzen und auf Next klicken.

Developer tools

Ein weiteres Mal auf Next und nach dem bestätigen der Lizenzbestimmungen auf Finish klicken.
Nach der Installation und einem Neustart von Eclipse muss nun das Plug-in konfiguriert werden. Window -> Preferences im Menü auswählen und im neuen Fenster mit einem Klick auf Android im linken Menü die „Android Preferences“ öffnen. Hier den Pfad zum Android SDK (/opt/android-sdk-linux_86/) eintragen.

Hinzufügen der Entwicklungskomponenten

Mit Hilfe der Programme aus dem Starter Paket (Android SDK) installieren wir als letzten Schritt nun die notwendigen Komponenten. Neben mindestens einer Plattform (Android 2.2, Android 2.1 etc) empfiehlt es sich außerdem die Dokumentation zu installieren. Eine Übersicht über die einzelnen Komponenten gibt es hier. Hinzugefügt werden diese über Window -> Android SDK and AVD Manager. Nach der Auswahl von Available Packages im linken Menu kann man nun beispielsweise die Dokumentation, die SDK Platform für Android 2.2 und das zur API 8 passende Paket für die Google APIs selektieren und mit einem Klick auf Install Selected installieren. Evtl. muss man jetzt noch eine eine Lizenzbedingung für die Google APIs akzeptieren.

Hinzufügen von ADT Komponenten

Je nach Auswahl kann die Installation einige Zeit dauern. Hat man zum Abschluss Google noch mitgeteilt, ob man anonyme Nutzerdaten einschicken möchte oder nicht, kann man nun sein erstes Hello World Programm schreiben.

Quellen und weitere Informationen:
http://hackaday.com/2010/07/12/android-development-101-a-tutorial-series | Part 1 | Part 2 | Part 3
http://od-eon.com/blogs/horia/android-development-environment-setup-ubuntu-lucid/
http://developer.android.com/index.html
http://www.hak5.org/episodes/episode-711