 All right, folks, bright and early. It's 8 AM, 8 to 1 here, where I am. Welcome to the fourth day of the EuroPython 2021 conference if you have attended the tutorials, otherwise your second day, I guess. So we start with one prerecorded talk, the speakers, three speakers in principle, have experienced some severe flooding in their home countries, and they were not able to attend in person. But they were nice enough to send us a prerecording of their presentation, building applications using Flutter and Django. And so we'll ask our colleagues to start the video, and I will leave the floor to that. The speakers might be able to be around for the question and answer. We don't know. The situation is a little bit complicated, as you can imagine. But please start the video and I will. Hello, everybody. My name is Gorka Sool. I am pursuing my bachelor's in engineering in computer science from KLS Kokte Institute of Technology, which is located in Belgrom, Karnataka, India. This is my first time in a public forum, and I'm looking forward for this opportunity. Hello, everyone. My name is Shruti Nishra, and I'm also pursuing computer science from Gorka Institute of Technology, Belgrom, Karnataka. It is also my first time speaking in a public forum, and I'm looking forward to it. Thank you. Hello, everybody. My name is Sonu Reshmukh, and I'm pursuing being computer science engineering from KLS Kokte Institute of Technology. It is the first time I'm speaking in a public forum, so thanks for this opportunity. Today's presentation is going to be a bit different because we are not following the traditional formal presentation method. Rather, we have opted for in the form of a sketch. So let's begin the presentation. To build an application using Django and Flutter, which is going to be a student dashboard application, but I don't know where to begin. Let me just search for it. Shruti, don't worry. Let me help you with the Django part. So before we get into how we can set up and how to run the program, your application, we must understand what is Django and why it's so popular. Well, Django is a free and an open source framework for building web apps with Python. It's not the only framework that Python provides, but it is the popular one. It not only lets us build an application with less time, but also using less code. There are other features that Django provides which makes it famous. It is scalable, secure, it contains tons of packages, and it has many more features. Since it contains a variety of packages, we don't have to code it from scratch. For example, it gives us an admin interface for managing data, which is a huge time saver. It also gives us an ORM, which is object relational mapper that abstracts database so we can query data without writing a lot of MySQL codes. It also comes with an authentication package for identifying users. It also has a package for caching and much more. Since Django provides these amazing features, we can focus on our application needs and requirements instead of coding all these features from scratch. Now, before we move on to the setting up of the environment, we must understand how the web works. So if you want to build an application and publish it, the application will contain two parts, the front end and the back end. The front end is generally loaded onto the web browser. It's the part that the user sees and interacts with. The back end is the part that runs on the web server and is responsible for data processing and validating. Now, when you enter a URL on the browser and hit enter, the browser on the client side sends the request to the server that is hosting the website. Now, the server that processes the request and then returns a response. There are two ways that the server can respond. One is to generate the requested page on the server and then return the HTML document to the client. And the other way is that it can return the data that is needed on the requested page and the client can generate the page. This way, we are not only sending a complete page as a resource response, we are also freeing up the server so that the server can serve more clients simultaneously. It makes the application more scalable and Django is a scalable application. Not just this, by following this method, the server becomes a gateway for data to data. So we can provide several endpoints that the client can talk to or get various pieces of data. For example, slash order can give us a list of orders and slash to file can give us the profile details. Now let's move on to how we can set up the environment for the development of the application. So if this is your first time using Django, you'll have to take care of some initial steps. Firstly, you will have to download Python and for those who already have Python installed, just upgrade it to the latest version. You can download Python from the official website, Python org slash downloads. Next, make sure you have pip installed and for those who already have it, upgrade it to the latest version. To do so, you can use the commands for my OS as Python dash M, ensure pip dash dash upgrade. And for vendors, you can use Python dash M and ensure pip dash dash upgrade. Once you have your pip installed and upgraded, you can have a virtual environment setup, which is completely optional, but by having a virtual environment running, you can install various packages in that particular environment and not have it done it on your system locally. To install the virtual environment, you have to use the command pip install virtual ENV. To create a virtual environment, you have to go to the directory you want to build the application and then create the virtual environment by typing the command Python dash M, VNV followed by the name of environment. And once your environment is ready, you're supposed to activate the environment and you can do so by following these two commands on the various operating systems. So once your environment is activated, you can install the desired packages. For this project, we will be installing Django. So the command we use in this would be Python dash M pip install Django. Now that the setup is done, we can start our new Django project. To do so, we type Django admin start project and followed by your site name. In this case, it's MySite. Now Django admin is a utility that comes with Django. This will create a MySite directory inside your current directory. The outer MySite directory is the container for your project and the inner MySite directory is the core of your application. In this directory, we have an init file which is an empty file that tells the Python that this directory should be considered as the Python package. The setting module defines our application settings. The URL file contains the URL of our applications and the other two modules are used for deployment of the app. Then we have a managed.py which is a wrapper around the Django admin. It is a command line utility and it lets us interact with Django project in many different ways. To run a server, we use managed.py instead of Django admin because it takes the settings into account. Now that we have a Django project, let's run a server to check if it's correctly working. To do so, we can type Python managed.py run server. If you want a particular port number, you have to mention the port number after run server. All of this needs to be done in a command line. If there are no errors, it will show the address of the server. You can just copy it and paste it into your URL and you can see your first project running. Now in settings.py, should be next. Okay. So we have a settings.py module in that we can see that Django provides some installed apps already. For there were a variety of apps which are installed like an app for an admin interface for managing a data, another app for authenticating users and then we can also see a messaging app which gives us the one message at a time. Then there is a static files app for serving static files like images and RCS files. We can also create our own app and to do so, we run the command Python managed.py, start app and in the scales polls, that is the name of our app in your terminal. And now that this app is present, it has a particular structure which it follows. It contains a migration folder for generating the database tables. The admin.py module lets us where we, let us know where we can define the admin interface for this app and look what it looks like. Then we have an apps module where the app is configured. Should be next. Yeah. Then we have a modules model, module for modules in which we can define the model classes for this app. These classes retrieve the data from the database and present it to the users. We also have a test.py module where we write our unit tests. Finally, we have the user.py module which is a request handler. Here the function takes a request and returns a response. So every time you create an app, you need to register the app in the list of installed apps which is present in settings.py module. After this, you have an URLs.py module where we can map our URLs to our view functions. Here the URL patterns contain the path function that returns a URL pattern object. When we call the function, we give two arguments. First is the root or the URL which is for example, signup.admin in this case and then it's followed by a view function from the views.py module. And once you've edited the models.py module, you also need to make migrations. And to do so, you use the command python manage.py make migrations which is followed by python manage.py migrate. And once you're done with that, you need to create a full-fledged website for your application. And to do so, you edit and add all your HTML and CSS files into the template folder which is present in your apps folder which you created earlier. I hope Shruti, this will help you in creating the application. Yes, thank you so much, Gaurika. How I understood how Django works and I think I can now make web applications. But that is all fine. But what if I want to make a mobile application? Like, I'll search for it. To answer your question, that is what actually Flutter is, I'll try to explain it in a simple way. Flutter is an open source user interface software development kit created by the Google. It is used to develop cross platform application for Android, iOS, Linux, Mac, Windows and the web from a single code base. The first version of the Flutter was known by the code name Sky and was ran on the Android operating system. Now, let's just swiftly move on to the topic that is the history of the Flutter. The initial release date of the Flutter was in May 2017 and the developer of the Flutter is Google. And Flutter is written in C, C++ and Dart. Let's look onto the features of the Flutter which are first, fast development, second, expressive and flexible UI, third native performance. Let's elaborate the points. First, that is fast development. You can literally paint your app to life in just milliseconds with stateful hot reload. Use a rich state of fully customizable widgets to build native interfaces in minutes, which is why it's one of the most important features provided by the Flutter. Second, expressive and flexible UI. Quickly shift features with a focus on native and user experiences. The layered architecture of the Flutter allows for fully customization which results in incredibly fast rendering and expressive and flexible designs. Third, that is native performance. Flutter widgets incorporate all critical platform differences such as scrolling, navigation, icon and fonts. And your Flutter code is compiled to native AR and machine code quickly using Dart native compilers. Now let's just take a look on the settings for the Flutter. In order to install the Flutter type, click on the below link on the Google which is flutter.dev slash docs slash get started slash install. And in order to set up an editor like Android Studios, Visual Studio Code, et cetera, please enter the link that is developer.android.com slash Google slash studio in Google. You can build apps with the Flutter using any text editor combined with our command line tools. However, we recommend using one of our editor plugins for even better experience. These plugins provide you with the code completion, syntax highlighting, run, and debug support, and even many more. Android Studios offer a complete integrated IDE experience for the Flutter users. Now let's take a look at how to set up the Android Studios. In order to set up the Android Studios, type developer.android.com slash studio on Google and then click the download button. To install the Flutter and Dart plugins, the installation instruction vary by platform. That is, the Mac use the following instructions for the Mac OS. That is, start the Android Studios, open plugin preferences, then select the marketplace, then select the Flutter plugin, and then click the install button. Click Yes when prompted to install the Dart plugin. Next, restart when prompted. Linux or Windows use the following instruction for the Linux or Windows. That is, open the plugin preferences, then select the marketplace, then select the Flutter plugin, and then click the install button. Now, what is Dart? Dart is a programming language designed for the client development, such as for the web and the mobile apps. It is developed by Google and can also be used to build the server and the desktop applications. Dart is an object-oriented, class-based, garbage-collected language with the C-style insult acts. By no doubt, it's created by the Google. The Dart is a client-optimized language for fast apps on any platform. Dart is free. It's open source. Let us know some benefits of the Dart, which are optimized for UI, productive development, fast run of the platforms, optimized for UI, developed with the programming language specified around the needs of user interface creation, mature and complete async weight for the user interface, containing even drive-in code, paired with the isolate-based concurrency, a complete programming language optimized for building user interfaces with the features such as sound null safety, the spread operator for expanding their collections, and collection for the customizing UI for each platform. A programming language that is easy to learn with the familiar syntax. Productive development makes changes iteratively. Configurable tools for profiling, logging, and debugging with your code editor of your choice. Fast run of the platforms. Compile to ARM 64 machine code for the mobile, desktop, and packet. Or compile to JavaScript for the web AOT compile apps to native machine code for the instant startup. For even more information, you can just visit the site that is that.deb. Now, let's go for the test drives. How do you create an app on the Plata? Simple, just follow the steps. That is to create the app, open the IDE, and select the create new Flutter project. Select Flutter application as a project type, then click Next. Verify the Flutter SDK path, specify the SDK's location over there, then enter a project name, then click the Next. Click Finish, wait for the Android Studio to install and the SDK, and then create your project. So how do you run an app? Simple, just locate the main Android Studio toolbar, then in the target selector, select an Android device for running the app. If none are listed as available, select the tools, then go for the Android, then go for the AVD Manager, and create one there. For details, see the managing AVDs. Now, the main toolbar, it's consists of coding selector, run, debug, run with the coverage, hot reload, attach and stop. The hot reload works by injecting the updated source code files into the running that virtual machine. Click on the run icon in the toolbar or invoke the menu item that is run. After the app builds completely, you'll see the starter app on your device and you can just run your app as simple as that. So I hope you understood it strictly. It is so much sooner, I think I can build now Flutter apps easily. And I'm now going to show you guys about the smart application system which I have made. So going on to the smart system, which is a student dashboard management application. The proposed project is a system that keeps a track of students attendance using barcode scanner. This concept set forward to automate traditional attendance system by using authentication technique. The traditional system, as we all know, requires a register maintained for manually signing the attendance by the students, which is time consuming. Hence this proposed project eliminates the need for maintaining the attendance sheet. I will go through all the libraries and frameworks which are used. Some of these are OpenCV, and EYZ bar, and middleware. OpenCV, as the name suggests, it belongs to the computer vision. It is mainly used by Python. So OpenCV is a library of programming functions, mainly aimed at real-time computer vision. The library is cross-platform and free for use under the Apache 2 license. If you want to use OpenCV in Python project, we just need to run this command, which is import CV to SCV. Next we'll go on to the library, PYZ bar. PYZ bar, as the name suggests, is related to Python library. It is a pure Python library that reads one-dimensional bar codes and QR codes using the Z bar library. It opens your software suite for reading bar codes from various sources, such as video streams, image files, and raw intensity sensors. It supports many popular symbologies, such as EN30. To install PyYZ bar on macOS, we need to run the command, view install Z bar. For the system such as Linux, we need to install PyZ bar using the commands you do at get install libz0. For Windows users, we need to install PyYZ bar using pip install PyZ bar. For this, pip version should be upgraded to the latest version. Next up, we should go to middleware. Middleware is a library used by Django. Middleware is generally consists of a library of functions and enables a number of applications, simulations of federals. Now, many of them confuse between middleware and an API, and they consider them to be the same, but that is not the case. You can use an API to connect your website directly. You use a middleware system as a connector between your website and other tools. Middleware is a framework of hooks into Django's request response processing. It's a light low-level plug-in system for globally altering Django's input or output. Let us look at the example. Here is a simple example in middleware which shows a class named as simple middleware. So here, what happens is each middleware component responds more for doing some specific function. So to get response callable provided by Django might be the actual view or it might be the next middleware in the chain. The correct middleware doesn't need to know or care what exactly it is, just that it represents whatever comes next. Django initializes your middleware with only the get response argument. So you can't define init as requiring other arguments. Unlike the call method which is called once per request, the init function is called only once when the web server starts. Next, look at smart system demonstration for the web. So here we see smart system web application and here we have smart system sign up. We have three different sign up for admin, staff and students. First we'll sign in as an admin. We'll get to admin dashboard which contains student staff chart, total subject and courses and which are represented in pie charts and owner charts. And staff, leak versus attendance, these are all in bar charts. Next up, the admin can add staff. So the admin has to enter credentials such as email address, password, name, username and address. So admin to enter a demo such as ABC. Let's maybe click on add staff. As I said, should say I successfully added staff. And then so the admin can manage staff and here we see the person we just added is already listed in the managed staff and we can edit it. So the next admin can handle is add student. Just like add staff, the admin can also add student to the same credentials. Then the admin can manage students and here we can see the name of five students which has been added and with their different credentials such as address, gender. Then the admin can add course for a particular year and we'll enter the course name, the course architecture and course is successfully added and then we can go on to add subject for a particular course. Then the admin can also manage subject and manage session year. Start year and end year can be mentioned and then it is student feedback. The admin can give students a staff a feedback of their choice, find a particular student or staff and the admin can approve or disapprove the student leave. The students can apply for leave and it's admin jobs to approve or disapprove. The same goes for the staff. The admin can also view attendance for a particular subject and between session year and first the attendance data. So we'll enter the data and we'll get the student attendance for a particular class and call by present. The admin can also send staff a notification which is important and any particular suppose Amy. So we want to send one notification to Amy. So this demo notification. We can check it later that Amy gets a notification, demo notification from the admin. The admin can also send student a notification suppose felix and we'll send the notification, demo notification, the same notification and we'll check it on later when we sign in as felix. Next up, let's log out and signing as a staff, Amy. So our staff smart system dashboard contains the student attendance subject and the total attendance taken, leave taken. These are all represented by charts and bar graphs. The staff can take attendance and even mark students which are there for the present for the class and for a particular date she can or he can just save the attendance data. So it says the attendance is saved. She can see the view updated attendance by going over to the view updated attendance and you can find student data and it shows that around five students are present for the class. Then she can send student notification if she wants to talk to a particular student or tell him or something. She's sending a notification scan for ID attendance since we know that our application has attendance using scanning ID or bar code. So she has sent one notification to a student for scanning his ID. Then the teacher can apply for, staff can apply for a leave which will be approved by or disapproved by the staff admin and the teacher can also give a feedback and the teacher can add the result for a particular subject, for the particular session year update the marks and save the result and he she can also edit the result and then for the notification as we have sent earlier from the admin system. So Amy has got the notification which is demo notification. So it seems the system works. Then we'll sign in as a student. The student dashboard system has total attendance absent present, which is also given by all the charts and bar graphs. Statistics, attendance, statistics are also given. Student can view his or attendance for a particular subject and between the start date and end date. So suppose we're giving some random dates and if you fetch attendance it shows that these are the days where he she was present. Student can apply for leave which will later be disapproved or approved by the admin. So it says leave status approved. Student can also give a feedback. Student can see his grade card what if he has passed or not. And as we'll see later that admin has, no, the teacher has sent a notification for the student which is kind of for attendance and he has received one. So we'll click the scan ID and show that system is working. So let's see. So the camera will start now and the student can scan their IDs and it will notify it. And these data will be, then the result will be stored in an Excel sheet which can be viewed by the admin. So we can see the student is trying to scan their IDs and two IDs have been scanned. So the Excel sheet which is saved by the admin should contain two students having present marked on their Excel sheets. So as we can see the Excel sheet contains of two students which have been marked as present. So this was all about the system application and using well. So we have seen smart system demonstration from the web. Now we'll see the mobile application which is from Flutter. So first is the barcode scanner which will scan the IDs and save it on the Excel which will be viewed later by the admin. Stands the result and saves it on the Excel. Next up, let's log in. And those who don't have the login they should request it from the college by entering the credentials. Credentials must be valid or else it will generate an error. So the email entered currently is not valid and it will generate an error. So we have to enter the correct rendition. So those of the students who have to log in they will log into the email ID and password. This is the dashboard and first we'll go to attendance. So they tell them the subjects today and overall. We represent present, they represent absent. Next up we have SAM names and subjects mentioned, results. The student can apply for leave and it has four types of leave which is medical, family, sick and function. The student can also specify the dates of which students is going to be on leave. The document should be attached with the leave application and the sample is this, looks like this. So this is all the application similar to the web application and has a cyber navigation. This was all about our presentation and our course smart system. Hope you'll enjoy it. Thank you. Great presentation. However, hope the speakers will be available maybe today or tomorrow for question and answer. I'm sure lots of people have lots of inspiration from this video and will have a number of questions.