 Thank you very much for the introduction. Thank you for attending today. I'll say that in case we forget because of time. My name is Marvin Hofflin. I am both Mario and myself. We work at the Falkirk-Schule-Kanten. That's our German lesson for today. It's called the Corinthian University of Applied Sciences. We're located in Austria. And I do almost all the Moodle admin and training. And I do a lot of the special course development. I guess we could call it learning design. Mario, you wanted a few words? Thank you. My name is Mario Rie. I'm a 50-50 person on our university. That means 50% is my profession. I'm working in the field of computer graphic. And in the time, and in the time, and in the time, when I'm not trying to teach how all the gizmos of 3D game engines are working to my students, I'm responsible for the technical side of our Moodle system. I'm a sysops and a full-stack developer. I'm responsible for maintaining and developing all the stuff that we build up custom to our Moodle system. It brings me to our Moodle system, a few facts. Our Moodle system got its anniversary last year. It is 10 years old. We have our user base as about 60,000 users. It's, I think, one of the tinier Moodle systems around here. Our daily user count is about 2,000 users, unique logins, about 40,000 sessions per day. Yeah. Whoops. I'll probably be doing that all presentation, so please excuse me. So the overview, what did we wanted to do? We wanted to, we used to have a student service app that Mario and with another colleague developed. But that was discontinued. We bought a third-party tool, but they did not have all of the functionality for students that was available. So basically, what we're going to do is we're going to talk about the wants. What did we want to get out of the Moodle app? Why did we develop that into just not course learning, but also basically a campus service system? We also want to talk about the don't wants, which Mario will take back over from the developer side. We'll look at, we just have screenshots, but if anyone is interested, we do have a small app video that's on YouTube that shows all the functions in German and in English as well. And then Mario will take back over and he'll tell you how he did it. When we say we, I basically mean him. But we do a lot of the testing together and we also discuss what new features we'd like to bring in. So we is not too bad. So let's continue. So what did we want? Well, we are, we have subscribed. We do have the premium service. We have the campus university custom branding. We also wanted to, one of our ideas, not just with the Moodle app, but also with the LMS, is make a one-stop shop for students. Because we've seen at other universities, Moodle is many times an island solution. You've got your campus information system. You've got your virtual classroom. You've got your one drives. We wanted to make sure that we try to integrate this all and we're also trying to get our lectures and professors to do this as well. So we also have events. We've put in course information. As you can see here, I'll try to stay close to the microphone. Maybe if I use the laser, we've expanded that expandable menu that's on the Moodle app to put in a number of different things. And I'm gonna show you screenshots all of that. So I'm not going to go through all of the different things. But we, one of the things I use the Moodle app for a lot is I love the public transport system. We've got it set up that I can say I'm from campus one. We need to go to campus five. I can access the local public transport without going to their app. I can do it right from the Moodle app. And I've got default from this point to that point. And bingo, I know what bus, what train I need to take. We are hoping that this is a really useful feature for our students as well. Oh, the things we don't want. So I'll turn it back over. Thank you. You see, we have a plan. It's always good to have a plan before you start developing. What we don't want. We don't want to host and to maintain a separate native mobile app. Because, you know, we are two men who are responsible for the whole system. And we simply have not the time to do all the staff that's around to maintain and to do the whole process that is necessary to, for example, to provision a mobile app for Apple and for Android. So the next thing what we want is, we want only one app where the Moodle context is in and our additional context from our campus management system. Yes, and as I pointed out before, updated maintenance should be avoided or limited to the only necessary staff what is needed to develop the views and the business code that drives our views that are rendered in the app. So one of the things that we have here, and I apologize on my PowerPoint, it did not look like this with the screenshots, so there's always that difficulty there, is as you can see, we have both Android and iOS. I as a lecturer can use this, not just our students. So I know when my upcoming events are, we have color coordinated it so that I know what is a meeting, I know what is a lecture, which is what we have here. I also know what is an exam, so the students can see when they have exam dates. Again, our normal system does this, but it does not have this user interface that makes it easier for the students. What's also nice is a student can see how much time is left in that meeting or in that lecture, should I sneak in or should I not sneak in, for example. All of the information comes from the campus information system as a backend, so we're basically just integrating these features in the front end. And if I click on one of my courses, I see, and the students see the entire what is going to happen in this course, what is my lecture going to be about, they see the number of credits, they see my name, they can click here right from their mobile device and they can send me an email, they can also call me on this. And if I click over here on the events, I see and the students see all of the different events that are going to happen this semester. We've even added in a nice tiny little thing that helps my planning of the lecture. This is the Christmas break, so there's 20 days before I'll see the students again. So we've got a lot of little bugs in what we, we don't want to geek out too much, but we do find it pretty cool. So for the students, students can check how they did on their exams. So they've got their current exam listings. Also, they can click on that physiotherapy and basically as in German, as you saw there, they can see what group they're in, they see the exam date, satisfactory is a three, we use a scale of one, one or three, American system, that'd be a C. And they can also see how well they did compared to their colleagues in that class. And this is all generated and this is something that they do not have from our campus information system. We've built this in, into the Moodle app using data from what we call actions. The grade overview is also quite nice. They can see per semester, if we have bachelor and master students, this goes back as well. What we've built in, and this comes up quite often, many students need to see their transcript of records, they need to download it, they need to provide that to someone. Usually it's our funding agency to make sure they get their scholarships. They can do this right from their mobile device. And again, one stop shop instead of go to the internet, click here, click there, they can do this all here. What's also interesting is you can see how many credits they have and even we've built in a study progress bar where they're at in their three year bachelor's program. Again, they can basically, if they need certificate of enrollment, again something necessary for Austrian students or students studying in Austria, they need to make sure that they can provide this to certain government agencies. So we also built that into the Moodle mobile app. Those were the must haves, these are the nice to have stuff that we built into the expandable thing. Here we have the course evaluation, students can evaluate their course right from the Moodle app, five minutes. Okay, I'm just gonna go through this quickly. We do have a video where you can see this. This was a transportation system. We also can, for both students as well as lecturers, do we have a free room on campus? Sometimes students wanna meet in a larger lecture room. They can check to see if it's empty. They can see when the next event is. So if they do need a little team planning, the library is too full, they don't have another place, they can check there as well. So how we did it? Now, we only got five minutes, so see what you can do. Yeah, yeah. Thank you. Okay, let's see. How this works with the Moodle app? This works only with the Moodle app because the Moodle mobile app is a special kind of mobile app. It's called Hybrid Cross Platform app. The difference between this kind of application and the normal native application is that in this case, the Moodle app is using a framework called Cordova. Cordova is the basic framework if you choose if you want to build hybrid cross-platform applications. And its main purpose is it creates a set of tools to build a headless browser application for in this case iOS and Android. And its other purpose is the headless browser is not, you need more than a headless browser. You need an interface, you need to interface GPS and hardware and the calendar and such things. And this goes to the API of the iOS operation system or the Android operation system. The Cordova framework does this with the called the JS bridges. So you can call certain functions via JavaScript in native code iOS or Android. In top of Cordova, if the Cordova app is launched and the browser gets initialized, you can load JavaScript and HTML. In our case, the mobile app uses two frameworks for that. The one is Angular, Angular 2. I might, some of you know that Angular and his producer, Angular.js is one of the oldest single-page application frameworks. These frameworks then the purpose, the main purpose of these frameworks is to alter the document object tree and to mimic the behavior of an application like you have on desktop and Windows or something. And Ionic is the companion to Angular. Ionic's purpose is to mimic the user experience and the UI behavior for iOS UI elements and Android UI elements. Via HTML and JavaScript and of course CSS. So, this is what you have to keep in mind if you are working with the mobile app. The base technologies are only HTML, JavaScript and CSS, yes? If the mobile app, if the mobile app is started and you get your JavaScript code via, for example, the block delegate running in the app. Thank you. Then you have complete control over the document over the dome and you can alter things, you can render your own stuff. Click see. So, what we have done is, there's a possibility to make, we use blocks for our purpose. And one feature is, you can say that a block is mobile only, yeah? This is made via an application interface for the blocks. The function is called isEmpty and you can check in the isEmpty function if the call to render and to get the mobile contact, mobile contacts is coming via the web service or via normal HTTP call. So, before that out, only the web service is allowed and you see, you see, you see what you see. This is basically kind of how you did with the integration. And if anyone really would like more information, we can show you the app. We also, this presentation is available and you have our contact information. Thank you so much.