Difficulty: Beginner
Estimated Time: 30 minutes

This is the second to last in a series of four tutorials to get you up and running with full-stack DAML development. We do this through the example of a simple social networking application. The four tutorials cover:

  1. How to build and run the application (Running the app).
  2. The design of its different components (Application Architecture).
  3. How to write a new feature for the app (this tutorial).
  4. How to deploy your app to project:DABL

In this scenario we'll dive into implementing a new feature for our social network app. This will give us a better idea how to develop DAML applications using our template.

At the moment, our app lets us follow users in the network, but we have no way to communicate with them! Let’s fix that by adding a direct messaging feature. This will allow users that follow each other to send messages, respecting authorization and privacy. This means:

  • You cannot send a message to someone unless they have given you the authority by following you back.
  • You cannot see a message unless you sent it or it was sent to you.
  • We will see that DAML lets us implement these guarantees in a direct and intuitive way.

There are three parts to building and running the messaging feature:

  1. Adding the necessary changes to the DAML model.
  2. Making the corresponding changes in the UI.
  3. Running the app with the new feature.

As usual, we must start with the DAML model and base our UI changes on top of that.

You’ve gone through the process of setting up a full-stack DAML app and implementing a useful feature end to end. Have a think about how you might further improve or extend this app. For example, you might have noticed that your list of messages can get out of order. You could add a timestamp to the Message template and sort messages in the MessageList component so your most recent are at the top. Of course there are many more features you could imagine (just think of your favourite social media app).

Next up you can learn how to deploy your app to project:DABL - a hosted and scalable environment supporting all your app management needs.

As always, if you have any questions or problems, connect with the DAML Community on the DAML forum.

Add a new feature with UI elements to your DAML app

Step 1 of 7

DAML Changes

As mentioned in the application architecture section, the DAML code defines the data and workflow of the application. The workflow aspect refers to the interactions between parties that are permitted by the system. In the context of a messaging feature, these are essentially the authorization and privacy concerns listed above.

For the authorization part, we take the following approach: a user Bob can message another user Alice when Alice starts following Bob back. When Alice starts following Bob back, she gives permission and authority to Bob to send her a message.

To implement this workflow, let’s start by adding the new data for messages.

  • First, open the IDE tab and wait for it to load. You should see the IDE, similiar to the screen below, before proceeding with the next step. IDE Loaded

  • After that click on the button Copy to Editor to add the code snippet to the end of the User.daml file. Indentation is important: it should be at the top level like the original User template.

template Message with
    sender: Party
    receiver: Party
    content: Text
    signatory sender, receiver

This template is very simple: it contains the data for a message and no choices. The interesting part is the signatory clause: both the sender and receiver are signatories on the template. This enforces the fact that creation and archival of Message contracts must be authorized by both parties.

Now we can add messaging into the workflow by adding a new choice to the User template.

  • Open the daml/User.daml file
  • Copy the below choice by clicking on the Copy to Clipboard button
    nonconsuming choice SendMessage: ContractId Message with
          sender: Party
          content: Text
        controller sender
          assertMsg "Designated user must follow you back to send a message" (elem sender following)
          create Message with sender, receiver = username, content
  • Finally paste the code into the User template after the Follow choice. The indentation for the SendMessage choice must match the one of Follow. Make sure you save the file after copying the code.

As with the Follow choice, there are a few aspects to note here.

  • By convention, the choice returns the ContractId of the resulting Message contract.
  • The parameters to the choice are the sender and content of this message; the receiver is the party named on this User contract.
  • The controller clause states that it is the sender who can exercise the choice.
  • The body of the choice first ensures that the sender is a user that the receiver is following and then creates the Message contract with the receiver being the signatory of the User contract.
  • This completes the workflow for messaging in our app. Now let’s integrate this functionality into the UI.