Creating a survey application using Monaca

Published in

The Web Tub

5 min readJun 7, 2021

In this tutorial, I will show how to create a survey application that works as a user interface for listing surveys and answering them. The application has also a simple user registration and login functionality. It uses Framework7 and the data is saved to a Firebase cloud database.

The application details

The application consists of four pages: login, main, survey and report.

On the login page, the user can either log in or create a new account, if it doesn’t yet exist. The main page has a list of all the surveys in the database.

The survey is filled and submitted on the survey page. If the user has already answered the survey, their answer is updated. The report page is only shown if the user is an admin. The page shows a summary of all the answers of the survey.

In the Firebase database we have three collections: admins, answers and surveys. Surveys are added to the application by creating a new survey document in the surveys collection and giving it the necessary information. The most important field is the ‘page’ field that is the path to the survey’s HTML-document in the source code. Admins can be added manually to the admins collection by saving their email to the ‘admins’-collection. Answers are stored automatically when an answer to a survey is submitted.

Running the application

To run the application, you should have installed Node.js and Monaca CLI on your computer. You can install Monaca CLI by running this command in your terminal:

npm install -g monaca

Then you can clone the project from Github, install npm and run the preview of the application:

git clone https://github.com/monaca-samples/f7-internal-survey-app.git
npm install
monaca preview

The application should open on your browser. If you have installed the Monaca Debugger on your phone, you can test the application on your phone with this command:

monaca debug

Creating a new application from scratch

Once you have installed Node.js and Monaca CLI, create a new Monaca project with this command:

monaca create survey-app

You can choose a ready Monaca template using Javascript and Framework7 to start with.

Setting up the Firebase database

Before you can start adding surveys to the application, you have to create a Firebase database to store them. First, login/make an account in Firebase. Then, go to the Firebase console, create a new project and register your application to the project. You will get a Firebase configuration code that you should add to your config.js-file where the Firebase is also initialized:

To install Firebase to your project, run this command in your terminal:

npm install --save firebase

Next, create a new firebase database to your new Firebase project and add collection ‘surveys’ to it. Now you can add a new survey to the collection and it will be shown in the application. In order to be able to modify the data in the database, go to the ‘Rules’-section of the database view in Firebase console and make sure that you’re allowed to both read and write to the database:

To set up the user login and registration, enable the ‘Email/Password’ option on the ‘Authentication’ page of the Firebase console:

Next, let’s take a closer look to the source code.

HMTL

Login, main and survey pages have their own HTML files. company_meeting.html has the HTML code for the sample survey and survey_template.html can be used to create new surveys.

CSS and Framework7

There are a few CSS and Javascript files for styling and Framework7. style.css is a file where you can add your own CSS code. Most of the files for Framework7 are already there after creating a project with a ready template, but the Framework7 icons need to be installed separately. Adding the icons to the project is explained in the Github repository.

Basic functionalities of the app

The application is initialized in app.js:

app.js has also functions for making the summary of the answers to the report page and showing it.

routes.js is used for defining the routes to the different pages of the application. When adding a new survey, remember to add its path and url to the file also.

company_meetings.js has specific code for the sample survey. It shows the survey data when the survey is opened and fills the form if the user has already answered the survey.

The basic functionalities of the application are pretty simple, but you can check them closer in the source code.

Login and user registration

database.js has code that is related to the Firebase database. When a user logs in, the code checks if a user with the input email already exists and creates a new user if not. The code uses the Firebase authentication functions fetchSignInMethodsForEmail, signInWithEmailAndPassword and createUserWithEmailAndPassword:

Detecting the login and to saving the current user happens with onAuthStateChanged-function. If there is no user logged in, the application is redirected to the login page.

The admins of the application are defined in the collection ‘admins’ in the Firebase database. The user’s admin status is used for deciding whether the application shows the report page to the user or not. The function isAdmin checks if the the current user is in the admins list:

Downloading surveys and saving the answers to the database

The surveys are listed on the main page by the function ShowSurveys. It first saves all the answers from the database and then creates an HTML code for every survey. Answers are used to check if the user has already answered to the surveys.

Function answered checks if the user has already answered to a specific survey:

When the user submits an answer to a survey, the code checks if they have already answered the survey. If not, a new survey is created using Firebase’s add-function. If there is already an answer for the survey in the database, the answer is updated with Firebase’s update-function.

Conclusion

This article described how to build a simple app for managing surveys and their answers. I explained the most interesting parts of the code, but if you want to know some more details I didn’t cover, you can check the whole code in the Github repository.