Category: 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...

Open Weather Map API – Retrieving Weather Info

Today, we are going to make a small project connecting to a Open Weather API, retrieve its information depending in the state and country, show it to the user, and in the next post we will add a 5-day forecast to our project. Here is the link to their official site, so you can check their documentation, which is very important to read since it if ask ourselves how to make “X” thing.

Let’s get started

I used Netbeans to create the project, however, you can use any text editor for this, even with notepad. The technologies that will be used in this project are:

  • HTML
  • CSS
  • Javascript

First, let’s create a new project in Netbeans or in your favorite text editor as shown in the following image:

Create Project

Note: This is my project structure, you can do something similar to mine.

Project Structure

Now, let’s create a new javascript file, we will call it “mainWeather”. Remember to add Jquery. Now that you have created a JS file, let’s add it:

<!DOCTYPE html>
<html>
    <head>
        <title>Open Weather API</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript" src="resources/js/jquery.js">
        <script type="text/javascript" src="resources/js/mainWeather.js"></script>
    </body>
</html>

After doing so, let’s add one input for the city and another one for the country as well as a button to submit the information.

<!DOCTYPE html>
<html>
<head>
<title>Open Weather API</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="UserArea">
<div id="stateWrapper">
<input type="text" id="cityInput" placeholder="Enter a State"/>
</div>
<br/>
<div id="countryWrapper">
<input type="text" id="countryInput" placeholder="Enter a Country"/>
</div>
<br/>
<div id="buttonArea">
<input type="submit" id="submitWeather"/>
</div>
</div>
<!- USED TO SHOW RESULT -->
<div id="WeatherWrapper">
</div>
<script type="text/javascript" src="resources/js/mainWeather.js">
<script type="text/javascript" src="resources/js/jquery.js"></script>
</body>
</html>

Read more...