Flutterஎன்பதன் துனையுடன் கைபேசி பயன்பாட்டை எளிதாக உருவாக்கிடுக

உலகெங்கிலும் உள்ள கைபேசி பயன்பாடுகளின்மேம்படுத்துநர்கள் மத்தியில் தற்போது Flutter என்பது ஒரு பிரபலமான வரைச்சட்டத்திற்கான செயல்திட்டமாகும். இந்த வரைச்சட்டத்திற்காக ஆர்வமுள்ள ஒரு பெரிய, நட்பு சமூகம் ஒன்றும் உள்ளது, நிரலாளர்கள் தங்களுடைய செயல்திட்டங்களை கைபேசிக்கு கொண்டு செல்ல இந்த Flutter உதவுவதால் இது தொடர்ந்து மேலும் மேலும் வளர்ந்து கொண்டே வருகின்றது. இந்த கட்டுரை யானது Flutter உடன் கைபேசி பயன்பாட்டினை எவ்வாறு மேம்படுத்திடுவது என்பதற்கான வழிகாட்டியாக உதவிடும். இந்த கட்டுரையை படித்த பிறகு, திறன்பேசிகள், மடிக்கணினிகள் பிற தளங்கள் ஆகியவற்றிற்கான குறிமுறை வரிகளை எழுதத் துவங்குவதற்காக இந்த வரைச்சட்டத்தை எவ்வாறு விரைவாக நிறுவுகைசெய்வது என்பதை பற்றி நன்றாக தெரிந்து கொள்ளமுடியும். நம்முடைய கணினியில் Android Studio நிறுவப் பட்டிருப் பதாகவும், அதனுடன் பணிபுரிவதற்கான ஒரு சில அனுபவங்களை நாம் பெற்றுள்ளதாகவும் கொள்க. இந்நிலையில் Flutter என்றால் என்ன? எனும் கேள்வி நம்மனதில் எழும் நிற்க.
Flutter என்பது ஆண்ட்ராய்டு மேக், லினக்ஸ் ,ஐஓஎஸ் ஆகிய பல்வேறுதளங்களில் செயல்படும் திறன்கொண்ட பயன்பாடுகளை உருவாக்குவதற்காக உதவுகின்ற ஒரு வரைச்சட்டமாகும் , இவற்றுள் மேக் , லினக்ஸிற்கான ஆதரவு துவக்கநிலையில் உள்ளது, அதே நேரத்தில் இணைய ஆதரவு விரைவில் வெளியிடப்படும் என்று எதிர்பார்க்கப்படுகிறது. இதன் பொருள் இப்போது அதன் திறன்களை நாம் முயற்சி செய்யலாம் என்பதாகும்
Flutter ஐ நிறுவுகைசெய்தல்
இங்கு உபுண்டு 18.04 இன் நிறுவுகை செயல்முறை விளக்கப்படுகின்றது இந்த செயல்முறையானது Arch அல்லது Mint .போன்ற மற்ற லினக்ஸ் விநியோகங்களுடன் ஒத்திருக்கிறது, முதலில் Snapd உடன் இதனை நிறுவுகை செய்திடும் பணியை துவங்கிடுக தொடர்ந்து இந்த Snapd ப் பயன்படுத்தி உபுண்டுவில் அல்லது இதே போன்ற வேறு லினக்ஸ் விநியோகங்களில் Flutterஐ நிறுவுகை செய்திட, பின்வரும் குறிமுறைவரிகளை ஒரு முனைமத்தில் உள்ளிடுக:
$ sudo snap install flutter –classic
$ sudo snap install flutter –classic
flutter 0+git.142868f from flutter Team/ installed
பின்னர் flutter எனும் கட்டளையைப் பயன்படுத்தி அதை செயல்படுத்திட துவங்கிடுக. துவக்கத்தில், இந்த வரைச்சட்டமானது கணினியில் பதிவிறக்கம் செய்கிறது:
$ flutter
தொடர்ந்து Flutterஆனது இயங்கதுவக்குகிறது. அதன்பின்னர் storage.googleapis.com/flutter_infra […]என்ற இணையதளமுகவரியிலிருந்து இதற்கான கோப்பினை பதிவிறக்கம்செய்கிறது. இந்த பதிவிறக்கம் செய்திடும் பணி முடிவடைந்ததும், Flutter ஆனது துவக்கப் பட்டுள்ளதாக கூறும் அறிவிப்பு செய்தியைக் திரையில் காணலாம்:
கைமுறையாக நிறுவுகை செய்திடுதல்
நம்மிடம் snapd இல்லை அல்லது லினக்ஸ் விநியோகமான உபுண்டு இல்லையென்றால், நிறுவுகை செயல்முறை சற்று வித்தியாசமாக இருக்கும். அவ்வாறான நிலையில், குறிப்பிட்ட இயக்க முறைமைக்கு பரிந்துரைக்கப்பட்ட Flutter இன் பதிப்பைப் பதிவிறக்கம் செய்திடுக பின்னர் அதை home directory எனும் அடைவில் பிரித்தெடுத்திடுக.
நமக்கு பிடித்த உரை திருத்தியில் .bashrc எனும் கோப்பை home directory. எனும் அடைவில் (அல்லது .zshrc Z shell ஐப் பயன்படுத்தி திறந்திடுக. இது ஒரு மறைக்கப்பட்ட கோப்பு என்பதால், முதலில் கோப்பு மேலாளரில் மறைக்கப்பட்ட கோப்புகளைக் காண்பிப்பதை இயக்க வேண்டும் அல்லது முனைமத்திலிருந்து திறக்க வேண்டும் அதற்கான கட்டளைவரி பின்வருமாறு:
$ gedit ~ / .bashrc &
கோப்பின் முடிவில் பின்வரும் கட்டளைவரியைச் சேர்த்திடுக:
export PATH=”$PATH:~/flutter/bin”
தொடர்ந்து இந்த கோப்பினை சேமித்து மூடிடுக. home directory.எனும் கோப்பகத்தைத் தவிர வேறு எங்காவது flutter ஐப் பிரித்தெடுத்தால், Flutter SDK விற்கான பாதை வித்தியாசமாக இருக்கும் என்பதை நினைவில் கொள்க. முனைமத்தை மூடிவிட்டு மீண்டும் திறந்திடுக, இதனால் புதிய உள்ளமைவு ஏற்றப்படும். மாற்றாக, இதன் மூலம் நாம் உள்ளமைவை ஆதாரமாகக் கொள்ளலாம்அதற்கான கட்டளைவரி பின்வருமாறு:
$. ~ / .bashrc
திரையில் பிழைஎதையும் காணவில்லை என்றால், எல்லாம் நன்றாக இருக்கிறது என அர்த்தமாகும். இந்த நிறுவுகைசெயல் முறை snapd கட்டளையைப் பயன்படுத்துவதை விட சற்று கடினமானது, ஆனால் இது மிகவும் பல்வேறு துறைகளிலும் எந்தவொரு விநியோகத்திலும் கட்டமைப்பை நிறுவுகைசெய்திட அனுமதிக்கிறது.. தொடர்ந்து நிறுவுகைபணியை சரிபார்த்திடுக. அவ்வாறு நிறுவுகைசெய்திடும்பணியின் முடிவைச் சரிபார்க்க, முனைமத்தில் பின்வரும் கட்டளைவரியை உள்ளிடுக:
flutter doctor -v
உடன் நிறுவுகைசெய்யப்பட்ட கூறுகள் பற்றிய தகவலை திரையில் காணலாம். பிழைகள் ஏதேனும் திரையில் கண்டால் கவலைப்பட வேண்டாம். Flutter SDK உடன் பணிபுரிய எந்த IDE செருகுநிரல்களையும் இதுவரை நிறுவுகைசெய்யவில்லை. என்பதை நினைவில் கொள்க அதனால் IDE செருகுநிரல்களை நிறுவுகை செய்திடுக நம்முடைய ஒருங்கிணைந்த மேம்பாட்டு சூழலில் (IDE) செருகுநிரல்களை நிறுவுகைசெய்திட வேண்டும், இது Flutter SDK, உடன் இடைமுகப்படுத்தவும், சாதனங்களுடன் தொடர்பு கொள்ளவும் . குறியீட்டை உருவாக்கவும் உதவுகின்றது.
Flutter மேம்பாட்டிற்கு பொதுவாகப் பயன்படுத்தப்படும் மூன்று முக்கிய IDE கருவிகள் IntelliJ IDEA (Community Edition), Android Studio, VS Code (அல்லது VSCodium) ஆகியவைகளாகும் . இந்த கட்டுரையில் Android Studio பயன்படுத்தப்படுகின்றது, ஆனால் படிமுறைகள் IntelliJ IDEA ( (சமூக பதிப்பு) இல் எவ்வாறு இயங்குகின்றன என்பதைப் போலவே இருக்கின்றன, ஏனெனில் அவை ஒரே மேடையில் கட்டமைக்கப்பட்டுள்ளன.
முதலில், Android Studioவைத் செயல்படுத்திடுக. உடன்தோன்றிடும் திரையில் Settings ஐத் திறந்து செருகுநிரல்(Plugins) பலகத்திற்குச் சென்று, Marketplace எனும் தாவலைத் தேர்ந்தெடுத்திடுக. தேடல் வரியில் Flutter ஐ உள்ளீடு செய்து Install என்பதை தெரிவுசெய்து சொடுக்குக பின்னர் Dart எனும் செருகியை நிறுவுகைசெய்திடும் வாய்ப்பினை திரையில் காணலாம்; அதனை ஏற்றுக்கொள்க. இந்நிலையில் Dart எனும் வாய்ப்பினை காணவில்லை எனில், மேலே உள்ள படிமுறைகளை மீண்டும் செய்வதன் மூலம் அதை கைமுறையாக நிறுவுகைசெய்திடுக. இந்நிலையில் Rainbow எனும் அடைப்புக்குறி செருகியை பயன்படுத்திடுக என பரிந்துரைக்கப்படுகின்றது, இது குறிமுறைவரிகளின்வழிசெலுத்தலை எளிதாக்குகிறது. அவ்வளவுதான்! நமக்கு தேவையான அனைத்து செருகுநிரல்களையும் நிறுவுகைசெய்துவிட்டோம். முனைமத்தில் பழக்கமான பின்வரும் கட்டளைவரிகள உள்ளிடுவதன் மூலம் இதனை சரிபார்க்கலாம்:
flutter doctor -v
தொடர்ந்து வழக்கமான முதன்முதலானநம்முடைய “அனைவருக்கும் வணக்கம்!” எனும் பயன்பாட்டை உருவாக்கிடுக. இதற்கான புதிய செயல்திட்டத்தைத் துவங்க, Flutterஎனும் வரைச்சட்டத்தில் பதியதொரு செயல்திட்டத்தை உருவாக்கிடுக:அதற்காக
1. New => New Flutter project=>. என்றவாறு கட்டளைவரிகளை செயற்படுத்திடுக.
2. அதனைதொடர்ந்து சாளரத்தில், நாம்விரும்பும் செயல்திட்ட வகையைத் தேர்வுசெய்க. இந்த வழக்கில், நமக்கு Flutter Application என்பதுதேவையாகும்.
3. அந்த புதிய செயல்திட்டத்திற்கு “அனைவருக்கும்_வணக்கம்” என்றவாறு பெயரிடுக. பெயரின் எழுத்துகள் ஒன்றிணைந்ததாக இருக்க வேண்டும் என்பதை நினைவில் கொள்க, எனவே காலி இடைவெளிக்கு பதிலாக அடிக்கோடிட்டுப் பயன்படுத்திகொள்க. SDK க்கான பாதையையும் குறிப்பிட வேண்டியிருக்கலாம்.
4. பின்னர் தொகுப்பு பெயரை உள்ளிடுக.தற்போது நாம் ஒரு செயல்திட்டத்தை உருவாக்கிவிட்டோம்! இப்போது நாம் அதை ஒரு சாதனத்தில் அல்லது முன்மாதிரியைப் பயன்படுத்தி துவங்கலாம்.
5. நாம்விரும்பும் சாதனத்தைத் தேர்ந்தெடுத்து Runஎனும் கட்டளையை செயல்படுத்திடுக. உடனடியாக ஒரயொரு நொடியில், இதன்முடிவைக் காணலாம்.இப்போது நாம் ஒரு இடைநிலை செயல்திட்டத்தில் பணி புரிய ஆரம்பிக்கலாம். இணையத்திலும் Flutter ஐ முயற்சிக்கலாம்
அவ்வாறு இணையத்திற்கான Flutterஇன் கூறுகளை நிறுவுகை செய்திடுமுன், இணைய பயன்பாடு களுக்கான Flutterஇன் ஆதரவு இந்த நேரத்தில் மிகவும் கசப்பானது என்பதை நாம் அறிந்து கொள்ள வேண்டும். எனவே இதை இன்னும் சிக்கலான செயல்திட்டங்களுக்கு பயன்படுத்திடவேண்டாம் என அறிவுறுத்தப்படுகின்றது.
இணையத்திற்கான Flutter இயல்பாக அடிப்படை SDK இல் செயலில் இல்லை. அதை இயக்கbeta channel.இற்குச் செல்க. இதைச் செய்ய, முனைமத்தில் பின்வரும் கட்டளைவரியை உள்ளிடுக:
flutter channel beta
அடுத்து, பின்வரும் கட்டளைவரியைப் பயன்படுத்தி பீட்டா கிளைக்கு ஏற்ப flutterஐ மேம்படுத்திடுக:
flutter upgrade
இணையதளபணிக்கு flutter உருவாக்கிடுக, அதற்காக பின்வரும் கட்டளைவரியை உள்ளிடுக:
flutter config –enable-web
நம்முடைய IDE ஐ மறுதொடக்கம் செய்க; இது ஆண்ட்ராய்டு ஸ்டுடியோ குறிமுறைவரிகளுக்கு புதிய IDE, சாதனங்களின் பட்டியலை மீண்டும் ஏற்ற உதவுகிறது. நாம் பல்வேறு புதிய சாதனங்களைக் காண வேண்டுமெனில்,Chrome ஐத் தேர்ந்தெடுப்பதற்காக இணைய உலாவியில் ஒரு பயன்பாட்டைத் துவங்குகிறது, அதே நேரத்தில் இணைய சேவையகம் நம்முடைய இணைய பயன்பாட்டிற்கான இணைப்பை வழங்குகிறது, அதை நாம் எந்த இணைய உலாவியிலும் திறக்க முடியும்.இருப்பினும், நம்முடைய தற்போதைய செயல்திட்டம் இணையத்தை ஆதரிக்காததால், மென்பொருட்களின் மேம்பாட்டிற்கு விரைந்து செல்ல வேண்டிய நேரம் இதுவன்று. அதை மேம்படுத்த, செயல்திட்டத்தின் மூலம் முனைமத்தைத் திறந்து பின்வரும் கட்டளைவரியை உள்ளிடுக:
flutter create
இந்த கட்டளைவரியானது இணைய ஆதரவைச் சேர்த்து செயல்திட்டத்தை மீண்டும் உருவாக்குகிறது. ஆயினும் ஏற்கனவே இருக்கும் குறிமுறைவரிகள் எதுவும் நீக்கப்படாது.
தற்போது இதற்கானtree மாறிவிட்டது, இப்போது “web” எனும் கோப்பகத்தைக் கொண்டுள்ளது என்பதை நினைவில் கொள்க:
இப்போது நாம் நம்முடைய பணியை செயல்படுத்தலாம். இதற்காக Chrome எனும் இணையஉலாவியைத் தேர்ந்தெடுத்து Run எனும் கட்டளையை செயற்படுத்திடுக. ஒருசிலநொடிகளில்,நம்முடைய பயன்பாட்டுடன் இணைய உலாவியின் சாளரத்தைக் திரையில் காணலாம். வாழ்த்துக்கள்!
நாம் இப்போது இணைய உலாவிக்கான ஒரு செயல்திட்டத்தைத் துவங்கிவிட்டோம், வேறு எந்த இணையதளத்தையும் போலவே இதில் தொடர்ந்து பணியாற்றலாம்.
இவை அனைத்தும் ஒரே codebase இலிருந்து வந்தவை, ஏனென்றால் கைபேசி தளங்கள், இணையம் ஆகிய இரண்டிற்கும் ஒரே குறிமுறைவரிகளை எழுதுவதை இந்த Flutter ஆனது சாத்தியமாக்குகிறது.

மாதிரிகாட்சி( demo)வேறு நடைமுறை செயல்பாடு வேறு

%d bloggers like this: