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.2
Size:
0mb
Ionic:
2.x beta
Platforms:
iOS, Android
Released:
9 months ago
Updated:
15 days ago
Category:
Starters
Tags:
Backand, Ionic 2, AngularJS 2, Socket.io, backend, realtime

Backand Ionic 2 Starter

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

Running the app

  • Create an Ionic app:

    $ ionic start myApp https://github.com/backand/ionic2-starter1 --v2    
    $ cd myApp
    
  • Install dependencies:

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

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

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

    $ cordova platform add <platform>
    $ ionic 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.

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

codernoel@gmail.com

[email protected]   ·   7 months 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   ·   7 months 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   ·   7 months 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   ·   4 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   ·   4 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   ·   4 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   ·   4 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 or create an account before you can leave a comment here.

Anh

Anh   ·   7 months 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 or create an account before you can leave a comment here.

philip greenwald

philip greenwald   ·   7 months 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 or create an account before you can leave a comment here.

James Nielson

James Nielson   ·   6 months 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   ·   6 months 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   ·   6 months 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 or create an account before you can leave a comment here.

Olli Muukka

Olli Muukka   ·   5 months ago

Any advice for this error with ionic serve: $ ionic serve > ionic-hello-world@ 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! ionic-hello-world@ ionic:serve: `ionic-app-scripts serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ionic-hello-world@ 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   ·   4 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   ·   4 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   ·   4 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   ·   4 months ago

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

Olli Muukka

Olli Muukka   ·   4 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 or create an account before you can leave a comment here.

Yoram Kornatzky

Yoram Kornatzky   ·   3 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 or create an account before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



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

Yoram Kornatzky

Yoram Kornatzky   ·   3 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 or create an account before you can leave a comment here.

Olli Muukka

Olli Muukka   ·   5 months ago

Any advice for this error with ionic serve: $ ionic serve > ionic-hello-world@ 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! ionic-hello-world@ ionic:serve: `ionic-app-scripts serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ionic-hello-world@ 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   ·   4 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   ·   4 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   ·   4 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   ·   4 months ago

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

Olli Muukka

Olli Muukka   ·   4 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 or create an account before you can leave a comment here.

James Nielson

James Nielson   ·   6 months 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   ·   6 months 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   ·   6 months 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 or create an account before you can leave a comment here.

philip greenwald

philip greenwald   ·   7 months 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 or create an account before you can leave a comment here.

Anh

Anh   ·   7 months 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 or create an account before you can leave a comment here.

codernoel@gmail.com

[email protected]   ·   7 months 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   ·   7 months 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   ·   7 months 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   ·   4 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   ·   4 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   ·   4 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   ·   4 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 or create an account before you can leave a comment here.

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

Itay   ·     ·   9 months ago

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

Félix Desjardins   ·     ·   8 months 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    ·     ·   8 months 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    ·     ·   9 months ago

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