untalk-ionic-example

UnConfernece Lighting Talk 2014 - Ionic Example

Note: I've provide a view of the tree structure of the files for this app here: https://raw.githubusercontent.com/gregmercer/untalk-ionic-example/master/tree.txt

Here's a screenshot of the mobile app we are going to create:

Steps for creating the example mobile app:

0. Install Node.js

  http://nodejs.org/
  

1. Install Ionic and Cordova

  sudo npm install -g cordova
  sudo npm install -g ionic
  

2. Create a tabbed Ionic-based App

  ionic start myApp tabs
  

3. Test the app in your browser

  cd myApp
  ionic serve
  

4. Add a new tab to the app:
   -- Edit tabs.html

   <!-- Books Tab -->
   <ion-tab title="Books" icon="icon ion-gear-b" href="#/tab/books">
     <ion-nav-view name="tab-books"></ion-nav-view>
   </ion-tab> 
   

5. Add a new route to the app:
   -- Edit app.js

    .state('tab.books', {
      url: '/books',
      views: {
        'tab-books': {
          templateUrl: 'templates/tab-books.html',
          controller: 'BooksCtrl'
        }
      }
    });  
    

6. Add a new Controler - BooksCtrl:
   -- Edit controllers.js

   .controller('BooksCtrl', function($scope, $http) {
     var url = "http://gsbpublic0.localhost:8082/vep/view/books.jsonp?callback=JSON_CALLBACK";
     $http.jsonp(url).success(function(data) {
       $scope.books = data;
       console.log(data);
     });
   });
   

7. Add the new tab page to the app:
   -- Edit tab-books.html

   <ion-view title="Books">
     <ion-content>
       <ion-list>
         <ion-item ng-repeat="book in books" type="item-text-wrap">
           <a href="{{book.field_link_unlimited.und[0].url}}" target="_blank">{{book.title}}</a> 
         </ion-item>
       </ion-list>
     </ion-content>
   </ion-view>
   

Drupal Changes

1. Download these modules:

    services
    services_views

    Modules for Services
    https://www.drupal.org/project/services (includes REST server)
    https://www.drupal.org/project/services_views
  

2. Enable these modules:

    In Drupal goto this page:
    admin/modules
   
    services (rest_server)
    services_views
    

   

3. Configure Services:

    In Drupal goto this page:
    admin/structure/services
    
    Add two endpoints:
    admin/structure/services/list/ep/resources
    admin/structure/services/list/vep/resources
    

   

   

   

4. Test our new Services in Drupal:

    Go to these endpoints:
   
    ep as an endpoint, and node as a resource
    http://gsbpublic0.localhost:8082/ep/node/302036.json
   
    vep as an endpoint, and view as a resource
    also we've created a very simple view called: books
    http://gsbpublic0.localhost:8082/vep/view/books.json