17/12/2020 Complete Proof of Concept

Last week we started work on our UI and produced some wireframe sketches. We set up an Electron project so that we can actively work on our UI implementation over the next few weeks as we continue research on web development. We also demonstrated a manual proof of concept for an SMS chat-bot to our client using Twilio Autopilot CLI.

Goals

The objectives for this week are primarily to continue our development of the UI.

<aside> 🎯 **What are we looking to achieve?

Create a UI prototype** Using the wireframe sketches from last week, we can now work on getting an interactive prototype to guide the development process.

2. Start reproducing the prototype with Electron and HTML/CSS After making our prototype, we can immediately work on recreating it for our UI implementation with the Electron framework.

</aside>

UI Prototype

With inspiration and ideas from our wireframes, we were able to produce the first prototype using Figma. We will use this to guide our UI implementation, but certain aspects could change when we integrate our frontend with the logic and processing layer should we need different functionality.

The first prototype for our UI — it has limited interactivity but clearly demonstrates the core aspects we're aiming for with our UI.

UI Implementation

This week, we started work on our UI implementation. For now, we are trying to recreate the Figma prototype using HTML, CSS, and the Electron framework. So far, we have made use of CSS flexbox to produce the login and home page for our UI, which matches the prototype.

    <body>

        <div class="flex-row-container" style="max-width: 1050px;">
            <button onclick="document.location='deploy-select_workspace.html'" class="flex-button dim300x160">DEPLOY A BOT</button>
            <button onclick="document.location='manage.html'" class="flex-button dim300x160">MANAGE BOTS</button>
        </div>
        
        <button onclick="document.location='login.html'" class="flex-back">
            <img src="back_btn.png" alt="Go back" class="back_img">
        </button>
        
    </body>

Over the next few weeks, we will continue to implement a version of our prototype into HTML and CSS. At the same time, we will research and learn more about these languages to help us with UI development, as well as possible alternatives for various UI components. With these goals, we hope to iterate UI development and gradually improve its features and internal implementation.