Example application: Multi user real-time Todo list is an Jexia's Real Time Communication application using Angular CLI version 8.3.8. and material design.
- Material Design components for Angular
- Jexia:
- Project integration
- Dataset CRUD operations
- Authentication service
- Real Time Communication
| Name | Description | |
|---|---|---|
| [@angular/cdk] | Angular Material Component Development Kit | 🎨 |
| [@angular/material] | Angular Material | 🎨 |
| [@fortawesome/angular-fontawesome] | The iconic font, CSS, and SVG framework | 🎨 |
| [@fortawesome/fontawesome-svg-core] | Angular Fontawesome, an Angular library | 🎨 |
| [@fortawesome/free-solid-svg-icons] | The iconic font, CSS, and SVG framework | 🎨 |
| [bootstrap] | The most popular front-end framework for developing responsive, mobile first projects on the web. | 📱 |
| [hammerjs] | A javascript library for multi-touch gestures | 📚 |
| [jexia-sdk-js] | Awesome Jexia Javascript SDK | 🐝 |
| [jquery] | JavaScript library for DOM operations | 📚 |
| [lodash-es] | Lodash exported as ES modules. | 🛠️ |
| [moment] | Parse, validate, manipulate, and display dates | 📅 |
| [ngx-moment] | Moment.JS pipes for Angular (timeago and more) | 🛠️ |
| [ngx-socket-io] | Socket.IO module for Angular | 🛠️ |
| [node-fetch] | A light-weight module that brings window.fetch to node.js | 🛠️ |
| [popper.js] | A kickass library to manage your poppers | 🛠️ |
| [process] | process information for node.js and browsers | 🛠️ |
| [ws] | Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js | 🛠️ |
| Name | Description | |
|---|---|---|
| [@types/lodash-es] | TypeScript definitions for lodash-es | 📚 |
git clone [email protected]:jexia/multiuser-realtime-todolist.git
cd multiuser-realtime-todolist
npm install
1. Create project
2. Create dataset named [todos] with these fields:
[
{
"field_name": "todo",
"field_type": "string",
"is_required": "true"
},
{
"field_name": "order",
"field_type": "integer",
"is_required": "true"
},
{
"field_name": "completed",
"field_type": "boolean",
"is_required": "true"
},
{
"field_name": "due",
"field_type": "date",
"is_required": "false"
},
{
"field_name": "user_id",
"field_type": "string",
"is_required": "false"
}
]
3. Create dataset named [users] with these fields:
[
{
"field_name": "user_id",
"field_type": "string",
"is_required": "true"
},
{
"field_name": "first_name",
"field_type": "string",
"is_required": "true"
},
{
"field_name": "last_name",
"field_type": "string",
"is_required": "true"
}
]
4. Create RTC channel named [todo]
5. Create API-key
6. Create CRUD policy for all users and all datasets
7. Update [/multiuser-realtime-todolist/src/environments/environment.prod.ts] with your project-id, API-key and API-secret:
export const environment = {
production: true,
jexia: {
projectID: 'your-project-id',
projectURL: 'https://your-project-id.app.jexia.com',
wsURL: 'wss://your-project-id.app.jexia.com/rtc',
key: 'your-API-key',
secret: 'your-API-secret'
}
};
8. Do the same for [environment.ts]
npm run serve
npm run build
npm run lint
MIT © jexia