Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Ionic

Ionic Framework: A definitive 10,000 word guide

The fifth post about Ionic framework for Pluralsight is actually a condensed (well, if you can call a 10,000+ word article condensed ;)) article of the series so far.

As you may remember, the series wraps everything in a whole where we showed how to create an application starting with an idea, through creating a prototype and implementing the application using Ionic framework to finally publishing it in the stores.

You can see the post here: Ionic Framework: A definitive 10,000 word guide.

The original tutorials (totaling 20k+ words) are not available anymore, but you can still access (for free if you wish) my blog2book which has them in their original form via Leanpub.

IonicBook

If you have any questions please don’t hesitate to ask, and please share if you like it.

Ionic Framework: A definitive 10,000 word guide https://t.co/ZTNjt1YfwZ

— Nikola Brežnjak (@HitmanHR) April 23, 2016

Ionic, Stack Overflow

Cordova and Ionic SMS Receiver

In this StackOverflow question I answered why it isn’t possible to read SMS in Ionic application which you want to deploy to Apple’s App Store

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I answered this question by user aintno12u:

Good day, do you have any idea how to achieve this in ionic? I found tutorials for PhoneGap but that was 3 years ago and i dont know if it will work with my ionic app. The ng-cordova has only thishttp://ngcordova.com/docs/plugins/sms/ to send sms but not receive. I saw this also but i have no idea how to use it. https://github.com/floatinghotpot/cordova-plugin-sms/tree/master/docs. Please help. Ionic so new that it lacks tutorials.

My answer was:

In case you’re trying to get this kind of application to the App Store, I have bad news for you.

As this answer states:

Simply two words from Apple: Not Possible

Cordova and Ionic #SMS Receiver https://t.co/jk58Gx4P0M

— Nikola Brežnjak (@HitmanHR) February 16, 2016

Breaking News, Ionic2

Ionic framework 2 is in beta

Ok, true, this “news” is few days old now and I’ve been slow to post about it.

Nevertheless, this is awesome news as I’m really excited about the 2.0 version, which follows closely the Angular 2.0 version. Btw, I wrote a tutorial about how to post data from Ionic 2 app to php  server, in case you’re curious you can find it here.

You can read the docs over at http://ionicframework.com/docs/v2/, but to quote the official post:

we’ve focused on performance boosts, architectural improvements, cross-platform theming, support for Angular 2, support for the mobile web, and so much more!

In case someone is still doubting Ionic, they state a very interesting fact:

Ionic has seen widespread adoption, with over 1.9 million apps built by everyone from individual developers to small startups to large enterprise businesses from around the world.

And, in defence of why Angular 2, here is their response:

Today, an Ionic and Angular 2 app is just TC-39, standards-compliant JS. While it may look different from what you’re used to, the benefit is the entire web industry is moving towards this standard set of technologies, so your skills will adapt to other projects beyond Ionic and Angular 2. That wasn’t the case with Angular 1.

Ionic 2 styles UI components based on the platform in which it’s being displayed, and the great news is that they’ve added material design for Android apps.

I totally agree with the following:

Ionic is pretty much the only major mobile framework out there that lets you adapt your app to the app store as a native app and put it on a web server to provide a great mobile web experience with no changes required.

clap

#Ionic framework 2 is in beta https://t.co/Nyy2QQZqRf

— Nikola Brežnjak (@HitmanHR) February 15, 2016

CodeProject, NodeJS

Wrap your web application into an executable with nativefier in a single command

In this post I’ll show you how you can quickly turn any website into an executable with nativefier in a single command.

I just stumbled upon an awesome npm package called nativefier that lets you (as stated by the author):

to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.

At first I must admit I was a bit sceptical, but I tried it immediately and installed it with:

npm install nativefier -g

And, then I tried it out on my Carcassonne Scoring Board web application (run the command from the command line, OFC):

nativefier http://carcassonne-scoring-board.com/

And sure enough, after just a few seconds I got a response:

C:\Users\Nikola\Desktop>nativefier http://carcassonne-scoring-board.com/
Packaging app for platform win32 x64 using electron v0.36.4
App built to C:\Users\Nikola\Desktop\Nikola Brežnjak's Carcassonne Scoring Board-win32-x64

The contents of the created folder looks like this:

nativefier

The app (just double click the Application file – has the nice electron logo) looks like this when run:

nativefier-run

and like this in action:
nativefier-action

I’m truly impressed with this and my thanks to the author!

Wrap your #web application into an executable with #nativefier in a single command https://t.co/Y01YDfokGr pic.twitter.com/9iP7AfUrkL

— Nikola Brežnjak (@HitmanHR) February 11, 2016

Ionic, Stack Overflow

Why doesn’t window.something throw an error?

In this StackOverflow question I asked why doesn’t window.something throw an error

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I actually asked this question myself:

I’m using an AdMob plugin in my Ionic application, and one way, as you can see in the documentation, to test if the plugin is properly loaded is to do:

if(AdMob) {
    ///other config code...
}

Now, this works perfectly fine on a device. However, it doesn’t work in the browser; it throws an error in the console log: AdMob is not defined.

I have found a solution to test the existence of plugin like this (without throwing an error in the console):

if (window.AdMob){...}

And I have seen this usage on multiple questions here on StackOverflow. However, I wasn’t able to find an explanation to as why this doesn’t throw an error.

I have a vague reasoning to as why this would be so, but I would really appreciate it if someone experienced could explain it in more detail.

edit: I made additional tests like this:

var a = "hi";
console.log(a); //shows "hi"
console.log(b); //throws an error that b is not defined

var c = {};
c.b = "hi again";
console.log(c.b); //shows "hi again" as expected

//and now for the grand finale
console.log(c.something);//doesn't throw an error, please explain to me in more detail why?

The answer by T.J. Crowder was:

I wasn’t able to find an explanation to as why this doesn’t throw an error.

In the first example, you’re trying to read the value of a completely undefined identifier. In the second example, you’re trying to read a property from an object that the object may not have.

Trying to read the value of an undefined identifier is a ReferenceError; the JavaScript engine has no idea what that identifer is. In contrast, trying to read the value of a property that the object doesn’t have yields the value undefined.

It’s just how the language is designed, where Brendan Eich drew the line: It’s okay to read the value of a non-existant property from an object, but not okay to read the value of an undeclared identifier.

I should point out a third option: typeof. You’re allowed to provide an undefined identifier as the operand to typeof:

if (typeof AdMob === "undefined")

That won’t throw a ReferenceError even if AdMob is undeclared; instead, typeof will yield "undefined". (It will also yield "undefined' if AdMob is a declared identifier with the value undefined in it.)

In a comment on another answer, you said:

…it would just indeed help to see the exact official specification which confirms this.

That would be the ECMAScript specification, specifically §6.2.3.1 for throwing a ReferenceError on an unresolvable symbol, and §9.1.8 for returning undefined for a property that doesn’t exist. But I should warnin you that the spec, especially this 6th edition spec, is very heavy going. 🙂

Why doesn’t #window.something throw an #error in @ionicframework? #javascript https://t.co/e0vMYiHJAU pic.twitter.com/lPHcStpDA5

— Nikola Brežnjak (@HitmanHR) February 11, 2016

NodeJS, Stack Overflow

Why am I getting Unexpected token ‘\u0000’ when using npm install -g package

In this StackOverflow question I answered what to do when you get an unexpected token ‘\u0000’ error when using npm install -g to install some package.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I answered this question by user Bruce Whealton:

This is probably a Windows specific issue but I haven’t found any information when googling this issue. I had been using ionic framework which relies on Cordova (or Phonegap). However, the problem is not specific to any of these packages. I see this error quite often. So, the error is when I run a command such as the following:

npm install -g cordova

However, I could substitute various other packages and get the same error. I’ll paste the snippet (very brief) below of the error message. What is strange is that I had an ionic project working in that directory earlier. Then today it told me that ionic could not be found. My hunch is that this is a different issue than the main issue I am describing here.

I installed git bash so I do have a linux-like environment that I could try. I would just select Git Bash for a bash window with various bash commands. If there is an easier way to fix this for Windows users, please let me know. I have seen courses on Pluralsight where the instructors seem to be happily using npm with no problems. Also, when I use yeoman, I also at some point, in many cases, get the same error.
The error is

npm ERR! Failed to parse json
npm Unexpected token '\u0000' at 1:1
npm ERR!
npm ERR! ^
npm ERR! File: c:\Users\Bruce\AppData\Roaming\npm-cache\amdefine\1.0.0\package\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm
npm ERR! Tell the package author to fix their package.json file. JSON.parse.

Thanks in advance for any help/advice, Bruce

My answer was:

Via this question on SO it could be that you just have to do:

npm cache clean

But, also try the other methods suggested there like adding the registry option:

npm install <packagename> --registry http://registry.npmjs.org/.

Or, if you’ve been mingling with the package.json file by yourself, check if it’s valid.

Why am I getting Unexpected token ‘u0000’ when using #npm install -g package #node https://t.co/mjvmpMKuAT pic.twitter.com/HlqJ5S7PZ5

— Nikola Brežnjak (@HitmanHR) February 9, 2016

Ionic, Stack Overflow

What do Yeoman Generators “really” add to Ionic Projects?

In this StackOverflow question I answered what do actually Yeoman Generators add to the Ionic projects.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I answered this question by user qizzacious:

I don’t understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.

I don’t see what the advantages are in using a yeomen generator in this case, this is.

I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn’t already have or that cannot be easily added with a bower install.

It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.

My answer was:

True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don’t you think?

That’s why some people tend to create these generators – to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).

All in all, you don’t have to use them, or stress about them. For instance, I personally don’t use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they’ve evolved.

Don’t hate, donate 😉 (Sure sure, I know you’re not hating, the statement just seemed appropriate).

What do #Yeoman #Generators "really" add to #Ionic Projects? @ionicframework https://t.co/GIbcndBiIQ

— Nikola Brežnjak (@HitmanHR) February 2, 2016

Ionic

How to test Cordova plugins without device

In this StackOverflow question I answered which Cordova plugins you can test without the actual device.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I answered this question by user Chris Lawrence:

I think I know the answer to this question already but thought I would throw it out there incase there was a workaround….

Just built a ionic app with ngcordova, which works fine and I have tested on my android device and deployed to playstore.

Just in the process of deploying to the apple app store. I currently don’t have an apple ios physical device to test the cordova plugins.

I am using sms, camera and local notification. These as far as am aware cannot be tested in the ios simulator in xcode.

Don’t really want to spend £400 on a tablet to test one app.. any one had the same problem and found a means of testing?

My answer was:

You can test plugins in iOS simulator.

edit: I just stumbled upon the official documentation where it states that even with Ionic View you can test these plugins:

  • com.brodysoft.sqlitePlugin 1.0.3 “Brodysoft SQLitePlugin”
  • com.ionic.keyboard 1.0.3 “Keyboard”
  • com.phonegap.plugins.barcodescanner 1.1.0 “BarcodeScanner”
  • org.apache.cordova.battery-status 0.2.12 “Battery”
  • org.apache.cordova.camera 0.3.4 “Camera”
  • org.apache.cordova.console 0.2.12 “Console”
  • org.apache.cordova.device 0.2.13 “Device”
  • org.apache.cordova.device-motion 0.2.11 “Device Motion”
  • org.apache.cordova.device-orientation 0.3.10 “Device Orientation”
  • org.apache.cordova.dialogs 0.2.11 “Notification”
  • org.apache.cordova.geolocation 0.3.11 “Geolocation”
  • org.apache.cordova.globalization 0.3.3 “Globalization”
  • org.apache.cordova.network-information 0.2.14 “Network Information”
  • org.apache.cordova.vibration 0.3.12 “Vibration”
  • org.chromium.zip 1.0.0 “Zip”

How to #test #Cordova plugins without device https://t.co/iKTKzYyTfI

— Nikola Brežnjak (@HitmanHR) January 26, 2016

Ionic2

Posting data from Ionic 2 app to a PHP server

TL;DR

This is the simplest example which shows how to POST data from an Ionic 2 app to a PHP server.

The tutorial covering the Ionic version 2 can be found here. The tutorial covering the Ionic version 3 can be found here.

Quickstart

To see it in action:

    1. Clone the finished project from Github
    2. Make sure you’ve got the newest Ionic beta CLI (see below for instructions)
    3. Run ionic serve
    4. You should see something like this:
      ionic2ServerPost

If you want to make it work from your server:

  1. Make sure you’ve got the newest Ionic beta CLI (see below for instructions)
  2. Clone the finished project from Github
  3. Upload the PHP/api.php file to your server
  4. In the app/pages/home/home.js file adjust the link variable (line #18) to point to your server
  5. Run ionic serve

Getting started with Ionic 2

By now you probably have heard that Ionic is in beta for its version 2, which closely follows Angular 2.

You can find a lot more Ionic 2 related tutorials on my friend Gajotres site.

To install the Ionic SDK and create Ionic 2 projects, you need to install the latest beta release:

npm install -g ionic@beta

You don’t need to worry about this messing up your current ionic CLI since the beta release has all the functionality to work with both V1 and V2 projects.

Step by step on how to create this yourself from scratch

  1. Create a new blank Ionic project with:
    ionic start Ionic2ServerSendTest blank --v2
  2. Copy the following code in app/pages/home/home.html file:
    <ion-navbar *navbar>
        <ion-title>
            Home
        </ion-title>
    </ion-navbar>
    
    <ion-content padding>
        <ion-list>
            <ion-input floating-label>
                <ion-label>Username</ion-label>
                <input type="text" name="username" [(ngModel)]="data.username">
            </ion-input>
    
            <button round block (click)="submit()">Submit to server</button>
        </ion-list>
    
        <ion-card>
            <ion-card-header>
                Response
            </ion-card-header>
            
            <ion-card-content>
                <b>{{data.response}}</b>
            </ion-card-content>
        </ion-card>
    </ion-content>
    

    Here you basically created a form with an username input field and with a button which acts as a submit button.

    As you can see, the syntax is a bit different since Ionic2 uses Angular2. Once the button is clicked AngularJS should handle it within the submit() function which we will define in our app/pages/home/home.js file (shown below).

    Input username uses  the new syntax for ng-model as well, and it binds to the variable data.username, so that you can then use it in your submit() function (shown below).

    Also, components are a bit different in Ionic now, and I encourage you can take a look at the official documentation.

  3. On your server, create an api.php file with the following content:
    <?php
        //http://stackoverflow.com/questions/18382740/cors-not-working-php
        if (isset($_SERVER['HTTP_ORIGIN'])) {
            header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
            header('Access-Control-Allow-Credentials: true');
            header('Access-Control-Max-Age: 86400');    // cache for 1 day
        }
    
        // Access-Control headers are received during OPTIONS requests
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
                header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
                header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    
            exit(0);
        }
    
    
        //http://stackoverflow.com/questions/15485354/angular-http-post-to-php-and-undefined
        $postdata = file_get_contents("php://input");
        if (isset($postdata)) {
            $request = json_decode($postdata);
            $username = $request->username;
    
            if ($username != "") {
                echo "Server returns: " . $username;
            }
            else {
                echo "Empty username parameter!";
            }
        }
        else {
            echo "Not called properly with username parameter!";
        }
    ?>

    As you can see from the code, the first part is explained in detail in this StackOverflow question, and it basically solves the CORS issue that you would otherwise run into.

    The second part, explained in detail in this StackOverflow question,  deals with the way you POST data from Ionic to your PHP server. The gist is that since we POSTed in a JSON format, we have to json_decode  the data that comes to your PHP server.

  4. In app/pages/home/home.js file adjust the link variable to point to the file on your server
  5. In app/pages/home/home.js file copy the following content:
    import {Page} from 'ionic/ionic';
    import {Http} from 'angular2/http';
    
    @Page({
        templateUrl: 'build/pages/home/home.html',
    })
    
    export class HomePage {
        constructor(http: Http) {
            this.data = {};
            this.data.username = '';
            this.data.response = '';
    
            this.http = http;
        }
    
        submit() {
            var link = 'http://nikola-breznjak.com/_testings/ionicPHP/api.php';
            var data = JSON.stringify({username: this.data.username});
            
            this.http.post(link, data)
            .subscribe(data => {
                this.data.response = data._body;
            }, error => {
                console.log("Oooops!");
            });
      }
    }

    Again, as I said, some (a lot) of things have changed in Angular 2, and at first glance you really may not like it (tbh, I know I didn’t). But, that will change with usage, so no worries.

    First thing that we do here is we import Page and Http components from Ionic and Angular, respectively. Then we’re setting the Page templateUrl to our home.html file.

    Inside the HomePage class we now have a constructor where we’re setting some default values. Important to note, see how we’re passing in Http via the constructor parameter. Again, I won’t go into details of using this, as I mentioned you can take a look at a lot more in depth tutorials on Gajotres.

    Inside the submit function we use the http service to post to our API endpoint with some data. Make note of how we use subscribe to handle data once it  arrives.

  6. Run ionic serve  from the root directory of your Ionic app
  7. Hope this tutorial helps you in starting your journey towards (Ionic + Angular)_2
Ionic, Stack Overflow

Ionic – how to handle when external api server is offline?

In this StackOverflow question I answered how to handle when external API server is offline.

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #3 in the top All time answerers list.

I answered this question by user Rflujowa:

I’m writing a app in ionic. The app relies on external api’s. I’ve made multiple functions to test the connection, to my own server, and my own server handles the api calls. My own server is needed for this because of ip-whitelistening.

All works well, but now i want to disable the application if the result from my own server is false. I make a call to test the connection everytime the app starts.

What is the best way to handle this with angular/ionic?

1 thought i had myself is to redirect to a landingpage, if no connection is available.

Any tips are welcome.

My answer was:

Yes, basically what you planned to do is OK.

So, just after your app loads up, check if the connection is available (you can read more about how to do that in my detailed post How to check network information change with Ionic framework), and if not then you can change the state to some page where it would clearly let the user know that “Currently the link to the server is not working” (or some better notification).

Also, probably you would want to put a refresh button on that page, so that one could click it and the whole availability process would be checked again (basically same as if someone restarted your app).

Hope this helps.

How to handle when external #API server is offline in @ionicframework? https://t.co/FSGt6AoXCQ

— Nikola Brežnjak (@HitmanHR) January 19, 2016

Page 5 of 13« First...«4567»10...Last »

Recent posts

  • Discipline is also a talent
  • Play for the fun of it
  • The importance of failing
  • A fresh start
  • Perseverance

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (35)
  • Daily Thoughts (77)
  • Go (3)
  • iOS (5)
  • JavaScript (127)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (2)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (77)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (40)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak