📱 Ionic Framework: පළමු පාඩම - ඔබේ පළමු Mobile App එක සෑදීම! 🚀

ආයුබෝවන්, ගමනේ! 😎

ඔන්න අද අපි අලුත්ම දේවක් බලන්න යන්නේ Ionic Framework එක ගැන! මේක, open-source framework එකක්, Angular සහ Apache Cordova එකට පදනම්ව නිර්මාණය වෙලා තියනවා. මේ framework එක භාවිතා කරලා අපි cross-platform mobile apps (iOS සහ Android) සෑදීමට හැකි වෙනවා. මෙහෙම කියන එක නම්, ඔබට ඉස්සර ඉතාම වියදම්මය මොබයිල් එකක් හෝ වෙනම අයත් කරන platform එකකට app එකක් නිර්මාණය කරන්නෙ නැතුව, එකම කේත භාවිතා කරලා වැඩේ අරං මීට අලුත්ම platform දෙකටත් deploy කළ හැකියි! 💥

👉 Episode 1: ඔබේ පළමු Ionic App එක සෑදීම!

අද අපි පටන් ගන්නවා, Ionic Framework එක භාවිතා කරලා පළමු mobile app එකක් සාදන එකෙන්! එහෙනම්, මෙහෙම වැඩ කරන්න:

1. Ionic CLI ස්ථාපනය කිරීම

Ionic CLI (Command Line Interface) එක තමයි අපේ වැඩේ කටයුතු කරන tool එක. මේක භාවිතා කරන්න, පළමුව npm install කරන්න.

npm install -g @ionic/cli

මේක run කරලා, Ionic Framework එකේ අවශ්‍ය tool එක ක්‍රියාත්මක කරගන්න.

2. New Project එකක් සාදාගැනීම

Ionic project එකක් සාදන්න:

ionic start myFirstApp tabs

මෙහිදී myFirstApp කියලා ඔබගේ project එකට නම දෙන්න. tabs කියන්නේ tabs-based layout එකක්. එමඟින් ඔබට tab-based app එකක් start කිරීමට හැකි වෙනවා!

මූලික template එකක් එක්ක නිර්මාණය කරන එකයි.

3. App එක Running කරන්න

Ionic app එක run කරන්න:

cd myFirstApp
ionic serve

ඔබේ browser එකේ http://localhost:8100 යන්න යන්න, එතනින් ඔබේ පළමු Ionic app එක දැක්කාම 😲!

📌 App එක සකස් කිරීම හා විකිරණය

අපි දැන් app එක සකසලා තියනවා. දැක්කාම, browser එකේ app එකේ layout එක දැක්කාම, අපි වෙනස් කරන්නත් පුළුවන්.

Ionic Components and Pages

Ionic framework එකේ components කියන්නෙ ඒවා තමයි app එකේ UI elements (buttons, cards, lists, etc.) කියනවා. මේවා app එකේ විවිධ අංග වේ.

🖱️ Components:

• Button: User input එකක් ලබා ගැනීමට.
• Card: Content display කිරීම සඳහා.
• List: Lists එකක් සාදන්න.

🗺️ Pages:

Ionic app එකේ pages use කරන්නෙ navigation (back, forward, etc.) handle කිරීමේදී.

Navigation Handle කිරීම

Ionic Framework එකේ router එක භාවිතා කරලා අපි pages අතර navigation handle කරන්න. හැම page එකකටම URL එකක් assign කරන්න.

<ion-button routerLink="/home">Go to Home</ion-button>

මෙම button එක click කරන්නෙ Home page එකට පිවිසීමට.

📍 Ionic Framework භාවිතා කරන විශේෂාංග

• UI Components: ඔබට mobile apps වල සඳහා උචිත UI components ලබා දෙනවා.
• CLI Tools: Ionic CLI භාවිතා කිරීමෙන්, application එකක් build කිරීම, run කිරීම, deploy කිරීම හා testing කිරීම පහසුයි.
• Cross-Platform Development: එකම codebase එකෙන් Android සහ iOS platforms දෙකටම apps නිර්මාණය කිරීම.
• Plugins: Ionic, Apache Cordova plugins භාවිතා කරලා native device functionalities (GPS, Camera, etc.) access කරන්න.

Next Steps (ඉදිරියට අපි බලන දේවල්)

• App එකේ pages එකතු කිරීම: Navigation manage කිරීම.
• Design: CSS හෝ Ionic components භාවිතා කරලා app එක customize කිරීම.
• Services: REST APIs, data handling, Firebase integration.
• Deploy: ඔබගේ app එක Android, iOS හෝ Web platform එකකට deploy කරන්න.

ඉදිරියට කුමන පාඩමක්?

අපි ඉදිරියට, API integration, advanced UI components, Firebase setup, build process, හා publish කිරීම ගැන deep dive කරලා බලන්නෙ!

සොඳුරු mobile app එකක් එකතු කිරීමේ journey එකේ පළමු පාඩම ඔයාලට තේරෙයි කියලා හිතනවා! 😎👨‍💻

#IonicFramework #MobileAppDevelopment #CodingJourney #TechLearning #SinhalaTech

මේ පාඩමෙ අවසානය. එන්න, ඔයාගේ පළමු mobile app එක නිර්මාණය කරන්න! 🎉