Redesigning Facebook FeedView in Ionic and angular


Facebook feed view in angular.js and ionic

Making Time: Redesigning Concept Facebook Feed For Android with Ionic and angular.js


In UX design, few things are more intricate than time and personal time management — only a good arsenal of mobile design patterns and information architecture principles can save you. This is the story of redesigning the UX for a popular social networking app the Facebook Android app.

Before we get started  redesigning the news feed  we were already checked for what

Disclaimer: This app is not intended to be a fully-featured facebook news feed but rather I want to demonstrate how to implement the same UI/UX method in ionic applications.

This was a weekend project which we coded .
What we took as reference to build is the Android app for facebook



Create a new tab project in ionic
Ionic start facebook_feed tabs

Once the projects gets created move to project directory and  launch the application by providing the command.

Ionic serve


So,Let get Started!
Setting up and Creating a new Blank Project in Ionic:
Now let's create an app. From the terminal, go to your project folder.
Finally navigate to the project directory and add iOS and/or Android platforms to Ionic and test the app.
cd facebook_feed
ionic platform add ios/Android
ionic build ios/Android
ionic emulate ios/android

To complete the app we need to:

  1. Define the front end views

  2. Define controllers that provide data

  3. Define routes to tie the views to the controllers


Since we created a blank apps ,create a template folder and  Navigate to the folder www/templates from your application root directory. This folder contains template files that will be rendered for the app.

Creating Template Files
which we will use for  tabs and fetching and showing feed details  using json data.

A)Create new template/friends-details.html  file and paste the below code to it.
<ion-view title="{{friend.name}}">
  <ion-content has-header="true" padding="true">
  </ion-content>
</ion-view>

This file contains the html code for presenting the list of friends which we will fetch from friends object in your ionic applications.

Similarly create tab-account and tab-dashboard

Tab-account.html
<ion-view title="{{friend.name}}">
  <ion-content has-header="true" padding="true">
  </ion-content>
</ion-view>
Tab-dashboard.html
<ion-header-bar class="bar bar-stable title">
    <h1 class="title">Dashboard</h1>
    <div class="buttons">
        <button class="button button-icon ion-android-search" 
                ng-click="vm.showFilterBar()"></button>
  <button class="button button-icon ion-person-add" 
                ng-click="vm.showFilterBar()"></button>
    </div>   
  
  </ion-header-bar>
Tab-discovery.html

<ion-header-bar class="bar bar-stable title">
    <h1 class="title">News Feed</h1>
    <div class="buttons">
        <button class="button button-icon ion-android-search" 
                ng-click="vm.showFilterBar()"></button>
  <button class="button button-icon ion-person-add" 
                ng-click="vm.showFilterBar()"></button>
    </div>      
  </ion-header-bar>



Next ,create the tab-discovery.html template for facebook like feed in ionic

.The tab-discovery.html  has the function of pull-to-refresh functionality which will be used to refresh the feed list.

Steps to Attain feed view design:


1)Create the header bar with title(News Feed) which hold the search and chatlist feature






2)Create the tab view which holds the the different views of the tabs.



3) Creating the feed view with



4) Finally the bottom tab which will have three tabs to update status,Checkin etc.

<div class="tabs-striped tabs-top tabs-background-light tabs-color-positive-dark">
<div class="tabs">
  <a class="tab-item active" href="#">
    <i class="icon ion-card"></i>
    Test
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-person-stalker"></i>
    Favorites
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-chatbubbles"></i>
    Settings
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-earth"></i>
    Settings
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-navicon"></i>
    Settings
  </a>
</div>

    <ion-content class="padding has-tabs-top" >
        <ion-refresher
                pulling-text="Pull to refresh..."
                on-refresh="doRefresh()">
        </ion-refresher>
      <ion-list >

          <ion-item class="discovery-item" ng-repeat="feed in feeds" type="item-text-wrap" >


                  <div class="item item-avatar">
                      <img class="head-img" ng-src="{{feed.profilePic}}">
                      <h2><b>{{feed.name}}</b></h2>
                      <p am-time-ago="{{feed.timeStamp}}"></p>
                  </div>

                  <div class="item item-body">
      <p>
                          {{feed.status}}
                      </p>
                      <img class="feed-content-img" ng-src="{{feed.image}}">
                      
                      <p>
                          <b><a href="#" class="subdued">1 likes</a>
                          <b><a href="#" class="subdued">5 Comments</a>
                      </p>
                  </div>

          <div class="buttons-share">
    <button class="button button-icon icon ion-thumbsup">Like</button>
    <button class="button button-icon ion-chatbox">Comment</button>
    <button class="button button-icon ion-reply-all">Share</button>
  </div> 
     
          </ion-item>
      </ion-list>
        <ion-infinite-scroll
                if="!noMoreItemsAvailable"
                on-infinite="loadMore(10)"
                icon="ion-loading-c"
                distance="1%">
        </ion-infinite-scroll>
    </ion-content>
</ion-view>
Adding the templates and controller to index.html
Include the controller file and template file in the main index.hml to bind all the things at one. by creating three controller
Navigate to js folder and create three js files. controller.js -handling logic of the app
app.js-Defining the routers and controller mapping service.js-Sending the request to API and updating with response.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="app">

    <ion-nav-view>
    </ion-nav-view>
  </body>
</html>



Here Comes the Controller!

Building the controller with angular.js that goes to the backend and does all the work

Navigate to js folder  and add the below code to it.
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })

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

        // Ionic uses AngularUI Router which uses the concept of states
        // Learn more here: https://github.com/angular-ui/ui-router
        // Set up the various states which the app can be in.
        // Each state's controller can be found in controllers.js
        $stateProvider

            // setup an abstract state for the tabs directive
            .state('tab', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html"
            })

            // Each tab has its own nav history stack:

            .state('tab.dash', {
                url: '/dash',
                views: {
                    'tab-dash': {
                        templateUrl: 'templates/tab-dash.html',
                        controller: 'DashCtrl'
                    }
                }
            })
            .state('tab.discovery', {
                url: '/discovery',
                views: {
                    'tab-discovery': {
                        templateUrl: 'templates/tab-discovery.html',
                        controller: 'DiscoveryCtrl'
                    }
                }
            })
            .state('tab.friends', {
                url: '/friends',
                views: {
                    'tab-friends': {
                        templateUrl: 'templates/tab-friends.html',
                        controller: 'FriendsCtrl'
                    }
                }
            })
            .state('tab.friend-detail', {
                url: '/friend/:friendId',
                views: {
                    'tab-friends': {
                        templateUrl: 'templates/friend-detail.html',
                        controller: 'FriendDetailCtrl'
                    }
                }
            })

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

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/tab/discovery');

    });

Creating the Controller.js which will be used which will be used to load the feed in increment whenever the feed reached to bottom a new record is viewed and generates a infinfte scroll view.
angular.module('starter.controllers', ["angularMoment"])

    .controller('DashCtrl', function ($scope) {
    })

    .controller('DiscoveryCtrl', function ($scope, Discovery, $http, $ionicLoading) {
        $scope.feeds = [];
        $scope.loadedFeeds = Discovery.all();
        $scope.noMoreItemsAvailable = false;

        $scope.loadMore = function (NumOfFeedToLoad) {
           //NumOfFeedToLoad decide how many feed load per loadMore called
           for(var i=0;i<NumOfFeedToLoad;i++){
               var numOffeeds = $scope.feeds.length;
               $scope.feeds.push($scope.loadedFeeds[numOffeeds]);
           }

            //Stop loadMore while no more data inside loadedFeeds
            if ($scope.feeds.length == $scope.loadedFeeds) {
                $scope.noMoreItemsAvailable = true;
            }

            $scope.$broadcast('scroll.infiniteScrollComplete');

        }

        $scope.showloading = function (durationtime) {

            if (!durationtime) {

                $ionicLoading.show({
                    template: 'Loading...',
                    noBackdrop: true
                });
            } else {

                $ionicLoading.show({
                    template: 'Loading...',
                    noBackdrop: true,
                    duration: durationtime
                });
            }

        };
        $scope.hideloading = function () {
            $ionicLoading.hide();
        };
        $scope.doRefresh = function () {
            $scope.showloading()
            $http.get('/new-items')
                .success(function (newItems) {
                    $scope.feeds = newItems;
                })
                .finally(function () {
                    // Stop the ion-refresher from spinning
                    $scope.hideloading()
                    $scope.$broadcast('scroll.refreshComplete');
                });
        };
    })
    .controller('FriendsCtrl', function ($scope, Friends) {
        $scope.friends = Friends.all();
    })

    .controller('FriendDetailCtrl', function ($scope, $stateParams, Friends) {
        $scope.friend = Friends.get($stateParams.friendId);
    })

    .controller('AccountCtrl', function ($scope) {
    });

Setting Up and Calling the API through services.js
angular.module('starter.services', [])

/**
 * A simple example service that returns some data.
 */
.factory('Friends', function() {
  // Might use a resource here that returns a JSON array

  
  var friends = [
    { id: 0, name: 'Alexa' },
    { id: 1, name: 'Venkates Pillai' },
    { id: 2, name: 'vaibhav Kumar' },
    { id: 3, name: 'Ramesh singh' },
 { id: 4, name: 'Srinivas ' },
 { id: 4, name: 'Ramanujam' },
 { id: 4, name: 'Samavedam' }
 
  ];

  return {
    all: function() {
      return friends;
    },
    get: function(friendId) {
      // Simple index lookup
      return friends[friendId];
    }
  }
})
    .factory('Discovery',function(){
      var feeds = [...
Run the Application:
Ionic_angular.js_facebooklike_feedview

Friends View

Alll the world is a laboratory to the inquiring mind! Join Us

Comments

Popular posts from this blog

Android Navigation Drawer sliding menu with fragments

8 Effective plots with Matplotlib and Pandas Dataframe

Step by Step Guide to Setup Android 5.0 Lollipop Sdk in Eclipse