Phone book

This example demonstrates a phone book application that is accessible from your web browser.

Introduction

The application is built from the following Motoko source code files:

• index.jsx, which contains the JavaScript, React, and HTML used to generate the front-end user interface for the application when it is launched in a web browser; and

• Main.mo, which contains the actor definition and methods exposed by this canister.

Prerequisites

Verify the following before running this demo:

• You have downloaded and installed Node.js.

• You have downloaded and installed the DFINITY Canister SDK.

• You have stopped any Internet Computer or other network process that would create a port conflict on 8000.

Demo

1. Start a local internet computer.

   dfx start
   

2. Open a new terminal window.

3. Reserve an identifier for your canister.

   dfx canister create --all
   

4. Build your front-end.

   npm install
   

5. Build your canister.

   dfx build
   

6. Deploy your canister.

   dfx canister install --all
   

7. Take note of the URL at which the phone book is accessible.

   echo "http://localhost:8000/?canisterId=$(dfx canister id www)"
   

8. Open the aforementioned URL in your web browser.

9. Backup

   ts-node scripts/backup.ts
   

10. Restore

    ts-node scripts/restore.ts