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, Stack Overflow

I made it to the top of StackOverflow’s all time answerers list for Ionic tag

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%).

As you may know, I’m really into Ionic framework and am helping out on StackOverflow with the knowledge I gained so far with the framework.

Finally, I reached my goal and made it to the #1 position in the top All time answerers list, and finally, obtained my first “ionic” tag badge:

soIonicTag

See you at the golden badge 😉

I made it to the #top of #StackOverflow's all time answerers list for @ionicframework tag https://t.co/X8iR2gi7DD pic.twitter.com/awmvGnHljQ

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

Ionic, NodeJS, Stack Overflow

How to run Node.js server in Ionic mobile app?

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 #1 in the top All time answerers list.

I answered this question by user Shubham:

I am making an app using MEAN and ionic framework where nodejs is a middleware to connect to the database(mongoDb). I need to run the nodejs server using node server.js and the app using ionic serve. This is my server.js.

var express          = require('express'),
app              = express(),
bodyParser       = require('body-parser'),
mongoose         = require('mongoose'),
CohortController =require('./www/server/controller/CohortController');

mongoose.connect('mongodb://localhost:27017/persistent');

app.use(bodyParser());

app.get('/api/cohorts',CohortController.list);
app.post('/api/cohorts',CohortController.create);

app.listen(3000,function(){
console.log('Listening...');
})

Now this is my app.js. I use http://localhost:3000 to get the JSON.

app.controller('CohortController',['$scope','$resource',
  function($scope,$resource){
    var Cohort=$resource('http://localhost:3000/api/cohorts');
    Cohort.query(function(results){
      $scope.cohorts=results;
    });
    $scope.cohorts=[];

    $scope.createCohort= function () {
      var cohort=new Cohort();
      cohort.name=$scope.CohortName;
      cohort.id=$scope.CohortId;
      cohort.$save(function(result){
        $scope.cohorts.push(result);
        $scope.CohortName='';
        $scope.CohortId='';
      });
    }
  }]);

How can I run the node server when I convert it into a mobile application? How the application will use the API?

My answer was:

You will have to have your Node.js app running on a server which you would then access (from your Ionic app) via it’s public IP. So, you wouldn’t use http://localhost:3000 to get the JSON, instead you would use something like http://123.456.789.123:3000.

But, usually, this is not the way you would do it (with the port 3000). What you would additionally do is put (for example) Nginx in front of your Node.js app (see an example here) in order to serve your api from the standard HTTP port (80).

So, basically, you can’t actually “run Node.js server in Ionic app” – the way you do it is run the Node.js app separate from Ionic and expose its functionality via a standardized API (usually these days RESTis what you would want to achieve) which you then “consume” via Ionic’s (well, to be exact, it’s actually Angular’s) $resource module.

Hope this helps clear things up a bit.

How to run #Node.js server in #Ionic mobile app? https://t.co/8SOUYGM3Vf

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

Ionic, Stack Overflow

Connect to MongoDB remote server with Ionic

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 #1 in the top All time answerers list.

I answered this question by user Antifa:

I’m trying to develop an application in phonegap/ionic and I want to use a remote database to store my data. I want to use MongoDB. I already tried lots of ways such as this quick start guide.

By using this I can connect to DB but this is pure node.js and the require() function cannot be recognized when I try to add this code to an ionic starter app. Maybe require is not supported in ionic

Is there a way that can achieve it in Ionic?

Please let me know if you want some more information.

My answer was:

The thing is; you can’t connect Ionic to MongoDB directly. No, there’s not workaround, no magic involved, it’s just not the way this is supposed to work. Ionic works on top of Angular and Angular is a frontend framework.

However, the way you should do it is that you basically create a (RESTful) API on your server side.

Most likely this will be made with Node.js which will talk directly to MongoDB and query it. A framework very well suited for this (you actually may be using it already) is Express.

After you write your (RESTful) API then you can consume it through your services in Angular by using Angular’s $resource object.

Sure, this is not a step by step answer, and it seems you’re just starting in this area, so you have some learning do to on your part (REST, RESTful, $resource, services…), but I wish you good luck and if you’ll have any more specific questions, don’t hesitate to ask them.

https://twitter.com/HitmanHR/status/684267579976904704

NodeJS

How to check for outdated packages via npm

In this post I’ll show you the modules which help in finding the outdated packages via npm. This is an excerpt from the book Deploying Node.js by Sandro Pasquali. I was a technical reviewer for this book and you can read my review here.

This command will list globally installed packages:

npm root -g

 

This following command will give a full list of other dependencies in a tree list:

npm list --global

There are also some aliases to this command like ls, la. You can learn more about it from the official documentation.

 

This command will list outdated packages:

npm outdated

 

A very useful global tool for performing these sorts of checks is npm-check, which delivers more detailed information.  You can install it with npm install npm-check  and run it simply by running npm-check. It tells you what modules are out of date and provides a link to the package’s documentation so you can decide if you want the update.

 

To remove packages that are installed but no longer listed in package.json file you can use the command npm prune. Note that this is simply a technique for cleaning up the node_modules folder within an individual package’s folder; it is not a smart, global tool for removing unused packages across the entire tree.

 

The dependency-check module is a great tool for finding unnecessary packages. Once you install it you run it like this:

dependency-check package.json --unused

and, if some modules aren’t used you’ll get a message like:

Fail! Modules in package.json not used in code: express

The entry point to your application has to be listed in package.json, as dependency-check needs to know the root of your application.

 

The npm dedupe module attempts to reduce the number of redundant package installs, “flattening” the tree, and therefore reducing install time.

How to check for #outdated #packages via #npm #nodejs #node.js https://t.co/bNJ8aiGBmm

— Nikola Brežnjak (@HitmanHR) December 30, 2015

Ionic, Stack Overflow

How to run Ionic serve permanently?

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 in the top All time answerers list.

I answered this question by user Santhosh Aineri:

I am using Ionic framework for one application. The code is on a linux server. I am running the application using ionic serve command through putty.

But, the problem is if I close the putty the application is stopped. Is there any way to run the ionic serve permanently as a daemon process?

My answer was:

I’m suspecting you’re trying to do this because you want to serve your Ionic app as a web app, correct?

In that case – you don’t have to run ionic serve permanently. All you have to do is take all the code from the www folder and place it in the http folder (or any other which is valid for your system) of your web server.

So, basically, spin up apache (or nginx) and serve the code from the Ionic’s www folder. Basically, ionic serve command does the same thing – it spins up a local web server and serves the content from the www folder. It does that for faster local testing.

You can take a look at this SO question for more info on how to deploy Ionic as a website.

How to run #Ionic #serve #permanently? https://t.co/7mbxGdSHFi

— Nikola Brežnjak (@HitmanHR) December 29, 2015

Ionic

How to send an email in Ionic framework application?

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 in the top All time answerers list.

I answered this question by user varun:

I have a simple page with 3 textbox and a button like this.

<input type="text" ng-model="name" required >
<input type="text" ng-model="city" required >
<input type="text" ng-model="country" required >

<button class="button button-block button-royal ExploreBtn" ng-click="sendMail();">
Send mail               
</button>

Help me , How to send mail with value in first text-field as subject and other two as body in angular js/ionic.

My answer was rather elaborate:

So, basically the comments to your question are correct – you can’t do this purely in JavaScript, you need to use a backend service for it.

Now, what you would do in your sendMail function is call the service by using Angulars’ $httpservice. You can learn more about $http service from the official documentation.

The call would, for example look like this:

$http({
    method: 'POST',
    url: 'http://your.server.com/sendmail.php',
    data: { mailTo: '[email protected]', msg: 'hello!' }
}).then(function successCallback(response) {
    alert("msg sent!");
}, function errorCallback(response) {
    alert("error with sending a msg");
});

Here you have two important parts:

  • url – where is your service (which will finally send the email) located
  • data – what are you sending to this service endpoint

In my example I’ve put the service url to be sendmail.php which, in end, would be written in PHP. I have to stress out that your backend service can be written in any server-side language you’re familiar with (if you’ll research this topic further make sure you read about the RESTful services).

For the sake of this example, the PHP script (unsecured and just for reference) which uses the mail function to send an email would look something like this:

<?php

$to = $_POST["emailTo"];
$msg = $_POST["msg"];

mail($to, "Some test subject", $msg);

?>

Hope this helps clear the confusion.

https://twitter.com/HitmanHR/status/679287774650998785

Ionic, Pluralsight

How to publish the app to the Apple’s App Store and Google’s Play Store

edit: These posts don’t exists in their separate form anymore. Instead, they have been merged into one big post that you can read here. But, in case you want to read them in its original form, make sure to check the book linked below.


The fourth post about Ionic framework for Pluralsight wraps the series 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 (in this tutorial) publishing it in the stores.

You can see the finished product on the header image and you can check out the application by downloading it from the App Store or Play Store here.

The post is live and you can access it for free here:  How to publish our calculator application to the Apple’s App Store and Google’s Play Store.

This was a series of posts which was intended to teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android.

The first tutorial, as you may remember, was all about how to get started with Ionic framework on Mac andWindows. The second tutorial was about how to create a calculator application with Ionic framework by using Ionic Creator for UI. The third tutorial was about how to polish, create icons and splash screen images, add ads, share and test our calculator application.

IonicBook

If by some chance you would like to download a PDF version of these 4 posts you can do so via Leanpub. Yes, you can choose zero as the amount and I promise I won’t take it against you 😉

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

How to #publish the #app to the Apple's App Store and Google's Play Store https://t.co/DkFBeTj8yi @ionicframework pic.twitter.com/SjROTSn5OO

— Nikola Brežnjak (@HitmanHR) December 15, 2015

Breaking News, Ionic

Ionic 1.2 is out!

The team from Ionic announced their new 1.2 version today. This should get you very excited because the things these guys are making are truly praiseworthy.

As they say in the report:

  • it has over 100 bug fixes
  • uses native scrolling by default on all platforms (which means better responsiveness on Android especially)
  • new Slide box component (use the new <ion-slides> tag)
  • support for Windows 10 and Edge, which runs on the new Windows Phone 10 platform
  • if you want to build a mobile website, you’re fully and officially encouraged to do so (not just an app for the app store). As many of you know, this was not the case so far.
  • new <ion-input> tag
  • dropping support for the raw HTML and CSS versions of Radio and Checkbox, instead you’ll have to use directives <ion-radio> and <ion-checkbox>
  • better integration with Cordova plugins in terms of better console log error output
  • Ionic Native
  • …

You can read the full report on their blog post: http://blog.ionic.io/announcing-ionic-1-2/.

@ionicframework Awesome Ionic 1.2 is out! Mobile website mode supported! https://t.co/QsdhghpPdP pic.twitter.com/pvFpZVARvg

— Nikola Brežnjak (@HitmanHR) December 10, 2015

Ionic, Pluralsight

How to polish, create icons and splash screen images, add ads, share and test our calculator application

In my third tutorial about Ionic framework for Pluralsight, I’m going to show you how to:

  • polish,
  • create icons and splash screen images,
  • add ads,
  • share and test our calculator application

The post is live and you can access it for free here:  How to polish, create icons and splash screen images, add ads, share and test our calculator application.

Btw, if you’re wondering where is the main image from, it’s actually from a landing page of the published apps (we’ll show you how to do that for both Play Store and App Store in the next tutorial), and you can take a look at it here: SuperSimple Calculator.

This will be a series of posts which will teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android.

The first tutorial, as you may remember, was all about how to get started with Ionic framework on Mac andWindows. The second tutorial was about how to create a calculator application with Ionic framework by using Ionic Creator for UI.

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

How to polish, create #icons and #splash screen images, add #ads, share and test our #ionic #calculator application https://t.co/52k5f1G9CH

— Nikola Brežnjak (@HitmanHR) December 9, 2015

Ionic, Stack Overflow

How to deploy Ionic as a website?

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 in the top All time answerers list.

edit: As of version 1.2 Ionic is officially saying that you are free to deploy Ionic as a website.

I answered this question by user Ayush Chordia:

I have created an ionic app and want to deploy it as a website. What’s the best way to deploy it on a custom domain ? I was thinking of using azure web app to host the ionic app. All the documentation refers to use it as hybrid app for IOS and Android. But at this point we are only interested for it to function as a website.

In my answer I disagreed with this one:

As I stated in the comment to the only provided answer – I disagree.

If you’re not using any Cordova plugins then there is no problem (if you really wish to) to upload the contents of the www folder to your server, and woila – you’ll have the same app.

However, it is important to note that Ionic never intended for such a use, and the users of your “website” will have to have a newest browser in order to see the “website” correctly (not broken down due to some feature that Ionic is using in either CSS or HTML that some older browsers do not support).

You can see such example here: http://nikola-dev.com/IonicCalculator/mobile.html, and you can take a look at the tutorial with step by step on how to recreate the application. I literally took out the contents of the www folder and put it on the web server, and as you can see it works.

https://twitter.com/HitmanHR/status/674121400911863808

Page 6 of 13« First...«5678»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