Forem: Bhagya Kithmini

[Boost]

Bhagya Kithmini — Wed, 22 Oct 2025 06:05:00 +0000

Library Book Management Web Application

Bhagya Kithmini — Thu, 08 Dec 2022 17:25:38 +0000

Overview of My Submission

About the web app (functionalities and flow)

This is a small web application for a library. The main goal of this web application is to allow users to add/view books and organize them into a table. The data can then be updated and deleted as needed.

Used technologies/languages and reasons

To create this web application, I used spring boot with the mongo DB. As a client, to test the web application we used POSTMAN.

In the very first I went to start.spring.io, which is a spring initializer. In there I had to enter the relevant details of the project, which programming language I used to implement this, Spring Boot version likewise .Then I havd to generate this file. This is downloading as a zip file. After that I had to open it using Eclipse.

*Testing and Results with explaining CRUD operations *

•CRUD operations have been viewed in computer programming as the four core functions of persistent storage: creation, read, update, and delete (CRUD).

•For testing, I utilized Postman, which is more versatile and allows us to test all endpoints.

Create Operation:

The create operation is a POST request that takes a BookLibrary model object as an input and saves it to Mongo DB using the repository's save() method. It returns the saved instance, which will have the unique id.

Read Operation:

The read operation is a GET request to return all of a collection's documents.

Update Operation:

The update operation makes use of a PUT request, accepts book Id as a path variable, and utilizes the same save method (). Because the id is contained in the model object, it will be updated in the database in this scenario.

*Delete Operation: *

The delete action makes use of the delete request. The controller implementation is shown below.

Further I used validations to this web application.

Guidelines to test the app

Open the main application file and run it as a Java program to launch the Spring Boot application. The message appears in the console after the application runs correctly, as illustrated below. Now open the browser and type http://localhost:8080 into the address bar.

Open postman and click the ‘create’ button.

1.First, click the ‘new’ button.
2.After that click on the ‘Get request’.

Fill in the form to create the Get Request

Fill in the request name and store it to a collection; if one doesn't exist, make one.

We'd get an empty postman request now:

Send a simple restful get request to the spring boot service using Postman.

We'd get the following result if we ran across the breakpoint.

Add http post api to codes.

Add this code to the controller:

It contains two features:

1.It has a new endpoint named ‘/book’ which accepts an json object and call the service to save it
2.It has a new endpoint named ‘/book/{id}’ which accepts an id and return the specified book object as json.

Add this code to the service:

To save and query the Book object, it simply uses Spring data JPA.

Test the post api with postman

Create a new http request in postman

Ensure that the POST http method is selected.

Input the post url and headers.

The following http headers are required by the Spring Boot restful post api:

1.Content Type -application/json
2.Accept- application/json

It signifies that the server expects the client to send the item in json format.

Input the body of the http post Instead of using the http url to pass the request body, the http post protocol uses the http body to do so.

If we don't want to manually construct the json string, go to (localhost:8080/BookLibrary/Book/1) to acquire a json template for the Book class.

Submission Category:

Own Adventure

Link to Code

kithminiii / MongoAtlas-Hackathon

MongoDB Atlas Hackathon of Dev.to 2022

Getting Started With Non-relational Databases Using Mongodb 🍃

Bhagya Kithmini — Wed, 10 Aug 2022 20:28:06 +0000

What is a relational database?

If you’ve worked with databases for a while, chances are, you started your career using a relational database. Examples of a relational databases are Microsoft Access, MySql, Oracle, etc.

A relational database is a conventional database that uses tables to store data. In a relational database, each field data type is defined. That is if you define a particular field to accept only numbers for example age of a person, that field will not accept any character from a-z.

What is a non-relational database?

Before discussing fully what a non-relational database is, it is needful to define some key terminologies which can help us better understand a non-relational database and how it operates. These are:

Key-value pairs.
Document.
Collections.

Key-value pairs

Key-value pairs are identifiers and corresponding values. A simple way to know how this work is assuming one walks into a bar and asks for a waiter. The “waiter” in this scenario is the identifier while the name of the waiter for example “Bhagya”, is the value. So in JSON format, this can be represented as shown below.

{
    "waiter": "Bhagya"
}

What is a document?

Documents are a set of JSON data. It is basically a set of key-value pairs that give you detailed information about an entity. Below, is an example of a document for our waiter example. It contains personal information about the waiter.

{
    "id": 1,
    "name": "Bhagya",
    "username": "bhagya",
    "email": "bhagya@mongo.com",
    "phone": "+947623496905",
    "website": "bhagya.org"
}

What is a collection?

Collections are a set of documents. That is information about more than one entity. In a relational database, collections are what are known as tables.

[
  {
    "id": 1,
    "name": "Bhagya",
    "username": "bhagya",
    "email": "bhagya@mongo.com",
    "phone": "+947623496905",
    "website": "bhagya.org",
  },
  {
    "id": 2,
    "name": "Nimesh",
    "username": "Nimezzz",
    "email": "Snimesh@codebrix.com",
    "phone": "+94710876322",
    "website": "nimesh.net",
  },
  {
    "id": 3,
    "name": "Nethmini",
    "username": "nethmini",
    "email": "nethmini@bk.net",
    "phone": "+9476245555533",
    "website": "nethmini.info",
  }
]

So with the aforementioned defined terms, we can define a non-relational database as a database that stores data in JSON-like format which is achieved through key-value pairs. Examples of non-relational databases are MongoDB, Redis, Couchbase, etc.

Getting started with MongoDB?

MongoDB is a non-relational database. That is, it doesn’t store data in columns and rows but in BSON format. It is an open-source database founded in 2007. Open-source applications are software whose codebase is open to contributions from other developers.

Working with MongoDB can be in two variants. We can either access it online using MongoDB atlas or download it locally on our computer. For local downloads, we have two editions which are enterprise and community editions. The enterprise edition is the paid version while the community version can be used for free, obviously with limited capabilities when compared to the former.

We can access it online via

• MongoDB shell

• MongoDB compass

Registering for MongoDB Atlas

Before using any of the tools to start performing database operations, you need to register an account with MongoDB Atlas. It is a cloud database, that is all instead of hosting your own server, you just need to register and it’ll take care of what you need to do at the backend. To create an atlas account, follow the steps below

Go to mongodb.com
For practice, click on the Try Free option. This allows you to work with Atlas for development purposes.
A bio-data form will come up, fill in the required details. You can also use your Gmail account to sign up.
Next, you log in using the login details you just created
You can now proceed with deploying a free cluster by clicking on Build a cluster.
Three different option is available to you, the dedicated and serverless option are both paid version, for development purpose, click on the shared version.
You can now proceed to select a cloud provider and region.
Click on create cluster button.
After registration, you need to create a username and password alongside enabling database access.
Click database access. It will prompt you to add a database user.
Enter your preferred username and password.
Click on network access on the left pane.
Click on Add IP Address.
You can choose to allow specific IP addresses, or for development purposes, you can just allow access from anywhere.
Click on confirm. Now you can proceed to use MongoDB Shell or Compass.

Using MongoDB shell

MongoDB shell is a command-line environment that can be used to access your database.

Using MongoDB compass

MongoDB Compass is a tool like MongoDB shell that can be used to interact with our database. However, unlike the MongoDB shell which is primarily a command prompt interface, compass has a graphical user interface that makes it easy to work with.

To download and work with compass, follow the instruction below.

Download and install.
Go back to your Atlas homepage, and click on connect.
Click on connect using MongoDB Compass.
Copy the connection string from Atlas and paste it into the file path shown below.
Click connect.

If your connection is successful, you should see all databases created will be listed. You can view them by clicking on each one. And you can also create a new database by clicking on the create database button.

MongoDB compass lets you create your database, collection, and document in a very seamless way. If you would like to explore more, you can refer to the official documentation. For this tutorial, we’ll be focusing on the MongoDB shell which is a little bit complex. So let’s look at how we can perform CRUD operations using the MongoDB shell.

Performing CRUD operations on our database

CRUD is an acronym for creating, reading, updating, and deleting in programming. For one to perform the read, update or delete operation, a record has to be created initially on the database. Creating a record is adding data about an entity. Read operation means to get or view records in the database. The update operation is to make changes to the record that is in view. Delete operation means to remove a specific record.

Setting up a Spring Boot application with MongoDB🍃

Bhagya Kithmini — Wed, 10 Aug 2022 20:27:00 +0000

Spring Boot provides excellent support for applications accessing MongoDB as a database.

The following preparations are necessary to create our own application using Spring Data MongoDB.

Configuration

As a document-oriented database, MongoDB will not be connected to our application using Hibernate as an ORM layer. Instead, we add spring-boot-starter-data-mongodb as a dependency to our app, providing a similar approach to accessing MongoDB using POJOs and repositories.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>

Required Maven dependency

With this dependency in place, we can extend our application.ymlor application.properties with a URI. If the database does not exist yet, MongoDB will create it automatically. With setting auto-index-creation to true, unique indexes are added during the startup of our app if they are annotated in our documents with @Indexed(unique = true).

spring.data.mongodb.uri=mongodb\://localhost\:27017/mongo
spring.data.mongodb.auto-index-creation=true

Only the URI is required for a successful database connection

In our configuration class,@EnableMongoRepositories should be set. This will search for classes in the specified package that extend MongoRepository - an example of this will be given in a moment. By providing that ValidatingMongoEventListener all documents are validated before persisting, we can extend their fields with javax.validation constraints like @NotNull.

@Configuration
@EnableMongoRepositories("io.bootify.mongo.repos")
public class MongoConfig {

    @Bagya
    public ValidatingMongoEventListener validatingMongoEventListener(
            final LocalValidatorFactoryBean factory) {
        return new ValidatingMongoEventListener(factory);
    }

}

The first version of our config

Furthermore, we want to enable transaction support for our application. This allows us, for example, to mark the methods of our services as @Transactional. Please note that this requires our MongoDB instance to be initialized as a replica set to support this feature.

@Bagya
public MongoTransactionManager transactionManager(final MongoDatabaseFactory databaseFactory) {
    return new MongoTransactionManager(databaseFactory);
}

Adding transaction support to our config

Example Document and Repository

With these preparations, we can already define a simple document and its associated repository. For our example, we use a primary key of type String, which is automatically generated by MongoDB as ObjectID if we do not provide it.

@Document
public class Customer {

    @Id
    private String id;

    @Size(max = 255)
    private String firstName;

    @Size(max = 255)
    private String lastName;

    @Indexed(unique = true)
    @NotNull
    @Size(max = 255)
    private String email;

}

Our first POJO mapped to a collection named “customer”

We add our repository by extending MongoRepository. It works in the same way as known from Spring Data and can be extended with custom queries.

public interface CustomerRepository extends MongoRepository<Customer, String> {

    Customer findByEmail(String email);

}

Basic Repository for MongoDB

With this, all preparations are done to connect our Spring Boot application with MongoDB. In Bootify’s Free plan, we can generate the application with our custom database schema without registration. The runnable source code of our application is then directly available for download.

Accessibility 101

Bhagya Kithmini — Sun, 22 May 2022 11:02:58 +0000

Some accessibility practices that you should always keep in mind when building websites.

Accessibility

Accessibility, also known as A11y, allows websites to be used by everyone. Yes, everyone, not just the disabled. For example, an individual using their mobile device in the sun would also need an accessible website, the same as someone whose abilities are changing due to ageing. Accessibility allows us to build an inclusive web that works for everyone. Without further ado, let's discuss some accessibility practices that we should always keep in mind when building websites that work for everyone.

Colour Contrast

Sufficient colour contrast between text and background is important. A good text to background colour contrast ratio allows easy reading of the content of a web page. People with poor eyesight, colour blindness and other eye defects would find it difficult to distinguish between the text and the background of a web page with poor colour contrast. To ensure good contrast, you should follow the WCAG AA guidelines which specify a minimum contrast ratio of 3:1 for large text and 4.5:1 for smaller text.

Links

Links shouldn't be left empty as this makes it difficult for screen readers to understand. When a screen reader goes to that link, it doesn't say anything. For instance, if you have a link or button with a font icon, but without a text, you can fix the link or button by adding a hidden span indicating what it is, changing the icon to an SVG with a title or changing the icon to an image with alt text.

❌

    <a href="#">
        <i class="fa fa-search"></i>
    </a>

✅

<!-- visually hidden -->
    <a href="#">
        <span class="hidden_span">search for recipes</span>
        <i class="fa fa-search"></i>
    </a>

<!-- SVG with title -->
    <a href="#">
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
            <title>Search for recipes</title>
            <path d="M437.588,202.053C437.588,90.634,344.307,0,229.643,0S21.683,90.634,21.683,202.053s93.296,202.068,207.96,202.068 c43.421,0,83.744-13.04,117.128-35.243L456.982,490l11.335-10.318L359.242,359.809C406.918,322.749,437.588,265.857,437.588,202.053 z M229.643,388.809c-106.23,0-192.647-83.785-192.647-186.756S123.412,15.313,229.643,15.313c106.216,0,192.633,83.77,192.633,186.741S335.858,388.809,229.643,388.809z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
        </svg>
    </a>

<!-- Image with alt -->
    <button>
       <img src="search.svg" alt="Search for recipes">
    </button>

Labels

A label is an important part of a form, it makes screen reading easy. A lot of people think a placeholder can replace a label, no, a placeholder is only meant to give exemplary data for the input. Here are some ways of labelling your input:

❌

<!--- no label --->
<input id="name" name="name" type="text" />

✅

<label for="name">Name</label>
<input id="name" name="name" type="text" />

✅

<label>
  Name:
  <input name="name" type="text" />
</label>

✅

<!-- visually hidden label -->
<label for="name" class="hidden_label">Name</label>
<input id="name" name="name" type="text" />

Focus state

The Focus state shows the currently focused element and it is a requirement for a site to be considered accessible under the Web Content Accessibility Guidelines (WCAG). However, most developers have at one point or the other used :focus{outline:none} to remove focus from an element, this is a bad accessibility practice. To meet accessibility requirements, we can replace the default outline with our own focus indicator e.g adding a border styling on focus.

❌

:focus{
outline:none;
}

✅

:focus{
outline: none;
border: 2px solid black;
}

Alt Text

According to the WCAG guideline, all non-text content that is presented to the user should have a text alternative that serves the equivalent purpose. An alt text is an invisible text describing an image, it makes images on a website accessible to individuals with visual impairment using a screen reader and users who can't load the image due to slow internet or user setting. Images without alt text only get read as 'image' by the screen reader, this is why an alt text should be accurate and concise in describing an image.

❌

<img src="cat.png" alt="A cat" />

✅

<img src="cat.png" alt="A brown cat laying on a rug" />

Headings

Headings are a way of structuring web content, they aren't just to display text based on size, they're important for accessibility too. They allow screen readers and other assistive technology users to skip from heading to heading. A webpage should only contain one h1 tag, don't use headings where they're not needed e.g to emphasize or highlight text, instead, use CSS classes and don't skip headings e.g from <h2> to <h4>.

Ambiguous links

Link text such as 'read more', 'click here', 'more', etc can be ambiguous when read out of context by screen readers. You can fix this by using a more informative text.

❌

<a src="files.html">Click here</a> to view all files.

✅

<a src="files.html">View all files</a>

Accessibility (A11y) why is it so important?🧵

Bhagya Kithmini — Thu, 19 May 2022 14:03:02 +0000

What is "a11y" 🤔?

A11y - ACCESSIBILITY

Why do we write "a11y"?

Because between the letters "a" and "y" there are 11 other letters :)

What is network accessibility?

Surely you've experienced the annoyance of a slow page loading, unreadable font, bad and strange navigation, blurry and overlapping colors, a page that looks bad and doesn't work on a mobile device.

These problems may be a minor inconvenience for us, but for people with disabilities, they may UNTILALLY limit the use of the Internet.

Accessibility means that websites and web applications should use tools and technologies that facilitate the understanding, navigation and interaction of a disabled person through the website or application.

Such a procedure may seem difficult and unnecessary at first, but nearly 15% of people around the world have some kind of disability (about 1 billion people).

Taking care of the accessibility of your website or application takes on a different meaning!

The problem is so big that even 98% of the best sites in the world do not offer full accessibility!

Types of disabilities to keep in mind when designing a fully accessible website/app:

Visual disability
Hearing impairment
Disorders of the central and peripheral nervous system
Cognitive impairment
Motor disability

The main assumption of A11 is that people with disabilities should have the same access to information as people without.

ACCESSIBILITY STANDARDS

Level A If the page is not adapted to this level, it will be unavailable.

Level AA Increased level of accessibility for users, removes the greatest barriers and difficulties in accessibility for the user.

Leve AAA Highest level of availability desired, but not quite necessary.

EXAMPLES OF ACCESSIBILITY

Alternative texts for images.
Keyboard functionality (Using the mouse may be difficult in some cases).
Audio transcription.

Happy Coding!☕🌱

CSS For a Little Kid 🌸🌈

Bhagya Kithmini — Sun, 15 May 2022 15:55:33 +0000

Here I am going to teach you everything you need to know about CSS. So you can turn your blank HTML into something beautiful. I will not be covering every property or option that CSS has to offer, because there are hundreds. But I will be covering all the concepts you need to know in order to get started with CSS.

Let’s first get started with what CSS is:

A common misconception is that CSS is a programming language. But that is incorrect. CSS is actually a styling language that is used for modifying the appearance of the content of web pages. Just as HTML is used for the content of web pages.CSS is used for the presentation of that content. Due to the fact that CSS is used for presentation and design. There are many ways to do the same thing. HTML on the other hand has set elements for most things. This means there is usually only one correct way to do things in HTML. The ability to do things in many different ways is the reason, most people either love or hate CSS.

I personally love it, since it lets you express your creativity and gives you the freedom to do things how you want. Now that we understand what CSS is let’s dive into the details of how to use CSS.

First, we need to discuss the syntax of CSS.

Luckily the syntax is straightforward and easy to understand.

Selector{
    Property 1 :value;
    Property 2:value;
}

The first part of the syntax is a selector.

There are many different types and combinations of selectors, which we’ll talk about later. But for now, all you need to know is that a CSS style starts with a selector to apply the style too. Next comes an opening and closing curly brackets. That is used to denote the start and end of the styles that apply to the selector.

Everything in between these curly brackets will be styles that are applied to the HTML elements that match the selector.

Lastly inside the curly brackets, is one or more property-value pairs. Each of these pairs defines a property such as color, font size, width, etc, and a value for that property.

A basic example of the CSS syntax will be setting the text color of all h1 elements to blue.

h1{
    Color: blue;
 }

Now that we have the syntax out of the way.

Let’s focus on the various selectors.Css contains many different types of selectors but the main selectors are ‘element’, ‘class’, and ‘id’ selectors.

We have already seen the element selector in the previous example of turning all h1’s blue. Any HTML element can be used as a selector and this style is defined for that selector will apply to all HTML elements of that type. By far the most common and useful selector is the class selector.

The class selector lets you select HTML elements based on their class attribute.

A class is just an attribute that all HTML elements can have and is used with CSS to distinguish elements for specific styling.

The class attribute can also have multiple different classes in the same attribute as long as they are separated by a space.

Classes are the most common selector used because they are amazing for creating reusable components.

For example, if you have a site with three different types of buttons that all share the same basic styling but have a different color.

You can use one base class of buttons to define all the styles shared between all buttons. You can have then three other classes that define the specific color for the button.

Then all you need to do is add both the base button class and your color-specific class to your HTML button element. Here I have all the styles defined in the base button class and the color-specific class.

<button class =”btn btn-1”>button 1</button>
<button class =”btn btn-2”>button 2</button>
<button class =”btn btn-3”>button 3</button>

.btn{
    Padding : 10px;
    color:white;
}

 btn-1{background-color:green;}

 btn-1{background-color:blue;}

 btn-1{background-color:purple;}

The last comment selector is the id selector

The id selector is very similar to the class selector in that it is an HTML attribute. But an element can only have one id while it can have multiple classes. And id also should be unique across the entire web page. But HTML does not actually enforce this.

To use an id as a selector you simply need to use a pound sign followed by the id name, much like how classes use a period followed by the class name.

<h1 id=”main-header>Title</h1>

#id{
 property:value;
}

On top of having many different selectors, CSS has multiple different ways to combine selectors together to make your selectors more specific.

The first way to combine selectors is specify multiple selectors that an element must have in order to be styled. To do this, you need to write the various different selectors together with no spacing between them.

.selector-1.selector-2{
    property:value;
}

For example, if you wanted to select all h1 elements with the class large heading, then you would write the following selector.

<h1 class=”large-heading”>Title</h1>

h1.large-heading {
    font-size:200%;
}

If you wanted to select an element with the id big-blue and both the class large blue.

<h2 id =”big-blue” class=”large blue”>Title</h2>

#big-blue.large.blue{
    Color:blue;
    font-size:200%;
}

All the HTML elements can be combined in this way as many times as you want to create specific or general rules.

Another way to combine selectors is to use multiple selectors to specify an ancestor of an element. To do this you will put a space between the ancestor and child selector.

For example to select all p tags inside a div, you simply need to use the following selector.

<div>
    <p>Selected</p>
    <p>Selected</p>
    <span>
        <p>Selected</p>
    </span>
</div>

div p {
    Color : red;
 }

This will select all p tags, that have a div as their ancestor. Even if the div tag is not the direct parent of the p tag. This combination of selectors can be combined with the previous combination of selectors to
Make even more specific selectors.

For example, to select all h1 tags, with the class of brown to have a header with the class main header as their ancestor, you would do this.

<header class=”main-header>
    <h1 class=”brown”>Selected</h1>
</header>

header.main-header h1.brown{
    Color: brown;
 }

The last common combination of selectors is when you want to share a set of style properties and values between multiple selectors.

If you have a class big and another class large, that both have the same style properties and values, then you can combine these selectors into one selector by using a comma between the selectors. This allows you to avoid duplication.

.big{
    font-size:200%              
}

.large{
    font-size:200%
}

.big, .large{
    font-size:200%
}

It is important to note that all the CSS combination selectors can be used together to create even more complex combinations if needed.

There is also one other form of selector the everything selector, that is used to select every element on the entire web page. This selector is defined as the asterisk symbol and is only used to set some defaults for your entire webpage such as font family.

*{
font-family: Arial;
}

The last thing we need to discuss before writing some css is how to load the styles we write into our html page.

There are 3 main ways to do this. The first and by far the worst is to use inline styles. An inline style is CSS that is written directly inside an Html element and thus does not need a selector.

<h1 style =”color:red;”>Red Title</h1>

This is done through the use of the style attribute. This is a terrible idea though since HTML is meant for the content only and mixing CSS styles into the HTML elements adds presentation to the HTML file, which is meant for CSS files. It prevents us from reusing those styles anywhere else since they are written into the actual HTML element.
Lastly, depending on the styles, you use inline, your page may load slower.

The second option of using the style HTML element is slightly better but still a bad idea.

<head>
    <style>
        .blue{
            Color:blue;
        }
    </style>
</head>

The style element is an HTML element defined in the head and formatted exactly like a CSS file. The problem with using the style element though is that the presentation of the web page is defined in the HTML file and not a CSS file. The styles you define in the style element are also only available on the page you define them and are not reusable across multiple pages.

The final and the best way to define CSS styles is to use a separate CSS file and link to it from the HTML.
All the styles for the entire webpage can be defined in one or more CSS files and they can be added to any web page by using a simple link element inside the head.

The link element is a simple element that can be used to link files to the HTML and its main use is to link CSS files. The link element is also an empty element that uses the rel attribute which stands for the relationship to define the relationship between the linked file and the HTML document. In the case of CSS, the rel attribute will be a stylesheet since CSS is a stylesheet for the HTML.

<head>
<link rel=”stylesheet”  hrf=”style.css>
</head>

The only other attribute that we need to define is the href attribute. The href attribute works exactly the same as the href attribute of an anchor tag and should point to either your CSS file or the URL of another person’s CSS file.

Using external CSS files like this is the best way to CSS since it separates the presentation and contents of websites and allows the reusability of styles across the website.

Now that we have an understanding of how to write CSS styles and select specific Html elements.

Happy Coding !☕🌱

Tik Tik ToDo🌺 🍃

Bhagya Kithmini — Tue, 10 May 2022 18:38:13 +0000

Overview of My Submission:

Hello.👋

Actually I am new to appwrite. So had to educate my self on how appwrite works and make sure that I have understood all the concepts.😎🚩

Was busy with my studies, so couldn't create a big application using appwrite. But I created a simple ToDo application with AppWrite and React Native.🙂

To Run the Project

You guys also can run this web app on your machine too.❤️

Now run the following commands and you should be good to go 💪🏼

$ npm install

For iOS devices you'll need to link the relevant CocoaPods.
From the /ios directory run:

pod install

To run on Android:

$ npx react-native run-android

To run on iOS:

$ npx react-native run-ios

Submission Category:

Wacky Wildcards

Link to Code

kithminiii / TikTik-ToDo

ToDo App for Dev + Appwrite Hackathon 2022

TikTik-ToDo

To Run the Project

Now run the following commands and you should be good to go 💪🏼

$ npm install

For iOS devices you'll need to link the relevant CocoaPods. From the /ios directory run:

pod install

To run on Android:

$ npx react-native run-android

To run on iOS:

$ npx react-native run-ios

View on GitHub

Happy Coding! ☕🌱

Voice Web - For Deepgram Dev Hackathon 🌱✨

Bhagya Kithmini — Sat, 09 Apr 2022 06:59:37 +0000

Hello👋

Actually I am new to deepgram. So had to educate my self on how deepgram works and make sure that I have understood all the concepts.😎🚩

Before get started with sending the request to deepgram we need to capture our voice and in order to do that we need to make use of the media capture and streams api.🎧

This is a simple web application that we can create using voice.

You guys also can run this web app on your machine too.❤️

First you have to clone this project in your pc and then replace deepgram api key with your newly created one which is in the script.js file.👽

Then navigate to the project folder. Install all the dependancies by running npm install🌱

After the dependancies have installed, you can run the project with npm run dev to obtain your local IP address.🌱🐥

As the Media Capture and Streams API requres a secure HTTPS connection to interact with your microphone, you will need to install SSL certificates for the project.

Generate the certificates by running: mkcert YOUR_IP_HERE localhost

We can provide more than one IP address.

Once those have been generated, want to make sure they are placed in the root of the project.

Navigate to the /bundler/webpack.dev.js file, and replace YOUR_SSL_CERT_KEY and YOUR_SSL_CERT with a path to the certificate and key file generated in the previous step.

Make sure all files have been saved and run npm run devagain.

Allow the browser to use your microphone.

Say something! Your text should be visible on the screen!

Now it's your time to experiment! 🚀

Submission Category:

Wacky Wildcards

Link to Code on GitHub

kithminiii / Deepgram-Hackathon

Voice Web Application for Dev + Deepgram Hackathon 2022

Deepgram-Hackathon

Actually I am new to deepgram. So had to educate my self on how deepgram works and make sure that I have understood all the concepts.😎🚩

Before get started with sending the request to deepgram we need to capture our voice and in order to do that we need to make use of the media capture and streams api.🎧

This is a simple web application that we can create using voice.

You guys also can run this web app on your machine too.❤️

First you have to clone this project in your pc and then replace deepgram api key with your newly created one which is in the script.js file.👽

Then navigate to the project folder. Install all the dependancies by running npm install🌱

After the dependancies have installed, you can run the project with npm run dev to obtain your local IP…

View on GitHub

Happy Coding ! 🌱

Leave Management System🐱‍💻

Bhagya Kithmini — Tue, 08 Mar 2022 00:06:09 +0000

Overview of My Submission

This is a leave management apllication created using powerapps with share point with CRUD operations.

In this application employee can submit their leave according to the reason. After submitting the request employee can navigate into the home screen.There is a button in the home screen called "View my application", by clicking this button, employee can go to the list of leave requests page. In this screen employee can see weather their leave request approved or declined. Furthermore in this screen there is a button called, "Edit". By clicking this button employee can edit their leave request. These are the main functions of this application.

First I created a sharepoint site.Then added lists in there.

Then opened a blank app in the power app and started to create the application.

Submission Category:

Low-Code Legends

Link to Code on GitHub

kithminiii / LeaveManagement

Levae Management System for Dev + Azure Microsoft Azure Trial Hackathon 2022

Leave Management Application

License

Apache License 2.0

Overview of the System

This is a leave management apllication created using powerapps with share point.

First I created a sharepoint site.Then added lists in there.

Then opened a blank app in the power app and started to create the application.

Submission Category

Low Code Legends

Additional Resources / Info

View on GitHub

Link to Application:

https://apps.powerapps.com/play/c37590ba-e006-454f-b8ec-0d5d49d60fed?tenantId=44e3cf94-19c9-4e32-96c3-14f5bf01391a

Demo Video for the application:

https://drive.google.com/file/d/1go2yAm93avNnvuQ7q_3iMa9T72XeSDwo/view?usp=sharing

Additional Resources / Info

Employee Management System

Bhagya Kithmini — Mon, 07 Mar 2022 23:13:21 +0000

Employee Leave Management system

Overview of My Submission

This is a leave management system for employees. Which is a process within an organization that determines how leave is requested by employees and approve by managers, as well as how it tracked for payroll balance, and other purposes.

First employee can select their leave type as sick leave,vacation, floating holiday, jury duty likewise.
Then can select the date range of the leave and fill the reasons detail wise and should click the submit button.

In the home screen all the leaves applied by the employee is listed down. As well as Pending requests, Approved requests, declined are listed seperately.

And there is a another screen that shows holidays.

On the manager login side, manager can view all the leave requests of the employee. Then he can see the details and consider that approve or decline the request.As well , there is another screen in the manager side that, manager can send an email to the employee via the system.

These are the main functions of the system.

Below are few code lines in employee management part.

Set(_selectedLeaveItem, ThisItem);

If(_managerView, 
    //If manager view, get user's leave balance record and determine any overlaps this request has from other people I manage
    Set(_requesterBalanceRecord, LookUp(Balance, Year = Text(Year(Now())) && EmployeeEmail = ThisItem.Requester));
    ClearCollect(RequestOverlaps, Filter(Leave, EndDate >= _selectedLeaveItem.StartDate && StartDate <= _selectedLeaveItem.EndDate 
    && Requester <>_selectedLeaveItem.Requester));

    If(CountRows(RequestOverlaps) > 0, Set(_requestOverlapMessage, Concat(Distinct(RequestOverlaps, Requester), Result, ", ")))
);

Concurrent(
    //gather requester or approver info depending on view
    If(_managerView, 
        Set(_requester, Office365Users.UserProfile(ThisItem.Requester)), 
        Set(_selectedApprover, Office365Users.UserProfile(ThisItem.Approver)); If(Office365Users.UserPhotoMetadata(_selectedApprover.Id).HasPhoto, Set(_selectedApproverPhoto, Office365Users.UserPhoto(_selectedApprover.Id)))),
    //**** CALCULATION USED TO DETERMINE TOTAL WORK DAYS REQUESTED ****
     Set(_inclusiveTotalDaysRequested, DateDiff(ThisItem.StartDate, ThisItem.EndDate, Days) + 1);
        Set(_numFullWeeks, RoundDown(_inclusiveTotalDaysRequested / 7, 0));
        Set(_numFullDaysPartialWeek, _inclusiveTotalDaysRequested - _numFullWeeks * 7);
        Set(_startWeekday, Weekday(ThisItem.StartDate)); 
        Set(_endWeekday, Weekday(ThisItem.EndDate));


       //calculates the number of business days in the partial week left over after whole weeks are subtracted out of total days requested
    If(_numFullDaysPartialWeek = 6, 
        If(_startWeekday <= 2, Set(_numPartialWeekdays, 5), Set(_numPartialWeekdays, 4)
        ),
      _numFullDaysPartialWeek = 5,
        If(_startWeekday = 2, Set(_numPartialWeekdays, 5), _startWeekday = 1 || _startWeekday = 3 || _startWeekday = 4, Set(_numPartialWeekdays, 4), Set(_numPartialWeekdays, 3)
        ),
      _numFullDaysPartialWeek = 4,
        If(_startWeekday = 2 || _startWeekday = 3, Set(_numPartialWeekdays, 4), _startWeekday = 1 || _startWeekday = 4, Set(_numPartialWeekdays, 3), Set(_numPartialWeekdays, 2)
        ),
      _numFullDaysPartialWeek = 3,
        If(_startWeekday = 6 || _startWeekday = 7, Set(_numPartialWeekdays, 1), _startWeekday = 1 || _startWeekday = 5, Set(_numPartialWeekdays, 2), Set(_numPartialWeekdays, 3)
        ),
      _numFullDaysPartialWeek = 2,
        If(_startWeekday = 7, Set(_numPartialWeekdays, 0), _startWeekday = 1 || _startWeekday = 6, Set(_numPartialWeekdays, 1), Set(_numPartialWeekdays, 2)),
      _numFullDaysPartialWeek = 1,
        If(_startWeekday = 1 || _startWeekday = 7, Set(_numPartialWeekdays, 0), Set(_numPartialWeekdays, 1)
        ),
      _numFullDaysPartialWeek = 0, Set(_numPartialWeekdays, 0)
    );
      Set(_workDaysInRequest, _numFullWeeks * 5 + _numPartialWeekdays),
      Set(_holidaysInRequest, CountIf(Holidays, StartDate >= ThisItem.StartDate, StartDate <= ThisItem.EndDate))
);
Set(_requestedDays, _workDaysInRequest - _holidaysInRequest);
//**** END CALCULATION ****
Set(_showDetails, true);

Submission Category:

Low-Code Legends

Link to Code on GitHub

kithminiii / EmployeeLeavesManagmentSystem

Employee Leaves Managment System

Overview of the System

Submission Category

Low Code Legends

License

Apache License 2.0

Screen Shots of the System

Thre are 10 interfaces in this system.

1.Login Screen

2.Home Screen

3.New Request Screen

4.Company Holidays Screen

5.Leave Balance Screen

6.Confirmation Screen

7.Change Approver Screen

8.Manager Change Request Screen

9.Manager Send Email Screen

10.About Screen

View on GitHub

Link to the system:

https://apps.powerapps.com/play/41b5329c-2c1b-4c74-91bf-30156794f6b9?tenantId=44e3cf94-19c9-4e32-96c3-14f5bf01391a

Demo Video of the System:

https://drive.google.com/file/d/1-4YefJUhL1tUjZ6vnBQvRCX8ZxGilwOe/view?usp=sharing

Additional Resources / Info

Thre are 10 interfaces I used to create the system.

1.Login Screen

2.Home Screen

3.New Request Screen

4.Company Holidays Screen

5.Leave Balance Screen

6.Confirmation Screen

7.Change Approver Screen

8.Manager Change Request Screen

9.Manager Send Email Screen

10.About Screen