Ionic 2 Backand Starter

Ionic 2 Backand Starter

Simple Ionic 2 Starter with Powerful Backend

Free!

(2)
Yoram Kornatzky

Yoram Kornatzky

Member since 2014

Details

Version:
1.0
Size:
0mb
Ionic:
2.x beta
Platforms:
iOS, Android
Released:
5 months ago
Updated:
a month ago
Category:
Starters
Tags:
Backand, Ionic 2, AngularJS 2, Socket.io

Leveraging Backand, this super-easy Ionic 2 starter provides a database API, and security.

Compatible with Ionic 2.0.0-rc.0

Running the app

  1. Create an Ionic app:

    ionic start myApp https://github.com/backand/backand-ionic2-starter --v2

    cd myApp

  2. Install Cordova Plugins

    ionic plugin add cordova-plugin-inappbrowser

  3. Set details of your app in src/app/app.component.ts:

    backandService.setAppName('your app name');

    backandService.setSignUpToken('your signup token');

    backandService.setAnonymousToken('your anonymousToken token');

  4. Install dependencies

    npm install socket.io-client --save

    npm install @types/node --save-dev --save-exact

    npm install @types/socket.io-client --save-dev --save-exact

  5. Run the app

    ionic serve

CRUD

To fetch, create, and filter rows, from an object, say stuff, modify the url used in these functions:

getItems
filterItems
postItem

replacing todo with the name of your object, stuff

Social Signup

The app opens a dialog supplied by the social network.

In App

Facebook

Use the Facebook Connect plugin to obtain access to the native FB application on iOS and Android.

Install it with:

ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID="<Facebook APP ID>" --variable APP_NAME="<Facebook APP NAME>"

Use BackandService function inappSocial

Socket Service

  1. To subscribe to event items_updated from server side via sockets, in your component do, as in src/app/pages/crud/crud.ts:
  this.backandService.on('items_updated')
      .subscribe(
            data => {

            },
            err => {
                console.log(err);
            },
            () => console.log('received update from socket')
        );

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

codernoel@gmail.com

[email protected]   ·   4 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   ·   4 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   ·   4 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   ·   17 days 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   ·   16 days 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   ·   16 days 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   ·   16 days 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   ·   3 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   ·   3 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   ·   3 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   ·   2 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   ·   2 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   ·   a month 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   ·   a month 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   ·   21 days 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   ·   18 days 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   ·   18 days ago

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

Olli Muukka

Olli Muukka   ·   18 days 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.

  ·   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.

Olli Muukka

Olli Muukka   ·   a month 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   ·   a month 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   ·   21 days 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   ·   18 days 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   ·   18 days ago

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

Olli Muukka

Olli Muukka   ·   18 days 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   ·   3 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   ·   2 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   ·   2 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   ·   3 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   ·   3 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]   ·   4 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   ·   4 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   ·   4 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   ·   17 days 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   ·   16 days 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   ·   16 days 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   ·   16 days 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   ·     ·   5 months ago

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

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

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