Professional Documents
Culture Documents
Successful Colleges begin by make sure their students come to school regularly.
The consequences of low attendance are serious and not just affect the students
who miss school but also affect the community. The attendance rate tells us the
average percentage of students attending school in each day in the given year, as
reported by the state Department of Education. Sometimes students and parents
might question why school attendance is so important. Going to school regularly
is important to the student future. After Covid-19 the World is in complete lock
down that leads teachers to take class from home, because of taking class from
and students attending from home the marking of attendance may not be easy to
maintain and submit, sometimes the student might of come and leave the class
but the tutor may not see him in attendee list that might lead to a absent of a
student. In our application we will generate the attendance report automatically
by connecting to google meet
CHAPTER 1
INTRODUCTION
• Data of student has been computerized without using any manual effort.
SYSTEM ANALYSIS
2. ANALYSIS OVERVIEW
The system analysis and designing are two main process before
developing the project because if these two step go wrong then the entire
project may go wrong because wrong design leads us to the wrong product
or system development.
In the present system all work is done on paper. The whole session attendance is
stored in register and at the end of the semester the reports are generated and it
takes more time in calculation. By the way we are not interested in generating
report in the end of the semester but during the semester for the student to take
note of his situation, and the department to know what action to take on students
with poor attendance even before Exam. So, we are not able to get student
regularity report and take necessary action on students whenever we want because
of having very time-consuming process.
Disadvantages
The existing system is not user friendly because the retrieval of data
is very slow and data is not maintained efficiently.
generated at the end of the semester. And the student doesn’t get a
3. Manual control:
All calculations to generate report are done manually so there is greater
chance of errors.
4. Lots of paperwork:
Existing system requires lot of paper work. Loss of even a single
register/record led to difficult situation because all the papers are needed
to generate the reports.
5. Time consuming:
Every work is done manually so we cannot generate report in the end
of the semester or as per the requirement because it is very time consuming.
Our Proposed system is a JavaScript based application which will run as a chrome
extension, while opening the Google Meet the application will automatically
connect itself where the teacher can create as many classes as they can and add
the students in that class once student start attending classes the attendance will
automatically marked with the time logs, those who attended are put present and
not attended are put absent.
In the era of COVID-19, virtual classes have become the norm. For teachers,
however, taking attendance in these virtual classes is often a pain. They must keep
track of when students join and leave among side conversations and distracting
visuals
Our Google Chrome extension, Attendance for Google Meet, streamlines the
entire process of taking attendance in a Google Meet™. All teachers have to do
is enter the name of the class and a list of their students. At any time, teachers
may click on the attendance button to view each student's status (present, absent,
previously present, or not on list), and export the data to a beautifully formatted
Google Spreadsheet in their own Google Drive.
Advantages:-
The new system has been designed as per the user requirements so as to fulfill
almost all them.
1. User Friendly: -
The proposed system is user friendly because the retrieval and storing of data is
fast and data is maintained efficiently. Moreover the interface provided in the
proposed system, provides user to deal with the system very easily.
Reports can be easily generated in the proposed system so user can generate the
report as per the requirement (weekly, monthly) or in the middle of the semester.
User can give the notice to the employees to be regular.
The proposed system requires very less paper work. All the data is feted into the
computer immediately and reports can be generated through computers.
Moreover work becomes very easy because there is no need to keep data on
papers.
2.3 FEASIBILITY STUDY
Technical Feasibility
Operation Feasibility
Economical Feasibility
TECHNICAL FEASIBILITY
The technical issue usually raised during the feasibility stage of the
investigation includes the following:
Do the proposed equipment's have the technical capacity to hold the data
required to use the new system?
OPERATIONAL FEASIBILITY
The analyst considers the extent the proposed system will fulfill his
departments. That is whether the proposed system covers all aspects of the
working system and whether it has considerable improvements. We have found
that the proposed “Secure file transaction” will certainly have considerable
improvements over the existing system.
ECONOMIC FEASIBILITY
SYSTEM REQUIREMENT
3. REQUIREMENT
Processor : i3 or Above
SOFTWARE SPECIFICATION
Components
React code is made of entities called components. Components can be rendered
to a particular element in the DOM using the React DOM library. When rendering
a component, one can pass in values that are known as "props":
Functional components
Functional components are declared with a function that then returns some JSX.
Virtual DOM
Another notable feature is the use of a virtual Document Object Model, or virtual
DOM. React creates an in-memory data-structure cache, computes the resulting
differences, and then updates the browser's displayed DOM efficiently.[9] This
process is called reconciliation. This allows the programmer to write code as if
the entire page is rendered on each change, while the React libraries only render
subcomponents that actually change. This selective rendering provides a major
performance boost.[citation needed] It saves the effort of recalculating the CSS
style, layout for the page and rendering for the entire page
JSX
Multiple elements on the same level need to be wrapped in a single React element
such as the <div> element shown above, a fragment delineated by <Fragment>
or in its shorthand form <>, or returned as an array.
Attributes
JavaScript expressions
JavaScript expressions (but not statements) can be used inside JSX with curly
brackets {}
The basic architecture of React applies beyond rendering HTML in the browser.
For example, Facebook has dynamic charts that render to <canvas> tags,[15] and
Netflix and PayPal use universal loading to render identical HTML on both the
server and client.[16][17]
React hooks
Hooks are functions that let developers "hook into" React state and lifecycle
features from function components.[18] Hooks don’t work inside classes — they
let you use React without classes.[19]
React provides a few built-in hooks like useState,[20] useContext, useReducer
and useEffect.[21] Others are documented in the Hooks API Reference.[22]
useState , useReducer and useEffect, which are the most used, are for controlling
state and side effects respectively.
Rules of hooks
There are rules of hooks[23] which describe the characteristic code pattern that
hooks rely on. It is the modern way to handle state with React.
Hooks should only be called at the top level (not inside loops or if statements).
Hooks should only be called from React function components, not normal
functions or class components
Although these rules can't be enforced at runtime, code analysis tools such as
linters can be configured to detect many mistakes during development. The rules
apply to both usage of hooks and the implementation of custom hooks,[24] which
may call other hooks.
Common idioms
A React component under the Flux architecture should not directly modify any
props passed to it, but should be passed callback functions that create actions
which are sent by the dispatcher to modify the store. The action is an object whose
responsibility is to describe what has taken place: for example, an action
describing one user "following" another might contain a user id, a target user id,
and the type USER_FOLLOWED_ANOTHER_USER.[28] The stores, which
can be thought of as models, can alter themselves in response to actions received
from the dispatcher.
This pattern is sometimes expressed as "properties flow down, actions flow up".
Many implementations of Flux have been created since its inception, perhaps the
most well-known being Redux, which features a single store, often called a single
source of truth
History
Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from
a background JavaScript thread, which became the basis for the React web
framework. They decided to organize an internal Hackathon to perfect this
prototype in order to be able to build native apps with this technology.
After months of development, Facebook released the first version for the React
JavaScript Configuration in 2015. During a technical talk, Christopher Chedeau
explained that Facebook was already using React Native in production for their
Group App and their Ads Manager App.
Implementation
The working principles of React Native are virtually identical to React except that
React Native does not manipulate the DOM via the Virtual DOM. It runs in a
background process (which interprets the JavaScript written by the developers)
directly on the end-device and communicates with the native platform via
serialized data over an asynchronous and batched bridge.
React components wrap existing native code and interact with native APIs via
React’s declarative UI paradigm and JavaScript. This enables native app
development for whole new teams of developers, and can let existing native teams
work much faster.
While React Native styling has a similar syntax to CSS, it does not use HTML or
CSS.Instead, messages from the JavaScript thread are used to manipulate native
views. React Native also allows developers to write native code in languages such
as Java or Kotlin for Android and Objective-C or Swift for iOS, which makes it
even more flexible.
Babel
Developers can use new JavaScript language features by using Babel to convert
their source code into versions of JavaScript that evolving browsers are able to
process.[5] The core version of Babel was downloaded 5 million times a month
as of 2016, increasing to 16 million times per week as of 2019.[6][7]
Babel plugins are used to transform syntax that is not widely supported into a
backwards-compatible version. For example, arrow functions, which are
specified in ES6, are converted into regular function declarations.[8] Non-
standard JavaScript syntax such as JSX can also be transformed.[9][10]
Babel provides polyfills to provide support for features that are missing entirely
from JavaScript environments. For example, static methods like Array.from and
built-ins like Promise are only available in ES6+, but they can be used in older
environments if a Babel polyfill is used.
The fact that React Native actually renders using its host platform’s standard
rendering APIs enables it to stand out from most existing methods of cross-
platform application development, like Cordova or Ionic. Existing methods of
writing mobile applications using combinations of JavaScript, HTML, and CSS
typically render using webviews. While this approach can work, it also comes
with drawbacks, especially around performance. Additionally, they do not
usually have access to the host platform’s set of native UI elements. When these
frameworks do try to mimic native UI elements, the results usually “feel” just a
little off; reverse-engineering all the fine details of things like animations takes
an enormous amount of effort, and they can quickly become out of date.
For developers accustomed to working on the Web with React, this means you
can write mobile apps with the performance and look and feel of a native
application, while using familiar tools. React Native also represents an
improvement over normal mobile development in two other areas: the developer
experience and cross-platform development potential.
Developer Experience
If you’ve ever developed for mobile before, you might be surprised by how easy
React Native is to work with. The React Native team has baked strong developer
tools and meaningful error messages into the framework, so working with robust
tools is a natural part of your development experience.
For instance, because React Native is “just” JavaScript, you don’t need to rebuild
your application in order to see your changes reflected; instead, you can hit
Command+R to refresh your application just as you would any other web page.
All of those minutes spent waiting for your application to build can really add up,
and in contrast React Native’s quick iteration cycle feels like a godsend.
CHAPTER 5
SYSTEM DESIGN
5. SYSTEM DESIGN
A use case is a set of scenarios that describing an interaction between a user and
a system. A use case diagram displays the relationship among actors and use
cases. The two main components of a use case diagram are use cases and actors.
An actor is represents a user or another system that will interact with the system
modeled. A use case is an external view of the system that represents some action
the user might perform in order to complete a task
Fig:5.2 System Usecase
USECASE COMPONENTS
Actor and usecase are the main components of the usecase diagram
which are used to explain the access of function for a particular participant in
an application
The arrow show in the diagram are used to represent the relationship between
the usecase and the actor. The arrow point toward the usecase from the actor
which means the user have the access to the particular functionalities in the
project. The usecase diagram can contain multiple actor and can have multiple
access to the usecases. Similarly same usecase can be accessed by the multiple
actor/users in the project.
5.3 SEQUENTIAL DIAGRAM
The sequence diagram uses arrows to represent the message flow between
the object inside the project. The sequence of the arrow from top down method
represent the sequence of the message flow
An arrow as shown in the figure 5.3.2 will be used to mention the message flow
between the objects the label below the arrow represent the message. The point
of the arrow represent the direction of the message flow and the sequence of the
arrows used in the diagram represent the sequence of the message flow.
CHAPTER 6
IMPLEMENTATION
6. SYSTEM IMPLEMENTATION
In this chapter the main implementation of the projects is explained in
detail part by part in the form of modules. The implementation is based on the
project design as already mentioned in the system design chapter. The developer
always need to compare and verify the system design information for developing
the correct and proper implementation of the project.
Modules:-
Creating a Classes:-
A Teacher can Create a class as they enter into the meet and they can create as
many class they want and they can add the n number of students in the class once
the class is finished the teacher can export the attendance from the application as
a Excel sheet.
Once the Student login to the google meet using his google ID, our application
will capture the First name and Last Name of the Student as Check in our Class
list which the Teacher create the class earlier once the name matches the
attendance will be marked as present.
We use Google API Plugin to Extract Data from the Google Meet and Virtualize
it on Excel Spreadsheet the Google Engine will provide the API from Google
Meet where by using the API we fetch and Extract the data and virtualize it on
spreadsheet.
By using Google Api Engine we can save the Spreadsheet on Google drive and
can share the link to school to use this Spreadsheet. We authenticate user and
connect the Drive using OAuth google.
CHAPTER 7
TESTING
7.1 TESTING OBJECTIVE
The above diagram explains the different types of testing process carried
out during the system testing process. For a project to success the system
testing it has to pass all the above testing process
Equivalence Class
Boundary Value Analysis
Domain Tests
Orthogonal Arrays
Decision Tables
State Models
Exploratory Testing
All-pairs testing
1. Big-Bang Integration
2. Top Down Integration
3. Bottom Up Integration
4. Hybrid Integration
Expected
Controls Cases Value Outcome
Result
CHAPTER 8
APPENDICE
8.1 SCREENSHOT
8.2 SOURCE CODING
CHAPTER 10
Conclusion
Future Enhancement
In future we will also record the exact sign in and sign out of a particular student
and we are also designing a system where in the attendance details and the marks
details have been sent to their respective parents/guardians through broadcasting
of SMS. In future work, we can implement the attendance management system
using RFID technology
REFERENCES