Contact List Web App

Nande Konst

This Contact List App shows you the basic API functionality of Jexia. I used the idea of an contact list to show the CRUD actions and how to manage data relations within Jexia (this part is quite unique). I will explain the basic setup of the app: feel free to use the code and make your own awesome app with it.
Not so much of an reader? Download the sample right away from Github.

It took me only 15 minutes to set up this code and make my app ready to communicate with the Jexia backend. I connected my data through one controller to my view and I was ready to get, post, update and delete contacts using the Jexia backend to store my data.

[title type=”h2″ font_size=”default” font_weight=”300″ align=”left” color=”” bottom_indent=”” use_general_color=”0″ use_border=”0″ animation=”” sc_id=”sc1445447448305″]Setting up the App[/title]

The purpose of this app was pretty clear: enable users to create, edit and delete a contact and
assign departments to their contacts.

The main screen of the Contact List App:
[image action=”none” image_action_link=”#” target=”_self” link_title=”” align=”” image_size_alias=”” image_alt=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” animation=”” sc_id=”sc1445448539860″]http://blog.jexia.com/wp-content/uploads/2015/08/bee-114×114.png[/image]

I started with setting up the HTML structure for the interface: a javascript file that is responsible
for processing my http get, post, delete and put calls and a controller that binds my data to the
view. I’m using Jexia as a Backend in order to work with data.

First I have to make an API to do so I clicked on “Create new Data App” and called “contactlist”.
This API is going to hold all my datasets to the Contact list App.

{image}

Within the “contact list” DataApp I add a dataset named “contacts” to store my fields. Within the
dataset I created the fields: “name” which is from the datatype string, “email” which is from the
datatype string and “number” which is from the datatype integer.

{image}

Now my Jexia backend is ready to communicate with my App.
In my javascript file I get, put, post or delete my data just through one URL that contains the ID
of my DataApp, the name of my dataset and the jexia token. You can see the requests below.

 
//The code to get data
app.get('/contactlist', function(req, res){ 
    request('http://71183da04fe411e592dd05d823229c00.test.jexia.com/contacts?jexia_token=fdb945bff12ae3770fcd4be7c3a90089', 
    function (error, response, body) {
        if (!error && response.statusCode == 200) {res.send(body) } 
});

^

//The code to post data
app.post('/contactlist', function (req,res){
    request.post("http://71183da04fe411e592dd05d823229c00.test.jexia.com/contacts?jexia_token=fdb945bff12ae3770fcd4be7c3a90089",{form: req.body},
    function(err, httpResponse,body){
        console.log(err);
        //console.log(body);
        res.json(body);
});

^

//The code to update data
app.get('/contactlist/:id', function(req,res){
    request('http://71183da04fe411e592dd05d823229c00.test.jexia.com/contacts/'+req.params.id+'?jexia_token=fdb945bff12ae3770fcd4be7c3a90089', 
    function (error, response, body) { 
        if (!error && response.statusCode == 200) {res.send(body)}
});

^

//The code to delete data
app.delete('/contactlist/:id', function(req,res){
    request.del("http://71183da04fe411e592dd05d823229c00.test.jexia.com/contacts?jexia_token=fdb945bff12ae3770fcd4be7c3a90089",{form: {id:req.params.id}},
        function(err, httpResponse,body){res.json(body);
});