Development of CRM system with a mobileapplication for a schoolNataliia I. Cheboksarova1 , Tetiana A. Vakaliuk1,2,3 and Iurii M. Iefremov11Zhytomyr Polytechnic State University, 103 Chudnivsyka Str., Zhytomyr, 10005, UkraineInstitute of Information Technologies and Learning Tools of the NAES of Ukraine, 9 M. Berlynskoho Str., Kyiv, 04060,Ukraine3Kryvyi Rih State Pedagogical University, 54 Gagarin Ave., Kryvyi Rih, 50086, Ukraine2AbstractThe article substantiates the need to develop a CRM system with a mobile application for a school. Theexistence of their educational environment, which will provide interaction between pupil and teacherin a school, is a topical issue today. Relationship management can be implemented in the form of aCRM system. For a deeper understanding of the research problem, certain analogs are considered, theiradvantages and disadvantages are given. The work aims to design and develop a CRM system with amobile, cross-platform, application for a school. As a result, the architecture of the software packagewas built, the choice of tools was substantiated, the use and structure of the system were determined,the object-oriented structure of the system was designed, the data storage structure was developed, thesystem operation algorithms were designed and implemented, the system installation and administrationprocedure the procedure for working with the software package.KeywordsCRM system, mobile application, school, learning environment, development1. IntroductionOne of the main issues in the management of educational institutions, including schools, is toincrease the level of educational and methodological work of a particular institution. A digitaleducational platform would allow the effective use of available educational institution resources,and students and teachers would be allowed to use modern technologies in practice.The main advantages of such technologies are: performing various types of educational work,control, and evaluation of knowledge online; open learning environment for subjects of theeducational process, etc. All this leads to the fact that the use of various digital technologiesprovides an opportunity to: keep electronic journals; use online services for the learning process;conduct correspondence, testing, and assessment of knowledge online; communication, [email protected] 2021: 4th Workshop for Young Scientists in Computer Science & Software Engineering, December 18, 2021,Kryvyi Rih, Ukraine" [email protected] (N. I. Cheboksarova); [email protected] (T. A. Vakaliuk);[email protected] (I. M. Iefremov) (T. A. Vakaliuk) 0000-0001-6517-6048 (N. I. Cheboksarova); 0000-0001-6825-4697 (T. A. Vakaliuk); 0000-0002-1249-5560(I. M. Iefremov) 2022 Copyright for this paper by its authors.Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0).CEURWorkshopProceedingshttp://ceur-ws.orgISSN 1613-0073CEUR Workshop Proceedings (

Given the pace of modern life, many people seek to save their time by using mobile applications. But at the beginning of their design, there is a choice: to choose a ready cross-platformframework or to develop separate applications for each end platform. Both solutions have theirdisadvantages and advantages. For example, cross-platform solutions significantly speed up thedevelopment process, because they meet the principle: deliver - as much as necessary and writeonce. And native applications have much faster performance than universal ones. However,they require separate construction of interfaces and writing application functionality for eachof the platforms.The existence of their educational environment, which will provide interaction betweenstudent and teacher in a school, is a topical issue today. Relationship management can beimplemented in the form of a CRM system.CRM (Customer Relationship Management) is literally means “customer relationship management and refers to all strategies, methods, tools, and technologies used by business to develop,retain and attract customers” [1].2. Theoretical backgroundIn recent years, many studies by various scholars have focused on the design and use of thedigital learning environment [2, 3, 4, 5, 6]. In particular, Uchitel et al. [7] considered theimplementation of future agricultural engineers’ training technology in the informationaland educational environment. Munk et al. [8] researched cloud-based educational platforms,Vlasenko et al. [9] raised the issue of management of online platform development and supportprocess.Sultanova et al. [10] investigated the potential of Google Classroom web service for lecturersof higher educational establishments under pandemic conditions, Shyshkina [11] proposedservice models of the cloud-based learning environment of the educational institution, Popeland Shyshkina [12] researched the areas of educational studies of the cloud-based learningsystems.Soroko et al. [13] considered educational electronic platforms for STEAM-oriented learningenvironment at general education school, Osadcha et al. [14] conducted the review of theadaptive learning systems for the formation of individual educational trajectory.Some scholars have attempted to analyze the possibilities of integrating business simulationssoftware into the learning environment of technical university [15]. In addition, Vakaliuk et al.[16, 17] considered it appropriate to research the state of ICT implementation in institutions ofgeneral secondary education.3. Related workFor a deeper understanding of the research problem, consider certain analogs, in particular, theapplication “School – Learning Assistant”, the interface of which is presented in figure 1. In thisfigure, it is possible to view the list of classes for a specific day, the schedule of the week, andthe list of added information about other students and teachers.45

Figure 1: School application interface – Learning Assistant.Analyzing the application revealed significant shortcomings, in particular: the lack of abilityto specify the exact time of class and make the so-called “windows” (because it is not alwaysnecessary for all classes to take place one after another), lack of functionality designed onlyfor teachers, and no the possibility of interaction between teacher and student, in addition, thestudent must enter all the information about the lesson, schedule, classmates themselves.Among the advantages are the convenience of viewing the schedule for the week, the abilityto save homework, save information about classmates. You can also note the intuitive interface,so understanding the work of the application was quite easy.Next, we will consider the application ElZhur.Uchitel. The purpose of this appendix is ajournal for the teacher, which shows a list of subjects and the journal of student assessments(figure 2).A significant disadvantage is that the journal is designed only for the teacher and its dataare not displayed to students. In general, there is no functionality for students, so, as in theprevious application, there is no interaction between users.Among the advantages can highlight the convenient division of the list of the magazine intoacademic quarters, as well as the calculation of the average score. It was also appropriate to useone color scheme and conciseness of the whole design.Next, consider the application Weeklie. After analyzing the application, significant shortcomings were identified, including the lack of educational material on using the applicationwith such functionality, the lack of functionality designed only for the teacher, and the lack ofinteraction between teacher and student, in addition, the student must enter all informationabout classes, schedules. Functionality is not enough for easy use.46

Figure 2: The interface of the application ElZhur.Uchitel.Among the advantages is the ability to specify the exact time of the lesson, the ability to savehomework, user notification system (figure 3) is a CRM system for educational institutions, including schools, that allowsyou to perform the following functions: individual and group classes, view lesson schedules,keep a log of visits, homework, and grades, students ’birthdays, students’ accounts, downloadsdocuments, financial accounting, reports on various forms of work, mobile version, etc (figure 4) is the CRM system for educational institutions. This is a system for automatingthe work of various educational institutions. CRM is a convenient set of tools for all actors in theeducational process: students, teachers, school leaders, etc. This system provides the followingfeatures: viewing class schedules, video communication, automatic creation of student rankingsbased on analysis of attendance and performance, maintaining digital documentation of theschool, integration with special systems for online testing of students (figure 5).After getting acquainted with the analogs and their analysis, we can conclude that eachsoftware application is significantly different from its competitors.The biggest disadvantage of all the above applications is the lack of interaction betweenstudents and teachers. All data is stored locally by the user and does not affect the system asa whole. Benefits include easy to use schedules, track homework, alert system, and statisticscollection.The work aims to design and develop a CRM system with a mobile, cross-platform, applicationfor a school.47

Figure 3: Weeklie application interface.4. Results4.1. Construction of software architectureThe application architecture can be considered the foundation that holds everything togetherand supports the codebase as it grows. If you have a good foundation, it becomes easier tomake changes and add new things. The architecture uses design templates to solve problemseffectively. Therefore, it is necessary to choose the design templates that best suit the problemto be solved.Client-server architecture is the dominant technology in the creation of distributed networkapplications. It provides data exchange and interaction between developed software products.Client-server architecture can be defined as the concept of an information network in which thebulk of its resources are concentrated in servers serving their clients. The model of client-serverinteraction is determined primarily by the division of responsibilities between the client andthe server.Clients and servers of this architecture operate in parallel and are independent of each other.More than typical is the situation when one server simultaneously processes requests fromdifferent clients; on the other hand, the client can access one server or another. Clients need toknow about available servers but may have no idea about the existence of other clients.48

Figure 4: Moyklass application interface.The advantages of this architecture include the reduction of the load on the client, which, inturn, leads to a reduction in the cost of the system and reduce the requirements for hardwareand software of clients. Logically, we can distinguish three levels of operations: the level ofdata representation, which, in essence, is a user interface and is responsible for presenting datato the user and the input of control commands from him; application level, which implementsthe basic logic of the application and at which the necessary information processing; level ofdata management, which provides data storage and access to them.If it is not possible to identify a good architecture, the developer does not have clear agreements on how to structure the application. The lack of composite components leads to theappearance of code that has many dependencies. This type of code is difficult to understand.Adding new features becomes problematic, and it’s not even clear where the new code shouldgo.Some other potential problems are also common: The application has many variables, which complicates the knowledge of which widgetsare rebuilt and when. It is unclear when certain variables may or may not be null because they are passedthrough multiple widgets.All of these issues can significantly slow development and nullify the performance benefitsthat are common to Flutter.In figure 6 shows a diagram of the architecture. Dotted horizontal lines define clear layers of49

Figure 5: application interface.the application. This comes down to the single responsibility principle: each component in theapplication must do only one.The following patterns can be used to separate business logic: MVC (Model View Controller);MVVM (Model View ViewModel); BLoC (Business Logic Component); MVP (Model ViewPresenter) [18].This system is event-oriented, so the MVC pattern is not entirely appropriate. Because theView component will create events to which the Controller component must respond. And this,in turn, violates the concept of the pattern, because the View component should not affect theController. In addition, there are more appropriate patterns for such tasks.MVVM consists of three components: models, presentation models, and presentations. Thispattern is quite common in the design of mobile applications, which is quite justified because itis quite easy to use. MVVM is convenient to use instead of the classic MVC and the like in caseswhere the platform where the development is, there is a “data binding”. The MVVM architecturehas a clear division of responsibilities. Functional connections between the user interface andthe ViewModel are implemented through bindings, which are essentially rules such as “if the Abutton was pressed, the onButtonAClick() method of the ViewModel must be called”. Bandagescan be written in code or defined declaratively [18].BLoC (figure 7) is a pattern quite similar to popular solutions for mobile devices, such asMVP or MVVM.It separates the level of presentation from the rules of business logic. This is a direct applicationof the declarative approach that Flutter emphasizes, ie 𝑈 𝐼 𝑓 (𝑠𝑡𝑎𝑡𝑒). BLoC is where events50

Figure 6: Diagram showing the architecture for Flutter & Firebase.from the user interface go. Within this level, as a result of applying business rules to a givenevent, BLoC responds to a certain state, which then returns to the user interface. When thepresentation level receives a new state, it restores its appearance following what the currentstate requires [18, 19].MVP is a design template derived from MVC that separates the visual display and behaviorof event processing into different classes, namely: View and Presenter. It is most often usedfor logically simple representations, but because most complex representations are logicallycomplex, its use will also not be appropriate. In the case of simple representations, it can still beused, but mixing different patterns complicates the development and subsequent perception ofthe application code.Therefore, to implement reactivity and meet the requirements of the mobile application, itwill be advisable to use MVVM and BLoC patterns. The main advantage of BLoC over MVVMis that business logic can be completely separated from view, which is generally the best way todo something. As modern software development requires more and more changes to the userinterface (as these are different screen sizes, densities, platforms, etc.), detaching the interfaceside from the models is a fantastic feature for reusing code.Thus, the most flexible mobile application architecture was analyzed and selected.51

Figure 7: BLoC pattern.4.2. The rationale for the choice of toolsIn the world of cross-platforms, all frameworks are approximately the same in structure. At theheart of everything - the target platform (iOS, Android), for which development is underway,and a layer of abstraction, which promises to do quickly, cheaply, and beautifully, and betweenthem the bridge that connects the two entities.This architecture has typical problems. They are partly because the layer of abstraction,relatively speaking, tries to sit on two chairs. Hence the difficulties: on each platform, theapplication is displayed and behaves differently. Sometimes this is not a problem, but there aretimes when the unique design and behavior on both platforms is an added business value [20].In terms of requirements, one of the highest priorities is speed. Also, taking into account theexperience of knowing these languages, the impression of developing mobile applications onthese frameworks [21], and the availability of prototypes, Flutter was chosen.Dart is an object-oriented and customer-optimized language for fast applications on anyplatform. The strengths of this language are: Improving the ease of development. JavaScript has a wide entry threshold. Dart shouldnot complicate anything, but on the contrary, if possible to make the threshold easier(due to a clearer and more concise syntax), as well as to preserve the incorruptible andwell-established essence of JavaScript. Increase productivity. Speed is one of the main problems of all modern technologies. Friendly to code editors and additional developer tools. Security.The Firebase platform was chosen to work with the database. The main reason for choosingFirebase is the availability of the Firebase Realtime authentication service and database on52

the platform in the cloud. The authentication service allows the user to link their accounts tothe application, and accordingly – link any of their data. This service supports all standardauthentication features. Each authorized user is provided with a unique Firebase user ID, whichis used when integrating other Firebase services [22].Work with the Firebase Realtime database is carried out in real-time without the need tomake GET requests to the server. The data is stored in JSON format and synchronized witheach connected client [22].Finally, it is worth mentioning Firebase Storage. Firebase Storage is a service that supportsdownloading files from both the project and the project. It was decided to use this service inthe application for reliability, convenience, and security. All uploaded photos will be stored inFirebase Storage.4.3. Designing an object-oriented structure of the systemPatterns need to be carefully selected and adjusted to the system. This is necessary for theimplementation of effective solutions and their justified use. Next, will consider the patternsused in the design of the mobile application.This mobile application is event-oriented. The components of the application interface thatinteract with the user are built on the BLoC pattern.Events and actions are the input to the BLoC architecture. They are usually created inresponse to user interaction with the interface, such as button presses or life cycle events suchas page loading. States are the results of the BLoC architecture. Moreover, they are part of theoverall state of your application. Interface components can receive status notifications andredraw parts based on the current status.BLoC (a component of business logic) converts a stream of input events into a stream ofoutput states. BLoC is like a “brain” that receives information, processes it, and responds.Stream is a sequence of asynchronous data. The user interface and BLoC listen to this streamand respond to any changes.This application uses 13 BloCs:1. AuthenticationBloc – the main block responsible for the definition of user authentication.Checks whether the user is logged in to his account, and if this is his first time, then sendto the page to fill out the profile.2. ChatBloc – using Stream, gets a list of chats of the current user.3. GradebookBloc – using Stream, gets a log of grades depending on load options, such asstudent ID, group.4. GroupBloc – to add a new group, also responsible for field validation.5. GroupListBloc – using Stream, gets a list of groups depending on the load options.6. LessonBloc – to add a new lesson with the choice of teacher, group, location, as well asfields such as homework, lesson topic, or regular class, or not blocked.7. LessonListBloc – using Stream, gets a list of lessons depending on the load options.8. LocationBloc – to add a new location, also responsible for field validation.9. LoginBloc – is responsible for the user’s login. Responds to field changes using events(EmailChanged, PasswordChanged, LoginWithCredentialsPressed). Performs field validation.53

10. MessagingBloc – is responsible for streaming messages, sending them. SendMessageEvent,MessageStreamEvent events.11. ProfileBloc – is responsible for saving user profile information. Responds to field changesand validates them. Events NameChanged, BirthDateChanged, PhotoChanged, Submitted.12. SignUpBloc – is responsible for user registration in the application, as well as fieldvalidation.13. StudentListBloc – get a list of students of a certain group, or students who are not yetassigned to a group.For all this to work, BLoC must be available. There are several ways to make it available.For example, through the global Singleton. This method is not recommended because Dartdoes not have a class destructor, so it will not be possible to free resources properly. Therefore,a separate instance of BLoC is created in the application. Initialization takes place inside theStatefulWidget.The Repository architectural pattern was also used in this mobile application. Dart servesas an abstraction between the client code and the data provider, so as a developer working onfeatures, you don’t need to know where the data comes from. It can come from an API provideror a local database. So it’s a good practice to use the Repository template.The combined BLoC and Repository patterns work well together (figure 8).The project uses 7 classes Repository (ChatRepository, GradebookRepository, GroupRepository, LessonRepository, LocationRepository, MessagingRepository, UserRepository).4.4. Development of data storage structureThe data storage structure plays an important role in project development. Namely, CloudFirestore was chosen for storage. It is a flexible, scalable NoSQL cloud database for storingand synchronizing data for the client and server-side development. Cloud Firestore also offersseamless integration with other Firebase and Google Cloud products, including cloud features.And Storage for Firebase is a powerful, simple, and cost-effective object storage service. Firebasecloud storage SDKs add security to Google for uploading and downloading files for Firebaseapplications, regardless of network quality.The following tables are required to implement the project database: messages, chats, users,gradebooks, gradebookRecords, groups, lessons, locations, cities.Using Firebase, you can create subcollections. For example, the gradebooks collection, whichis responsible for grades and attendance, contains a subset of records for each student.4.5. Design and implementation of algorithms for system operationThe first algorithm encountered by the user in the application is to determine whether theuser is logged in. Then the role of the user is determined, whether it is a teacher, a student, ora manager. Depending on the role, the corresponding tab opens. In figure 10 shows the tabalgorithm for the teacher.If the role was defined as a student, then the first tab is displayed – GroupInfoPage. Infigure 11 shows a diagram of student. For the student, the second tab is ClassmatesPage, wherethe student can view his profile information and a list of classmates. The second tab for the54

Figure 8: Using BLoC and Repository.teacher is GroupListPage with a list of groups and the ability to add new groups, locations, andlessons (figure 12).4.6. The procedure for installing and administering the systemThe Flutter architecture differs from other software frameworks (React, Apache Cordova) in thatit does not use HTML, CSS, and Javascript to build the interface, respectively, and the built-inWebView engine. It uses its engine for rendering. Flutter uses only one Dart programminglanguage. Flutter is an innovative technology for developing cross-platform mobile applications55

Figure 9: Scheme of the database.for Android and iOS. Its advantage is the deployment of both Android and iOS at the same timeusing a single code base. Development is faster without losing productivity.The chart is built using the online resource app.creately. In the diagram we see that it isdivided into two component components, namely: Smartphone; Firebase Server is a serverless structure that allows you to automatically run server codein response to events caused by Firebase functions and HTTPS requests.To exchange data between the client (we are considering the application on the smartphone)and the server (webserver) is mainly used HTTP protocol or its extension HTTPS for securedata transfer.56

Figure 10: Diagram of teacher activity for the Schedule tab.4.7. Interface and procedure for working with the software packageOn the desktop, the first thing the user sees is the application icon. It should be notable,interesting and include universal symbols that will be equally perceived by people with different57

Figure 11: Student activity chart for the Schedule tab.religious views. The style and logo were taken from the school Uprise Center, for which thisproduct is developed.The next thing that catches the user’s eye is the download screen. It should also be stylisticand should be concise. It does not make sense to add a lot of text to it, because the applicationloads quickly and the user will not be able to read that information. Therefore, the design andtext should be minimal.The unauthorized user is the first to see the authorization page. If the user is new, he canclick on the text in the form and go to the registration page. When the fields are filled, thebutton becomes active and changes color.58

Figure 12: Diagram of teacher activity for the second tab.To begin with, consider the type of application for the teacher. On the first page, we aregreeted by the teacher’s schedule (figure 14, A). Figure 15 shows the lessons in the schedule.Lessons differ in color because they have differences.Blue classes are regular (held every week, isRegular true), and active (isEnabled true).This activity is displayed in the calendar each week on the appropriate day from the beginning59

Figure 13: Deployment diagram.Figure 14: Teacher’s schedule page.of this lesson.Green means that the lesson is single (ie will take place once, isRegular false), active(isEnabled true). This lesson is displayed in the calendar only once at a specified time.Gray is a blocked activity (isEnabled false). Whether it’s a regular class or not, we can block60

Figure 15: Display lessons in the schedule.classes. That is, it will no longer appear in the student, but it can be activated at any time. Thisconvenience helps to avoid deleting the lesson.When you click on the lesson, detailed information about the lesson opens, and buttons foractions on the lesson are displayed (figure 14, B). For example, we can delete a lesson or edit it.Also, block the lesson and add grades to it.The form for editing a lesson is the same as when creating a lesson. The difference is that itis already filled with data that is about this lesson. So that the user does not have to rewriteeverything again, and he just changed the field he needs. The lesson editing page is shown infigure 14, C.To create an entry in the journal, you must click on the “Add grades” button when editingthe lesson. Then a form will open with a list of all students, where in front of each will be atick that can be clicked and turned into a cross, which means whether the student was present.Also, next to each name you can put grades for the lesson and homework. Grades are givenin a five-point system. By default, the student was present at the lesson, and the grades willbe recorded as 0. The peculiarity of a school is that the grade for the lesson and homework ismandatory. Therefore, 0 is considered a full grade for poor performance in class. The completedand blank journal entry form is shown in figure 16. The second tab of the teacher is the tab ofgroups, as well as adding new locations, groups, and lessons.When you click on the buttons Create group, Create lesson, Create location, the correspondingform of creation opens. Validation is calculated for each field. And if the form is not valid, thebutton is not active.For such fields as City, Group, Location, Teacher the drop-down list from the received data isprovided.The last tab is chats, it is common to all users. It shows a list of chats. You can see the nameand photo of the user you were talking to, as well as the last chat message and how long agothis message was sent.61

Figure 16: Empty and filled form of assessments and attendance at the lesson.When you click on the chat it opens and all messages are displayed, showing who sent themand when. Also below is a text entry field, as well as a button to add a photo. When opened, thechat is initially scrolled down and shows the last message. You can send both short and longmessages, photos, emoticons.When you long-click on a group in the group list, or a chat in the chat list, or a student inthe corresponding list, a dialog box will pop up, asking if you want to delete the item. Whenyou select “no”, the action is canceled. If you agree, the item will be deleted and the list will beupdated, so the deleted item will no longer be displayed.For the student, the appearance of the first two tabs will be different. For example, the first tabwill show the name of the group and detailed information about the next lesson (figure 17). Thenext lesson is based on single and regular lessons but ignores the lessons that are blocked. Thereare also buttons to show grades and schedules, which work in the same way as the teacher. Thedifference is that only this student’s grades and schedule will be shown.On the second tab, th

The article substantiates the need to develop a CRM system with a mobile application for a school. The existence of their educational environment, which will provide interaction between pupil and teacher in a school, is a topical issue today. Relationship management can be implemented in the form of a CRM system. For a deeper understanding of .