
## 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_qm9jro.png'
    width='200'
    height='422'
  />
	<Image
    alt='Login Screen'
    src='/jagad.dev/projects/soiscan-mobile/Login_Screen_s5zkzj.png'
    width='200'
    height='422'
  />
	<Image
    alt='Home Screen'
    src='/jagad.dev/projects/soiscan-mobile/Home_Screen_aoicsh.png'
    width='200'
    height='422'
  />
	<Image
    alt='QR Scan Screen'
    src='/jagad.dev/projects/soiscan-mobile/QR_Scanner_Screen_jv43ig.png'
    width='200'
    height='422'
  />
	<Image
    alt='Confirmation Screen'
    src='/jagad.dev/projects/soiscan-mobile/Confirmation_Screen_g3kuz0.png'
    width='200'
    height='422'
  />
	<Image
    alt='History Screen'
    src='/jagad.dev/projects/soiscan-mobile/History_Screen_plrynp.png'
    width='200'
    height='422'
  />
</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.

## 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 ✅

Coming Soon

## 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 website to promote the services provided by Panca Olah Institute includes the development of human resources that focuses on character building, competence, and collaboration skills.

## Objective 🎯

This website was created with the intention of serving as a platform for the promotion of the programs and courses run by Panca Olah Institute as well as to offer information related to the development of a holistic self.
 
## Technologies Used 🧑‍💻

This website was created using JAM Stack technologies, which includes next.js, tailwind, and contentful as a Headless CMS.

The specifics of the library applied in this projects are as follows:

- **SWR** for data fetching
- **Framer Motion** for animations and transitions
- **Next SEO** to make SEO management simpler
- **React Slick** for carousel
- **Cusdis** for the commenting feature

## Features ✅

### Content management

A very important feature on this website is content management. This website uses Contentful as content management because it has good performance and is easy to use.

<Image
  alt='Feature 1'
  src='/jagad.dev/projects/panca-olah-institute-website/Feature_1_gk8dan.png'
  width='1366'
  height='667'
/>

### Transition and animation

Transitions and animations on this website use Framer Motion and Tailwind CSS.

<Image
  alt='Feature 2'
  src='/jagad.dev/projects/panca-olah-institute-website/Feature_2_llrhuq.gif'
  width='800'
  height='425'
/>

<Image
  alt='Feature 2-1'
  src='/jagad.dev/projects/panca-olah-institute-website/Feature_2-1_oar01q.gif'
  width='800'
  height='425'
/>

### Carousel components

A website feature known as a carousel UI allows users to slide, fade, or otherwise bring information into view in a series of items. The carousel on this website is made with react-slick.

<Image
  alt='Feature 3'
  src='/jagad.dev/projects/panca-olah-institute-website/Feature_3_avgg07.gif'
  width='800'
  height='425'
/>

### Pagination

To prevent performance from suffering due to an excessive content load, pagination is required.

<Image
  alt='Feature 4'
  src='/jagad.dev/projects/panca-olah-institute-website/feature_4_mfggl5.gif'
  width='800'
  height='425'
/>

### Dynamic sitemap

A sitemap is necessary to keep a website relevant or related, particularly those with content in the form of blogs or news, since it is easier for visitors to discover the website.

Because this website uses server side rendering, a **dynamic** sitemap is needed to keep the sitemap up-to-date.

<Image
  alt='Feature 5'
  src='/jagad.dev/projects/panca-olah-institute-website/Feature_5_nvlm6m.png'
  width='1685'
  height='917'
/>

## Results 🚀

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

<Image
  alt='Home Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Home_Page_cge4aw.png'
  width='1920'
  height='6947'
/>

<Image
  alt='Program Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Program_Page_wuxbqz.png'
  width='1920'
  height='2644'
/>

<Image
  alt='Program Detail Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Program_Detail_Page_n2kxkg.png'
  width='1920'
  height='2284'
/>

<Image
  alt='Course Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Course_Page_umhdvg.png'
  width='1920'
  height='1694'
/>

<Image
  alt='Course Detail Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Course_Detail_Page_oxfayc.png'
  width='1920'
  height='1583'
/>

<Image
  alt='Article Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Article_Page_xq1ugg.png'
  width='1920'
  height='2118'
/>

<Image
  alt='Article Detail Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Article_Detail_Page_jpawsx.png'
  width='1920'
  height='3968'
/>

<Image
  alt='Article Detail Page'
  src='/jagad.dev/projects/panca-olah-institute-website/Result_-_Article_Detail_Page_jpawsx.png'
  width='1920'
  height='3968'
/>

## What I Learn 💪

In this project, I learned how to use contentful to manage the content of the website. I also learned how to handle pagination and how to use the SEO features of the website.

A website to promote the services provided by Panca Olah Institute includes the development of human resources that focuses on character building, competence, and collaboration skills.

Panca Olah Institute Website


## 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 👀

A Telegram bot that can provide information about the spread of the COVID-19 outbreak in Indonesia. This bot takes advantage of the API from [mathdroid/covid-19-api](https://github.com/mathdroid/covid-19-api)

## Objective 🎯

The objective of developing this bot is to make it simpler for Indonesians to get the most recent information on COVID-19 cases throughout Indonesia, particularly in each province.
 
## Technologies Used 🧑‍💻

This bot was developed using the Python programming language. Additionally, the difflib library is utilized to manage typographical errors made by the user when inputting the province's name.

## Features ✅

### Get information about COVID-19 based on province.

Since the purpose of this bot is only for Indonesians, the bot can only be used to obtain information related to COVID-19 in Indonesia. But this bot can offer much more specific data, particularly for every Indonesian province.

<Image
  alt='Feature 1'
  src='/jagad.dev/projects/telegram-bot-covid/feature_1_vz3fwg.png'
  width='1027'
  height='479'
/>

### Manage typographical errors

When a user types the wrong provincial name, this bot includes an autocorrect feature and still provides information about COVID-19.

<Image
  alt='Feature 2'
  src='/jagad.dev/projects/telegram-bot-covid/feature_2_e7m6kp.png'
  width='1066'
  height='375'
/>

## Results 🚀

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

<GithubCard repo='jagadyudha/bot-telegram-covid'/>

## What I Learn 💪

In the process of developing this bot , I learned for the first time how to consume the API and how the Telegram API works.


Small programs for the public that can give you information about COVID-19 in Indonesia.

Telegram Bot Covid


## 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