Skip to content
This repository has been archived by the owner on Nov 23, 2021. It is now read-only.

Home

Jump to bottom
Angus Farquhar edited this page Nov 2, 2020 · 32 revisions

Home page

Welcome to epicportfolio

Index

Project specification

Personal ePortfolio System**

Adapted from Wikipedia

An electronic portfolio (also known as a digital portfolio, online portfolio, e-portfolio, e-folio, or eFolio) is a collection of electronic evidence assembled and managed by a user. Such electronic evidence may include input text, electronic files, images, multimedia, blog entries, and hyperlinks. E-portfolios are both demonstrations of the user's abilities and platforms for self-expression. If they are online, users can maintain them dynamically over time. An e-portfolio can be regarded as a type of learning record that provides evidence of achievement. E-portfolios, like traditional portfolios, can facilitate students' reflection on their own learning, leading to more awareness of learning strategies and needs

From https://uwaterloo.ca/centre-for-teaching-excellence/teaching-resources/teaching-tips/educational-technologies/all/eportfolios

An academic ePortfolio is a digital collection created by a student of their course-related work, like essays, posters, photographs, videos, and artwork; academic ePortfolios can also capture other aspects of a student’s life, such as volunteer experiences, employment history, extracurricular activities, and more. In other words, ePortfolios document and make visible student learning. But a good ePortfolio should be more than just a collection of products. A good ePortfolio is both about being a product (a digital collection of artifacts) and a process (of reflecting on those artifacts and what they represent).

The project for COMP30022 is to develop a personal ePortfolio system. The ePortfolio system must be capable of allowing you to submit individual guest lecture reports and end-of-subject individual reflections that are requirements in COMP30022, as well as a team report. You will be assigned a client in addition, specifically a Masters student (or group of Masters students) studying SWEN90016. The Masters students will be assigned in Week 3 of the semester.

Technology and deployment choices are subject to your requirements.

The motivational model below will be explained in lectures.

Presentation

Week 12 5:30 - docs.epicportfol.io

Final Product Report

https://docs.google.com/document/d/1OxOEHgfYjbpRxsighd8RCCuDUghjQXfv1HBQ8bhg5Rc/edit?usp=sharing

Development Guide

How to develop locally:

Index

Required tools

TLDR

docker-compose is used for all backend services, and can be started with the make docker-compose command. This will start a couple of services:

  1. EchoService on port :8080
    • This is a service that will return a "hello " and can be invoked with
    • grpcurl --plaintext -d '{"message":" memesters"}' localhost:8080 itproject.EchoService/Echo
  2. Authenticate service
    • Service on :443, can be invoked with
    • docker run --rm joshcarp/grpcurl -d '{"email": "Hello", "password": "123", "userid": "123" }' --plaintext host.docker.internal:443 itproject.authenticate/Register
  3. envoy proxy
    • This proxy converts http 1 to http 2 messages, and forwards onto the Authenticate and EchoService

Frontend Development

Create-React-App (CRA)

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

react-router-dom is used for routing.

simply run command yarn start in frontend folder of project to run local environment.

Invoking from react

  1. This is an example of how to invoke the authenticate service from react
Registration 
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'
const {RegisterRequest} = require('./proto/api_pb.js'); // request object
const {authenticateClient} = require('./proto/api_grpc_web_pb.js'); // client
const auth = new authenticateClient('http://localhost:8081'); // envoy proxy


function Register() {
    const [message, setMessage] = useState("initial value")
    var request = new RegisterRequest();
    request.setUserid(" memesters")
    request.setEmail(" memesters")
    request.setFullname(" memesters")
    request.setPreferredname(" memesters")
    auth.register(request, {}, function (err, response) {
        console.log(response.getJwt())
        setMessage(response.getJwt())
    })
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    {message.toString()}
                </p>
            </header>
        </div>
    );
}


export default Register;
Login
  • The Login request does not have any field, but it is meant to use Basic authentication in the header: see details here 
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'
const {LoginRequest} = require('./proto/api_pb.js'); // Import the login request
const {authenticateClient} = require('./proto/api_grpc_web_pb.js'); // import the client
const auth = new authenticateClient('http://localhost:8081'); // initialise the client and point it at the envoy proxy


function Login() {
    const [message, setMessage] = useState("initial value")
    var request = new LoginRequest();
    var meta = {'authorization': "Basic "+window.btoa('memes')+':'+window.btoa('more_memes')} // Basic authentication: "Bearer 3847fhw:9834f="
    auth.login(request, meta, function (err, response) { // callback function
        console.log(response.getJwt()) // retrieve the JWT
        setMessage(response.getJwt())
    })
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    {message.toString()}
                </p>
            </header>
        </div>
    );
}


export default Login;

Double requests in react

  • I've found that react sends double requests when these pages first load, so the second request will get an error

Backend Development

The stack for the backend is: - implemented in go - gRPC for api specification - cloud run and cloud sql for the database

Clone this wiki locally