Beer Tutorials

Ionic 2 Beers

Sat, 21 Jan 2017 00:00:00 +0000

Ionic 2 Beers

Ionic Beers is a tutorial of the Beer Tutorials series. In this tutorial we will create a simple app that queries a beer catalog and displays a list of beers.

Getting Started

Install NodeJS and then using the node package manager (npm), install ionic and cordova.

npm install -g ionic cordova

After installing ionic, create a new project called ionic2-beers.

ionic start ionic2-beers blank --v2

Navigate to the project directory and add the mobile development platform.

ionic platform add android

Run the application on the Android emulator.

ionic emulate android

Run the application on desktop browser ionic serve --lab

Note: To run the application in the Android emulator, you need to have the Android SDK installed and configured on your computer. The easiest way to do it is to install Android Studio for your platform.

If you have issues while initializing the app, read carefully these instructions

Project Structure

.
└── ionic2-beers
    ├── hooks
    │   ├── after_prepare
    │   │   └── ...
    │   └── README.md
    ├── node_modules
    │   ├── ...
    │   └── ...
    ├── platforms
    │   ├── android
    │   │   └── ...
    │   ├── ios
    │   │   └── ...
    │   └── platform.json
    ├── plugins
    │   ├── ...
    │   ├── fetch.json
    │   └── ios.json
    ├── resources
    │   ├── android
    │   │   └── ...
    │   ├── ios
    │   │   └── ...
    │   ├── icon.png
    │   └── splash.png
    ├── src
    │   ├── app
    │   |     ├── app.component.ts
    │   |     ├── app.html
    │   |     ├── app.module.ts
    │   |     ├── app.scss
    │   |     └── main.ts
    │   ├── assets
    │   |     └── icon
    │   |           └── favicon.ico
    │   ├── pages
    │   |     └── home
    │   |           ├── home.html
    │   |           ├── home.scss
    │   |           └── home.ts
    │   ├── theme
    │   |     └── variables.scss
    │   ├── declaration.d.ts
    │   ├── index.html
    │   ├── manifest.json
    │   └── service-worker.js
    ├── typings
    │   └── cordova-typings.d.ts
    ├── www
    │   ├── index.html
    |   ├── manifest.json
    |   └── service-worker.js
    ├── package.json
    ├── config.xml
    ├── ionic.config.json
    ├── tsconfig.json
    └── tslint.json

Inside the project folder there are 8 sub-folders: hooks, node_modules, platforms, plugins, resources, src, typings and www. The application source code resides in the app folder. Application code is written using Angular2 and Typescript.

Inside the src folder is a file called index.html which has the default application code. Finally app/main.ts contains the code to start the application with the defined modules.

Designing the app

Beers list

We need to create a new page to list the beers in the application. For that, we’re going to use Ionic CLI to generate pages with command

ionic generate page beers

Open pages/beers/beers.html and add the code which define the beers list to display.

<ion-content padding>
    <ul>
        <li>
            <span>Affligem Blond</span>
            <p>
                Affligem Blonde, the classic clear blonde abbey ale, 
                with a gentle roundness and 6.8% alcohol. Low on bitterness, 
                it is eminently drinkable.
            </p>
        </li>
        <li>
            <span>Affligem Tripel</span>
            <p>
                The king of the abbey beers. It is amber-gold and pours with a 
                deep head and original aroma, 
                delivering a complex, full bodied flavour. Pure enjoyment! Secondary 
                fermentation in the bottle.
            </p>
        </li>
    </ul>

    <p>Total number of beers: 2</p>
</ion-content>

Now, we need to add this new page to the application. Open app/app.component.ts and add after the import of the HomePage

import { BeersPage } from '../pages/beers/beers';

Open app/app.module.ts and add after the import of the HomePage

import { BeersPage } from '../pages/beers/beers';

Add the BeersPage in declarations and entryComponents

Save changes.

First, we’re going to add the menu to the app. For that, open app/app.html and replace code with this code

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        
      </button>
        </ion-list>
    </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Now, we need to add the reference to the menu in the application pages. Open pages/beers/beers.html and add this code at the beginning of the page

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
        <ion-title>Ionic 2 Beers Gallery</ion-title>
    </ion-navbar>
</ion-header>

Do the same for pages/home/home.html.

Open app/app.component.ts and add this code in the constructor

    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'Beers list', component: BeersPage }
    ];

And add

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

Save changes and run the app. It should look this way.

Fetching data from Beer catalog

In the first step, we load beers catalog in a static page. Now, we load this catalog from the controller. First, open pages/beers/beers.ts and add the code in the constructor

this.beers = [
  {
    alcohol: 8.5,
    name: 'Affligem Tripel',
    description: 'The king of the abbey beers. It is amber-gold and pours with a deep head and original aroma, delivering a complex, full bodied flavour. Pure enjoyment! Secondary fermentation in the bottle.'
  },
  {
    alcohol: 9.2,
    name: 'Rochefort 8',
    description: 'A dry but rich flavoured beer with complex fruity and spicy flavours.'
  },
  {
    alcohol: 7,
    name: 'Chimay Rouge',
    description: 'This Trappist beer possesses a beautiful coppery colour that makes it particularly attractive. Topped with a creamy head, it gives off a slight fruity apricot smell from the fermentation. The aroma felt in the mouth is a balance confirming the fruit nuances revealed to the sense of smell. This traditional Belgian beer is best savoured at cellar temperature.'
  }
];

Then open pages/beers/beers.html and modify the display list construction like this

<ul>
    <li *ngFor="let beer of beers">
        <span></span>
        <p>
            
        </p>
    </li>
</ul>

<p>Total number of beers: </p>

Translate labels

Now the application needs to be translated for users all around the world. For this, add ng2-translate library with this command and update bower configuration

npm install ng2-translate --save

Open app/app.component.ts file and add

import { TranslateService } from 'ng2-translate/ng2-translate';

and add parameter to the constructor

constructor(translate: TranslateService, public platform: Platform) {

and set default language in the constructor

// set default language
translate.setDefaultLang('en');
translate.use(translate.getBrowserLang());

Create new files that contain translated labels in a new directory i18n in assets directory, for example en.json

{
	"menu" : "Menu",
	"home" : "Home",
	"beersList" : "List of beers",
	"beerGallery" : "Ionic Beer Gallery",
	"beersNumbers" : "Total number of beers",
	"content" : "Welcome!",
	"ionicBeers" : "Ionic Beers"
}

Update pages/home/home.html file to translate labels

content

Change all labels in *.html files to translate labels

Order and search in list

Sometimes the list need to be ordered. Angular do this with easy directives.

We need to create a new provider with Ionic CLI

ionic g provider Data

Open app/app.module.ts and add

import { Data } from '../providers/data';

In @NgModule add the definition of the provider

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Data]

Open providers/data.ts file and add in the Data class

  beers: Array<{alcohol: number, name: string, description: string}>;

  constructor(public http: Http) {
    this.beers = [
      {
        alcohol: 8.5,
        name: 'Affligem Tripel',
        description: 'The king of the abbey beers. It is amber-gold and pours with a deep head and original aroma, delivering a complex, full bodied flavour. Pure enjoyment! Secondary fermentation in the bottle.'
      },
      {
        alcohol: 9.2,
        name: 'Rochefort 8',
        description: 'A dry but rich flavoured beer with complex fruity and spicy flavours.'
      },
      {
        alcohol: 7,
        name: 'Chimay Rouge',
        description: 'This Trappist beer possesses a beautiful coppery colour that makes it particularly attractive. Topped with a creamy head, it gives off a slight fruity apricot smell from the fermentation. The aroma felt in the mouth is a balance confirming the fruit nuances revealed to the sense of smell. This traditional Belgian beer is best savoured at cellar temperature.'
      }
    ];
  }

  filterBeers(searchTerm) {
    return this.beers.filter((beer) => {
      return beer.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

In beers/beers.ts file import the provider Data

import { Data } from '../../providers/data';

and replace the beers definition

  searchTerm: string = '';
  beers: any;
  listSize: number;

Remove the initialization of the beers list in the constructor and define the filtered function

  setFilteredBeers() {
    this.beers = this.dataService.filterBeers(this.searchTerm);
  }

Open beers/beers.html and add lines to filter beers

<div>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredBeers()"></ion-searchbar>
</div>

Replace the code for the list size

<p>beersNumbers : </p>

Loading beers from JSON files

Open providers/data.ts and replace the code in the constructor

    this.getJsonData().subscribe(data => {
      this.beers = data;
    });

and create a new function

  getJsonData() {
    return this.http.get('../assets/beers/beers.json').map(res => res.json());
  }

Open pages/beers/beers.ts and create a new function

  getData() {
    this.dataService.getJsonData().subscribe(result => {
      this.beers = result;
      this.listSize = this.beers.length;
    });
  }

and add the call of the function in ionViewDidLoad function.

Getting the beers pics

We can also extract the image URL from the received JSON and then we add the image to the pages/beers/beers.html:

<a href="#/assets/beers/">
    <ion-img src="" class="thumb-img"></ion-img>
</a>
<div class="thumb">
    <a href="#/beers/"></a>
    <p></p>
</div>

Let’s display the beer description

On the beers list listBeers.html, add action on beer name and on picture

<img ng-src="" class="thumb-img" ng-click="openModal(beer.id)">
<a href="" ng-click="openModal(beer.id)"></a>

Now create new file beer-detail.html to display beer description

<ion-modal-view>
	<ion-header-bar align-title="left" class="bar-calm">
		<h1 class ="title"></h1>
		<button class="button icon ion-close" ng-click="closeModal()"></button>
	</ion-header-bar>

	<ion-content>
		<img ng-src="" class="beer">
		<p class="description"></p>

		<ul class="beer-thumbs">
		  <li>
		    <img ng-src="" ng-click="setImage(beer.img)">
		  </li>
		  <li>
		    <img ng-src="" ng-click="setImage(beer.label)">
		  </li>
		</ul>

		<ul class="specs">
		  <li>
		    <dl>
		      <dt>alcoholContent</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>brewery</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>availability</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>style</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>serving</dt>
		      <dd></dd>
		    </dl>
		  </li>
		</ul>
	</ion-content>
</ion-modal-view>

Define modal to display beer detail in controllers.js

$ionicModal.fromTemplateUrl('templates/beer-detail.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.beerModal = modal;
});

Load beer definition from JSON file in controllers.js

$scope.openModal = function(beerId) {
  $http.get('beers/' + beerId + '.json').success(function(data) {
    $scope.beer = data;      
    $scope.mainImg = $scope.beer.img;

    $scope.setImage = function(img) {
      $scope.mainImg = img;
    }
  });
  myBeerId = beerId;
  $scope.beerModal.show();
};

Hide modal when click on close button in controllers.js

$scope.closeModal = function() {
  $scope.beerModal.hide();
};

$scope.$on('$destroy', function() {
  $scope.beerModal.remove();
});

Ionic Beers

Sat, 05 Dec 2015 00:00:00 +0000

Ionic Beers

Ionic Beers is a tutorial of the Beer Tutorials series. In this tutorial we will create a simple app that queries a beer catalog and displays a list of beers.

Getting Started

Install NodeJS and then using the node package manager (npm), install ionic.

npm install -g ionic

After installing ionic, create a new project called ionic-beers.

ionic start ionic-beers blank

Navigate to the project directory and add the mobile development platform.

ionic platform add android

Run the application on the Android emulator.

ionic emulate android

Run the application on desktop browser ionic serve --lab

Note: To run the application in the Android emulator, you need to have the Android SDK installed and configured on your computer. The easiest way to do it is to install Android Studio for your platform.

If you have issues while initializing the app, read carefully these instructions

Project Structure

.
└── ionic-beers
    ├── www
    │   ├── css
    │   │   └── style.css
    │   ├── img
    │   │   └── ionic.png
    │   ├── js  
    │   │   └── app.js
    │   ├── lib
    │   │   └── ionic
    │   │       └── ...
    │   └── index.html
    ├── hooks
    │   ├── after_prepare
    │   │   └── ...
    │   └── README.md
    ├── resources
    │   ├── android
    │   │   └── ...
    │   ├── ios
    │   │   └── ...
    │   ├── icon.png
    │   └── splash.png
    ├── scss
    │   └── ionic.app.scss
    ├── package.json
    ├── bower.json
    ├── config.xml
    ├── gulpfile.js
    ├── ionic.project
    └── platforms
        ├── android
        └── ios

Inside the project folder there are 4 sub-folders: hooks, scss, platforms and www. The application source code resides in the www folder. Application code is written using AngularJS and Javascript.

Inside the www folder is a file called index.html which has the default application code. Finally app.js contains the code to start the application with the defined modules.

Designing the app

Let’s start by removing unused lines in application. Open index.html and look at the default code. Remove lines between the body tags. The body tag has an attribute called ng-app which references the application.

This project will use a navigation view to design our app.

Inside the body tag add the navigation view.

<ion-nav-view></ion-nav-view>

Create a new directory in the www directory named templates. In this new directory, create a new file named menu.html. In this file, you would use a ion-menu directive. Open menu.html and add lines

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-dark">
      <ion-nav-back-button></ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
      </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Menu</h1>
    </ion-header-bar>

		<ion-content>
			<ul class="list">
				<a href="#/event/home" class="item" menu-close>Home</a>
				<a href="#/event/beers" class="item" menu-close>Beers list</a>
			</ul>
		</ion-content>
  </ion-side-menu>
</ion-side-menus>

Create a new file in templatesdirectory named home.html. Open home.html and add lines

<ion-view view-title="Ionic Beers">
	<ion-content class="padding">
		Welcome!
	</ion-content>
</ion-view>

Create a new file in templates directory called listBeers.html

<ion-view view-title="Ionic Beer Gallery">
	<ion-content class="padding">
		<ul>
	      <li>
	        <span>Affligem Blond</span>
	        <p>
	          Affligem Blonde, the classic clear blonde abbey ale, with a gentle roundness and 6.8% alcohol.
	          Low on bitterness, it is eminently drinkable.
	        </p>
	      </li>
	      <li>
	        <span>Affligem Tripel</span>
	        <p>
	          The king of the abbey beers. It is amber-gold and pours with a deep head and original aroma,
	          delivering a complex, full bodied flavour. Pure enjoyment! Secondary fermentation in the bottle.
	        </p>
	      </li>
	    </ul>

		<p>Total number of beers: 2</p>
  </ion-content>
</ion-view>

Open app.js to define routes

.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('eventmenu', {
      url: '/event',
      abstract: 'true',
      templateUrl: 'templates/menu.html'
    })
    .state('eventmenu.home', {
        url: '/home',
        views: {
          'menuContent': {
            templateUrl: 'templates/home.html'
          }
        }
    })
    .state('eventmenu.beers', {
        url: '/beers',
        views: {
          'menuContent': {
            templateUrl: 'templates/listBeers.html'
          }
        }
    });

    $urlRouterProvider.otherwise('/event/home');
})

Save changes and run the app. It should look this way.

Fetching data from Beer catalog

Create a new file js directory called controllers.js

angular.module('ionicbeers')

.controller('BeersCtrl', ['$scope', function($scope) {
    $scope.beers = [
      {
        "alcohol": 8.5,
        "name": "Affligem Tripel",
        "description": "The king of the abbey beers. It is amber-gold and pours with a deep head and original aroma, delivering a complex, full bodied flavour. Pure enjoyment! Secondary fermentation in the bottle."
      },
      {
        "alcohol": 9.2,
        "name": "Rochefort 8",
        "description": "A dry but rich flavoured beer with complex fruity and spicy flavours."
      },
      {
        "alcohol": 7,
        "name": "Chimay Rouge",
        "description": "This Trappist beer possesses a beautiful coppery colour that makes it particularly attractive. Topped with a creamy head, it gives off a slight fruity apricot smell from the fermentation. The aroma felt in the mouth is a balance confirming the fruit nuances revealed to the sense of smell. This traditional Belgian beer is best savoured at cellar temperature "
      }
    ];
  }])
  ```

This controller defines a list of beers returned to the Angular scope.

Open `index.html` and and declare the new controller



Open `app.js` file and add the BeersCtrl to the beer menu item

.state(‘eventmenu.beers’, { url: ‘/beers’, views: { ‘menuContent’: { templateUrl: ‘templates/listBeers.html’, controller: ‘BeersCtrl’ } } }); ```

Open listBeers.html and replace lines between ion-content tag with those lines

<ul class="list">
    <li ng-repeat="beer in beers">
      <span></span>
      <p></p>
    </li>
</ul>

<p>Total number of beers: </p>

Translate labels

Now the application needs to be translated for users all around the world. For this, add angular-translate library with this command and update bower configuration

bower install angular-translate-loader-static-files --save

Open app.js file and update

angular.module('ionicbeers', ['ionic','pascalprecht.translate'])

and add lines after $urlRouterProvider

// Translate labels / title / menus
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useStaticFilesLoader({
    prefix: 'languages/',
    suffix:'.json'
});
$translateProvider
.registerAvailableLanguageKeys(['en','fr'], {
    'en_US': 'en',
    'en_UK': 'en',
    'fr_FR': 'fr',
    'fr_BE': 'fr'
})
.determinePreferredLanguage();

$translateProvider.use();

Open index.html and add lines to link script

<script src="lib/angular-translate/angular-translate.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>

Create new files that contain translated labels in a new directory languages, for example en.json

{
	"menu" : "Menu",
	"home" : "Home",
	"beersList" : "List of beers",
	"beerGallery" : "Ionic Beer Gallery",
	"beersNumbers" : "Total number of beers",
	"content" : "Welcome!",
	"ionicBeers" : "Ionic Beers"
}

Update home.html file to translate labels

content

Change all labels in *.html files to translate labels

Order and search in list

Sometimes the list need to be ordered. AngularJS do this with easy directives.

Add lines in controllers.js file after beers list initialization

$scope.orderProp = 'alcohol';

Open listBeers.html and add lines to filter beers

<div>
  search: <input ng-model="query">
</div>

Add lines to sort beers

<div>
  sortBy:
  <select ng-model="orderProp">
    <option value="name">alphabetical</option>
    <option value="alcohol">alcoholContent</option>
  </select>
</div>

After, add filter and sorter to the ng-repeat directive

<li ng-repeat="beer in beers | filter:query | orderBy:orderProp">

Loading beers from JSON files

Add $http service in the controller definition and replace initialization of beers list with loading JSON files

$http.get('beers/beers.json').success(function(data) {
  $scope.beers = data;
});

Getting the beers pics

We can also extract the image URL from the received JSON and then we add the image to the listBeers.html:

<a href="#/beers/"><img ng-src="" class="thumb-img"></a>
<div class="thumb">
<a href="#/beers/"></a>
<p></p>
</div>

Let’s display the beer description

On the beers list listBeers.html, add action on beer name and on picture

<img ng-src="" class="thumb-img" ng-click="openModal(beer.id)">
<a href="" ng-click="openModal(beer.id)"></a>

Now create new file beer-detail.html to display beer description

<ion-modal-view>
	<ion-header-bar align-title="left" class="bar-calm">
		<h1 class ="title"></h1>
		<button class="button icon ion-close" ng-click="closeModal()"></button>
	</ion-header-bar>

	<ion-content>
		<img ng-src="" class="beer">
		<p class="description"></p>

		<ul class="beer-thumbs">
		  <li>
		    <img ng-src="" ng-click="setImage(beer.img)">
		  </li>
		  <li>
		    <img ng-src="" ng-click="setImage(beer.label)">
		  </li>
		</ul>

		<ul class="specs">
		  <li>
		    <dl>
		      <dt>alcoholContent</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>brewery</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>availability</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>style</dt>
		      <dd></dd>
		    </dl>
		  </li>
		  <li>
		    <dl>
		      <dt>serving</dt>
		      <dd></dd>
		    </dl>
		  </li>
		</ul>
	</ion-content>
</ion-modal-view>

Define modal to display beer detail in controllers.js

$ionicModal.fromTemplateUrl('templates/beer-detail.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.beerModal = modal;
});

Load beer definition from JSON file in controllers.js

$scope.openModal = function(beerId) {
  $http.get('beers/' + beerId + '.json').success(function(data) {
    $scope.beer = data;      
    $scope.mainImg = $scope.beer.img;

    $scope.setImage = function(img) {
      $scope.mainImg = img;
    }
  });
  myBeerId = beerId;
  $scope.beerModal.show();
};

Hide modal when click on close button in controllers.js

$scope.closeModal = function() {
  $scope.beerModal.hide();
};

$scope.$on('$destroy', function() {
  $scope.beerModal.remove();
});

NativeScript Beers

Tue, 01 Dec 2015 00:00:00 +0000

NativeScript Beers is a tutorial of the Beer Tutorials series. In this tutorial we will create a simple app that queries a beer catalog and displays a list of beers.

Getting Started

Install NodeJS and then using the node package manager (npm), install native script.

    npm install -g nativescript

After installing native script, create a new project called nativescript-beers.

    tns create nativescript-beers

Navigate to the project directory and add the mobile development platform.

    tns platform add android

Run the application on the Android emulator.

    tns run android --emulator

Note: To run the application in the Android emulator, you need to have the Android SDK installed and configured on your computer. The easiest way to do it is to install Android Studio for your platform.

If you find issues while initializing the app, read carefully these instructions

The tns livesync command instantly transfers XML, CSS, and JavaScript files to a running NativeScript app. If you set the command’s --watch flag (tns livesync ios --emulator --watch or tns livesync android --emulator --watch), the NativeScript CLI will watch your app for changes, and apply those changes automatically after you save files. Be warned, however, that the livesync command currently does not show console.log() output or stack traces. So during debugging you may want to switch back to tns run or use adb logcat in parallel to get logs directly from the android emulator.

Project Structure

.
└── nativescript-beers
    ├── app
    │   ├── App_Resources
    │   │   ├── Android
    │   │   └── iOS
    │   ├──  main-page.js
    │   ├──  main-page.xml  
    │   ├──  main-view-model.js  
    │   ├──  package.json  
    │   ├──  references.d.ts
    │   ├── app.css
    │   ├── app.js
    │   └── ...
    ├── node_modules
    │   └── tns-core-modules
    ├── package.json
    └── platforms
        ├── android
        └── ios

Inside the project folder there are 3 sub-folders: app, node_modules and platforms :

app: This folder contains all the development resources you need to build your app. You’ll be spending most of your time editing the files in here.
node_modules: This folder contains your app’s npm module dependencies. All new NativeScript projects start with a single dependency on tns-core-modules.
node_modules/tns-core-modules: This folder contains your app’s NativeScript modules, which are a series of NativeScript-provided JavaScript modules you’ll use to build your app. Each module contains the platform-specific code needed to implement some feature—the camera, http calls, the file system, and so forth—exposed through a platform-agnostic API (e.g. camera.takePicture()). We’ll look at some examples momentarily.
package.json: This file contains your app’s configuration details, such as your app id, the version of NativeScript you’re using, and also which npm modules your app uses. We’ll take a closer look at how to use this file when we talk about using npm modules in chapter 5.
platforms: This folder contains the platform-specific code NativeScript needs to build native iOS and Android apps. For example in the android folder you’ll find things like your project’s AndroidManifest.xml and .apk executable files. Similarly, the ios folder contains the Groceries’ Xcode project and .ipa executables. Note, users on Windows machines will not have an ios folder.

Application code is written using JavaScript and the user interface designed using XML. Inside the app folder is a file called main-page.xml which has the default user interface code. In main-view-model.js is the default model code and main-page.js defines the application logic. Finally app.js contains the code to start the application with the defined modules.

Designing the app

Let’s start by designing the application using XML. Open main-page.xml and look at the default code. Remove everything except the Page tag. The Page tag has an attribute called loaded which executes the pageLoaded function once the app loads. The pageLoaded function is inside the main-page.js file.

This project will use a stack layout to design our app. There are a number of layouts offered by native script.

Inside the Page tag add the stack layout.

    <StackLayout orientation="vertical">
    </StackLayout>

Define the stack layout with a vertical orientation. Add a button inside the stack layout.

    <Button text="Get beer list" height="50px" style="width:300px;border:none;font-size:20px;" />

Save changes and run the app. It should look something like the below.

Fetching data from Beer catalog

Add an attribute called tap to the Get beer list button.

    tap="beers"

Now, when the user taps the search button the beers function is called. Let’s define the beers function inside main-page.js.

    exports.beers = function() {
      // Code would be here !
    };

Calling the API will require the http module, so import the module into main-page.js.

    var http = require("http");

Inside the beers function, and using the http module, now make the API call. For the needs of this tutorial, the beer catalog is a JSON file on http://www.beer-tutorials.org/beers/beers.json.

    http.getJSON("http://www.beer-tutorials.org/beers/beers.json").then(function(r) {

        console.log(JSON.stringify(r));

    }, function(e) {

        console.log(e);

    });

The code above makes the API call.

When running an app in the emulator you will need to run ‘adb logcat’ to check log messages.

Save changes and run the app on the emulator. Click the get beer list button and the returned result from the server should be visible in terminal.

Next use the response returned to push the beers information to an array.

An observable array is required to create and detect changes to a collection of things. Bind this same observable array to the view so that the view updates whenever a change occurs.

To create the observable array, add these variable declarations to main-page.js :

    var observableArray = require("data/observable-array");
    var beerList = new observableArray.ObservableArray([]);

Then, inside of the http.getJSON().then() method, iterate through the returned data. Push each beer object into the beerList observableArray:

Binding data to the UI

Once the data is in the beersList array, bind it to the UI. For displaying the data, create a ListView in main-page.xml, underneath the existing Button element.

    <ListView>
        <ListView.itemTemplate>
          <StackLayout orientation="vertical">
            <Label id="name" class="beerName" />
            <Label id="description" textWrap="true" />
          </StackLayout>
        </ListView.itemTemplate>
    </ListView>

Bind the beersList array to the list view:

    <ListView items="{{ beerList }}">
    <ListView.itemTemplate>
      <StackLayout orientation="vertical">
        <Label id="name" text="{{name}}" class="beerName" />
        <Label id="description" text="{{ description }}" textWrap="true" />
      </StackLayout>
    </ListView.itemTemplate>
    </ListView>

To make our list more user friendly, we also add some CSS to app.css:

    .beerName {
      font-size: 20;
    }

For the beersList array to be available across the view, set the beersList array in the observable module. Do this by importing an observable module and using it to create an observable object.

    var observableModule = require("data/observable");
    var pageData = new observableModule.Observable();

In the pageLoaded function, set the images array to the observable module and add the observable module to the page context.

    function pageLoaded(args) {
        var page = args.object;
        pageData.set("beerList", beerList);
        // it links an xml "beerList" variable to a js beerList variable
        page.bindingContext = pageData;
    }

Getting the beers pics

We can also extract the image URL from the received JSON :

    var beer = {
      name: r[i].name,
      description: r[i].description,
      alcohol: r[i].alcohol,
      img: "http://beertutorials.github.io/website/"+r[i].img
    }

And then we add the image to the ListView.itemTemplate:

    <ListView.itemTemplate>
      <StackLayout orientation="horizontal">
        <Image width="100px" height="100px" src="" />
        <StackLayout orientation="vertical">
          <Label id="name" text="" class="beerName" />
          <Label id="description" text="" textWrap="true" />
        </StackLayout>
      </StackLayout>
    </ListView.itemTemplate>

Let’s forget the Button

Let’s call for the beer list without button. We are going to use application’s lifecycle method onLaunch on app.js:

application.on(application.launchEvent, function (args) {
   var mainPage = require("./main-page");
   mainPage.beers();
})

application.start();

application.start() must be the last instruction of the app.js file, any instruction after it would be ignored in some platforms.

Now you can delete the Buttom from main-page.xml.

And how about the ActionBar title?

To have access to the ActionBar with the application title, you only need to explicitly declare it in main-page.xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <Page.actionBar>
    <ActionBar title="NativeScript Beers" android.icon="res://ic_test"/>
  </Page.actionBar>