[Edward]

Hi,

I am considering taking up a side project,

The main concept of the app would be a calendar view, which would be viewable past and future months/years, used by approx 30/40 unique user accounts, (with different sections for user profiles) each user has the ability to select a day, which is viewable to other users (but not editable), with ~3 admin accounts which can lock these days into the calendar to make others aware when avaliable, I am currently unsure of what would be the best approach to do this before i get started and potentially head in the wrong direction….

What would you suggest as a good base for this?

 

Thanks 🙂

Edward

[GüntherFelgo Team]

Hi Edward,

so basically the system shows the available dates for each user, and a few admins can lock/choose certain dates for e.g. some event/meeting?

UI-wise, I would recommend to think about how you want users to work with the app (aimed at your main use-cases), and then decide for a layout which supports that and is easy to work with.

In terms of technical capabilities you will require user accounts and roles and some way of managing selected dates. For these features, you can rely on

• the Felgo Game Network (includes user accounts and a simple cloud storage)
• or Google Firebase (via the Firebase Plugin, it supports user accounts and realtime database)

About which one to choose, the Firebase Plugin docs also contain a section about Realtime Database vs Web Storage: https://felgo.com/doc/plugin-firebase/#realtime-database-vs-v-play-webstorage

Best,
Günther

[Edward]

Hi!

the admin/s would ‘approve’ days, each user can select days which they request as they please, almost like when booking a hotel you choose the dates you want, the days are then held in suspension until approved by admins, thus notifying users that the day has been locked in for them!? If that makes sense??

I will get reading the firebase doc attached!

 

Thanks!

[GüntherFelgo Team]

Hi, yes it does make sense.

So the main data your app requires to manage are the reserved dates, which are either unapproved or approved/locked. Every user can add dates, but only admins can approve them.

For storing the dates and their status, you can use e.g. Firebase Database or the Game Network Web Storage.

Best,
Günther

[Edward]

Hi Günther,

 

After reading info I have decided to go with Game Network Web Storage,

Do you have any docs (struggling to find one) or pointers in the best way to set up my database to handle requests?

Or adding user account creations to database?

I want an email to go to admins on requests sent and then an email to users on accept/decline from a chosen email also.

 

Thanks,

Edward

[GüntherFelgo Team]

Hi Edward!

The WebStorage does not directly handle complex data structures or queries. It is an easy to use key-value based storage. You can store JSON data structures using string serialization – which you can full access and filter in your QML/JS code after loading.
Email messaging is not supported by the game network services, so you’ll have to cover this part with a custom mail service.

Best,
Günther from Felgo

 

[Edward]

Thanks,

To replace e-mail messaging could i use the in-app chat functionality for this purpose? Admins get a driect message auto sent to them once the request is saved?

Also I am trying to set up the new user login, on initial launch i don’t want the game network to assign name i.e “player(12345)”, i want the app to request First Name, Surname, Department, E-mail & Password (for multi-device use purposes)- to be added to my webstorage database, how could i create this instance?

I have looked at your basic login page but this only simulates login, my main focus is to allow user creation, and if account not created i get an error when logging in?

 

Thanks

Edward!

[GüntherFelgo Team]

Yes, you can use in-app chat features. However, these messages are only in-app, so to notify your admins with push-notifications when a chat messages comes the OneSignal plugin is required (available with Felgo Indie).

Best,
Günther

[Edward]

Amazing!

push-notifications is a must, i was going to move to Indie sub but closer to the end of my development process for this app to allow for features such as that!

 

Sorry to be a pain but i am really struggling with the user-login as mentioned above, is there any docs/example on creating a user login instance on startup and registering to database for future login over multiple devices?

 

Thanks

Edd 🙂

 

[GüntherFelgo Team]

The Felgo Game Network is the more pre-configured and easy-to-use solution by Felgo. When using the VPGN there’s no actual registration process required. Each user that installs your app automatically get’s their own user account (bound to the device). When combining the Game Network with the Facebook Plugin, users can log-in via Facebook to e.g. synchronize the account and data over multiple devices. This integration is also quite simple, as it’s handled internally by the Game Network component. For app-related use-cases, the SocialView offers the most easy-to-use default UI for Game Network integration.

If you are going to use Felgo Indie (e.g. for Facebook/OneSignal), you can also give the Firebase solution another thought. It’s a bit more complex but offers more features database-wise. The Felgo Plugin Demo also includes a Firebase Authentication example with user registration.

Happy to help 😉

Best,
Günther

[Edward]

I may need to look back into Firebase – i will need to seperate users as following for my app purpose, would you reccomend Firebase for the following;

The app (Database also) to start will initally hold 6 individual groups (with more to add in the future), each group has access to it’s own calendar for thier users/admin only, when each group has sub groups, which users are assigned too, requests and booked days from each group/subgroup are only viewable by them, not other parent groups.

This is why i wanted the forced login/registration to select which group you are part of and be appropriately assigned! When you log in to your account it loads the appropriate calendar for yourself!?

Would Firebase be the best was the implement that?

If this is equally as doable with VPlay i would rather keep it all in-house with Indie Facebook/OneSignal – just want to start on the right path instead of loosing a lot of time doing the wrong thing!

Thanks!!

 

(Just trying to get as much info for my weekends work haha!)

 

[Edward]

***UPDATE***

 

I have my desired Calendar layout, (attached code)

I was wondering the possibility of;

1. Past days are changed to a colour so it’s visually obvious it’s in the past
2. The  eventListView will show the other users who currently have this day booked
3. The page currently loads straight into todays month/date, I would like it to load into a month by month grid, where you select the month to view/book days OR add left/right swipe option to quickly move through months?

How could I go about this?

 

import Felgo 3.0
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1
import QtQuick.Controls.Private 1.0



Page {

    title: "TEST2"

    rightBarItem: NavigationBarItem {
      contentWidth: saveButton.width

      AppButton {
          id: saveButton
          text: "Save & Request"
          anchors.right: parent.right
      }
    }


    SystemPalette {
        id: systemPalette
    }

    Flow {
        id: row
        anchors.fill: parent
        spacing: 10
        layoutDirection: "RightToLeft"
        Calendar {
            id: calendar
            width: (parent.width > parent.height ? parent.width * 0.6 - parent.spacing : parent.width)
            height: (parent.height > parent.width ? parent.height * 0.6 - parent.spacing : parent.height)
            selectedDate: new Date()
            focus: true


           style: CalendarStyle {
               dayDelegate: Item {
                   readonly property color sameMonthDateTextColor: "#444"
                   readonly property color selectedDateColor: Qt.platformos === "osx" ? "#3778d0" : systemPalette.highlight
                   readonly property color selectedDateTextColor: "white"
                   readonly property color differentMonthDateTextColor: "#bbb"
                   readonly property color invalidDatecolor: "#dddddd"

                   Rectangle {
                       anchors.fill: parent
                       border.color: "#00000000"
                       color: styleData.date !== undefined && styleData.selected? selectedDateColor : "#00000000"
                       anchors.margins: styleData.selected ? -1 : 0
                   }

                   Label {
                       id: dayDelegateText
                       text: styleData.date.getDate()
                       anchors.centerIn: parent
                       color:  {
                           var color = invalidDatecolor;
                           if (styleData.valid) {
                               color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor ;
                               if (styleData.selected) {
                                   color = selectedDateTextColor;
                               }
                           }
                           color ;
                       }
                   }
               }

           }

        }

        Component {
            id: eventListHeader

            Row {
                id: eventDateRow
                width: parent.width
                height: eventDayLabel.height
                spacing: 10

                Label {
                    id: eventDayLabel
                    text: calendar.selectedDate.getDate()
                    font.pointSize: 35
                }
                Column {
                    height: eventDayLabel.height

                    Label {
                        readonly property var options: { weekday: "long" }
                        text: Qt.locale().standaloneDayName(calendar.selectedDate.getDay(), Locale.LongFormat)
                        font.pointSize: 18
                    }
                    Label {
                        text: Qt.locale().standaloneMonthName(calendar.selectedDate.getMonth())
                              + calendar.selectedDate.toLocaleDateString(Qt.locale(), " yyyy")
                        font.pointSize: 12
                    }
                }
            }
        }
        Rectangle {
            width: (parent.width > parent.height ? parent.width * 0.4 - parent.spacing : parent.width)
            height: (parent.height > parent.width ? parent.height * 0.4 - parent.spacing : parent.height)

            ListView {
                id:eventListView
                spacing: 4
                clip: true
                header: eventListHeader
                anchors.fill: parent
                anchors.margins: 10
                model: eventModel.eventsForDate(calendar.selectedDate)

                delegate: Rectangle {
                    width: eventListView.width
                    height: eventItemColumn.height
                    anchors.horizontalCenter: parent.horizontalCenter

                    Image {
                        anchors.top: parent.top
                        anchors.topMargin: 4
                        width: 12
                        height: width
                        source: "qrc:/images/eventindicator.png"
                    }
                    Rectangle {
                        width: parent.width
                        height: 1
                        color: "#eee"
                    }
                    Column {
                        id: eventItemColumn
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.right: parent.right
                        height: timeLabel.height + nameLabel.height + 8

                        Label {
                            id: nameLabel
                            width: parent.width
                            wrapMode: Text.Wrap
                            text: modelData.name
                        }
                        Label {
                            id: timeLabel
                            width: parent.width
                            wrapMode: Text.Wrap
                            text: modelData.startDate.toLocaleTimeString(calendar.locale, Locale.ShortFormat)
                            color: "#aaa"
                        }
                    }
                }
            }
        }
    }

}

 

[GüntherFelgo Team]

Hi Edward,

while Firebase is definitely more powerful, you can also implement your database with the Felgo services. For both systems, you have to first design your JSON-based database structure in a meaningful way, which works for you use-case.

As your use-case is actually a shared calendar, there might also be existing calendar services you can rely on instead of handling things on your own. Not sure though what’s available out there and what would be a good fit. Also integration of such services is also some work, so it’s really up to you which technical approach “feels right”.

We can also help with planning, development or publishing for your app with the purchase of a support package (one hour of support is also included with e.g. Felgo Indie). Just get in touch at support@felgo.com if this is interesting for you.

About your recent questions:

1. Past days are changed to a colour so it’s visually obvious it’s in the past
   -> You can use the JS Date object and features to work with dates and times. If you determine that a day is in the past, you can dynamically change the color with e.g. a property binding.
2. The page currently loads straight into todays month/date, I would like it to load into a month by month grid, where you select the month to view/book days OR add left/right swipe option to quickly move through months?
   -> You can have a look at the QML Layout types, like: Grid, Row, Column, GridLayout, etc …

Best,
Günther