Coder Social home page Coder Social logo

loopback-example-ionic's Introduction

Loopback Example: Ionic

This example application demonstates how to use LoopBack with the Ionic Framework ##Features Looper is a basic microblogging clone with following features:

  • Users can register and login to the app
  • Only authorized user can see content
  • Post, like and comment tweets
  • User can choose an avatar

###Screenshots Alt text

##Getting started Before starting, makes sure you've followed Getting Started with LoopBack to install Node and LoopBack. In adittion, you will need a basic understanding of:

git clone https://github.com/belibasakis/loopback-example-ionic
cd loopback-example-ionic
npm install 
slc run

Open a new terminal

cd loopback-example-ionic/client
npm install
ionic serve

Open localhost:8100 in your browser to view the app or get the (PhoneGap Developer App)[http://app.phonegap.com/] to run the app on your phone. Don't forget to change the api url in client/www/lib/lb-services.js to the IP of your local machine.

 var urlBase = "http://192.168.0.102:3000/api";

##ToDo

  • Implement Passport.Js for FacebookAuth
  • Optimize performence (less requests to server)
  • Add feature like edit, delete...

##Ionic All Ionic files are in the client/www folder. Documentation how this app works are inside the *.js files

##Loopback By default, data in the memory connector are transient. When an application using the memory connector exits, all model instances are lost. To maintain data across application restarts, I specified a JSON file in which to store the data. `server/datasources.json``

{
  "db": {
    "name": "db",
    "connector": "memory",
    "file": "memoryDb.json"
  }
}

I created some sample content and user so you can start right of:

Username Password
James james
Bob bob
Mary mary

###Usefull commands

  • lb-ng server/server.js client/www/lib/lb-services.jsto generate Loopback Service for AngularJS based on your project
  • lb-ng-doc client/www/lib/lb-services.js show documentation for generated file

###Loopback Database Schema

  • avatar
    • id number
    • url string
    • ownerId number
  • comments
    • id number
    • content string
    • date date
    • username string
  • tweet
    • id number
    • content string
    • date date
    • ownerUsername string
  • user
    • id number
    • username string
    • created date
    • avatar string
  • like
    • id number

Loopback Model Relation

  • comments
    • belongsTo
      • tweet (foreignKey: tweetId)
      • user (foreignKey: ownerId)
  • tweet
    • belongsTo
      • user (foreignKey: ownerId)
    • hasMany
      • comments (foreignKey(tweetId)
      • like (foreignKey(tweetid)
  • user
    • hasMany
      • tweets (foreignKey: ownerId)
      • likes (foreignkey: ownerId)
  • like
    • belongsTo
      • user (foreignKey: ownerId)
      • tweet (foreignKey: tweetId)

Other ressources used

loopback-example-ionic's People

Contributors

belibasakis avatar superkhau avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.