Imagine you are coding on a bunch of projects and you’re currently using node v5.1.0. Let’s assume that next week you are going to join a workshop about Ionic 2, where you will get first glimpses of what it actually is. The only thing you have to do is get Ionic 2 (and Cordova) up and running and wait for time to pass (like you don’t have anything better to do) until the workshop. So you go to the Installation guide on the official Ionic website and because you are a good developer, you start carefully reading the documentation:

“Ionic 2 apps are created…”, you are reading silently, “… bla bla blah… To create Ionic 2 projects… mhmm…”, after which you stop and stare in complete devastation to your desktop screen in disbelief of what you’ve just read: “you’ll need a recent version of Node.js” – speechless! However your heart only totally stopped beating after you’ve read the next line: “Download the installer for Node.js 6 or greater” – What?!

Those of you, who know what I’m talking about, can understand my feelings about installing a new node version and the need of a kilometre long story. Furthermore, the idea of an installer for node is quite uncomfortable, since this could potentially break my existing tens of projects – thus personally unacceptable. What about all my npm packages? Will those still be compatible with the new node version? Do they also have to be updated? What if I have different requirements for different projects and therefore the need of multiple node versions? There has to be a better way!

And luckily there is! ????

Node Version Manager (nvm)

https://github.com/creationix/nvm

If you start reading the README.markdown file, it says that Windows is not supported – what a shame. This tutorial will only target platforms / systems, that are supported by nvm. Other recommended Windows alternatives are:

• https://github.com/coreybutler/nvm-windows
• https://github.com/marcelklehr/nodist

Install nvm

Following the installation instructions from the README file, we can simply install or update nvm using cURL:

or Wget:

To load nvm you need the following source lines to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc):

You might need to manually source your profile:

Now open up a new Terminal window / tab and type nvm. You should see the available nvm commands. If anything went wrong or you can’t find the nvm command, please further refer to the nvm README file for more information.

Install desired node versions

To install the latest node version – you guessed it right – run:

To request a list of all remotely available version run:

To install a specific version run:

Conveniently, this comes with npm, which opens the gates to the gazillion of good stuff.

You can easily switch between node version:

Last but not least you check your current node version:

As you can see nvm provides a very convenient way of switching between node versions and it’s the way to go when you have different requirements for your projects or you simply remained a little behind considering the pace at which web development tools are evolving nowadays.

Biggest benefits

Besides being able to choose between multiple node versions, the biggest benefits using nvm in my opinion are:

1. Version specific npm packages – meaning that your global npm packges will be installed per node version.
2. You don’t have to run npm with sudo anymore !

Hopefully, this helped you out ! ????

The post How to use multiple node versions with nvm (macOS) appeared first on Mobile USTP MKL.

With growing popularity of the Laravel framework in the last years, I’ve had the opportunity to contribute to some projects constituted – under many – by no other than the Laravel framework. It’s a wonderfully convenient framework, which strives to make PHP development more comfortable. Thus including services for creating routes with pretty URLs, templating and rendering views dynamically, authorization, and maany more chocolate bits. You should definitely take a look at the documentation – there will be a link at the end.

Clone / download

Supposably the whole app source code is under a repository on Github – we’ll use as an example “Mobilot” a Mobile Forschungsgruppe project, which you can either clone or download:

https://github.com/fhstp-mfg/mobilot

Mobilot is a system for creating intuitive mobile information systems. Basically it’s more than just that, but it’s not important for now. Technically, Mobilot is a Laravel setup serving an Angular (hybrid) app with custom logic. Thus we’re going to setup Laravel locally.

Project directory

In the Mobilot project directory we can see a typical Laravel installation give or take a few files.

A typical installation includes:

• app folder – includes everything from config, controllers, database migrations, libraries, models, tests, views to routes and other
• bootstrap folder – autoloads dependencies and bootstraps the app
• public folder – includes the resources and assets served to the user
  (NOTE: in production mode, the public folder dissolves and joins the root folder)

Mobilot root directory

Figure 1 – Mobilot root directory – A Laravel server serving an Angular (hybrid) app.

Composer

Other than that there is a cordova folder, which includes platform-specific hybrid projects and a setup folder, which includes setup resources. The missing vendor folder, usually includes all app dependencies; since every developer can download dependencies individually on ones machine, we leave this up to the PHP depencency manager “Composer” – check it out, it’s really good:

https://github.com/composer/composer

Setup

The following steps we’d have to do for a complete Laravel setup:

• Create a database
• Install dependencies w/ “composer install”
• Create missing Laravel directories
• Setup database configuration for local environment (e.g. Homestead, MAMPP or XAMPP)
• Correct permissions
• Run Laravel migrations

To perform these platform-specific actions on Laravel projects is quite time consuming. Therefore we created 2 simple setup scripts, one for Mac OS X and one for Windows, for setting up Mobilot. These setup scrips can be easily adapted for similar Laravel projects. According to docs, some steps have to be done manually, the script guides through this process. You can also read the docs to help you setup the project:

https://github.com/fhstp-mfg/mobilot/wiki/Setup

The script will guide you through the setup process, asking you questions and performing actions for you, as seen further below in Figure 2:

• Manually create a (MySQL preferred) database called “mobilot”
• Depending on your platform run setup.sh for Mac OS X and setup.bat for Windows:
  • Firstly, the script will ask whether the database has been created.
  • Then, the Laravel dependencies will be installed – might take a while …
  • Then, the script will ask about your local environment.
    (e.g. Homestead VM, MAMPP or XAMPP)
  • It will prepare a database config file, which you should edit before proceeding,
    or else it will not work an you’ll get a specific error, we’ll talk about in a moment.
  • Finally, the script will ask you whether you want to immediately test the Laravel setup.

Errors / special cases

In some cases you’ll get a vague error when trying to execute migrations as seen in Figure 3. Also if you serve the app and request http://localhost:8000, the Mobilot loading screen shown as seen in Figure 4, without actually loading the app, since it experiences the same error as seen in Figure 5:

This error might occur from either invalid user credentials in your database.php or the database socket is undefined. In case you use a unix local environment such as MAMP, you might need to uncomment the unix_socket line and configure your own local (MySQL) database socket path:

Figure 6 – Database config unix_socket

Notes

• Laravel Homestead is a highly recommended local environment for Laravel applications.
• The presented script is thought for Laravel 4.2, which is currently used by Mobilot – this should update in the future.

Links

• Mobilot repository
• Mobilot setup guide
• Initial project setup script:
  • setup.sh (Mac OS X)
  • setup.bat (Windows)

Providers

• Laravel
• Laravel Docs
• Laravel Homestead
• Composer
• Composer repository

The post Laravel initial project setup appeared first on Mobile USTP MKL.

Studipuls ist ein location-based, real-time Photochat in den Räumen der FH St. Pölten. Bestimmte Räume der FH St. Pölten haben auf der Eingangstür oder innerhalb des Raumes einen Studipuls QR-Code, welcher beim Einscannen zum jeweiligen virtuellen Chatroom führt. In jedem Chatroom können Momente in Form von Bildern gepostet werden. Momente können durch Doppel-Tippen auf das Bild favorisiert werden. Dabei wird die Position des “Taps” für spätere Visualisierung gespeichert. Außerdem können zu jedem Moment, Kommentare hinzugefügt werden, welche in Echtzeit wiedergegeben werden. Die App ermöglicht nicht nur das Erfassen von Echtzeit-Momenten im jeweiligen Raum, sondern auch das Erkunden anderer virtueller Räume der FH St. Pölten durch eine Listenansicht aller verfügbaren Chaträume inkl. Suchfunktion. Optional wird nach einer Email Adresse gefragt, welche für die Teilnahme am Gewinnspiel notwendig ist.

Technologien

Angesichts der Echtzeit Komponente der App, haben wir uns eindeutig für das JavaScript Framework Meteor entschieden, das mit der NoSQL Datenbank MongoDB arbeitet. Das Framework implementiert ein so genanntes “Reactive Rendering” System, welches Änderungen an MongoDB Collections erkennt und diese dem Client kommuniziert; der Client rendert schließlich die passende Anzeige. Ein weiterer Vorteil ist, dass man sowohl serverseitig als auch clientseitig in derselben Scriptsprache programmieren kann. Apropos haben wir uns des Weiteren entschieden die App in CoffeeScript umzusetzen – eine gute Möglichkeit CoffeeScript auszuprobieren.

Packages

• Manuelles Kompilieren von CoffeeScript bleibt uns durch das “coffeescript” Meteor Package erspart.
• Das Front-End haben wir mithilfe von Bootstrap 3 unter Verwendung des Packages “twbs:bootstrap” umgesetzt. Weiters haben wir das “fezvrasta:bootstrap-material-design” Package integriert, um das User Interface komfortabel dem Material Design Stil anzupassen.
• Um das Routing zu den einzelnen States einfach zu machen, haben wir den FlowRouter vom “philippspo:momentum-flow-router” Package verwendet.
• Um die hochgeladenen Bilder in einem responsive Grid-Layout anzeigen zu lassen, haben wir das Package “voodoohop:masonrify” verwendet, das die Layout Library Packery implementiert.
•  Um die Bilder vor dem Upload zu komprimieren und zurecht zu schneiden, haben wir das “thinksoftware:image-resize-client” Package implementiert.
• Da die freien Meteor Server (*.meteor.com) keine Schreibrechte auf das Dateisystem bieten, haben wir das “cfs:gridfs” Package implementiert, um Bilder in Form von “Chunks” in der entsprechenden MongoDB Collection zu speichern.
• Um neue Gäste ohne eine Anmeldung als Benutzer zu erkennen, haben wir das “artwells:accounts-guest” Package verwendet.
• Um Statistiken über die Verwendung der Applikation erfassen zu können, haben wir das “okgrow:analytics” Package implementiert und ein Google Analytics Account angelegt und die Applikation damit verbunden.
• Bevor Kommentare in die Datenbank gespeichert werden, werden sie durch das “check” Meteor Package serverseitig überprüft, um Sicherheit und Datenintegrität zu gewährleisten.
• Gestures können wir dank “chriswessels:hammer” Package leicht erkennen.

State diagram

Folgendes (vereinfachtes) Zustandsdiagramm zeigt, zu welchen Screens der Benutzer navigieren kann und welche Aktionen ausgeführt werden können.

Design

Beim Design der App haben wir uns generell an das Google Material Design angelehnt, das Schatten verwendet, um Tiefe zu erzeugen und wichtige Interaktionselemente damit hervorzuheben.

Schriftart

Als Schriftart für den Lauftext wurde die einfache, serifenlose und leicht abgerundete Schriftart “Dosis” von Pablo Impallari gewählt, die unter der SIL Open Font Lizenz verfügbar ist.

Farbschema

Das Farbschema der App setzt sich aus Rot (#a11d3c), Dunkelgrau (#333) und Weiß zusammen. Die Farbe Rot erregt Aufmerksamkeit und wird in der App als Akzentfarbe eingesetzt, um wichtige Interaktionselemente zu kennzeichnen. Sie soll somit die Leute dazu animieren, mit der App zu interagieren und selbst Momente zu teilen und Kommentare zu schreiben. Die Farben Dunkelgrau und Weiß wurden verwendet, da sie einen sehr guten Kontrast zueinander bieten und gut mit Rot harmonieren.

Logo

Beim Design des Logos haben wir uns für ein einfaches Schriftlogo entschieden. Dieses wurde mit der Schriftart “Break” umgesetzt, die für persönlichen und kommerziellen Gebrauch frei zur Verfügung steht.

Screenshots

Loginstation Plakat

Einen Chatraum kann man nach Einscannen des jeweiligen QR-Codes sofort betreten. Die QR-Codes sind raumspezifisch und kommen im A3 Format mit einfachem Design. Beispiel der Aula Loginstation:

Fazit

Das JavaScript Framework Meteor war die richtige Entscheidung, um diesen Echtzeit Photochat umzusetzen. Meteor erkennt Änderungen an Datenbank Collections sofort, zum Beispiel beim Upload von Bildern und beim Posten von Kommentaren, welche automatisch ohne Aktualisierung der Seite an den Client geliefert werden und die Anzeige neu gerendert wird. Somit ist kein weiterer Aufwand notwendig.

Beim Upload der Bilder stellten wir fest, dass es unbedingt notwendig war, diese zuvor clientseitig zu komprimieren und zurecht zu schneiden, da sonst der Upload auf mobilen Geräten zu lang gedauert hätte, große Bilder für die freien Meteor Server zu viel Last bedeutet hätten und die Anzeige auf mobilen Geräten mit quadratischen Bildern besser aussieht.

The post Studipuls appeared first on Mobile USTP MKL.