Sunday 9 October 2016

Post 65: How to load a local file on ionic

I'm using ionic 1.x and I'm assuming the json file lies in the www-folder.

.controller('DashCtrl', function ($scope, $http) {
  $http({method: 'GET', url: 'quotes.json'})
    .success(function(data){
      console.log("success! ", data);
    })
    .error(function(){
      console.log("error!");
    })
    .finally(function(){
      console.log("finally!");
    });
    

Sunday 18 September 2016

Post 64: New Blog (Mathematics for Computer Science)

After a long time of coding I think I'm ready to level up. I want to get a firm grasp of algorithm and datastructure. For that I want to dive into Mathematics for Computer Science, which basicailly is discrete maths. I intend to take the 6.042j course of MIT's OCW.

I'll intend to concentrate on that courses, listen to the lectures, read the course material, and solve the assignments and exams offered there. I will therefore not be that often here but at my new blog:
 
http://6-042j.blogspot.de/

But I won't forget this blog. I'll come back soon I complete my goal. See you around. :)

Saturday 13 August 2016

Post 63: writing nodeBB plugin

Structure and files:
# nodeBB-plugin-thad-test
|  # lib
|  |  - controllers.js
|  # static
|  |  # lib
|  |  |  - admin.js
|  |  |  - main.js
|  |  # templates
|  |  |  # admin
|  |  |  |  # plugins
|  |  |  |  |  - thadTest.tpl
|  - library.js
|  - package.json
|  - plugin.json
|  - README.md
|  - ... (other files that are not important though like README.md; .gitignore; .npmignore)

----------------
The file content:
controller.js

'use strict';

var Controllers = {};

Controllers.renderAdminPage = function (req, res, next) {
 /*
  Make sure the route matches your path to template exactly.

  If your route was:
   myforum.com/some/complex/route/
  your template should be:
   templates/some/complex/route.tpl
  and you would render it like so:
   res.render('some/complex/route');
 */

 res.render('admin/plugins/thadTest', {});
};

module.exports = Controllers;
admin.js

'use strict';
/* globals $, app, socket */

define('admin/plugins/quickstart', ['settings'], function(Settings) {

 var ACP = {};

 ACP.init = function() {
  Settings.load('quickstart', $('.quickstart-settings'));

  $('#save').on('click', function() {
   Settings.save('quickstart', $('.quickstart-settings'), function() {
    app.alert({
     type: 'success',
     alert_id: 'quickstart-saved',
     title: 'Settings Saved',
     message: 'Please reload your NodeBB to apply these settings',
     clickfn: function() {
      socket.emit('admin.reload');
     }
    });
   });
  });
 };

 return ACP;
});


main.js
"use strict";

(function() {
 /*
  This file shows how client-side javascript can be included via a plugin.
  If you check `plugin.json`, you'll see that this file is listed under "scripts".
  That array tells NodeBB which files to bundle into the minified javascript
  that is served to the end user.

  Some events you can elect to listen for:

  $(document).ready();   Fired when the DOM is ready
  $(window).on('action:ajaxify.end', function(data) { ... });   "data" contains "url"
 */

 console.log('nodebb-plugin-thad-test: Hello world');
 // Note how this is shown in the console on the first load of every page
}());


thadTest.tpl

thadTest Settings
Adjust these settings. You can then retrieve these settings in code via: meta.settings.get('quickstart');


library.js
"use strict";

var controllers = require('./lib/controllers'),
 plugin = {};

plugin.init = function(params, callback) {
 var router = params.router,
  hostMiddleware = params.middleware,
  hostControllers = params.controllers;
  
 // We create two routes for every view. One API call, and the actual route itself.
 // Just add the buildHeader middleware to your route and NodeBB will take care of everything for you. 
 router.get('/admin/plugins/quickstart', hostMiddleware.admin.buildHeader, controllers.renderAdminPage);
 router.get('/api/admin/plugins/thadTest', controllers.renderAdminPage);
 
 callback();
};

plugin.addAdminNavigation = function(header, callback) {
 header.plugins.push({
  route: '/plugins/thadTest',
  icon: 'fa-tint',
  name: 'Quickstart'
 });

 callback(null, header);
};

module.exports = plugin;


package.json
{
  "name": "nodebb-plugin-thad-test",
  "version": "0.2.6",
  "description": "nodebb-plugin-thadeuszlay-test",
  "main": "library.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/thadeuszlay/nodebb-plugin-thad-test"
  },
  "keywords": [
    "nodebb",
    "plugin",
    "test",
    "shell"
  ],
  "author": {
    "name": "thadeuszlay",
    "email": "thadeuszlay@gmail.com"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/thadeuszlay/nodebb-plugin-thade-test/issues"
  },
  "readmeFilename": "README.md",
  "nbbpm": {
    "compatibility": "^1.0.0"
  }
}


plugin.json
{
  "name": "nodebb-plugin-thad-test",
  "version": "0.2.6",
  "description": "nodebb-plugin-thadeuszlay-test",
  "main": "library.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/thadeuszlay/nodebb-plugin-thad-test"
  },
  "keywords": [
    "nodebb",
    "plugin",
    "test",
    "shell"
  ],
  "author": {
    "name": "thadeuszlay",
    "email": "thadeuszlay@gmail.com"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/thadeuszlay/nodebb-plugin-thade-test/issues"
  },
  "readmeFilename": "README.md",
  "nbbpm": {
    "compatibility": "^1.0.0"
  }
}



README.md
# Quickstart Plugin for NodeBB

A starter kit for quickly creating NodeBB plugins. Comes with a pre-setup LESS file, server side JS script with an `action:app.load` hook, and a client-side script. Most plugins need at least one of the above, so this ought to save you some time. For a full list of hooks have a look at our [wiki page](https://github.com/NodeBB/NodeBB/wiki/Hooks), and for more information about creating plugins please visit our [documentation portal](https://docs.nodebb.org/).

Fork this or copy it, and using your favourite text editor find and replace all instances of `nodebb-plugin-quickstart` with `nodebb-plugin-your-plugins-name`. Change the author's name in the LICENSE and package.json files.

Once you're done don't forget to publish it on NPM, and make a thread about it [here](https://docs.nodebb.org/en/latest/plugins/hooks.html).


## Hello World

It will do some random stuff. As of time of writing, I don't even know myself what exactly. Really simple, just edit `static/lib/main.js` and paste in `console.log('hello world');`, and that's it!

## Installation

    npm install nodebb-plugin-thad-test

## Screenshots

Don't forget to add screenshots!

Routing

In order to display your plugin correctly in the nodeBB admin page you have to set the route correctly:

in controller.js:
Controllers.renderAdminPage = function (req, res, next) {
 res.render('admin/plugins/thadTest', {});
};



in library.js:
"use strict";

plugin.init = function(params, callback) {
...
 router.get('/api/admin/plugins/thadTest', controllers.renderAdminPage);
...
};

plugin.addAdminNavigation = function(header, callback) {
 header.plugins.push({
  route: '/plugins/thadTest',
...
  name: 'Name in the dropdown list'
 });
};

module.exports = plugin;

Post 62: Install nodeBB with redis

fork nodeBB project or clone it directly from nodeBB

git clone -b v1.x.x https://github.com/NodeBB/NodeBB.git nodebb

cd to nodeBB directory

install redis (this is installing a newer version than on the one that is already installed on c9):

sudo apt-add-repository ppa:chris-lea/redis-server
sudo apt-get update
sudo apt-get install redis-server

//redis-server --port 16379 --bind $IP &

echo $IP


npm install


node app --setup


--> set url:
jubilee-c9-thadeuszlay.c9users.io
enter for nodeBB secret
for database: redis
set administrator name


node app

If you want to drop your redis database:
log into redis:
redis-cli
Once you are in redis you can type in either of those:
  • FLUSHDB - Removes data from your connection's CURRENT database.
  • FLUSHALL - Removes data from ALL databases.
To exit redis type in exit
-------------------------
It's always good to stay up-to-date of your nodeBB. If you want to upgrade 

1. Shut down your forum

$ cd /path/to/nodebb
$ ./nodebb stop

2. Back up your data

Redis

As with all upgrades, the first step is to back up your data! Nobody likes database corruption/misplacement.
All of the textual data stored in NodeBB is found in a .rdb file. On typical installs of Redis, the main database is found at /var/lib/redis/dump.rdb.

Avatars

Uploaded images (avatars) are stored in /public/uploads. Feel free to back up this folder too:
cd /path/to/nodebb/public
tar -czf ~/nodebb_assets.tar.gz ./uploads

3. Grab the latest and greatest code

$ git fetch    # Grab the latest code from the NodeBB Repository
$ git checkout v0.4.x    # Type this as-is! Not v0.4.2 or v0.4.3, but "v0.4.x"!
$ git merge origin/v0.4.x

If not upgrading between branches (e.g. v0.3.3 to v0.3.4, just run the following commands:
$ git fetch
$ git reset --hard origin/v0.3.x    # Replace v0.3.x with the branch name!
Don’t know what branch you are on? Execute git rev-parse --abbrev-ref HEAD to find out.

4. Run the NodeBB upgrade script

This script will install any missing dependencies, upgrade any plugins or themes (if an upgrade is available), and migrate the database if necessary.
$ ./nodebb upgrade
Note./nodebb upgrade is only available after v0.3.0. If you are running an earlier version, run these instead:
  • npm install
  • ls -d node_modules/nodebb* | xargs -n1 basename | xargs npm update
  • node app --upgrade

Friday 12 August 2016

Post 61: How to publish npm packaage


create a project for that package if you haven't done so

push it to git hub
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/yourUsername/nodebb-plugin-your-project.git
git push -u origin master

create an a user account on npm if this is your first time:
npm adduser

Type in your username, password, and e-mail (e-mail will be public). Store your crendentials on your local machine:
npm login

To ensure that your credentials or stored on the client type in:
npm config ls

To ensure that your acccount was created successfully go to the following URL and you should see your account:
https://npmjs.com/~/[your-username]

cd to the folder of the module or plugin you want to publish on npm . and type in:
npm publish

Note that everything in the directory will be included unless it is ignored by a local.gitignore or .npmignore file as described in npm-developers.

To ensure that your package is publish go to 
https://npmjs.com/package/[your-package-name]


Thursday 23 June 2016

Post 59: iPhone drawing with one DIV only.

I drew an iPhone with only one HTML element only. The rest is pure CSS. Chrome displays the picture the best:



See the Pen iPhone one div with pure CSS by Thadeusz (@thadeuszlay) on CodePen.

Sunday 19 June 2016

Post 58: Minion with only one div and pure CSS

I'm not really content with the feet. If you've got a better suggesiton, please feel free. I'd be grateful for any comments.

See the Pen Minion by Thadeusz (@thadeuszlay) on CodePen.

Saturday 18 June 2016

Post 57: Browsers I'm currently using

Firefox
Vivaldi
Opera
Cliqz
Chromium
Chrome
Chrome Canaary
Brave

Do you know more?

Post 56: How to set up Grunt build system

Setup
In your terminal type in this

npm install -g grunt-cli

create a project
mkdir myproject

go to you project
cd myproject

type in
npm init

to save grunt into my package
npm install -S grunt

Create a grunt file:
touch Gruntfile.js


Usage
grunt has now created a grunt file. You can now go in there an register task:

module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});

grunt.registerTask('yell', function () {
console.log('yelling');
});

grunt.registerTask('both', ['speak', 'yell']);
grunt.registerTask('default', ['speak', 'yell']);

}


To execute these task go to your terminal:
grunt speak

You'll see that it logs out the speak task we defined earlier. The same for
grunt yell

If you typed in 'grunt both', then the tasks in the array in will be executed. If you only type grunt, then the task in the array of our default task will be executed.


Plugins
You can now go to http://gruntjs.com/plugins

For example we want to install the plugin 'contrib-concat' https://www.npmjs.com/package/grunt-contrib-concat

In your module exports function type in this:

module.exports = function (grunt) {

// Project configuration.
grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    },
  },
});

grunt.loadNpmTasks('grunt-contrib-concat'); // npm loads some preconfigured tasks in the initConfig; in this case it looks in the initConfig and sees the concat key
}
In your grunt project folder create a folder called 'src'. In that folder create the files intro.js, project.js and outro.js

In these files you can write - for testing purposes - anything you want. We will later see that the content in the 3 mentioned files will be concatened into one - the built.js in the dist-folder.

You can see this effect by running in your terminal:
grunt concat


Another intersting plugin is 'contrib-watch': https://www.npmjs.com/package/grunt-contrib-watch

Whenever a pattern in your file structure changes, it will update it automatically in the grunt build folder, so you don't have to run the grunt command everytime.

First install it:
npm install grunt-contrib-watch --save-dev

Update your grunt file so it looks like this:
module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});

grunt.registerTask('yell', function () {
console.log('yelling');
});

grunt.registerTask('default', ['speak', 'yell']);

// Project configuration.
grunt.initConfig({
  concat: {
    jsPortion: {
                  src: ['js/1.js', 'js/2.js'],
                  dest: 'dist/built.js',
    },
     cssPortion: {
                   src: ['css/1.css', 'js/2.css'],
                   dest: 'dist/built.js',
     },
  },
 
  watch: {
  js: {
          files: ['js/**/*.js'],
      tasks: ['concat:jsPortion'],
  },
   css: {
          files: ['css/**/*.css'],
       tasks: ['concat:cssPortion'],
   },
},

});

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-watch');
}


If you type in your terminal
grunt watch

..and then change one of your js files in your js folder, then you'll see grunt watch executes concat and concatenates the updates into one file.

Feel free to play around with grunt.


Friday 10 June 2016

Post 55: Sound Motion - Android App uses device motion to generate sounds

I wrote and published a new app that uses the device's accelerometer:

https://play.google.com/store/apps/details?id=com.ionicframework.shockwave349163



It's a small and fun app. With this app you can imitate different items, like a whip, a hand granade, a machine gun, etc.


Tuesday 7 June 2016

Post 54: Open Link in Ionic app

In order to open a link in your app you need to install this plugin

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Sunday 5 June 2016

Post 53: Add AdMob to your ionic project

Add this plugin:

cordova plugin add cordova-plugin-admobpro

create another JS file with this content and put it into the JS folder (replace the key with your keys):
var admobid = {};
// TODO: replace the following ad units with your own
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-6869992474017983/9375997553',
interstitial: 'ca-app-pub-6869992474017983/1657046752'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'ca-app-pub-6869992474017983/4806197152',
interstitial: 'ca-app-pub-6869992474017983/7563979554'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-6869992474017983/8878394753',
interstitial: 'ca-app-pub-6869992474017983/1355127956'
};
}
function initApp() {
if (! AdMob ) { alert( 'admob plugin not ready' ); return; }
// this will create a banner on startup
AdMob.createBanner( {
adId: admobid.banner,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
isTesting: true, // TODO: remove this line when release
overlap: false,
offsetTopBar: false,
bgColor: 'black'
} );
// this will load a full screen ad on startup
AdMob.prepareInterstitial({
adId: admobid.interstitial,
isTesting: true, // TODO: remove this line when release
autoShow: false
});
AdMob.showInterstitial(); // can be used to show later,e.g. after the end of the game
}
if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
document.addEventListener('deviceready', initApp, false);
} else {
initApp();
}
Now go to your index.html file and add a reference to that JS file above:
    <script type="text/javascript" src="js/myAdmobFile.js"></script>

Tweet