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:
Define the front end views
Define controllers that provide data
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.
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:
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">Adding the templates and controller to index.html
<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>
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 mappingservice.js-Sending the request to API and updating with response. Navigate to js folder and create three js files.controller.js -handling logic of the app
<!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.jsCreating 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', ['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');
});
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:
Friends View
