The App website starter kit allows you to make your own website with additional functionality to add different plans for your product or service, while including all standard blog features. Parts of the website in charge of plans and social icons communicate with Baasic using Dynamic Resources Schema via JSON format. Schemas themselves are defined in the Baasic backend/dashboard.
Our main intent with this starter kit was to show how the basic blog starter kit can be extended with new features that include creating, editing and deleting plans, making the list of plans, and also creating, editing and deleting social network links in the footer of the page.
You don’t have to be logged into the Baasic dashboard to perform various management tasks, as you can do everything “in place”, directly in the website. There is a cog icon next to the plans and social icons on the home page that leads you to plan/social icons editor. When using this approach, your users will be blissfully unaware of the technology in the backend - your usage of Baasic is totally transparent to them.
Blog is as intuitive as it can be - you can add, edit or delete articles directly on the blog page.
For the sake of simplicity of adding the social media links in the footer, we’ve made a list of popular social media sites. It is enough to put a URL (without the http:// part) of your social network profile in the appropriate field and save the list. To delete a social media link, just delete the URL from the list and click on the save button.
How to make Dynamic Resource Schema in the Baasic Dashboard
We have the article module included in Baasic, but there is no built-in plan or product modules. There is where Dynamic Schema Resources step in, allowing you to extend the backend functionality in any way you want.
Plans and Social media icons will appear as you add them trough your new App website starter kit - but first we must prepare Dynamic Resources Schemas to successfully store the data in the Baasic backend. To do that, simply follow these steps: 1. Log in to Baasic Dashboard 2. Click on your app, or create a new one 3. In the Menu, under Dynamic Resources, choose “Add New Schema” 4. Write “plans” under Schema Name 5. Check Enforce Schema Validation 6. In the SCHEMA section, change “Tree” to “Text” and paste the code below:
{
"type": "object",
"properties": {
"id": {
"type": "string",
"title": "Unique Identifier",
"hidden": true,
"readonly": true
},
"name": {
"type": "string",
"required": true
},
"sync": {
"type": "boolean"
},
"order": {
"type": "number"
},
"price": {
"type": "number"
},
"period": {
"type": "string"
},
"tickets": {
"type": "number"
},
"isFeatured": {
"type": "boolean"
},
"description": {
"type": "string"
},
"navAccessLevel": {
"type": "string"
}
}
}
After entering the code, click on the save button. You will notice that there is no data present at this step. To populate schema from the dashboard, find View Schemas under Dynamic Resources in the menu. This is a totally optional step, as you can also populate data from plans editor on the App starter kit page.
To make social icons work, repeat steps for adding a new Dynamic Resource Schema, name it social and paste the code below:
{
"type": "object",
"properties": {
"id": {
"type": "string",
"title": "Unique Identifier",
"hidden": true,
"readonly": true
},
"url": {
"type": "string"
},
"name": {
"type": "string"
},
"order": {
"type": "number"
}
}
}
We’ve prepared icons for 12 social networks (Facebook, Twitter, Google+, LinkedIn, Instagram, GitHub, Tumblr, Pinterest, Dribbble, Vimeo, StumbleUpon, WordPress). Other networks can be easily added. To do so, make a .svg icon of the social network you want to display and name it exactly the same as it is named in the social dynamic resources. So, if you want to add a YouTube social link, make white youtube.svg, put it in the src/themes/apptheme/assets/img/ folder, and put the blue one (also named youtube.svg) in apptheme/assets/img/social folder. Blue icons are for the editor, and white ones are for the footer display.
If everything is done correctly, the YouTube icon should appear on the Edit Social Networks page. Now you can put the URL to your YouTube account, save it and it will be displayed as a link in the footer of your page. Social network links are ordered by the order field in the Dynamic Resource Schema, so if you want to impose a particular order of appearance, you can edit it in the dashboard.
Working with the Dynamic Resources Schema
Data manipulation is managed trough AngularJS service called socialService. Basic operations like fetching and saving data are built into the social directive which depends on the socialService for communication with the Baasic backend. A separate HTML file is used for templating. Dynamic Resource Schema used by socialService is called social and here you can see how social schema is used inside the service:
(function(angular) {
'use strict';
angular.module('baasic.mobileApp')
.service('socialService', ['baasicApiHttp', 'baasicDynamicResourceService', function (baasicApiHttp, dynamicResourceService) {
var resourceName = 'social';
this.get = function get(id, options) {
return dynamicResourceService.get(resourceName, id, options);
};
this.find = function find(options) {
return dynamicResourceService.find(resourceName, options);
};
this.create = function create(social) {
return dynamicResourceService.create(resourceName, social);
};
this.update = function update(social) {
return dynamicResourceService.update(social);
};
this.remove = function remove(social) {
return dynamicResourceService.remove(social);
};
this.next = function next(dataList) {
var nextLink = dataList.links('next');
if (nextLink) {
return baasicApiHttp.get(nextLink.href);
}
};
this.previous = function previous(dataList) {
var prevLink = dataList.links('previous');
if (prevLink) {
return baasicApiHttp.get(prevLink.href);
}
};
}
]);
}(angular));
The variable “resource name” holds the name of a Dynamic Resource Schema that we’ve defined in the Baasic dashboard. There are also next and previous functions that help us to paginate through the results. We can also define how many items we would like to show on a page. The only thing that needs to be changed is a number of results per page (rpp).
socialService.find({
page: 1,
rpp: 15,
sort: 'order|asc'
})
There is only one field for each social network on the social network links edit page, so ng-repeat is used. Name, id and icon are pulled from the fetched results.
<div class="" ng-repeat="soc in socials | orderBy: 'order'">
<div class="col-1-2 social__item">
<img src="assets/img/social/{{soc.name}}.svg" class="social__icon" />
<input type="text" name="{{soc.name}}" id="{{soc.name}}" ng-model="soc.url" class="input input--text social__input" />
<span class="highlight highlight--social"></span>
<span class="bar bar--social"></span>
<label class="social__label">{{soc.name}} URL</label>
</div>
</div>
Social links in the footer are also displayed via ng-repeat, but only if they have a URL.
<div class="flex--alt footer__icon--wrapper">
<a ng-repeat="soc in socials" ng-href="http://{{soc.url}}" class="footer__icon--social" ng-show="soc.url.length">
<img ng-src="assets/img/footer/{{soc.name}}.svg"/>
</a>
</div>
Customizing the starter kit
When you download the App website starter kit, you should install dependencies in the root folder of the starter kit with bower install. After bower finishes you should run npm install and then serve it with gulp serve. Now you can open http://localhost:3000/ to see how it works.
Remember, you are seeing our demo data. For switching to your own app, you should change apiKey. Edit app.conf.json located inside src/themes/apptheme/ folder and change the following line:
"apiKey": "starterkit-app"
where starterkit-app should be your own apiKey which you can see in the Baasic dashboard or in the Application settings page under Core settings.
To customize the home page of your kit, simply open src/themes/appthemes/templates/content-home.html and edit it. It is best to run gulp serve before editing CSS files as they are automatically post processed with PostCSS and changes can be seen instantly.
When you finish customization of your kit, it is time to make it live. You can do it with gulp dist. Folder named dist will appear inside the root directory. You can just upload files from this folder to the production server.
Blog is already included to this starter kit. When you gulp dist, blog comes with it out of the box and has the theme that matches the home page.
Extending blog starter kit
App website starter kit is a blog starter kit extended to show the home page, plans and social icons. Blog theme in the app starter kit is made to match the look of the home page. Some changes were needed to make this work.
Routing had to be changed because home page contained a list of blog posts, and now it is simple html page with descriptions and plans. Some additional services, directives and controllers were added to achieve the desired functionality.
Plans and social folder were added to the src/themes/apptheme/templates folder. These folders have directives, controllers and services, as well as template files for plans and social icons.
Services are similar to blog service, and are used for manipulating Dynamic Resources. Directives are made for displaying list of items, individual items, and for edit items. Different menus for homepage and blog are switched within the header, depending on isBlog value which is defined in ui-router part of app.js.
The footer repeats itself on many places, so its location is inside main.html template which is used for almost every page (add/edit blog and social items don’t have a footer at all). For the sake of simplicity, footer is made as a directive, so we can change it in one place if necessary.
The possibilities are endless
App starter kit is just a tiny drop in the sea of possibilities and features Baasic can provide when making your own page or app. You just have to define the Dynamic Resource Schema to match your needs and you’re ready to go!
Feel free to leave a comment
comments powered by Disqus