Integrasi Model Machine Learning ke Web App Tanpa Ribet

Transcript

1. Dimas Saputra Curriculum Developer Integrasi Model Machine Learning ke Web App Tanpa Ribet
2. Di Era Serba AI, Sebagai Front-End Developer Harus Gimana?
3. Deal with it! 󰛝 Using AI to Boost Productivity Integrate AI to Enhance Our Business
4. Using AI to Boost Productivity AI in my daily basis • Writing Test ✅ • Writing Commit Message ✅ • Writing Documentation ✅
5. Knowing Your Situation Learn Framework Niat Learn Basic Best Practices Using AI Programmer impian Next Generation People in Tech Bijak menggunakan AI ketika Fondasi konsep sudah kuat. • Paham problem & dasar teknisnya. ✅ • AI hanya boost productivity, bukan “jalan pintasˮ yang meniadakan belajar. ✅ • Keputusan sepenuhnya ada di tangan manusia. ✅
6. Integrate AI to Enhance Our Business Cloud-Based Services AI OpenAI, Gemini, Anthropic, AWS, dsb) On-Device AI Tensorflow.js, Tensorflow Lite, ONNX Runtime Web, dsb)
7. Cloud-Based Service AI Cloud-Based Service AI cocok untuk: • Butuh komputasi berat LLM, image/video generation) • Ingin model yang selalu up-to-date (update dari provider) • Perangkat yang terbatas
8. Cloud-Based Service AI - Implementation import { GoogleGenAI } from '@google/genai'; export async function getResponseFromAI(prompt) { const ai = new GoogleGenAI({ apiKey: 'api-key-dummy', }); const response = await ai.models.generateContent({ model: 'gemini-2.0-flash', contents: prompt, }); return response.text; } (async () => { const prompt = 'Ikan, ikan apa yang gak bisa renang?' ; const response = await getResponseFromAI (prompt); console.log('user prompt: ' , prompt); console.log('AI response: ' , response); })();
9. On-Device AI On-Device AI cocok untuk: • Aplikasi harus tetap jalan tanpa internet (offline mode) • Menangani data sensitif (misal: pengenalan wajah, suara pribadi) • Ingin respon sangat cepat (low latency, real-time)
10. Letʼs do fun things with On-Device AI
11. Quiz dulu dong! Kapan sebaiknya kita menggunakan Cloud-Based Service AI dibanding On-Device AI? Jelaskan dalam satu kalimat. Format: #quiz1-usernamedicoding-jawaban
12. Anjing Kucing Berang-berang
14. Saya ingin membuat Web App seperti tadi. Gimana dan di mana belajarnya?
15. Gimana? • Deep Dive Browser API seperti: ◦ Service Worker untuk Offline Capability ✅ ◦ Media Devices untuk Akses Kamera/Mikrofon ✅ • Pelajari AI ◦ Dasar-dasar AI ✅ • Penggunaan AI di lingkungan web: ◦ Tensorflow.js; atau ✅ ◦ ONNX runtime web ✅ • Pahami Dasar-dasar Pengembangan Web ✅ • Pahami Dasar Browser API seperti: ◦ DOM Manipulation ✅ ◦ Event ✅ ◦ Storage ✅ • Pahami Library dan Tools: ◦ React ✅ ◦ Module Bundler ✅ ◦ Node.js ✅
16. Di mana?
17. Front-End + Back-End AI • Dasar Pengembangan Front-End Web • Dasar Browser API DOM, Event, dan Storage) • Fetch API • Tooling: Module Bundler • Advance Layouting: Grid CSS • Web Accessibility • Advance Browser API ◦ Form Validation ◦ Custom Element ◦ Transition API ◦ Media Devices ◦ Push Notification ◦ Progressive Web Apps Front-End Side • Belajar Dasar Cloud Computing + AI AWS • Belajar Dasar AI (basic data, pengenalan model AI, dsb) • Membuat RESTful API sederhana • Integrasi AI di Node.js • Deployment Back-End AI Side Total jam belajar: 374 jam
18. React + Back-End AI • Dasar Pengembangan Front-End Web • Dasar Browser API DOM, Event, dan Storage) • Fetch API • Dasar React: Component, Props, State) • Intermediate React: ◦ Property Validation ◦ Browser Router ◦ React Context ◦ React Hooks React Front-End) Side • Belajar Dasar Cloud Computing + AI AWS • Belajar Dasar AI (basic data, pengenalan model AI, dsb) • Membuat RESTful API sederhana • Intermediate Back-End for RESTful API ◦ Data validation ◦ Database ◦ Authentication & Authorization ◦ Message Broker (queue) ◦ Storage ◦ Caching • Integrasi AI di Node.js • Deployment Back-End AI Side Total jam belajar: 394 jam
19. Choose wisely 😁 Front-End + Back-End AI (374 jam) React + Back-End AI (394 jam) Tujuan Belajar Bangun fondasi kuat di Web & eksplorasi AI secara bertahap Fokus cepat ke React + Back-End AI siap production Front-End Stack HTML, CSS (Grid), Vanilla JS, Browser API, Fetch API Web Basic, React Basic, React Router, Hooks, Context. Front-End Adv Notification, PWA, Form Validation, Media Devices, Custom Element Back-End Stack Dasar RESTful API dengan Node.js Back-End Adv Data Validation, Database, Auth, Queue, Storage, Caching Cloud Dasar AWS Cloud AI Dasar AI, Integrasi dengan Node.js
20. Thank you. @loremipsum lorem@ipsum.com @loremipsum loremipsum