Creating Middle Section of Listing Page for loklak Apps Store
The Loklak applications website that is apps.loklak.org now has a fully functional store listing page where users and developers can find various information about the app they have selected including information about getting started with the app, use of the app and other relevant information. Developers can showcase their apps and promote their apps with promo image and preview images. Before beginning with the actual topic let me provide a brief overview of the various components on the page. The page consists of a left sidebar which contains various categories for app filtering. There is a right column showing suggested apps so that users can easily view apps which are similar to the one they have chosen. Finally there is a middle section containing app promo image, app title, short description, author’s name, a carousel showing preview images, a getting started section, an app use section and an other relevant information section and finally some additional information. The main feature and requirement of the middle section is that it needs to be dynamic, that is, it should dynamically show information for a given selected app. No content should be hardcoded. Now apps.loklak.org is entirely a front end project, there is no centralised data base from where the content can be loaded. How to solve this problem? From where to get the data related to each app. Well, here comes in the app.json file present in each app. Each application present on apps.loklak.org contains an app.json file which contains some metadata about the apps. Now the app.json can be modified by the developer of the app to contain relevant information and references to assets which will be used for app store listing. Getting started with the middle section page At first, let us have a look at a sample app.json file. { "@context":"http://schema.org", "@type":"SoftwareApplication", "permissions":"/api/search.json", "name":"sentimentVisualizer", "headline":"Sentiment Visualizer", "alternativeHeadline":"Tool for visualizing the sentiment of a tweet", "applicationCategory":"Visualizer", "applicationSubCategory":"Text Retrieval", "operatingSystem":"http://loklak.org", "promoImage":"promo.png", "appImages":["disp1.png", "disp2.png", "disp3.png"], "getStarted":"getStarted.md", "appUse":"appUse.md", "oneLineDescription":"Application to visualise sentiment related to tweets", "appSource": "https://github.com/fossasia/apps.loklak.org/tree/master/sentimentVisualizer", "contributors": [{"name": "Damini Satya", "url": "https://github.com/daminisatya"}], "techStack": ["HTML", "CSS", "AngularJs", "Bootstrap", "Loklak API"], "license": {"name": "LGPL 2.1", "url": "https://www.gnu.org/licenses/old-licenses/lgpl-2.1"}, "version": "1.0", "updated": "June 14,2017", "author":{ "@type":"Person", "name":"Damini Satya", "email":"daminisatya@gmail.com", "url":"https://github.com/daminisatya", "sameAs":"https://github.com/daminisatya" } } Each of the apps must have an app.json like the above one. As it can be seen, it contains all the necessary information for sore listing, like app name, version, oneLineDescription, etc. It also contains paths to important assets. Before proceeding we need to know the name of the app which has been selected. This is obtained from the url as shown below. var addr = window.location + ""; if (addr.indexOf("?") !== -1) { $scope.appName = addr.split("?")[1].split("=")[1]; } Once we get the app name, next thing which we need to do is load the contents of app.json. This is done using AngularJs’s http service. $http.get($scope.appName + "/app.json").success(function (data) { $scope.appData = data; $scope.setupCarousel(); $scope.getStarted(); $scope.appUse(); $scope.others(); }); A http ajax call is made to app.json of the corresponding app and the entire data…
