Tag: javascript

SurveyJS – Learn how to create easy surveys

As background story, I finished university with a graduation project for a company, which you can find it here. The goal was to do something similar to Google Forms integrated with an ISO 9001 document management system, so I needed a good library to build surveys. It had to meet the following requirements:

  • Good Documentation
  • JSON-based library
  • Custom CSS
  • Send data to a server or at least provided a method

After intensive research, I encountered many libraries but they didn’t meet at least one requirement, except for SurveyJS. It has complete documentation with examples and provided helper methods to get data, therefore I decided to use it. After finishing the project, I thought it would nice to post the implementation applied to a production project, so let’s get started!

What is SurveyJS?

SurveyJS is a JSON-based javascript library that allows you to have full control of its use. You can modify the main object with additional functionality, send and receive data to a server at any moment, and the best part is that it is based on JSON! It’s even compatible with different javascript frameworks and libraries like React, Angular, JQuery, and Vue.

How do I use it?

In simple words, we will just need to create a simple structured object the way SurveyJS wants. The implementation I have includes the follow: integration with MongoDB simple methods to manage the data, and using SurveyJS jQuery library.

In the code below, there’s schema we will be using in the project. Most of the variables are self-explanatory and required by my project, but I want to focus on the questions array.

'use strict' var mongoose = require('mongoose'); let schema = new mongoose.Schema({ surveyName: String, business: [String], department: String, period: { start: Date, end: Date }, responsible: String, clients: [String], questions: [{ name: String, title: String, formType: String, isRequired: Boolean, inputType: String, choices: [String], clients: [String], service: String, mininumRateDescription: String, maximumRateDescription: String, choicesValue: [{ name: String, value: Number }], rateValues: [Number], showChoices: Boolean, created: Date }], uniqueResponses: Boolean, finalGrade: Number, active: Boolean, general: Boolean, created: Date }) module.exports = mongoose.model('Survey', schema); Read more...

Learning Gulp Basics | Javascript

In the past trimester, I was given a project of creating anything with MEAN.JS and it was the first time I used gulp, so I decided it was time to learn more about what gulp is and how does it work; with the help with a friend I understood how it worked. So now, let’s get started with gulp basics:

What is Gulp?

Gulp is a task runner and build system that uses the philosophy of code over configuration (I’m looking at you, Grunt!). At first glance, I had no idea what was happening in that gulpfile.js, but then I started reading and noticed very interesting things, like it’s simplicity for starters. You will mainly use four functions:

gulp.task:
Defines a task and it’s purpose.

gulp.task('sass', function() {
	return gulp.src(paths.src.sass + 'style.scss')
		.pipe(sass()) // Converts Sass to CSS with gulp-sass
		.pipe(gulp.dest(paths.build.sass)
			.pipe(livereload()));
});

This example is taken from a chat I made for the class. I’m creating a task to compile SASS into CSS using gulp-sass dependancy. The function .pipe allows gulp to connect to other plugins/functions as you can see in the example.

gulp.dest:
Sets the output file.

gulp.watch:
Listes for any update in a file, if it, it can execute a task like recompiling sass.

gulp.task('watch', () => {
livereload.listen();
// Watch .js files
gulp.watch(paths.src.scripts + '**/*.js', ['scripts']);
// Watch .scss files
gulp.watch(paths.src.sass + '**/*.scss', ['sass']);
// Watch image files
gulp.watch(paths.src.images + '**/*', ['images']);
gulp.watch(defaultAssets.server.allJS, ['server:restart']);
//server restart
gulp.watch(['./app.js'], ['server:restart']);
gulp.watch(['./app/client/**/*.js'], ['server:restart']);
}); Read more...