uatisdeproblem / egm-app Goto Github PK
View Code? Open in Web Editor NEWEGM app
Home Page: https://app.erasmusgeneration.org
License: Other
EGM app
Home Page: https://app.erasmusgeneration.org
License: Other
As a participant, Iβd like to upload my CV to add it to my profile, so that companies can see it when they connect with me.
The previous QR code scanning configuration wasn't stable enough, therefore we switched to another "pairing" mechanism for managing connections. We are running out of time, so we needed something that could work correctly as of now.
It would be nice though to find a solution to manage this behaviour with QR codes as originally planned.
Here's some useful code already implemented.
The QR code generation-part is stable:
import QRCode from 'qrcode.react';
// ...
<QRCode value={profile.userId} size={200} />
whereas we have to fix the QR scanning part, because it requires the QR code to be perfectly aligned in the camera and it's not working all the time:
import { Html5QrcodeScanner } from 'html5-qrcode';
import React from 'react';
const qrcodeRegionId = 'html5qr-code-full-region';
class Html5QrcodePlugin extends React.Component {
render() {
return <div id={qrcodeRegionId} />;
}
componentWillUnmount() {
// TODO(mebjas): See if there is a better way to handle
// promise in `componentWillUnmount`.
this.html5QrcodeScanner.clear().catch(error => {
console.error('Failed to clear html5QrcodeScanner. ', error);
});
}
componentDidMount() {
// Creates the configuration object for Html5QrcodeScanner.
function createConfig(props) {
var config = {};
if (props.fps) {
config.fps = props.fps;
}
if (props.qrbox) {
config.qrbox = props.qrbox;
}
if (props.aspectRatio) {
config.aspectRatio = props.aspectRatio;
}
if (props.disableFlip !== undefined) {
config.disableFlip = props.disableFlip;
}
return config;
}
var config = createConfig(this.props);
var verbose = this.props.verbose === true;
// Suceess callback is required.
if (!this.props.qrCodeSuccessCallback) {
console.error('qrCodeSuccessCallback is required callback.');
}
this.html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
this.html5QrcodeScanner.render(this.props.qrCodeSuccessCallback, this.props.qrCodeErrorCallback);
}
}
export default Html5QrcodePlugin;
import Html5QrcodePlugin from './HTML5QRCodeReader';
import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonPage, IonToolbar } from '@ionic/react';
import { close } from 'ionicons/icons';
interface ContainerProps {
onDismiss: () => void;
}
const AddConnection: React.FC<ContainerProps> = ({ onDismiss }) => {
const qrCodeSuccessCallback = (data: any) => {
console.log('much success', data);
};
const qrCodeErrorCallback = (error: any) => {
console.log('oh no', error);
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={onDismiss}>
<IonIcon icon={close}></IonIcon>
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<Html5QrcodePlugin qrCodeSuccessCallback={qrCodeSuccessCallback} qrCodeErrorCallback={qrCodeErrorCallback} />
</IonContent>
</IonPage>
);
};
export default AddConnection;
Feel free to change the libraries or any support tool needed.
From #7.
As a participant, I'd like to create my profile/portfolio to showcase my skills to partners and some brief information about me to other participants.
utils/languages.tsx
.utils/fieldsOfStudy.tsx
; note: it's an enum field.All the fields are optional.
The fields should be organized in different sections, divided by an item-divider (see the Profile page for an example):
Note: take a look how the current profile fields are set, to ensure they are saved and read correctly.
As a participant, I'd like to see an introduction to the event and the app capabilities (menu) to make sense of the app.
Suggestion: make use of Intro.js: it provides you an easy way to implement this issue; otherwise, use/build the tool you prefer!
Feel free to include any information you think is useful. π
The final result should look something like the following (highlighting and explaining the sections listed above):
As a user, I'd like to be able to see all relevant documents associated to the event.
@uatisdeproblem Adel has requested me this, saying to base it off of the GA app's page with the same name. Does the GA app support inserting new links through the UI?
As a participant, I'd like to display my social card, so that other participants can connect with me and acquire my contact information.
As a participant, I'd like to see the participants connected to me, to access their contact information.
Here's what (I believe) is missing from the event spots management. I will work on it this weekend.
idea-select
to pick user β confirmation alert β email.idea-select
to pick country β confirmation alert β no emailTurn into single-selection mode (they are all single-user actions).
idea-select
to pick spot β confirmation alert β email.@todo
. @rbento1096All the pickers (ion-select
) currently available could be improved to support filtering; this is useful, especially, for long lists (such as languages, ESN sections, fields of expertise, speakers, etc.).
Two possible solutions:
An example of the component for solution 2. which we created for Angular projects:
The solution should then be implemented to all the current <ion-select>
pickers in the app.
Instead of using the console of Cognito, allow an administrator to add/remove other administrators directly in the app.
With the current React app as a base, refactor the current code base to use the Angular framework.
To-Dos
environments.ts
swagger.yaml
Well-known issue: ionic-team/ionic-framework#23863.
Use the useIonModal
hook instead of inline modals.
As a participant, I'd like to know how to reach and what is happening in a specific venue of the event, to orient myself content-wise and location-wise
Starting point: the Venue page already implemented.
In the Map page:
to investigate: Find a way to make the process automatic.
Ask programme chair how the session proposal/approval is currently being done and investigate the feasability of doing it in-app
As a participant, I'd like to know more about a speaker and how to contact him
Starting point: the Speaker page already implemented.
mailto:${speaker.contactEmail}?subject=EGM%20contact%20request
As a Participant, I'd like to have an option to show/hide past Sessions among my favourite ones, to have a clearer view of what's still about to happen.
As a participant, I'd like to be able to chat with other participants I connected to.
The buttons are working correctly but they're still missing a link to the user's social media.
Ideally they should also be able to open the user's app instead of a new browser tab
possibly relates to #35
To be discussed with the IB/CT and Gorka. The plan is to substitute ERS as the platform to handle all event registrations.
Required features and requirements will be discussed on a future meeting.
So far we know we will need:
The user isn't able to interact with the Auth UI when navigating with Safari in the latest versions of iOS.
In particular, you cannot type anything inside the input fields: they seem to lose focus continuously.
As a participant, I'd like to interact with a map of the venues to orient myself through all the event's activities.
As a partner, I'd like to have my business profile to let the participants know about my mission and job opportunities.
Starting point: the Organization page already implemented.
mailto:${organization.contactEmail}?subject=EGM%20contact%20request
.In the Speaker page:
As a user, I'd like to have a role so that I can have access to different functionality I need.
As a participant, I'd like to notify an organization that I'm interested in working/collaborating with them and send my contact information so that they can contact me back.
contactEmail
address of the organization, with included/attached the information selected. The email will have a pre-defined subject and content. (@uatisdeproblem can help you with this!)As a partner, Iβd like to connect with participants that are interested in my job opportunities, to exchange contact information.
Continue from #29.
As a participant, I'd like to request the acceptance of a connection ("become friends") to other participants, to exchange contacts.
Note: to avoid over-complicating, we won't include a chat component inside the app. Instead, we will let the users share each other's contact information, to communicate outside the app (e.g. on WhatsApp, Telegram, Facebook, Instagram, etc. β depending on #25).
Note 2: to maintain a basic level of privacy, and to enable a social component (explained at the bottom) during the event, it won't be possible to search through the participants of the event. Instead, you will need a QR code or link to "become friends" of a participant and exchange contact information.
The user story is implemented in several parts:
As an extra, we could plan (prized?) game to award the participant that will make more connections before the end of the event). Gotta catch'em all!
As a user, I'd like to see a map on the app so that I can see where the venues are located, set custom waypoints and check local suggested places by the OC
As a Participant, I'd like to search for other Participants and send them Connection requests (without the use of QR codes or similar approaches), to access their contacts and enrich my Connections list.
Alternative to #39, which has been proved difficult to handle without deploying the app natively (through Ionic Capacitor).
As a participant, I'd like to add an appreciation thought to a feed, to spread love during the event.
Nice-to-have feature.
Abstract: a new tab "" will allow users to read other participants' appreciation thoughts throughout the event. It will be something similar to a big, common chat. Each participant can post one appreciation per hour (or a similar limit, to prevent spam). All the participants can add a "like" to an existing appreciation, which will power up a counter displayed with the appreciation entry. The general idea is to spread and promote positive thoughts during the event. There should be some "moderator" feature to delete inappropriate messages and block users from posting again. It could be fun!
Add event statistics (such as number of different nationalities, total sessions, participants, etc...) users can see. Additionally create badges when users reach certain landmarks to improve engagement (i.e. attended x sessions, met people from all nationalities, etc...). To discuss with team
As a Participant, I'd like to add the links to my social media accounts in my profile, to let the other participants find me on the internet.
As a member of the OC, I'd like to check for Participants' lunch tickets in the app, to avoid printing paper tokens.
By Sara (logistics).
Currently, anyone could register (with one or more accounts) to the EGM app. Hence, this could happen:
Another issue: if I name the second profile βMatteo Smithβ, how can the OC double-check it is an existing Participant? It could be extra work for the OC, compared with physical (paper) tickets -- that you "blindly accept".
To overcome the above-mentioned issues, we need to find a way to univocally authorize the lunch tickets and link them to a specific Participant's app account. We thought about two solutions (each of them with its own pro and cons):
a. During the check-in/registration on the first day of the event, we assign a "lunch code" (that we previously generated -- one for each Participant); e.g. ABCDE123
. The Participant will then have an option in the app to add this code and link the lunch capability to a specific app account.
b. During the check-in/registration on the first day of the event, the Participants have already an account in the app, and the OC member simply assigns them a lunch code (digitally) through a specific procedure in the app.
With both the solutions, once the lunch tickets are linked to the Participant's app account:
Certain participants (from any role) can also be speakers at the conference.
As participant, I'd like to login with my ESN account so that I don't have to keep track of which emails I am using, rendering the experience easier.
As a participant, I would like to add a custom location in the map, to mark my hotel/apartment, so that I can easily reach it and see where it is, compared to the other venues.
As a participant, I'd like to have a feed with all the important communications related to the event, so that I don't have to get searching elsewhere.
communicationId: string
,title: string
,content: string
,publishedAt: ISOTimestamp
,imageURI: string
.utils/data.tsx
to communicate with resources of this new entity. (@uatisdeproblem can help you with that)ManageEntityPage
, where they will be able to add/edit/delete a communication.As a participant, I'd like to interact with the event's agenda to know where I could go and at which time.
As a participant, I'd like to connect with other users to get their information and enrich my connections/friends list.
As as a user, I'd like to receive notifications on my mobile so that I can know the latest news and be reminded of time-sensitive topics (i.e. a session is about to start, a session room has been changed, etc...)
As a user with permissions to view the user list (DL, OC, Admin...) I want to be able to export the users' registration data to a csv/excel file
There will be a specific platform for the Mobility Fair, hosted by Talent Portugal (link). Therefore, it won't be necessary anymore to have a specific feature in-app to handle the contact between a Participant and an Organization (sorry, Bento π₯²).
After a meeting with Joli, we contacted Talent Portugal (TP) to ask them for the link to the profiles of the companies participating in the fair. In the app, we only need to change the current behaviour of the button "I'd like to get in contact": instead of sending an email, the button should just open the browser towards the company's profile on TP's platform.
When TP will confirm the links, we will complete this change within the app.
This issue serves the purpose to list all current ideas proposed for the app. Some need to be discussed better with OC/IB, others need a technical analysis, others will be ready to add to the timeline.
It would be nice to have a button for each social media app to automatically fill in their respective fields with the user's links instead of having to manually copy and paste the info.
There is probably an API already for this
As a participant, I'd like to star (flag) events in the agenda to create my own personalized timetable.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.