Forums

OverviewV-Play 2 Support (Qt 5) › Calendar Booking App

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #19157

    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

    #19159

    Günther
    V-Play 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 V-Play 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://v-play.net/doc/plugin-firebase/#realtime-database-vs-v-play-webstorage

    Best,
    Günther

    #19162

    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!

    #19171

    Günther
    V-Play 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

    #19212

    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

    #19222

    Günther
    V-Play 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 V-Play

     

    #19223

    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!

    #19228

    Günther
    V-Play 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 V-Play Indie).

    Best,
    Günther

    #19229

    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 :)

     

    #19232

    Günther
    V-Play Team

    The V-Play Game Network is the more pre-configured and easy-to-use solution by V-Play. 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 V-Play 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 V-Play Plugin Demo also includes a Firebase Authentication example with user registration.

    Happy to help 😉

    Best,
    Günther

    #19233

    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!)

     

    #19234

    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 VPlayApps 1.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"
                            }
                        }
                    }
                }
            }
        }
    
    }
    

     

    #19252

    Günther
    V-Play Team

    Hi Edward,

    while Firebase is definitely more powerful, you can also implement your database with the V-Play 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. V-Play Indie). Just get in touch at support@v-play.net 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

     

Viewing 13 posts - 1 through 13 (of 13 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support