Our CEO real story
Creating a web app has now become very simple, with little effort. It’s easy to say, but seeing it accomplished is quite different.
One day I had lunch with a friend of mine, with very little programming experience, he told me that he need a very simple application to handle the customers of his team. So, knowing my programming experience, we threw down a sketch of what he need to accomplish …
The project (always first on paper)
A two-pages application that can handle a list of clients, each of which has a list of projects to show informations.
As a team leader, my friend should have been able to modify that information and manage users.
The data
After defining what the application should do and the user experience, we have devoted ourselves to defining the database:
Some theory about REST Web Application
Now we had to create the first implementation of our application!
My friend was not aware of the theoretical bases of the components that compose the architecture of a web app.
So I began to explain in more or less simple words what we had to do technically. I started from user point of view. He opens his browser from PC or mobile, and in his browser a part of our web application is executed! This is done by Javascript language and thanks to AngularJS framework.
In this AngularJS application, each page consists of a .html file where the graphical interface is represented, and a .js file where we will insert the logics of our application into component called controllers.
These controllers access to data of our app through the component named “service”, and there is a service for each data types (Customer, Project, User). To find data, the services make HTTP requests to the server, where will be running a second part (backend) of our application that will find the data from the database (MongoDB) and provide them with the AngularJS services in JSON format.
We begin to realize the first prototype
Once the application was designed, the EasyDev tool was very helpful, it gives us the possibility to quickly and easily make the first working prototype.
So, we’ve put on EasyDev platform, the UML schema previously drawn on paper, which represents the structure of our application data (customer, project, user).
After that we included information about page structure (home and customer detail) on EasyDev, specifying for the home page a “customer list” type template and for the customer detail page a “modify / view customer” template . This last step was performed automatically by clicking on the “CREATE CRUD FROM DATABASE” button, which, based on the UML template from the previously entered data, automatically creates source code of the list and edit pages of each data model.
Download the source code generated
Now the EasyDev platform is ready to generate the source code of our first prototype. To do this, we created a new “generator” by choosing the MEAN template available and linked it to our GIT repository, obtained free of charge on Github.
Clicking on ‘Generate Code On Repository’, EasyDev sends our source code to our repository. Using the Sourcetree tool, we download the source code of our application to the local PC.
Alternatively, you can link no GIT repositories and download the zip of the source code.
Install Prerequisites
Now is the time to install the prerequisites specified in the readme file. Nothing worrisome, we install NodeJS and MongoDB by running their installers available here (NodeJS download, MongoDB download ).
At this point we start MongoDB by running the mongod.exe file in the bin folder where we ran the installation.
Start the project
From the folder of our source code we execute the command
npm install
to install the NodeJS dependencies of our project, specified in the package.json file.
Then we run our server with the command
npm start
Our project is running on port 3000. Going on the http://localhost:3000 URL we have our prototype ready and working!
Now my friend was astonished to have a working and useful application for his purpose. In the next guide we will see how to customize the prototype generated with little effort and complete what was designed on paper.
Keep in touch! And in the meantime you can enjoy getting familiar with Skaffolder!