Forgot Your Password?

Choose Your Plan

Start Building Real Apps

Pay Monthly

12

Pay Yearly

10
2 months free
Top shelf web developer training.

Guided Paths

Follow our crafted routes to reach your goals.

Courses

Premium content to build real apps.

Code Tutorials

Examples to follow and learn from.

How to build a Hacker News Clone with DevLess (Backend-as-a-Service)

Hacker News by now you know is a popular social catalog to get all startups related, entrepreneurship and developer news. It is a product from one of the go-tos startup accelerator {Y Combinator}. To demonstrate the concept and philosophy of DevLess, we will go through simple and detailed steps to setup a fully functional backend to support your frontend or client application in no time.

Ready??

First of all, grab an already prepared sample template of the User interface from our GitHub repo dv-hacker. Please follow the instructions to clone the project. {That shouldn’t be hard else you need to revise your git lessons}

After a successful clone of the project, let dive into assembling the backend modules to interface with our frontend client. Before it escapes my memory, the requirements to be able to go this simple tutorial are knowledge of HTML, CSS, JavaScript {jQuery to be precise}, a tolerant mind and some thinking power {get a coffee or go dancing if stressed}.

Refer to the DevLess documentation on how to successfully deploy an instance of the DevLess platform locally or to the cloud.

Now that you have DevLess up and running, you should be on the Services menu else head there.

Trivial: Services is home to all modules created and imported from the DevLess marketplace which can be found under Service Hub. These modules are feature representation your main application. Case in point, the module required for this tutorial are is available in the project directory and will handle news feed, commenting, and votes.

Let’s set some code lose now
Start by creating a module Click on Create Service. Fill up the presented form with appropriate details and click on Create:

  • Service Name: Hackernews
  • Description: Hackernews clone with minimal functionalities

PS: You can ignore the rest of the fields. This will be covered in upcoming tutorials so don’t hesitate to subscribe to be updated.

Let's create tables for organization and storage of data
Click on New Table. Fill up the presented view with the text below and click on Create Table:

  • Table Name: newsfeed
  • Description: Handles the news feed listing to the front-end

Now let’s add some fields, a similar concept to relational databases.

  • Field Name: title
  • Field Type: TEXT
    Trivial: Selecting the field types places the right validation rules on that particular field. For TEXT fields, it validates to string with a character limit of 255. Refer to the Validations section of the documentation for other types.
  • Reference Table: {Leave unchanged}
    Trivial: This option create relationships between tables belonging to the same service.
  • Default Value: {Leave blank}
    Trivial: This option assigned default values to the column if that data is omitted in the payload to the backend.
  • Field Options: {Leave unchecked}
    Trivial: The UNIQUE FIELD enforces that data entry in the column are of uniques type which prevent data duplication.

Click on Add a Field to for more fields.

  • Field Name: host
  • Field Type: URL
  • Reference Table: {Leave unchanged}
  • Default Value: {Leave blank}
  • Field Options: {Leave unchecked}

  • Field Name: author
  • Field Type: TEXT
  • Reference Table: {Leave unchanged}
  • Default Value: {Leave blank}
  • Field Options: {Leave unchecked}

  • Field Name: score
  • Field Type: INTEGER
  • Reference Table: {Leave unchanged}
  • Default Value: 0
  • Field Options: {Leave unchecked}

  • Field Name: timestamp
  • Field Type: TEXT
  • Reference Table: {Leave unchanged}
  • Default Value: {Leave blank}
  • Field Options: {Leave unchecked}

Head to the API Console to add sample data to our backend.
The API Console is a mini postman simulator let developers perform CRUD functionalities using the appropriate HTTP Methods on their endpoints. Refer to the documentation for details

  • Service: Hackernews
  • Table: newsfeed
  • Operations: ADD RECORD (POST)

Copy and replace the payload in the Body Params and click Run

[
    {
        "score" : 37,
        "title" : "The ANTLR Mega Tutorial",
        "host" : "http://tomassetti.me",
        "author" : "ftomassetti",
        "timestamp" : "1 hour ago"
    },
    {
        "score" : 519,
        "title" : "Google is acquiring Kaggle",
        "host" : "http://techcrunch.com",
        "author" : "Perados",
        "timestamp" : "9 hours ago"
    },
    {
        "score" : 50,
        "title" : "Attitudes That Lead to Maintainable Code",
        "host" : "http://spin.atomicobject.com",
        "author" : "ingve",
        "timestamp" : "2 hours ago"
    },
    {
        "score" : 473,
        "title" : "Apple starts rejecting apps with “hot code push” features",
        "host" : "http://developer.apple.com",
        "author" : "dylanpyle",
        "timestamp" : "10 hours ago"
    },
    {
        "score" : 18,
        "title" : "Softbank to sell 25% stake in ARM Holdings to Saudi-backed investment group",
        "host" : "http://bbc.co.uk",
        "author" : "dan1234",
        "timestamp" : "1 hour ago"
    },
    {
        "score" : 6,
        "title" : "The Rusty Web Targeting the Web with Rust",
        "host" : "http://davidmcneil.github.io",
        "author" : "314testing",
        "timestamp" : "20 minutes ago"
    },
    {
        "score" : 19,
        "title" : "Abacus use can boost math skills",
        "host" : "http://kottke.org",
        "author" : "Osiris30",
        "timestamp" : "3 hours ago"
    },
    {
        "score" : 367,
        "title" : "CIA malware and hacking tools",
        "host" : "http://wikileaks.org",
        "author" : "fatherofone",
        "timestamp" : "13 hours ago"
    },
    {
        "score" : 2544,
        "title" : "XLA linear algebra library for TensorFlow",
        "host" : "http://developers.googleblog.com",
        "author" : "randomname2",
        "timestamp" : "1 day ago"
    },
    {
        "score" : 133,
        "title" : "Risks soar, bills come due as 20th-century dams crumble",
        "host" : "http://eenews.net",
        "author" : "mud_dauber",
        "timestamp" : "10 hours ago"
    },
    {
        "score" : 119,
        "title" : "New kind of recurrent neural network using attention",
        "host" : "https://github.com",
        "author" : "prostoalex",
        "timestamp" : "13 hours ago"
    },
    {
        "score" : 115,
        "title" : "Baidu Deep Voice Explained Part 1 – the Inference Pipeline",
        "host" : "https://medium.com",
        "author" : "jostmey",
        "timestamp" : "12 hours ago"
    },
    {
        "score" : 60,
        "title" : "The Man Who Almost Never Succeeded (2012)",
        "host" : "http://lensrentals.com",
        "author" : "sethbannon",
        "timestamp" : "13 hours ago"
    },
    {
        "score" : 70,
        "title" : "Amazon’s AWS acquired meeting productivity startup Do to expand Chime",
        "host" : "https://techcrunch.com",
        "author" : "brudgers",
        "timestamp" : "9 hours ago"
    },
    {
        "score" : 4,
        "title" : "Nvidia  Announces Jetson TX2 Parker Comes to Nvidia ’s Embedded System Kit",
        "host" : "http://anandtech.com",
        "author" : "ttam",
        "timestamp" : "1 hour ago"
    },
    {
        "score" : 29,
        "title" : "Previously untouched 600BC palace discovered under shrine in Mosul",
        "host" : "https://telegraph.co.uk",
        "author" : "lucky",
        "timestamp" : "7 hours ago"
    },
    {
        "score" : 13,
        "title" : "Congress Is Trying to Roll Back Internet Privacy Protections",
        "host" : "http://eff.org",
        "author" : "nns",
        "timestamp" : "1 hour ago"
    },
    {
        "score" : 1,
        "title" : "Travis-Pls Travis Builds That Don't Timeout",
        "host" : "https://github.com",
        "author" : "dwaxe",
        "timestamp" : "2 hours ago"
    }
]

Successful request will return a response below:

{
     "status_code": 609
     "message": "Data has been added to newsfeed table successfully",
     "payload": []
}

Go to App in DevLess and click on Connect to my App, grab get your connection details. <script src="http://localhost:8000/js/devless-sdk.js" class="devless-connection" devless-con-token="93249c9c961d3999efafc62e9cecc170"></script>
Head to the index.html in the dv-hacker directory and paste the connection details at the script section.

Let’s fetch data and display data using the JS SDK, for other SDKs. Open custom.js and add this code snippet after // Query Data on line 54.

SDK.queryData("Hackernews", "newsfeed", {},  function(response){
    var newData = response.payload.results;
    if (newData.length != 0) {
        $("#nothing-here").hide();
            for (var i = newData.length - 1; i >= 0; i--) {
                hn_list += '<li class="news-item">';
                hn_list += '<span class="score">'+ newData[i].score+'</span>';
                hn_list += '<span class="title">';
                hn_list += '<a href="#" target="_blank">'+ newData[i].title+'</a>';
                hn_list += '<span class="host"> ('+ newData[i].host+')</span>';
                hn_list += '</span><br>';
                hn_list += '<span class="meta">';
                hn_list += '<span class="by">by <a class="" href="#">'+ newData[i].author+'</a></span>';
                hn_list += '<span class="time"> '+ newData[i].timestamp+' </span>';
                hn_list += '<span class="comments-link">| <a class="" href="#">214 comments</a></span>';
                hn_list += '</span>';
                hn_list += '<span class="hn_buttons">';
                hn_list += '<a id="hn-edit" class="btn btn-default" data-id="'+ newData[i].id+'" href="#">Edit</a>';
                hn_list += '<a id="hn-delete" class="btn btn-default" data-id="'+newData[i].id+ '" href="#">×</a>';
                hn_list += '</span>';
                hn_list += '</li>';
            }
        $('ul.news-container').append(hn_list);
    }
});

Trivial: You can totally uncomment the code snippets
Let's enable add persisting to DevLess.
Add this snippet of code to line 33.

if (targetId == "add_hn") {
    SDK.addData("Hackernews", "newsfeed", data,  function(response){
        window.location.reload();
    });
} 

Now try adding data to the backend via the frontend by click on Click to Add Hacker News. Let's enable edit on data in DevLess Add this snippet of code to line 36 to handle editing of data.

else {
    data.id = $('#hn_id').val();
    SDK.updateData("Hackernews", "newsfeed", "id", $('#hn_id').val(), data, function(response){
        window.location.reload();
    });
}

Deleting data from the backend Add this snippet to line 114.

SDK.deleteData("Hackernews", "newsfeed", "id", id, function(response){
    window.location.reload();
});

Volla! You are a DevLess expert now. OMG, you are awesome! Hope to hear from you soon. Get in touch via our slack channel.