Projects

A collection of 6 projects that I have written.

Projects

Kegiatan Kelompok Aceh Besar Di Bimtek Digitalisasi Pembelajaran Serpong, Jakarta Selatan

🌟 Hari yang Penuh Semangat!Perjalanan kami, tim dari Kabupaten Aceh Besar, menuju Bimbingan Teknis (Bimtek) Digitalisasi Pembelajaran di Serpong, Jakarta Selatan, benar-benar menjadi pengalaman berharga. Kegiatan ini diikuti oleh para pendidik inspiratif dari seluruh Indonesia yang memiliki semangat tinggi untuk beradaptasi dengan era pembelajaran digital.Kelompok kami terdiri dari enam guru hebat Aceh Besar:Dhiyaul Abrar, S.PdNIP. 199703302022211001SMA Negeri 1 Darul Imarah Aceh BesarAlfaruq Asri, S.PdNIP. 199806262023211003SMA Negeri Modal Bangsa Aceh BesarApriliandi, S.PdNIP. 199704072022211001SMA Negeri 1 Darussalam Aceh BesarRiki Fiwandi, S.KomNIP. 199204102024211010SMA Negeri 2 Unggul Ali Hasjmy Aceh BesarIntan Mutia, S.PdNIP. 199901102025312010Sekolah Rakyat Menengah Atas 2 Aceh BesarMuhammad Ilham Rezki Barawas, S.PdNIPPPK. 200004222024211002SMA Negeri 1 Peukan Bada Aceh Besar💡 Ilmu Baru dan Pengalaman Tak TerlupakanSelama kegiatan berlangsung, kami mendapatkan banyak wawasan baru, terutama tentang pemanfaatan teknologi dan kecerdasan buatan (AI) dalam dunia pendidikan. Para fasilitator memandu kami untuk memahami bagaimana AI bisa digunakan untuk membantu guru dalam:Membuat modul ajar yang interaktif dan menarik,Mengembangkan media pembelajaran digital, danMengelola proses belajar yang lebih efisien dan menyenangkan bagi peserta didik.Salah satu momen paling menarik adalah saat kami mencoba langsung mengajar menggunakan Interactive Flat Panel (IFP). Rasanya luar biasa! Fasilitas ini memungkinkan pembelajaran lebih hidup, interaktif, dan kolaboratif. Kami juga diajarkan bagaimana mengintegrasikan perangkat digital tersebut dengan aplikasi pembelajaran berbasis AI.🎯 Kolaborasi dan InspirasiSelain pembelajaran teknis, Bimtek ini juga menjadi ajang berbagi pengalaman antar guru dari berbagai daerah. Diskusi ringan di sela kegiatan membuka wawasan baru tentang tantangan dan solusi dalam dunia pendidikan digital.Kami, tim Aceh Besar, merasa sangat bangga bisa mewakili daerah dan membawa semangat perubahan menuju pembelajaran yang lebih modern dan adaptif.💬 PenutupKegiatan Bimtek Digitalisasi Pembelajaran di Serpong bukan sekadar pelatihan, tapi sebuah perjalanan inspiratif menuju masa depan pendidikan yang berbasis teknologi. Kami pulang dengan semangat baru untuk menerapkan ilmu yang telah diperoleh di sekolah masing-masing dan membagikannya kepada rekan-rekan guru lainnya di Aceh Besar.“Belajar tidak berhenti di kelas, dan guru tidak berhenti belajar.”– Tim Bimtek Aceh Besar

bimtek-digitalisasi-pendidikan-serpong-jakarta-selatan

2025

View Details

Projects

Belajar Figma Bersama Kelas XI-4: Menjelajahi Dunia Desain Digital

Di era digital seperti sekarang, kemampuan desain grafis telah menjadi salah satu keterampilan penting yang dibutuhkan di berbagai bidang. Melihat pentingnya hal ini, Kelas XI di sekolah kita mengadakan sesi pembelajaran Figma, sebuah tools desain yang populer dan powerful.Mengenal Figma Lebih DekatFigma adalah perangkat lunak desain antarmuka (UI) dan pengalaman pengguna (UX) yang berbasis web. Keunggulan utama Figma terletak pada kemampuannya untuk melakukan kolaborasi secara real-time, sehingga memudahkan para siswa untuk bekerja sama dalam satu proyek desain meskipun menggunakan perangkat yang berbeda.Suasana Kelas yang Penuh SemangatDalam sesi pembelajaran yang berlangsung di ruang komputer, para siswa Kelas XI terlihat antusias mengikuti penjelasan dari pengajar. Mereka dengan serius memperhatikan setiap langkah pengoperasian Figma, mulai dari membuat akun, mengenal interface, hingga membuat desain sederhana.Beberapa siswa terlihat saling membantu ketika ada yang mengalami kesulitan, mencerminkan semangat kolaborasi yang memang menjadi salah satu nilai utama dalam pembelajaran desain digital.Manfaat Pembelajaran Figma untuk SiswaPembelajaran Figma ini memberikan banyak manfaat bagi para siswa, antara lain:Mengasah Kreativitas: Siswa dapat mengekspresikan ide-ide kreatif mereka melalui desain digital.Keterampilan Teknis: Mempelajari tools desain yang relevan dengan industri kreatif saat ini.Kerja Sama Tim: Belajar bagaimana berkolaborasi dalam proyek desain, mirip dengan kondisi kerja di dunia profesional.Portofolio Digital: Hasil karya dapat dikumpulkan sebagai portofolio awal untuk persiapan karir di masa depan.Tantangan dan SolusiTentu saja, seperti pembelajaran baru lainnya, ada beberapa tantangan yang dihadapi siswa. Beberapa di antaranya adalah kesulitan dalam mengenal interface Figma yang masih asing dan memahami konsep desain yang baik.Namun, dengan bimbingan dari pengajar dan semangat belajar yang tinggi, tantangan ini dapat diatasi. Siswa diajak untuk terus berlatih dan tidak takut untuk bereksperimen dengan berbagai fitur yang tersedia di FigmaHarapan ke DepanDi akhir sesi, harapannya para siswa Kelas XI tidak hanya menguasai pengoperasian Figma secara teknis, tetapi juga mampu menghasilkan karya desain yang bermakna. Keterampilan ini tentu akan menjadi bekal berharga bagi mereka, baik untuk melanjutkan pendidikan di bidang desain maupun untuk memasuki dunia kerja.Pembelajaran Figma bersama Kelas XI ini adalah langkah awal yang baik dalam mempersiapkan generasi muda yang siap bersaing di era digital. Semangat terus belajar dan berkreasi!

www.instagram.com/smanmodalbangsa/#

Belajar bersama XI-2

Suasana Pembelajaran Bersama XI-2Pagi itu kelas XI-2 tampak penuh semangat. Suara riuh rendah siswa menyambut guru yang masuk ke ruang kelas, namun segera berubah tenang ketika pembelajaran dimulai. Kursi tersusun rapi, papan tulis bersih, dan proyektor sudah siap menampilkan materi.Guru membuka pelajaran dengan sebuah pertanyaan pemantik yang membuat siswa berpikir kritis. Beberapa siswa langsung mengangkat tangan, sementara yang lain sibuk mendiskusikan jawaban dengan teman sebangku. Suasana kelas menjadi hidup, setiap siswa berusaha terlibat dalam kegiatan belajar.Ketika kegiatan kelompok dimulai, siswa XI-2 menunjukkan kerja sama yang solid. Mereka membagi tugas, saling memberi ide, dan berdiskusi dengan antusias. Beberapa kelompok bahkan menambahkan kreativitas dalam presentasi kecil mereka.Di akhir pelajaran, guru memberikan apresiasi kepada kelas karena aktif dan berani mencoba. Suasana kelas terasa hangat, penuh tawa, rasa ingin tahu, serta semangat belajar bersama. XI-2 bukan hanya sebuah kelas, melainkan sebuah tim yang saling mendukung untuk tumbuh dan berkembang.

www.instagram.com/smanmodalbangsa/#

Kenapa Harus Belajar Figma?

1. Apa itu Figma?Figma adalah tool desain UI/UX berbasis cloud.Bisa digunakan untuk mendesain aplikasi, website, hingga prototipe interaktif.Akses langsung via browser atau aplikasi desktop/mobile.2. Alasan Penting Belajar Figma🔹 a. Kolaborasi Real-timeBeberapa orang bisa mengedit file bersamaan.Seperti Google Docs, semua perubahan terlihat langsung.Cocok untuk kerja tim (designer, developer, product manager).🔹 b. Gratis & Mudah DiaksesAda versi gratis dengan fitur sudah cukup lengkap.Berbasis cloud → tidak perlu install software berat.Bisa diakses di Windows, Mac, Linux, bahkan HP.🔹 c. Industri Sudah Beralih ke FigmaBanyak startup, perusahaan teknologi, hingga agency sudah memakai Figma.Kebutuhan skill Figma tinggi di dunia kerja.🔹 d. Integrasi dengan Workflow DeveloperExport aset desain langsung ke berbagai format (PNG, SVG, PDF).Ada fitur Inspect untuk developer → memudahkan implementasi ke kode.🔹 e. Prototyping Tanpa CodingBisa bikin mockup interaktif untuk testing ide aplikasi/website.Berguna sebelum masuk tahap pengembangan sebenarnya.🔹 f. Komunitas & Resource BesarBanyak template gratis: UI kit, icon, wireframe.Komunitas aktif, tutorial melimpah di YouTube, Medium, dll.3. Manfaat untuk Mahasiswa / ProfesionalMahasiswa → latihan desain aplikasi/website untuk tugas atau startup.UI/UX Designer → tool utama dalam workflow desain modern.Developer → lebih mudah memahami desain dan implementasi ke code.Entrepreneur → cepat menuangkan ide produk ke bentuk nyata.4. Contoh Kasus NyataStartup ingin membuat aplikasi e-commerce:Tim desain buat wireframe di Figma.Tim developer langsung lihat ukuran, warna, font.Prototipe bisa dites ke calon pengguna sebelum coding.5. KesimpulanBelajar Figma = skill penting abad digital.Mudah, gratis, kolaboratif.Dibutuhkan di dunia kerja.Bisa dipakai untuk presentasi ide, prototipe, hingga produk nyata.

chat.z.ai/space/m0jyq7y8h1f0-ppt

React + Vite + TypeScript: Kenapa dan Bagaimana Memulainya

Mengapa Memilih Vite untuk React?Selama beberapa tahun terakhir, banyak developer yang beralih dari Create React App (CRA) ke Vite. Alasannya sederhana:Cepat 🚀 – Vite menggunakan ESBuild di belakang layar, membuat waktu startup dan hot reload jauh lebih singkat.Ringan – Tanpa konfigurasi yang terlalu kompleks, kamu bisa langsung mulai coding.Modular – Cocok untuk project kecil maupun skala besar.Kalau dulu CRA jadi standar, sekarang banyak yang merekomendasikan Vite sebagai "default choice" untuk project React baru.Kelebihan TypeScript di ReactMenggunakan TypeScript (TS) bersama React memberikan banyak keuntungan:Type Safety – mengurangi bug dengan memastikan tipe data konsisten.Auto-completion – editor seperti VSCode jadi lebih pintar dalam memberi saran kode.Refactor lebih mudah – perubahan struktur data lebih aman karena compiler memberi peringatan.Kode lebih terstruktur – cocok untuk project jangka panjang.Setup Project React + Vite + TSCara paling cepat memulai:# Buat project baru dengan template React + TS npm create vite@latest my-app -- --template react-ts cd my-app npm install npm run dev Buka browser ke http://localhost:5173 dan project sudah jalan 🎉Struktur ProjectSetelah setup, kira-kira foldernya seperti ini:my-app/ ├── src/ │ ├── App.tsx │ ├── main.tsx │ ├── components/ │ └── styles/ ├── index.html ├── tsconfig.json └── vite.config.tsApp.tsx: komponen utama Reactmain.tsx: entry point aplikasivite.config.ts: konfigurasi Vitetsconfig.json: konfigurasi TypeScriptContoh Komponen dengan TypeScriptMisalnya kita mau bikin komponen Button:type ButtonProps = { label: string; onClick: () => void; }; export function Button({ label, onClick }: ButtonProps) { return ( <button onClick={onClick} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" > {label} </button> ); } Dengan TypeScript, kalau kamu lupa mengirim onClick, maka compiler langsung kasih peringatan.Integrasi dengan Tailwind & ShadcnUntuk styling, banyak developer menggabungkan Tailwind CSS dengan Shadcn UI agar cepat bikin tampilan modern.Tailwind → utilitas styling fleksibelShadcn → kumpulan koremponen siap pakaiInstalasi bisa dilakukan langsung dengan command dari dokumentasi resmi, lalu digunakan di App.tsx.KesimpulanMenggunakan React + Vite + TypeScript memberikan pengalaman development yang:CepatAmanSkalabelKalau kamu ingin membangun project modern, ini kombinasi yang sangat direkomendasikan.

Profil Profesional – Alfaruq Asri, S.Pd.

Tentang SayaSaya adalah guru Informatika di SMA Modal Bangsa dengan minat khusus pada pemrograman, teknologi, dan kecerdasan artifisial (AI). Sebagai pendidik muda, saya berkomitmen untuk menghadirkan pembelajaran Informatika yang relevan dengan perkembangan industri teknologi, sekaligus membekali siswa dengan keterampilan abad ke-21.Selain mengajar, saya aktif mempelajari tren terbaru di bidang teknologi, terutama pengembangan perangkat lunak, AI, dan pemanfaatan teknologi digital dalam pendidikan.Keahlian UtamaPemrograman & Pengembangan AplikasiMenguasai dasar-dasar pemrograman (JavaScript, Python, dsb.).Membimbing siswa dalam membuat proyek koding sederhana hingga kompleks.Kecerdasan Artifisial & Teknologi TerkiniMemperkenalkan konsep AI kepada siswa (machine learning, data, automasi).Mengintegrasikan teknologi terbaru dalam materi pembelajaran.Pengajaran InformatikaMerancang materi sesuai kurikulum dengan pendekatan berbasis proyek (Project-Based Learning).Mendorong siswa untuk berpikir kritis, logis, dan kreatif.Integrasi Teknologi dalam PendidikanMenggunakan platform digital, coding tools, dan aplikasi edukasi untuk mendukung pembelajaran.Memanfaatkan simulasi dan media interaktif untuk menjelaskan konsep Informatika.Kontribusi & PencapaianMembimbing siswa dalam kompetisi Olimpiade Sains Nasional (OSN) bidang Informatika & AI.Mengembangkan modul pembelajaran Informatika berbasis coding & kecerdasan buatan.Mendorong lahirnya karya kreatif siswa seperti aplikasi sederhana, website, dan mini-project AI.Aktif berbagi pengetahuan teknologi melalui workshop atau diskusi dengan rekan guru.Visi & MisiVisi: Menjadi guru Informatika yang mampu menginspirasi siswa untuk mencintai dunia pemrograman dan teknologi, serta siap menghadapi tantangan era digital.Misi:Menyediakan pembelajaran Informatika yang aplikatif dan menyenangkan.Membimbing siswa memahami pemrograman dari dasar hingga terapan nyata.Mengenalkan kecerdasan artifisial sebagai bagian penting dari masa depan teknologi.Mengembangkan generasi yang melek digital, kreatif, dan berdaya saing global.

www.instagram.com/alfaruqasri/

REACTNEXT

2025

View Details