টিপিকাল অ্যাঙ্গুলারজেএস ওয়ার্কফ্লো এবং প্রকল্প কাঠামো (পাইথন ফ্লাস্ক সহ)

Question

আমি পুরো পুরো এমভি * ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক উন্মাদনায় বেশ নতুন। এটি অ্যাংুলারজেএস হতে হবে না, তবে আমি এটিকে বেছে নিয়েছি কারণ এটি আমার কাছে নকআউট, আম্বার বা ব্যাকবোন এর চেয়ে বেশি প্রাকৃতিক বোধ করে। যাইহোক ওয়ার্কফ্লো কেমন? লোকেরা কি AngularJS এ ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন বিকাশ করে এবং এরপরে ব্যাক-এন্ড হুকিং দিয়ে শুরু করে?

বা অন্যভাবে প্রথমে জ্যাঙ্গো, ফ্লাস্ক, রিলে ব্যাক-এন্ড তৈরি করে এবং তারপরে একটি অ্যাংুলারজেএস অ্যাপ্লিকেশন সংযুক্ত করে? এটি করার কোনও "সঠিক" উপায় আছে, বা এটি কি কেবলমাত্র ব্যক্তিগত পছন্দ?

আমিও নিশ্চিত নই যে আমার প্রকল্পটি ফ্লাস্ক বা অ্যাঙ্গুলারজেএস অনুসারে গঠন করবে কিনা? সম্প্রদায় অনুশীলন।

উদাহরণস্বরূপ, ফ্লাস্কের মিনিটভিট অ্যাপটি এর মতো কাঠামোযুক্ত:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

অ্যাঙ্গুলারজেএস টিউটোরিয়াল অ্যাপটি এই জাতীয়ভাবে গঠন করা হয়েছে:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

আমি নিজেই একটি ফ্লাস্ক অ্যাপ্লিকেশন চিত্র দেখতে পেলাম, এবং টুডো তালিকার মতো অ্যাঙ্গুলারজেএস অ্যাপটি নিজেরাই দেখে নেওয়া মোটামুটি সহজ তবে যখন এই দুটি প্রযুক্তি ব্যবহার করার কথা আসে তখন আমি বুঝতে পারি না তারা কীভাবে একসাথে কাজ করে। এটি প্রায় মনে হচ্ছে আপনার যখনই ইতিমধ্যে অ্যাঙ্গুলারজেএস রয়েছে তখন সার্ভার-সাইড ওয়েব-ফ্রেমওয়ার্কের দরকার নেই, একটি সাধারণ পাইথন ওয়েব সার্ভারই ​​যথেষ্ট। উদাহরণস্বরূপ অ্যাঙ্গুলারজেএস-টু-ডু অ্যাপ্লিকেশনটিতে তারা রেস্টফল এপিআই ব্যবহার করে ডেটাবেজে কথা বলতে মঙ্গোলাব ব্যবহার করে। ব্যাক-এন্ডে কোনও ওয়েব ফ্রেমওয়ার্ক থাকার দরকার ছিল না।

হতে পারে আমি কেবল ভয়ঙ্করভাবে বিভ্রান্ত হয়ে পড়েছি, এবং অ্যাঙ্গুলারজেএস অভিনব জ্যাকুয়ের লাইব্রেরি ছাড়া আর কিছুই নয় তাই আমার ফ্লাস্ক প্রকল্পগুলিতে আমি যেমন জিকুয়্যারি ব্যবহার করব ঠিক তেমন ব্যবহার করা উচিত (ধরে নিই যে আমি জিনজা 2 এর সাথে বিরোধী নয় এমন কিছুতে AngularJS টেমপ্লেট সিনট্যাক্সটি পরিবর্তন করেছি)। আমি আশা করি আমার প্রশ্নগুলি কিছুটা অর্থপূর্ণ হবে। আমি মূলত ব্যাক-এন্ডে কাজ করি এবং এই ক্লায়েন্ট-সাইড ফ্রেমওয়ার্কটি আমার জন্য একটি অজানা অঞ্চল।

Answer 1

আমি স্ট্যান্ডার্ড স্ট্রাকচারে ফ্ল্যাস্ক অ্যাপ্লিকেশনটি নিম্নরূপে সংগঠিত করে শুরু করব:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

এবং বিটিফোর্ড যেমন উল্লেখ করেছে, আপনি যদি একটি কৌনিক অ্যাপ্লিকেশন করছেন তবে আপনি কৌণিক ক্লায়েন্ট-সাইড টেম্পলেটগুলি ব্যবহার করে মনোযোগ দিতে এবং সার্ভার-সাইড টেম্পলেটগুলি থেকে দূরে থাকতে চাইবেন। রেন্ডার_টেমপ্লেট ('index.html') ব্যবহার করে ফ্লাস্ককে আপনার কৌণিক টেম্পলেটগুলি জিনজা টেমপ্লেট হিসাবে ব্যাখ্যা করবে, সুতরাং সেগুলি সঠিকভাবে রেন্ডার হবে না। পরিবর্তে, আপনি নিম্নলিখিত করতে চান:

@app.route("/")
def index():
    return send_file('templates/index.html')

নোট করুন যে সেন্ড_ফায়াল () ব্যবহার করার অর্থ ফাইলগুলি ক্যাশে হবে, সুতরাং আপনি পরিবর্তে কমপক্ষে উন্নয়নের জন্য মেক_স্পন্সন () ব্যবহার করতে চাইতে পারেন:

    return make_response(open('templates/index.html').read())

এরপরে, অ্যাপের কাঠামোটি এমনভাবে সংশোধন করে আপনার অ্যাপ্লিকেশানের অ্যাংুলার জেএস অংশটি তৈরি করুন যাতে এটি দেখতে দেখতে:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

নিশ্চিত হয়ে নিন যে আপনার সূচক। Html এ অ্যাংুলারজেএস এবং সেই সাথে অন্য কোনও ফাইল রয়েছে:

<script src="static/lib/angular/angular.js"></script>

এই মুহুর্তে, আপনি এখনও আপনার রেস্টলফুল এপিআই তৈরি করেন নি, যাতে আপনার জেএস কন্ট্রোলাররা পূর্বনির্ধারিত নমুনা ডেটা (কেবলমাত্র একটি অস্থায়ী সেটআপ) ফিরিয়ে আনতে পারেন। আপনি প্রস্তুত হয়ে গেলে, RESTful API বাস্তবায়ন করুন এবং এঙ্গুলার-রিসোর্স.জেএস সহ আপনার কৌণিক অ্যাপ্লিকেশনটিতে রেখে দিন।

সম্পাদনা করুন: আমি একটি অ্যাপ টেমপ্লেট একসাথে রেখেছি যা যদিও আমি উপরে বর্ণিত করেছি তার চেয়ে আরও জটিল, অ্যাংুলারজেএস + ফ্লাস্কের মাধ্যমে কীভাবে কোনও অ্যাপ তৈরি করতে পারে তা চিত্রিত করে, অ্যাংুলারজেএস এবং একটি সাধারণ ফ্লাস্ক এপিআইয়ের মধ্যে যোগাযোগের মাধ্যমে সম্পূর্ণ। আপনি যদি এটি যাচাই করতে চান তবে এটি এখানে: https://github.com/rxl/angular-flask

Comments

আমি এই ইস্যুটি জুড়ে এসেছি: আমি যখন সূচকগুলি html স্ট্যাটিকালি পরিবেশন করার চেষ্টা করেছি তখন ফাইলটির প্রসঙ্গটি সংরক্ষণ করা হয়নি। আমি আমার স্থিতিশীল ফাইলটি প্রিপেন্ড করে এটির কাছাকাছি এসেছি app.root_path। অন্যথায়, এটি বেশ স্পট করে।

— মাকোটো

আপনি "নোট করুন যে সেন্ড_ফাইলে () ব্যবহারের অর্থ এই ফাইলগুলি ক্যাশে হবে তার বিষয়ে আপনি আরও ব্যাখ্যা করতে পারেন, তবে আপনি পরিবর্তে কমপক্ষে উন্নয়নের জন্য মেক_সেস্পেন্স () ব্যবহার করতে চাইতে পারেন"? ধন্যবাদ

— Nam

আপনি কীভাবে বিল্ডগুলি পরিচালনা করবেন, যেমন এই পদ্ধতির সাথে গ্রান্ট ব্যবহার করে?

— সাদ ফারুক

@ নাম, আমি মনে করি তার অর্থ হ'ল আপনি যদি ডিবিগ করার সময় আপনার জেএস ইত্যাদিতে ছোটখাটো পরিবর্তন করে থাকেন তবে আপনি ব্রাউজারে এর প্রভাব দেখতে পাবেন না কারণ সেন্ড_ফাইলে ক্যাশে ফাইলগুলি একটি টাইমআউট = এস দিয়ে দেওয়া হচ্ছে END_FILE_MAX_AGE_DEFAULT। এটিকে ওভাররাইড করার বিভিন্ন উপায় রয়েছে তবে আপনি মোতায়েনের জন্য প্রস্তুত না হওয়া অবধি কেবল মেক_গ্রহস্ততা ব্যবহার করা অনেক সহজ।

— আর্স-লঙ্গা-ভিটা-ব্রাভিস

@ সাদফারুক আমি এখানে গ্রান্ট coverাকনা না কারণ এটি কিছুটা জটিল করে তোলে। আপনি যদি গ্রান্টের মতো কিছু ব্যবহার করতে প্রস্তুত হন, তবে সামনের-শেষের কোডের জন্য আলাদা রেপো বুদ্ধিমান হওয়া উচিত, তারপরে সমস্ত কিছু একসাথে বান্ডিল করুন, এটি ফ্লাস্কের রেপোতে কপি-পেস্ট করুন বা একটি সিডিএন-তে চাপ দিন, এবং এটি উল্লেখ করুন সূচক থেকে। html।

— রায়ান

Answer 2

আপনি উভয় প্রান্তে শুরু করতে পারেন।

আপনি ঠিক বলেছেন যে আপনার সম্ভবত অ্যাঙ্গুলারজেএস সহ একটি সম্পূর্ণ সার্ভার-সাইড ফ্রেমওয়ার্কের প্রয়োজন নেই। স্থির এইচটিএমএল / সিএসএস / জাভাস্ক্রিপ্ট ফাইলগুলি পরিবেশন করা ভাল, এবং ক্লায়েন্টকে গ্রাস করার জন্য পিছনের প্রান্তের জন্য একটি RESTful API সরবরাহ করা ভাল। আপনার সম্ভবত এড়ানো উচিত এমন একটি বিষয় হ'ল অ্যাঙ্গুলারজেএস ক্লায়েন্ট-সাইড টেম্পলেটগুলির সাথে সার্ভার-সাইড টেম্পলেটগুলি মিশ্রিত করা।

আপনি যদি আপনার ফাইলগুলি পরিবেশন করতে ফ্লাস্ক ব্যবহার করতে চান (তবে এটি অতিরিক্ত ব্যবহার করা যেতে পারে, তবে আপনি এটি ব্যবহার করতে পারেন) তবে আপনি "অ্যাপ্লিকেশন" এর বিষয়বস্তুগুলিকে "কৌনিক-ফোনফোনেট" থেকে "মিনিটভিট" এর "স্ট্যাটিক" ফোল্ডারে অনুলিপি করতে পারবেন।

অ্যাঙ্গুলারজেএস এজেএক্স-এর মতো অ্যাপ্লিকেশনগুলিতে আরও লক্ষ্যযুক্ত, যেখানে ফ্লাস্ক আপনাকে পুরানো স্টাইলের দুটি ওয়েব অ্যাপ্লিকেশন করার পাশাপাশি আরএসএসএফুল এপিআই তৈরির ক্ষমতা দেয়। প্রতিটি পদ্ধতির সুবিধাগুলি এবং অসুবিধা রয়েছে, তাই এটি আপনি কী করতে চান তা নির্ভর করে। আপনি যদি আমাকে কিছু অন্তর্দৃষ্টি দেন, আমি আরও সুপারিশ করতে সক্ষম হব।

Comments

+1 - তবে আমি বলব না যে ফ্লাস্ককে পুরানো স্টাইলের ওয়েব অ্যাপগুলিতে লক্ষ্য করা হয়েছে - এটি আপনাকে ওয়েব এপিআই ব্যাকএন্ড হিসাবে ব্যবহার করার জন্য প্রয়োজনীয় সমস্ত সহায়ক সরবরাহ করে ;-) এছাড়াও আপনি চাইলে ফ্লাস্ক-অস্থিরও রয়েছে আপনার ওয়েব অ্যাপ্লিকেশনটির জন্য খুব সহজেই ফ্লাস্ক-এসকিউএএলএলচেমি ব্যবহার করে একটি জেএসএন -পরিবেশনকারী এপিআই তৈরি করতে সক্ষম - কেবল এফওয়াইআই :-)

— সান ভায়েরা

ভাল যুক্তি! আমি ফ্লাস্কের সাথে বিশেষভাবে পরিচিত নই; বিষয়টিতে কিছু দক্ষতা দেওয়ার জন্য ধন্যবাদ।

— বিটিফোর্ড

আমাদের টিউটোরিয়ালটিও দেখুন যা দেখায় যে কীভাবে কৌনিক অ্যাপ্লিকেশন তৈরি করা যায় এবং আমরা যে সমস্ত সরঞ্জামাদি সরবরাহ করি তা হ'ল

— ইগোর মিনার

আমার কাছে এটি "অ্যাপ্লিকেশন" ফোল্ডারটিকে "কৌণিক-ফোনক্যান্যাট" থেকে স্থিতিযুক্ত ফোল্ডারে রেখে দেওয়া ঠিক মনে হয়। তবে আমি মনে করি সূচক। Html ফাইলটি মিনিটভিট টেম্পলেট ফোল্ডারে রাখা উচিত। CSS এবং img ফোল্ডারগুলি "স্থিতিশীল" এ সরানো উচিত should

— নেজো

Answer 3

জন লিন্ডকুইস্ট (অ্যাঙ্গুলার.জেএস এবং জেটব্রেইনস গুরু) দ্বারা নির্মিত এই অফিশিয়াল জেটব্রেইনস পাইচার্ম ভিডিওটি একটি দুর্দান্ত সূচনা পয়েন্ট কারণ এটি ফ্লাস্কের মধ্যে ওয়েবসার্ভিস, ডাটাবেস এবং কৌণিক.জেগুলির আন্তঃব্যবস্থা দেখায়।

তিনি 25 মিনিটেরও কম সময়ে ফ্লাস্ক, স্ক্লাচমি, ফ্লাস্ক-অস্থির এবং কৌণিক জেজে একটি পিন্টেরেস্ট ক্লোন তৈরি করেন ।

উপভোগ করুন: http://www.youtube.com/watch?v=2geC50roans

Answer 4

সম্পাদনা করুন : নতুন অ্যাঙ্গুলার 2 স্টাইল গাইডটি আরও বিশদে একই কাঠামোগত না হলে একটি অনুরূপ প্রস্তাব দেয়।

নীচের উত্তরটি বড় আকারের প্রকল্পগুলি লক্ষ্য করে। আমি বেশ কিছু সময় চিন্তা করে এবং বেশ কয়েকটি পদ্ধতির সাথে পরীক্ষায় ব্যয় করেছি যাতে আমি কৌণিকের মতো ক্লায়েন্টের পাশের কাঠামোর সাথে ব্যাক-এন্ড কার্যকারিতার জন্য কিছু সার্ভার সাইড ফ্রেমওয়ার্ক (আমার ক্ষেত্রে অ্যাপ ইঞ্জিনের সাথে ফ্লাস্ক) একত্রিত করতে পারি। উভয় উত্তর খুব ভাল, তবে আমি কিছুটা ভিন্ন পদ্ধতির পরামর্শ দিতে চাই যা (আমার মনে অন্তত) আরও বেশি মানবিক উপায়ে স্কেল করে।

আপনি যখন একটি টোডোর উদাহরণ বাস্তবায়ন করছেন তখন জিনিসগুলি বেশ সোজা হয়ে থাকে। যখন আপনি ব্যবহারকারীর অভিজ্ঞতা উন্নতির জন্য যদিও কার্যকারিতা এবং ছোট্ট সুন্দর বিবরণ যুক্ত করতে শুরু করেন তখন স্টাইল, জাভাস্ক্রিপ্ট ইত্যাদির বিশৃঙ্খলায় হারিয়ে যাওয়া অসুবিধা নয় ..

আমার অ্যাপ্লিকেশনটি বেশ বড় হতে শুরু করেছে, তাই আমাকে একটি পদক্ষেপ নিয়ে পুনর্বিবেচনা করতে হয়েছিল। প্রাথমিকভাবে উপরে বর্ণিত মত মতামত সমস্ত শৈলী একসাথে এবং সমস্ত জাভাস্ক্রিপ্ট একসাথে করে কাজ করবে, তবে এটি মডুলার নয় এবং সহজেই রক্ষণাবেক্ষণযোগ্য নয়।

যদি আমরা প্রতিটি বৈশিষ্ট্য অনুসারে ক্লায়েন্ট কোডটি সংগঠিত করি এবং প্রতি ফাইল টাইপ না করে:

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

ইত্যাদি।

যদি আমরা এটির মতো এটি তৈরি করি, আমরা আমাদের প্রতিটি ডিরেক্টরি একটি কৌণিক মডিউলটিতে আবদ্ধ করতে পারি। এবং আমরা আমাদের ফাইলগুলি একটি দুর্দান্ত উপায়ে বিভক্ত করেছি যে যখন আমরা একটি নির্দিষ্ট বৈশিষ্ট্য নিয়ে কাজ করি তখন অপ্রাসঙ্গিক কোডের মধ্য দিয়ে যেতে হবে না।

গ্রান্টের মতো একটি টাস্ক রানার যথাযথভাবে কনফিগার করা হয়েছে, আপনার ফাইলগুলি খুব বেশি ঝামেলা ছাড়াই সন্ধান করতে এবং যুক্ত করতে এবং সংযোগ করতে সক্ষম হবে।

Answer 5

আরেকটি বিকল্প হল সম্পূর্ণরূপে দুটি পৃথক করা।

প্রকল্পের
| - সার্ভার
| - ক্লায়েন্ট

ফ্লাস্ক সম্পর্কিত ফাইলগুলি সার্ভার ফোল্ডারের অধীনে যায় এবং অ্যাঙ্গুলার সম্পর্কিত ফাইলগুলি ক্লায়েন্ট ফোল্ডারের অধীনে যায়। এইভাবে, ব্যাকএন্ড বা ফ্রন্ট-এন্ড পরিবর্তন করা সহজ হবে। উদাহরণস্বরূপ, আপনি ভবিষ্যতে ফ্লাস্ক থেকে জ্যাঙ্গো বা অ্যাঙ্গুলারজেএস থেকে রিএ্যাকটিজেএসে স্যুইচ করতে চাইতে পারেন।

Comments

কেভিন: আপনি ফেসবুক সাইন ইন পৃষ্ঠাতে নির্দেশ হিসাবে লিঙ্কটি পর্যালোচনা করতে পারেন।

— রাসেলবি

Answer 6

আমি মনে করি যে আপনি আপনার বেশিরভাগ ডেটা প্রসেসিং - সামনের প্রান্ত বা পিছনের দিকে কী করতে চান তা নির্ধারণ করা গুরুত্বপূর্ণ।
যদি এটির শেষ প্রান্ত হয়, তবে কৌনিক কর্মপ্রবাহের সাথে যান, যার অর্থ আপনার ফ্লাস্ক অ্যাপটি এপিআইর মতো আরও বেশি কাজ করবে যেখানে ফ্লাস্ক-বিশ্রামের মতো একটি এক্সটেনশন শেষ হবে।

তবে যদি আমার মতো, আপনি ব্যাকএন্ডে বেশিরভাগ কাজ করছেন, তবে ফ্লাশ কাঠামোটি নিয়ে যান এবং সামনের প্রান্তটি তৈরি করতে কেবল কৌনিক (অথবা আমার ক্ষেত্রে vue.js) প্লাগ করুন (যখন প্রয়োজনীয়)