https://s3-us-west-2.amazonaws.com/secure.notion-static.com/39c5bcbc-4a6f-4d86-9d97-ae53e09ac68e/PROMISINGSMS.jpg

Last week we started research on Twilio and possible alternatives to see the feasibility of having them host the logic behind the bots so that we won't need a backend to our system. We worked on writing some scripts and documentation to scrape relevant data out of Voiceflow, and uploaded this to our GitHub. Planning also started for our UI development and its requirements.


Goals

This week we aim to further our UI development and look into how it can be implemented, and also start work on launching a chatbot on Twilio without the need for our own backend.

**What are we looking to achieve?

  1. Create some wireframes for our UI** These initial designs will form the basis of our UI designs and prototype.

2. Research the Electron.js framework and web development We aim to implement our UI with HTML/CSS as a desktop app.

3. Research Twilio's Autopilot CLI to launch a bot We must find a way to automate the process of launching a chatbot with the Autopilot CLI.


UI Design

We started our UI development last week by writing a rough list of requirements we'd need for the frontend of our program. With this, we quickly sketched some wireframes for an initial plan of how the UI would look and its functionality.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e39bd582-ca1c-46a7-943e-2065d29e18b4/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb475a74-92fe-4a22-b104-1990af0c0a9a/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6cf23767-296e-46a2-bbbb-431378342d44/Untitled.png

Using these preliminary wireframes, we can aim to get a working prototype on Figma next week.


UI Implementation

Research has been started on web development (HTML and CSS) as well as the Electron framework. For now, we have set up a project using Visual Studio Code where we can actively develop our UI, and so far, we have written some initial code to open a blank webpage. We used the resource (linked below) from the Electron documentation in order to get our project properly set up.

Quick Start Guide | Electron

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
...