-
Notifications
You must be signed in to change notification settings - Fork 13
Home
Places Plugin Tech Spec
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
- buildfire.components
- buildfire.services
- buildfire.deeplink
- buildfire.spinner
For more information refer to BuildFire Wiki. In addition of these we would explore some of the angularJs and jquery based. 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.
Standardization: Lazy Loading: We will use ngInfiniteScroll for lazy loading. We will fetch 12 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.
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 places plugin there will be three tags.
placeInfo
sections
items
{tagname: placeInfo}:
{
content: {
sortBy: '',
rankOfLastItem: “”,
showAllItems:’’,
sortByItems: '',
showAllItems:”” // true or false
},
design: {
secListLayout: "",
mapLayout: "",
itemListLayout: "",
itemDetailsLayout: "",
secListBGImage: ""
},
settings: {
defaultView: "",
showDistanceIn: ""
}
}
{tagname- sections}:
[
{
mainImage: ''”,
secTitle: ''”,
secSummary: "This will be summary of section",
itemListBGImage: ''”,
sortBy:””,
rankOfLastItem:””
},
//...
]
{tagname: items}:
[
{
listImage: "",
itemTitle: "",
images: [{
imageUrl: "",
title: "",
links: "",
target: "" //possible values “_blank”
}, //...
],
summary: '',
bodyContent: '',
bodyContentHTML: "",
addressTitle: '',
sections: [ids],//array of section id
address: {
lat: "",
lng: "",
aName: ""
},
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
backgroundImage: ""
}
]
- Mapping Techniques Using google maps and markers for large data sets we need to cluster markers together. We will use Google MarkerClusterer. https://developers.google.com/maps/articles/toomanymarkers?hl=en https://googlemaps.github.io/js-marker-clusterer/docs/examples.html We will make sure, the number of hits on google api should be minimum. So that it will exceed our limits. Only load markers that are within the viewport ie if the marker is off the visible area no need to load it
Current Location: To get current location, we will use HTML5 location. https://github.com/BuildFire/sdk/wiki/BuildFire-Geo-Location-Feature