Home

Media Center Manual Entries

1. Architecture/Technology stacks:

The entire app would be built on AngularJs and BuildFire. Here in angularjs we will follow MVVM design pattern. BuildFire provide us multiple method by which we can fetch and update information on server. Methods included are

• buildfire.notifications
• buildfire.actionItems
• buildfire.messaging
• buildfire.datastore
• buildfire.imageLib

For more information refer to BuildFire Wiki. In addition of these we would explore some of the angularJs and jquery based. Videogular is open source library to create video iframe. There are some animation need to perform on app. Angular-Animate is the angularjs module that will help us on those animation. Angular-Route is used to navigate to different view in app.

2. Standardization:

• Lazy Loading: We will use ngInfiniteScroll for lazy loading. We will fetch 10 items on every single hit.
• Caching: Caching will be done by buildfire API mainly. It includes Image caching API buildfire.imageLib.
• Refreshing: Refresh will be disabled for this plugin. Since we are using buildfire.datastore.onUpdate, This subscribes buildfire database. Whenever there is change in tag or database. It will updated the widget/simulator.
• Styling: UI Design will be done using BuildFire-Style-Helper-Documentation. It has pre build style classes that we can use to improve UX of the plugin.

3. DataBase Model:

Database model is not directly exposed to the user. BuildFire provides buildfire.datastore to fetch and update data on server. It is black box for user. Think of it like for every user there will be separate database. The database should be unique as appId,pluginId, instanceId, tag and obj. Here the composite key of appId and pluginId should be every single app.

Here for mediaCenterManualEntries plugin there will be two tags.

• mediaCenter {tagname: mediaCenter}:

{
   content: {
       images: [{
           imageUrl: "",
           title: "",
           links: "",
           target: "" //possible values “_blank” 
       }, //...
       ],
       descriptionHTML: '',
       description: '',
       sortBy: '',
       rankOfLastItem: ''
   },
   design: {
       defaultListLayout: "",
       defaultItemLayout: "",
       listLayout: "",
       itemLayout: "",
       backgroundImage: ""
   }
}

• mediaContent {tagname- mediaContent}:

[
   {
       topImage: '',
       summary: "This will be summary of media",
       body: '',
       bodyHTML: '',
       srcUrl: '',
       audioUrl: '',
       videoUrl: '',
       image: '', // audio Image
       mediaDate: '', 
       deepLinkUrl: '',
       rank: '',
       links: [{
           title: "build fire",
           url: "https://www.facebook.com/buildfireapps",
           action: "linkToWeb",
           openIn: "_blank" or "_system",
           actionName: "Link to Web Content"
       }] // this will contain action links
   },
   //...
]