Ionic 2 Backand Starter

Ionic 2 Backand Starter

Simple Ionic 2 Starter with a Backend powered by Backand

Free!

(2)
Yoram Kornatzky

Yoram Kornatzky

Member since 2014

Details

Version:
1.4
Size:
3mb
Ionic:
3.x
Platforms:
iOS, Android
Released:
a year ago
Updated:
5 months ago
Category:
Starters
Tags:
Backand, Ionic 2, AngularJS 2, Socket.io, backend, realtime, Facebook, Google

Backand Ionic 2 Starter

Create a mobile application with ionic and backand. NOTE: Compatible with Ionic 3.1.2

Due to recent changes of Ionic CLI it does no support creating an app from a GitHub repo. Hence, you will need to clone or download these starter and use the src and www folderd.

Running the app

  • Create an Ionic app:

    $ ionic start mynewapp blank
    $ cd mynewapp
    
  • Replace folders from this starter:

  • src
  • www

  • Install dependencies:

    $ npm i -S @backand/angular2-sdk socket.io-client @types/node @types/socket.io-client ionic-native
    
  • Install Cordova Plugins

    $ ionic cordova plugin add cordova-plugin-inappbrowser
    
  • Run the app

    $ ionic serve
    
  • In order to run the app on another platform (Android/iOS):

    $ ionic cordova platform add <platform>
    $ ionic cordova run <platform>
    

Setting up your own Backand application

If you want to customize the data model, or change how authentication takes place, follow these steps:

  • Create a free personal application at backand.com

  • Change the app's parameters (/src/app/app.component.ts) in the init function with your new app parameters:

    backand.init({
    appName: 'your app name',
    signUpToken: 'your signup token',
    anonymousToken: 'your anonymousToken token',
    runSocket: true,
    mobilePlatform: 'ionic'
    });
    
  • Delete the starter content, and begin writing your app!

Review our Angular 2 SDK to get started - angular2-sdk.

In App Social Login

In App social login is intended to use the native social SDK of Faceboook or Google. For Google this is due to recent restrictions in Google that prevent using the Signup with Google through web views.

In the signup screen we label this functionality as In App Social

Google

Install Ionic Native Google Plus plugin

Facebook

Install Ionic Native Facebook plugin

Ionic Web App for Facebook Sharing

When an Ionic web app is shared in Facebook feed, the usual Backand social signup with Facebook will not work.

  1. Detect this case in your code with:

    function isFacebookApp() {

    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
    

    }

  2. Install ngx-facebook:

    npm install ngx-facebook --save

  3. Use the code labeled Social Web in signup screen.

Hey there! You'll need to log in before you can leave a comment here.

codernoel@gmail.com

[email protected]   ·   a year ago

Has anyone gotten this to work properly? I keep getting errors surrounding the socket.io-client namespace not being found via TS, even though it's in Node. Contacted developer, waiting to hear back.

Yoram Kornatzky

Yoram Kornatzky   ·   a year ago

Being the developer, I was not able to reproduce the error. I should say that sockets are needed only for real-time update on changes in the model from the server-side to the app.

Ilkka Nisula

Ilkka Nisula   ·   a year ago

Did you install typings for dependencies described in instructions? You need to install typings cli and then use it to install typings. npm install -g typings typings install ionic serve

Jose

Jose   ·   10 months ago

Hi Thank you very much for your app in ionic2. I installed and it's working fine. I have some questions: -How are you controlling the sessions? I mean If you want to use login page as first page and not allow the user to enter in other pages without login. - How do you redirect the user after login? - How do you control the role that has the user? - Is it possible to store in the user information from where is the user signinup? (from google, facebook...) Thanks for your comments !

Yoram Kornatzky

Yoram Kornatzky   ·   9 months ago

1. Authorization of pages is something you should do with Angular Router https://angular.io/docs/ts/latest/api/router/index/Router-class.html 2. Redirection after login: use NavController import { NavController } from 'ionic-angular'; constructor(private nav: NavController, public backandService:BackandService) this.nav.push(CrudPage); 3. You select the user role in the Backand GUI > Security and Auth > Registered Users 4. Storing where the user came from: will answer soon

Yoram Kornatzky

Yoram Kornatzky   ·   9 months ago

4. To store where the user came from, following these steps: Read social provider: 1. add 'provider' field to users object 2. Open Security Actions, and Edit beforeSocialSignup 3. Add line of code: userInput.provider = parameters.socialProfile.Provider; 4. Change the Where Condition (at the bottom) to true

Jose

Jose   ·   9 months ago

Hi Yoram, Thank so much for your answers! I will have a look!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Anh

Anh   ·   a year ago

When I run ionic serve, it has error "WARN: No gulpfile found!" and the browser screen blanks.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

philip greenwald

philip greenwald   ·   a year ago

I have not been able to get this to work properly. It can't locate any of the main .css or .js files and my screen is blank when i run ionic serve. Also, where is the app.module file? I see it is being called from main.ts but it is not in the directory. Also, should we be changing the config variables in app.ts, backandservice.ts, or both?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

James Nielson

James Nielson   ·   a year ago

I was unable to get this project to serve until I did 2 things: brew upgrade (which updated my Node, FWIW), and also I deleted what I downloaded from this page and (call me crazy) followed Yoram's instructions. Maybe the Node update helped, but I suspect the Download button on this page is NOT the way to go. Unfortunately no styling is showing up, so...?

Yoram Kornatzky

Yoram Kornatzky   ·   a year ago

The download is identical to what is in GitHub. So it is probably the Node.js. We did not put time into styling.

James Nielson

James Nielson   ·   a year ago

Thanks Yoram. Good to know. I was assuming it would look like the pic above, but it seems that is not the case. No sweat. I need to learn styling too :) Thanks for the great resource to practice with!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Olli Muukka

Olli Muukka   ·   10 months ago

Any advice for this error with ionic serve: $ ionic serve > [email protected] ionic:serve /home/olli/ionic/backand > ionic-app-scripts serve [15:29:21] ionic-app-scripts 0.0.45 [15:29:21] watch started ... [15:29:21] build dev started ... [15:29:21] clean started ... [15:29:21] clean finished in 1 ms [15:29:21] copy started ... [15:29:21] transpile started ... events.js:160 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE 0.0.0.0:53703 at Object.exports._errnoException (util.js:1022:11) at exports._exceptionWithHostPort (util.js:1045:20) at Server._listen2 (net.js:1262:14) at listen (net.js:1298:10) at doListening (net.js:1397:7) at _combinedTickCallback (internal/process/next_tick.js:77:11) at process._tickCallback (internal/process/next_tick.js:98:9) at Module.runMain (module.js:607:11) at run (bootstrap_node.js:420:7) at startup (bootstrap_node.js:139:9) npm ERR! Linux 3.16.0-38-generic npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:serve" "--" npm ERR! node v7.2.1 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! [email protected] ionic:serve: `ionic-app-scripts serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] ionic:serve script 'ionic-app-scripts serve'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the ionic-hello-world package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ionic-app-scripts serve npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs ionic-hello-world npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls ionic-hello-world npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /home/olli/ionic/backand/npm-debug.log There was an error serving your Ionic application: There was an error with the spawned command: serve

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Yes, EADDRESSINUSE says usually that you are running some ng serve or ionic server or npm start on the same computer, and it uses the same port

Olli Muukka

Olli Muukka   ·   10 months ago

Thanks, another question.. ..I guess very trivial one, .. if I want to push to another page after successful login by adding following lines to the end of getAuthTokenSimple() : if (this.auth_status == 'OK') { this.navCrtl.push(hLanding); } ..this will not go automatically to another page?

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Here is what you should do: In login.ts, import NavController import { NavController } from 'ionic-angular'; and import your other page, to which you want it to go after login, e.g. import { NavController } from 'ionic-angular'; Change constructor: constructor(private nav: NavController, public backandService:BackandService) then do after getAuthTokenSimple: this.nav.push(CrudPage);

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Correction: import also you page, to which you want to go: import { CrudPage } from '../crud/crud';

Olli Muukka

Olli Muukka   ·   10 months ago

I had all those in place, but changed the location of this.nav.push(); to the enf of: data => { ... } ..and now it works like I wanted! thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Yoram Kornatzky

Yoram Kornatzky   ·   8 months ago

The new release include now or new and complete SDK - have fun.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

André Wright

André Wright   ·   5 months ago

I get this error: 118 verbose stack Error: EISDIR: illegal operation on a directory, read 118 verbose stack at Error (native) 119 verbose cwd C:\Users\André\barberapp3 120 error Windows_NT 10.0.14393 121 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i" "-S" "@backand/angular2-sdk" "socket.io-client" "@types/node" "@types" "socket.io-client" "ionic-native" 122 error node v6.10.1 123 error npm v3.10.10 124 error code EISDIR 125 error errno -4068 126 error syscall read 127 error eisdir EISDIR: illegal operation on a directory, read 128 error eisdir This is most likely not a problem with npm itself 128 error eisdir and is related to npm not being able to find a package.json in 128 error eisdir a package you are trying to install.

André Wright

André Wright   ·   5 months ago

I get that error when running npm i -S @backand/angular2-sdk socket.io-client @types/node @types socket.io-client ionic-native

Yoram Kornatzky

Yoram Kornatzky   ·   5 months ago

We have a mistake in the REAMD it should be: npm i -S @backand/angular2-sdk socket.io-client @types/node @types/socket.io-client ionic-native There was a space instead of slash between @types and socket.io-client

André Wright

André Wright   ·   5 months ago

Great thank you! Works great now. Was there any reason why I had to add userData = {}; in the signup.ts under SignupPage export class to get it to work?

Yoram Kornatzky

Yoram Kornatzky   ·   5 months ago

Indeed your suggestion is correct. Thanks for discovering this bug. We fixed it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

André Wright

André Wright   ·   5 months ago

I get this error: 118 verbose stack Error: EISDIR: illegal operation on a directory, read 118 verbose stack at Error (native) 119 verbose cwd C:\Users\André\barberapp3 120 error Windows_NT 10.0.14393 121 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i" "-S" "@backand/angular2-sdk" "socket.io-client" "@types/node" "@types" "socket.io-client" "ionic-native" 122 error node v6.10.1 123 error npm v3.10.10 124 error code EISDIR 125 error errno -4068 126 error syscall read 127 error eisdir EISDIR: illegal operation on a directory, read 128 error eisdir This is most likely not a problem with npm itself 128 error eisdir and is related to npm not being able to find a package.json in 128 error eisdir a package you are trying to install.

André Wright

André Wright   ·   5 months ago

I get that error when running npm i -S @backand/angular2-sdk socket.io-client @types/node @types socket.io-client ionic-native

Yoram Kornatzky

Yoram Kornatzky   ·   5 months ago

We have a mistake in the REAMD it should be: npm i -S @backand/angular2-sdk socket.io-client @types/node @types/socket.io-client ionic-native There was a space instead of slash between @types and socket.io-client

André Wright

André Wright   ·   5 months ago

Great thank you! Works great now. Was there any reason why I had to add userData = {}; in the signup.ts under SignupPage export class to get it to work?

Yoram Kornatzky

Yoram Kornatzky   ·   5 months ago

Indeed your suggestion is correct. Thanks for discovering this bug. We fixed it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Yoram Kornatzky

Yoram Kornatzky   ·   8 months ago

The new release include now or new and complete SDK - have fun.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Olli Muukka

Olli Muukka   ·   10 months ago

Any advice for this error with ionic serve: $ ionic serve > [email protected] ionic:serve /home/olli/ionic/backand > ionic-app-scripts serve [15:29:21] ionic-app-scripts 0.0.45 [15:29:21] watch started ... [15:29:21] build dev started ... [15:29:21] clean started ... [15:29:21] clean finished in 1 ms [15:29:21] copy started ... [15:29:21] transpile started ... events.js:160 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE 0.0.0.0:53703 at Object.exports._errnoException (util.js:1022:11) at exports._exceptionWithHostPort (util.js:1045:20) at Server._listen2 (net.js:1262:14) at listen (net.js:1298:10) at doListening (net.js:1397:7) at _combinedTickCallback (internal/process/next_tick.js:77:11) at process._tickCallback (internal/process/next_tick.js:98:9) at Module.runMain (module.js:607:11) at run (bootstrap_node.js:420:7) at startup (bootstrap_node.js:139:9) npm ERR! Linux 3.16.0-38-generic npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:serve" "--" npm ERR! node v7.2.1 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! [email protected] ionic:serve: `ionic-app-scripts serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] ionic:serve script 'ionic-app-scripts serve'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the ionic-hello-world package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! ionic-app-scripts serve npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs ionic-hello-world npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls ionic-hello-world npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /home/olli/ionic/backand/npm-debug.log There was an error serving your Ionic application: There was an error with the spawned command: serve

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Yes, EADDRESSINUSE says usually that you are running some ng serve or ionic server or npm start on the same computer, and it uses the same port

Olli Muukka

Olli Muukka   ·   10 months ago

Thanks, another question.. ..I guess very trivial one, .. if I want to push to another page after successful login by adding following lines to the end of getAuthTokenSimple() : if (this.auth_status == 'OK') { this.navCrtl.push(hLanding); } ..this will not go automatically to another page?

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Here is what you should do: In login.ts, import NavController import { NavController } from 'ionic-angular'; and import your other page, to which you want it to go after login, e.g. import { NavController } from 'ionic-angular'; Change constructor: constructor(private nav: NavController, public backandService:BackandService) then do after getAuthTokenSimple: this.nav.push(CrudPage);

Yoram Kornatzky

Yoram Kornatzky   ·   10 months ago

Correction: import also you page, to which you want to go: import { CrudPage } from '../crud/crud';

Olli Muukka

Olli Muukka   ·   10 months ago

I had all those in place, but changed the location of this.nav.push(); to the enf of: data => { ... } ..and now it works like I wanted! thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

James Nielson

James Nielson   ·   a year ago

I was unable to get this project to serve until I did 2 things: brew upgrade (which updated my Node, FWIW), and also I deleted what I downloaded from this page and (call me crazy) followed Yoram's instructions. Maybe the Node update helped, but I suspect the Download button on this page is NOT the way to go. Unfortunately no styling is showing up, so...?

Yoram Kornatzky

Yoram Kornatzky   ·   a year ago

The download is identical to what is in GitHub. So it is probably the Node.js. We did not put time into styling.

James Nielson

James Nielson   ·   a year ago

Thanks Yoram. Good to know. I was assuming it would look like the pic above, but it seems that is not the case. No sweat. I need to learn styling too :) Thanks for the great resource to practice with!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

philip greenwald

philip greenwald   ·   a year ago

I have not been able to get this to work properly. It can't locate any of the main .css or .js files and my screen is blank when i run ionic serve. Also, where is the app.module file? I see it is being called from main.ts but it is not in the directory. Also, should we be changing the config variables in app.ts, backandservice.ts, or both?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Anh

Anh   ·   a year ago

When I run ionic serve, it has error "WARN: No gulpfile found!" and the browser screen blanks.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

codernoel@gmail.com

[email protected]   ·   a year ago

Has anyone gotten this to work properly? I keep getting errors surrounding the socket.io-client namespace not being found via TS, even though it's in Node. Contacted developer, waiting to hear back.

Yoram Kornatzky

Yoram Kornatzky   ·   a year ago

Being the developer, I was not able to reproduce the error. I should say that sockets are needed only for real-time update on changes in the model from the server-side to the app.

Ilkka Nisula

Ilkka Nisula   ·   a year ago

Did you install typings for dependencies described in instructions? You need to install typings cli and then use it to install typings. npm install -g typings typings install ionic serve

Jose

Jose   ·   10 months ago

Hi Thank you very much for your app in ionic2. I installed and it's working fine. I have some questions: -How are you controlling the sessions? I mean If you want to use login page as first page and not allow the user to enter in other pages without login. - How do you redirect the user after login? - How do you control the role that has the user? - Is it possible to store in the user information from where is the user signinup? (from google, facebook...) Thanks for your comments !

Yoram Kornatzky

Yoram Kornatzky   ·   9 months ago

1. Authorization of pages is something you should do with Angular Router https://angular.io/docs/ts/latest/api/router/index/Router-class.html 2. Redirection after login: use NavController import { NavController } from 'ionic-angular'; constructor(private nav: NavController, public backandService:BackandService) this.nav.push(CrudPage); 3. You select the user role in the Backand GUI > Security and Auth > Registered Users 4. Storing where the user came from: will answer soon

Yoram Kornatzky

Yoram Kornatzky   ·   9 months ago

4. To store where the user came from, following these steps: Read social provider: 1. add 'provider' field to users object 2. Open Security Actions, and Edit beforeSocialSignup 3. Add line of code: userInput.provider = parameters.socialProfile.Provider; 4. Change the Where Condition (at the bottom) to true

Jose

Jose   ·   9 months ago

Hi Yoram, Thank so much for your answers! I will have a look!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

Itay   ·     ·   a year ago

Thanks for the great starter for Ionic 2 with TypeScript, Angular 2 and Backand

Félix Desjardins   ·     ·   a year ago

Awesome! It works perfectly. I give 4 starts because the Backand service is missing some things, for example : backandService.getFirstName, getLastName, and even, getName

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Félix Desjardins    ·     ·   a year ago

Awesome! It works perfectly. I give 4 starts because the Backand service is missing some things, for example : backandService.getFirstName, getLastName, and even, getName

Itay    ·     ·   a year ago

Thanks for the great starter for Ionic 2 with TypeScript, Angular 2 and Backand