
## Overview 👀

Moodlify is an expert system application to identify anxiety disorders using Naive Bayes as a decision-making method by utilizing expert data. This project was initiated by my friend, Tutut Anjarsari, and me as an assistant.

<Embed src='https://www.youtube.com/embed/gSRR4nKFvN0'/>

## Objective 🎯

This website was created with the objective of educating the general public about anxiety disorders and aiding in the early detection of anxiety disorders in those who need it.
 
## Technologies Used 🧑‍💻

This website is built with several technologies, including nextjs, tailwind, flask, and sklearn. The specifics of the technology applied in this application are as follows:

- **Supabase** - for data storage
- **DaisyUI** - to provide ready-made components
- **React hot toast** - for notifications
- **Framer motion** - for animation
- **Next Seo** - for SEO

## Features ✅

### Auto Scroll

In order to provide a comfortable user experience, auto scroll is used when the user is filling out the test.

<Image
  alt='Auto Scroll'
  src='/jagad.dev/projects/moodlify/auto_scroll_bywop1.gif'
  width='900'
  height='505'
/>

### Hot Toast

Hot toasts are used to display a message to the user. The messages indicator can be loading, successful, or error.

<Image
  alt='Toast'
  src='/jagad.dev/projects/moodlify/toast_zm7czc.gif'
  width='930'
  height='514'
/>

### History

This feature is used to track the results of tests that have been done previously.

<Image
  alt='Toast'
  src='/jagad.dev/projects/moodlify/test_tw55bd.png'
  width='956'
  height='578'
/>


## Results 🚀

The following are the results of the website that has been developed:

<Image
  alt='Home Page'
  src='/jagad.dev/projects/moodlify/home_nfzxii.png'
  width='1920'
  height='1379'
/>

<Image
  alt='Test Page'
  src='/jagad.dev/projects/moodlify/test_tw55bd.png'
  width='1920'
  height='1040'
/>

<Image
  alt='History Page'
  src='/jagad.dev/projects/moodlify/profil_aaqhvy.png'
  width='1920'
  height='1792'
/>

## What I Learn 💪

In this project, I learned how to integrate flask with sklearn, which is generally only used in Jupyter notebooks (modeling).


An application to identify anxiety disorders for free

Moodlify - Anxiety Disorder Testt


## Overview 👀

Soiscan is a mobile application that offers an easy way to contact tracing by sharing QR Codes with each others. This application is the result of "Riset Keilmuan" conducted by Mr. Irwan, my lecturer and supervisor. He gave me the opportunity to develop the front-end (mobile).

<Embed src='https://www.youtube.com/embed/14v2miFH50g'/>

## Objective 🎯

The purpose of developing this application is to mitigate the spread of the virus (whatever the virus is) by scanning each other when they meet, so that when one is exposed to COVID, all people who have met will be notified.
 
## Technologies Used 🧑‍💻

The React Native framework was used to build this app in an effort to speed the development of apps for both the Android and iOS platforms.

The specifics of the technology applied in this application are as follows:

- **React Navigation** - for navigation between pages
- **React Native Camera** - to read QR codes
- **Keychain** - untuk menyimpan token agar lebih aman
- **Geolocation Service** - to read user coordinates

## Features ✅

### React Navigation

This app uses the react navigation library to be able to navigate from screen to screen more efficiently.

### QR Code Scanner

A QR Code scanner from the React Native Camera library is required in order to be able to read other users' QR Codes.

### Keychain

Keychain is used to secure tokens and refresh tokens, instead of using unsecured async storage.

### Geolocation

Geolocation is used to capture user coordinates, which are to be recorded in the database.

## Results 🚀


<div className='grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 flex flex-col items-center justify-center'>
  <Image
    alt='Welcome Screen'
    src='/jagad.dev/projects/soiscan-mobile/Welcome_Screen_ibderk.png'
    width='200'
    height='410'
  />
	<Image
    alt='Login Screen'
    src='/jagad.dev/projects/soiscan-mobile/Login_Screen_e4my1a.png'
    width='200'
    height='410'
  />
	<Image
    alt='Home Screen'
    src='/jagad.dev/projects/soiscan-mobile/Home_Screen_ryis9u.png'
    width='200'
    height='410'
  />
	<Image
    alt='Confirmation Screen'
    src='/jagad.dev/projects/soiscan-mobile/Confirmation_Screen_ker2mh.png'
    width='200'
    height='422'
  />
	<Image
    alt='History Screen'
    src='/jagad.dev/projects/soiscan-mobile/History_Screen_ttugps.png'
    width='200'
    height='410'
  />
</div>

## What I Learn 💪

This app development process taught me a lot, including how to store access tokens more securely using the keychain (In previous projects, I always used help from firebase)


Application for contact tracing by sharing QR Codes with each other

Soiscan Mobile


## Overview 👀

This is the website of one of my clients, which is used to provide information related to PemDes Kebonsari in Sidoarjo Regency. This website provides various information, including infographics, SMEs, information on toga plants, and contact information.

<Embed src='https://www.youtube.com/embed/wUSf02pbGbI'/>

## Objective 🎯

The objective and hope for the development of this website is:

1. showing that Kebonsari is a modern village that is constantly modernizing its system.
2. increasing people's knowledge of Kebonsari.
3. provide information about Kebonsari
4. showing the original MSMEs (UMKM) of Kebonsari
 
## Technologies Used 🧑‍💻

Next.js and Tailwind CSS were used to create this website. Another technology is next-seo, which optimizes websites to make it easier for search engines to index.

## Results 🚀

The following are the results of the website that has been developed:

<Image
    alt='Home Page'
    src='/jagad.dev/projects/pemerintah-desa-kebonsari/Home_Page_qzqil0.png'
    width='1920'
    height='3493' />

<Image
    alt='Toga Plants Page'
    src='/jagad.dev/projects/pemerintah-desa-kebonsari/Toga_Plants_Page_w4hevw.png'
    width='1920'
    height='1888' />

<Image
    alt='Contact Page'
    src='/jagad.dev/projects/pemerintah-desa-kebonsari/Contact_Page_kbl4yu.png'
    width='1920'
    height='1394' />

## What I Learn 💪

The process of developing this application taught me a lot, I learned that the website must be responsive, and that it must be seen on a variety of devices.

Provide information related to the PemDes Kebonsari in Sidoarjo Regency.

Pemerintah Desa Kebonsari


## Overview 👀

CitizenApp is a mobile application that allows citizens of Sidoarjo to report damage to public facilities such as roads, sidewalks, traffic lights and street signs by simply scanning a QR code.

## Objective 🎯

The objective of developing this app is to give Sidoarjo people a way to report damage to public facilities and to make it simpler for the local government to track damage to public facilities in Sidoarjo.
 
## Technologies Used 🧑‍💻

The React Native framework was used to build this app in an effort to speed the development of apps for both the Android and iOS platforms.

The specifics of the technology applied in this application are as follows:

- **React Navigation** - for navigation between pages
- **React Native Camera** - to read QR codes
- **Firebase Auth** - for authenticate using a google account
- **React Native Geolocation** - to read user coordinates
- **Mapbox API** - to convert coordinates to address
- **React Native Maps** - to display maps based on coordinates

## Features ✅

### Google authentication

Untuk memudahkan pengguna dalam proses login, digunaka library react native firebase

### Bottom navigation

Aplikasi ini menggunakan library react navigation untuk dapat melakukan navigasi dari layar ke layar

### QR Code Scanner

### Map View

### Geolocation

### Geocoding



## Results 🚀

We've officially released the citizenApp on the Playstore, and it's available for free. At the following link: [CitizenApp - Aplikasi di Google Play](https://play.google.com/store/apps/details?id=com.jagadyudha.citizenapp).

<div className='grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
  <Image
    alt='Splash Screen'
    src='/v1652798608/jagad.dev/projects/citizenapp/Splash_Screen_fmebdd.png'
    width='200'
    height='422'
  />
  <Image
    alt='Login Screen'
    src='/v1652798606/jagad.dev/projects/citizenapp/Login_Screen_akaznj.png'
    width='200'
    height='422'
  />
  <Image
    alt='Home Screen'
    src='/v1652798609/jagad.dev/projects/citizenapp/Home_Screen_uvjaqz.png'
    width='200'
    height='422'
  />
  <Image
    alt='Explore Screen'
    src='/v1652798611/jagad.dev/projects/citizenapp/Explore_Screen_rmbgvt.png'
    width='200'
    height='422'
  />
  <Image
    alt='Detail Report Screen'
    src='/v1652798610/jagad.dev/projects/citizenapp/Detail_Report_Screen_ad8tjc.png'
    width='200'
    height='422'
  />
  <Image
    alt='Rank Screen'
    src='/v1652798608/jagad.dev/projects/citizenapp/Rank_Screen_xi5e4m.png'
    width='200'
    height='422'
  />
  <Image
    alt='Profile Screen'
    src='/v1652798607/jagad.dev/projects/citizenapp/Profile_Screen_swqe6y.png'
    width='200'
    height='422'
  />
  <Image
    alt='Add Report Screen'
    src='/v1652798607/jagad.dev/projects/citizenapp/Add_Report_Screen_hfdhst.png'
    width='200'
    height='422'
  />
</div>

## What I Learn 💪

The process of developing this application taught me a lot, including how to manage responsive mobile applications. In addition, this is my first project that uses maps as the primary feature (geolocation, geocoding, and map view), so I may refer to it in the future.


Mobile app that allows citizens of Sidoarjo to report damage to public facilities by simply scanning a QR code.

CitizenApp - Sidoarjo Smart City


## Overview 👀

A contactless thermometer, as its name suggests, is a device used to measure the body's temperature by bringing the body closer to the thermometer, up to a distance of three meters.

## Objective 🎯

Making this thermometer is done for two reasons: first, to obtain an A in Kuliah Kerja Nyata (KKN), and second, to utilize it at the village hall as a first-stage screening device for COVID-19.
 
## Technologies Used 🧑‍💻

The Arduino microcontroller was used to create this thermometer, which is popular among IoT (internet of things) activists.

The specifics of the technology applied in this thermometer are as follows:

- Gy-906
- Ultrasonic hc-sr04
- Buzzer
- LCD Display 1602 16x2

## Features ✅

### gy-906 temperature sensor

The primary goal in creating this device was to measure body temperature. Therefore, a temperature sensor that can be detected in real time is essential. Sadly, this sensor still detects objects even when nobody is in front of it.

<Image
  alt='Feature 1'
  src='/jagad.dev/projects/contactless-thermometer/feature_1_mxf7qk.png'
  width='1177'
  height='582'
/>

### Ultrasonic hc-sr04 sensor

An ultrasonic sensor, hc-sr04, is needed to solve the problem of a temperature sensor that still detects objects even when nobody is in front of it. This sensor works by detecting movement at a maximum distance of 3 meters.

This sensor is required to reduce needless detection, so the gy-906 temperature sensor will only turn on when it detects an object at a distance of no more than three meters.

<Image
  alt='Feature 2'
  src='/jagad.dev/projects/contactless-thermometer/feature_2_njr7wx.png'
  width='1428'
  height='926'
/>

### Notification Sounds

When motion is detected, a buzzer plays a sound to let the user know that the device has caught up the movement.

<Image
  alt='Feature 3'
  src='/jagad.dev/projects/contactless-thermometer/feature_3_nkmuy6.png'
  width='1226'
  height='682'
/>

### Display temperature data

Users may determine whether their body temperature is normal or not by looking at the data shown on the 1602 16x2 LCD.

<Image
  alt='Feature 4'
  src='/jagad.dev/projects/contactless-thermometer/feature_4_odoojb.png'
  width='1327'
  height='682'
/>

## Documentation 📽️

### Coding process

The Arduino IDE is used to write code in the C programming language. This software can make writing easier because the code can be directly uploaded to the Arduino board.

<Embed src='https://www.youtube.com/embed/L4FLjPFYWH0'/>

### Put Arduino on the case

It would be nice if a case was put to hide the many cables so that the device looked clean.

<Embed src='https://www.youtube.com/embed/k56CQUUr8wo'/>

## Results 🚀

The following are the results of the device that has been made and installed at the village hall in the Sidoarjo area.

<Embed src='https://www.youtube.com/embed/Nq7PvgTu9vk'/>

## What I Learn 💪

In the process of making this device, I learned a lot about cable wiring and how to use it. I'm also learning how to code on arduino.

A contactless thermometer, as its name suggests, is a device used to measure the body temperature by bringing the body closer to the thermometer, up to a distance of three meters

Contactless Thermometer


## Overview 👀

Simple Google scraper is a specialized tool designed to quickly extract data from a google page.

## Objective 🎯

The objective of developing this tool is to retrieve URL data on Google quickly and instantly with the help of Google Search Operators.
 
## Technologies Used 🧑‍💻

Because Python includes a library specifically designed for data scraping called Beautifulsoup4, it was chosen as the programming language to create these tools. In order to get html on Google pages, a library request is needed.

## Features ✅

### Data scraping based on the required number of pages

When the tool is run, the user may choose the page they wish to scrape by inputting numbers instead of just scraping one page.

<Image
  alt='Feature 1'
  src='/jagad.dev/projects/simple-google-scraper/faeture_1_mki9qm.png'
  width='1030'
  height='397'
/>

### Use Google's search operators

To maximize the results of scraping, Google search operators are required. You can click the following link to learn more about how the Google search operator actually works: [Scraping Google Search With Python and Beautifulsoup4 — Jagad Yudha Awali](https://jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4#optimize-search-with-google-search-operators)

<Image
  alt='Feature 2'
  src='/jagad.dev/projects/simple-google-scraper/faeture_2_xas2o7.png'
  width='1030'
  height='397'
/>

## Results 🚀

Since this tool is open source, others are allowed to improve it. This tool's repository may be found here:

<GithubCard repo="jagadyudha/google-scraper"/>

## What I Learn 💪

In the process of developing this tool , I gained knowledge about Requests and how Beautifulsoup4 gets specific data based on html tags that are obtained through Requests.

Simple Google scraper is a specialized tool designed to quickly extract data from a google page

Projects

Moodlify - Anxiety Disorder Testt

Soiscan Mobile

Pemerintah Desa Kebonsari

CitizenApp - Sidoarjo Smart City

Contactless Thermometer

Simple Google Scraper