40

قصّرتك | سكربت بسيط لتقصير الرّوابط مطوّر بلغة بايثون وإطار العمل Flask

السّلام عليكم ورحمة الله وبركاته.

بنيت تطبيقا بسيطا لتقصير الرّوابط الطّويلة.

يُمكنك مُعاينة التّطبيق من الرّابط

http://qssr.tk

(هل لاحظت سبب التّسميّة؟ المجانيّات!)

إذا توقّف الرّابط عن العمل (سيتوقّف بعد شهر من الآن) جرّب هذا الرّابط:

http://qssrtk.herokuapp.com

التّطبيق متواجد على إستضافتين:

  • Heroku (دائمة إن شاء الله)

http://qssrtk.herokuapp.com /

  • Scaligo (ستعمل لمُدّة شهر فقط)
http://qssrtk.scalingo.io

http://qssr.tk /

طريقة الاستخدام: ضع الرّابط في الخانة، اضغط على ENTER من لوحة المفاتيح أو اضغط أي مكان خارج الخانة، انتظر قليلا واضغط على "انسخ" لنسخ الرّابط.

صور للتطبيق على مُختلف الشّاشات (حاولت جعله متجاوبا قدر الإمكان)

السكربت مفتوح المصدر ويُمكن لأي شخص أن يقرأ الشيفرة وقد أضفت تعليقات لجعلها مفهومة قدر المُستطاع:

وبالمُناسبة هذه هي الـFront-end على Codepen:

 

http://codepen.io/adyouri/p...

للمصمّمين

ما رأيكم بالتّصميم وتجربة المُستخدم؟ (السّؤال موجّه خاصّة للأستاذ الخبير بتجربة المُستخدم :) )

للمُطورين

جميع الملاحظات مُرحّب بها، وسأكون شاكرا لأية مُراجعة للشّيفرة.

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

لمن يرغب بتعلّم لغة بايثون:

اطّلع على هذه السّلسلة:

https://academy.hsoub.com/s...

تعلم إطار العمل Flask

إذا كانت لك خبرة مع لغة بايثون، ألق نظرة على هذه الصّفحة لتفهم أساسيّات إطار العمل(تقريبا كلّ ما تحتاج إليه لفهم الشّيفرة المُتواجدة على Github):

 http://flask.pocoo.org/docs...

إضافة Flask-SqlAlchemy لإدارة البيانات

ستحتاج إلى الاطّلاع على هذه الصّفحة لفهم الاتصالات التي تحدث مع قاعدة البيانات:

http://flask-sqlalchemy.poc...

مُلاحظة: ستُنشر دروس حول هذا الإطار قريبا على أكاديميّة حسوب فكونوا في الموعد :)

Smaily أضف ردا

رائع أخي ، الواضح أنك بذلت مجهودا كبيرا في تقديم تلك الدورة ، هل لي أن أسألك عن ما إذا كانت هناك علاقة بين تطبيقات الهواتف و لغة البايثون ،لدي خلفية بسيطة في php و أريد المواصلة مع لغة تجمع بين تطبيقات الويب والهاتف

عبد الهادي أضف ردا

شكرا لك :)

في الحقيقة لم أجرّب تطوير تطبيقات الهاتف الذكي بلغة بايثون، ورغم أنّ الأمر ممكن إلا أنّني لا أجده خيارا جيّدا (إلا إن تعلّق الأمر بتطبيقات بسيطة)

حسب رأيي فإنّ التّوجه الحالي هو بناء تطبيقات الهواتف بلغة Javascript ومُختلف أطر العمل المتوفّرة لذلك (وهي كثيرة ولها دعم كبير)

أريد المواصلة مع لغة تجمع بين تطبيقات الويب والهاتف

على رسلك يا صديقي، كلّنا ذلك الرّجل :)

أتفق مع الأخ @عبد الهادي JS باطارات عملها هي الافضل حالياً لتطبيقات الهواتف (الهجينة) طبعا في حال اسقطنا JAVA من المعادلة

على كل حال الدي اعرفهم ان بايثون تتميز ببساطة الكود البرمجي مشكلتها الازلية هي دعم الاستضافات لها إل لو استخدمتها على سيرفر خاص .

مشكلتها الازلية هي دعم الاستضافات لها

وكذلك كنت أظن :)

لكن صراحة الوضع تغيّر، كما تُلاحظ لقد قُمت باستضافة هذا التّطبيق على إستضافتين (الأولى مجانيّة، والثّانيّة مجانيّة لمدّة شهر)، هناك كذلك العديد من الخيارات الأخرى كـPythonAnywhere وOpenshift وغيرها، أمّا إذا بدأنا الحديث عن تطبيقات Django فستزيد العديد من المواقع لما سبق، وجميع هذه الإستضافات سهلة الاستخدام كما أنّ معظمها يدعم أداة git ما يجعلها تتفوق على العديد من استضافات PHP العاديّة (ارفع ملفّا مضغوطا وفك عنه الضّغط) الطريقة الكلاسيكيّة الخاصّة بـPHP غير مناسبة لمن يُريد التّطوير ورفع الملفات دون عناء ضغطها وفك الضّغط عنها في كلّ مرّة تُضيف شيئا جديدا.

الخلاصة أنّ الاقتباس أعلاه لم يعد صحيحا :)

ZaidEd أضف ردا

عودةً إليك أستاذي عبد الهادي، بالنسبة للتصميم فإليك آرائي:


  • استلهم قبل التصميم، هل جرّبت أن تلقي نظرة على أشهر مواقع تقصير الروابط ولماذا أصبحت شهيرة؟ أعجبتني بساطة التصميم لكنني أقترح إضافة بعض المؤثرات (لا أعني بالمؤثرات ظلالًا وتوهجات ولكن إضافات أخرى في التصميم) كي يعلق الموقع في الذهن، فلو طلبت من طفل أن يلقي نظرة على التصميم حاليًا ثم طلبت منه رسمه من خياله لرسم لك بضع مربعات خضراء دون أن يتذكر المضمون الواقعي، قارن هذا بمواقع مثل Bit.ly أو adf.ly، هل تنسى أشكالها؟

  • لا أعلم إن كنت تحب التصميم المسطح، لكنني أود أن أصارحك بأن التصميم المسطح قد مات، ولو أن الكثير من المصممين ما زالوا يستخدمونه كما يستخدمون الظل الطويل (موضات العصور الوسطى)، سيبقى واقع أن العصر الجديد والبقاء الحالي هو لتصميم الماتريال ونوعًا ما التصميم الواقعي.

  • ابتعد عن خط جذور، مع كامل احترامي وحبي لصانعيه، إلا أنه دائري زيادة عن اللزوم وهنالك خطوط أكثر حداثة وتطورًا.

  • استعمل أكثر من وزن للخطوط.

  • حاول أن تحصل على شعار أو رمز للموقع، أحيانًا لن تحتاج إلى مصمم شعارات احترافي، فقط اكتب اسم الموقع بخط جميل أو تلاعب به قليلًا وبألوانه.

  • لا فائدة من المربع الغامق حول حقل إدخال الرابط الطويل، لا يحتوي على شيء ولا يضيف قيمة.

  • هنالك بعض المشاكل حول تجاوبية التصميم على الشاشات المختلفة، مثل أنها تبدو مالئة للشاشة، الاتجاه الحالي في تجربة الاستخدام هو التصميم للهاتف أولًا ثم إعادة تجاوب التصميم لكي يعمل على الحاسوب.


على العموم، لمساعدتك قمت بتصميم هذه الواجهة، سأراسلك بالملف المصدري لها إن أردت استخدامه :)

عبد الهادي أضف ردا

ما شاء الله، جزاك الله خيرا على المراجعة، في الحقيقة لم أتوقع أن تكتب كل هذه المعلومات القيّمة خاصّة وأن التصميم بسيط جدا.


لدي بعض الاستفسارات إن لم تُمانع.

لو طلبت من طفل أن يلقي نظرة على التصميم حاليًا ثم طلبت منه رسمه من خياله لرسم لك بضع مربعات خضراء دون أن يتذكر المضمون الواقعي

هل هذه قاعدة يُمكن الاعتماد عليها دائما لتحديد جودة التّصميم؟

ابتعد عن خط جذور

هل تفضّل خطوطا مُعيّنة؟ وهلا ذكرت بعضا منها؟

لا فائدة من المربع الغامق حول حقل إدخال الرابط الطويل، لا يحتوي على شيء ولا يضيف قيمة.

كنت أظن أنها فكرة جيّدة لتنبيه المُستخدم بالجزء الأهم من الصّفحة، ولكنّني أظن الآن بأنّني لم أكن محقا :)


أما عن باقي المُلاحظات فأظنّ أنّها في محلّها وأشكرك جزيل الشكر :)

أعجبني حقا التّصميم الذي أنجزته، وأظنّه أفضل من تصميميَ بمراحل.

سأراسلك بالملف المصدري لها إن أردت استخدامه

هل هو تصميم مُتجهي؟ لأنّني لا أستخدم برنامج الفوتوشوب، أستخدم Inkscape فقط (Gimp أحيانًا)،

لن أتمكن حاليا من تطوير التّطبيق (ولا أفكّر في الأمر)، ربما بعد عدّة أشهر قد أعود إليه لأضيف خصائص أخرى (تسجيل المُستخدمين، إتاحة واجهة برمجيّة إمكانيّة الإطّلاع على الإحصائيّات)

تستطيع طرح الملف المصدري هنا ليستفيد منه بقيّة الأعضاء (من المفضل أن يكون رابطا مُباشرا من Dropbox أو Google Drive)

تحياتي لك

هل تستطيع التطوير فيه ليصبح قادرا على تقديم احصائيات على من ضغط على الروابط

نعم بالطّبع :) يُمكنك فعل ذلك.

يُمكنك كذلك الحصول على عدد النّقرات حسب كلّ دولة باستعمال الأمر whois على IP المُستخدم :)

أعتقد أنه يتطلب إنشاء قاعدة بيانات تتطلب التسجيل كي تظهر النتائج فقط لصاحب الاختصار بدلا من ظهورها للجميع

نعم بالضّبط.

  • جدول روابط. لكلّ رابط user_id خاص بمُعرّف منشئ الرّابط.

  • جدول مُستخدمين.

  • جدول إحصائيّات، كل رابط له معرفّ أيضا url_id بحيث يُمكنك وضع عمود لعدد النّقرات، عدد زوار كل بلد...

لا اضن ان whois هو الحل للحصول على دولة الزائر.

عبد الهادي أضف ردا

ربّما يُمكنك استخدام API موقع مُختص أو مكتبة مُختصّة والله أعلم.

تعديل:

بعد القليل من البحث وجدت هذه الخدمة http://ipinfo.io

الخدمة تُقدّم إمكانيّة الحصول على معلومات حول IP مُعيّن على شكل JSON.

مثال:

http://ipinfo.io/IP/country

عند وضع IP مُعيّن فستستطيع الوصول إلى شيفرة البلد.

أنت على حق يا أخي، whois حل غير مناسب.

هذه الخدمة محدودة ولا يمكن الاعتماد عليها.

صحيح لديهم خدمات مدفوعة حسب عدد الطلبات اليوميّة.

بالمُناسبة هل لديك طريقة أخرى؟

giveitatry أضف ردا

حاليا اعمل على تطبيق بالفلاسك يحتاج هذه الخاصية والطريقة التي اعتمد عليها هي هذه المكتبة

https://dev.maxmind.com/geo...

هي ليست مكتبة لكن قاعدة بيانات يتم تحديتها كل مدة يمكن رفعها على السيرفر الخاص بك.

جميل!

ما رأيك بها؟ هل هي جيّدة؟ أرى أنها تعتمد على قاعدة بيانات فهل ستكون دقيقة في تحديد المعلومات؟

افضل ما وجدت

استخدمها من فترة و تعتبر قاعدة البيانات الوحيدة الاقل اخطاء , الجيد انهم يوفروا سكربت PHP جاهز لتضمينها في موقعك .

طبقتها في هذا الموقع حتى تعرض الاسعار بعملة بلد الزائر بعد الحصول على اسعار التحويلات من Yahoo finanace

http://bit.ly/1MN5qXp

شكرا اخ عبد الهادي على جهدك و وقتك لتقد للمحتوى العربي شيء جميل مثل هذه الأشياء التي نادرا ما نجدها مفتوحة المصدر

وفقك الله أخي وجعل عملك هذا في ميزان حسناتك

hozefamaxs أضف ردا

ما شاء الله... عمل موفق أخي عبد الهادي ...

لدي اقتراحان بسيطان للموقع

الأول:

إضافة إمكانية عمل رابط مخصص، ولا أظن أنه يوجد حاجة لذكر كيفية عمل ذلك، فأنت تعلم أكثر مني :)

أحيانا أقوم (( ومثلي الكثير )) بإرسال سللة دروس أو مقالات بروابط مختصرة، وهنا تكمن الحاجة لاستمعال روابط مخصصة على سبيل المثال هذه الدروس للغة الHTML من العصر الحجري (( أحذرك: قد تشعر بغثيان إذا زرت الموقع !!! )):

http://cutt.us/html01

http://cutt.us/html02

الثاني:

قفل طبقة النص عند الرابط المختصر

اقتراحات جميلة، قد أضيفها في حالة عدت إلى تطوير التّطبيق من جديد.

شكرا لك يا صديقي :)

على الرحب والسعة دوماً :)

الخط لا يظهر جيدا ، يظهر في جهازي Arial

لكنها خدمة جيدة نظرا لبرمجتها بـFlask ، فهذا الاطار غير منتشر عربيا بكثرة.

أوه آسف! نسيت أن أضمّن الخط عندما نشرت التّطبيق ههههه

على العموم يسرني أنّ التّطبيق أعجبك :)

أصلحت ذلك على استضافة Heroku:

https://qssrtk.herokuapp.com

ييبدو أفضل الآن :)

إستضافة Scalingo تعاني من بعض المشاكل في رفع الملفّات

لأنه ببثايون هذا شيء رائع

لو كان في php للطورته وقمت بالعديد من المميزات الجديده مثل : history , clicks ,

ما أعجبني في المشروع بجانب بساطته أنه مفتوح المصدر، شكرًا لجهودك الطيبة.

الشيفرة بسيطة جدّا صراحة، حتى أنّ شيفرة بايثون الأساسيّة لا تتعدى 70 سطرا (مجهود نصف ساعة أو ساعة من العمل).

هذه هي الشّيفرة الأساسيّة

عدا عن ذلك، فشيفرة جافاسكريبت كذلك بسيطة ومفهومة:

أبدعت!

لدي سؤال, في هذا الفصل الدراسي أجبرونا على تعلم إطار العمل جانغو، وقد تعجبت من سهولته وأنه لا حاجة لنا لكتابة أكواد الحماية وتسجيل الدخول ولوحة الإدارة الخ..

بعد تصفحي لكودك رأيت أن فلاسك أبسط أكثر من جانغو؟ هل صحيح أم لجهلي بها قلت ذلك؟ :)

صحيح، إطار العمل Flask أبسط ويتّبع أسلوبا مُباشرا أكثر من دجانغو.

على العموم إطار جانغو أفضل بالنّسبة للمشاريع الضّخمة فقط، أما عندما يتعلّق الأمر بمشاريع صغيرة فمن الأفضل استخدام Flask.

أكواد الحماية وتسجيل الدخول ولوحة الإدارة ... إلخ: غير متوفرة مع فلاسك على عكس جانغو! :)

صحيح، لذلك يعتبر جانغو خيارا أفضل للمشاريع الكبيرة :)

لكن لا تنس بأنّ Flask يمتلك العديد من الإضافات التي تهتم بهذه الأمور.

هناك شيئان أنصحك بتصحيحهما

  • أولا في css

ضع للbody

margin: 0;
  • ثانيا برمجيا

عندما أدخل مثلا

io.hsoub.com

لا يتم تقصير الرابط يبقى

http://qssrtk.herokuapp.com...

لذلك عندما تريد تقصير الرابط تأكد من إضافة

https:/

إذا لم تكن موجودة

يمكنك فعلها ب JavaScript

جزاك الله خيراً :)

  • بالنّسبة للمُلاحظة الأولى، هل لك أن توضّح السّبب؟

  • بالنّسبة للمُلاحظة الثّانيّة فشكرا جزيلا لك، سأعمل على إصلاح الأمر :)

أصلحت الأمر على إستضافة Heroku

http://qssrtk.herokuapp.com

بالنّسبة للمُلاحظة الأولى

لكي لا تضهر ال scroll الأفقية

  • وأيضا بالنسبة لل footer إجعل :

;height: 55px

لكي لا تظهر ال scroll الرأسية

حسنا شكرا لك

بالنسبة لل footer الأفضل ألا تضع له height محدد

عمل رائع.

أدعوك لتجربة virtualenvwrapper مع virtualenv لتسهيل التعامل مع البيئة الافتراضية

https://virtualenvwrapper.r...

مرحبا علي، شكرا لك :)

بالمُناسبة، يُمكن إرسال pull request على Github إذا أردت ذلك :)

اهلا اخي ،

تحياتي لك فموقعك اكثر من رائع :) فقط لدي سؤالين اذا يمكنك اتمنى ان تجبني عنهم :

اخي كيف استطاع السكريبت معرفة وجود الموقع (مثلا لو تدخل رابط خطا ، يقوم باعادتك الى السكريبت الخاص بك)

اخي ممكن رابط لشرح لكيفية استخدام heroku لاستضافة المواقع

تحياتي

السّؤال الأول: الموقع ليس ذكيا إلى هذه الدّرجة فقط 3 أشياء يجب أن تتوفّر في الرّابط:

  • أن لا يكون سلسلة فارغة ""

  • أن تكون فيه نقطة

  • أن لا يحتوي على مسافات

السؤال الثاني:

اعتمد على هذه التدوينة http://blog.y3xz.com/blog/2...

شكرا اخي :-) ممكن تراجع هذا الcommit

https://github.com/hassenzo...

مرحبا صديقي، شكرا على اهتمامك، رغم أنّني كنت أدري بأمر مكتبة Requests إلا أنّني لم أستخدمها فشكرا لك على هذا التذكير :)

للأسف هذا الحل لن يعمل لأنّ الروابط التي لا توجد أصلا لن تُرجع رقم الحالة 404 لأنّها ليست موجودة أصلا

الرّقم 404 يُرسل فقط في حالة وُجد الرّابط ولكن الصفحة المطلوبة غير موجودة

يُمكن أن نقوم بتأكيد الرّابط في حالة نجحت requests في الوصول إلى الرّابط ونستعمل Try و Except ConnectionError ولكنّ هذا قد يجعل من الموقع بطيئا،ـ وبالمُناسبة حتى Bit.ly لا تُمانع في اختصار الرّوابط غير الموجودة :)

أعتذر على عدم المُوافقة على الحل المُقدّم رغم أنّ الفكرة جميلة جدا :)

ومُجدّدا شكرا لك ^_^ وإذا كانت لديك أية إضافة أخرى فلا تتردّد في طرحها، فمنكم نتعلّم :)

تحياتي :)

اهلا اخي ، من واجبي الاهتمام مادام المشروع عربي ، ولاداعي للاعتذار اخي فلا مشكل :)

لااخي لااعتقد ان التفحص سيجعل الموقع بطئ لهذه الدرجة ، يمكنك ايضا ان تقوم بنسخ الدومين فقط والقيام بتجربته ايضا (يعني تقوم بنسخ string الى حدود ظهور ثالث "/" طبعا بعد اضافتك ل http:/ اذا كان لايحتوي الرابط الدخل عليها .. الحلول كثيرة ؛) )

اخي نحن نسعى لنصبح الافضل ليس لنصل لما هو الافضل الان ،، يعني ليس من الضروري ان نتبع خصائص المواقع الاخرة فقط .. بل يجب ان نفكر لوحدنا بدون اي مقارنات ...

باذن الله اخي :-)

كامل الاحترام والتقدير ..

بالاضافة الى هذا اخي فاننا لانريد ان نقوم باختصار الصفحات الغير موجودة ، صح ؟

نعم صحيح :)

لكنّني مُتأكّد من أنّ سرعة الموقع في التّجاوب ستقل بشكل ملاحظ، فالتأكيد الواحد بوحدة requests يتطلّب بضعة ثوان على جهازي المحلي، وأتوقع أن تزيد هذه المدّة في حالة نقل التّطبيق إلى الإستضافة.

صحيح ، على راحتك اخي :-)

كل الاحترام والتقدير

واصل ...

بالمُناسبة في حالة أردت الاستمرار في العمل على فكرتك يُمكنك تطوير التّطبيق كما تشاء (لا مانع لدي).

وفقط كمعلومة، الرّابط غير الموجود يُمكن أن يطرح نوعين من الأخطاء:

ConnectionError

والخطأ:

MissingSchema

تحياتي

ان شاء الله اخي :-). اعتقد ان ConnectionError كافية , صح ؟

على حد علمي MissingSchema خطأ يحدث عندما لا يبتدئ الرّابط ببروتوكول (http/https) لكن قد لا تكون هذه حالة عامة لذا من الأفضل أن تستثنيهما معا حسب رأيي.

ملاحظة: قد تحدث الكثير من الأخطاء الأخرى أثناء مُحاولة الاتصال، وقد يتسبب ذلك في توقف التّطبيق.

هذه قائمة بأنواع الاستثناءات: http://docs.python-requests...

صحيح اخي ولكن نسبة وقوع اخطا اخرى ضعيفة جدا ;-)

شكرا على التفاعل :-)

بالرغم من أنني لم أدرس Flask إلا أنني فهمت الكود مباشرة بمساعدة تعليقاتك، لدي سؤال: المكتبة التي تستدعيها "SQLAlchemy " هل تقابل الــ"Database API" في Django مثلا؟

هذا يدل على أنّ لك خبرة بلغة بايثون :)

SQLAlchemy مُجرّد ORM لإدارة قواعد البيانات. عوضا عن:

SELECT * FROM table

تقوم بالأمر بطريقة بايثونيّة.

إطلع على هذه الصّفحة لتأخذ فكرة عن الأداة:

http://flask-sqlalchemy.poc...

رائع جداً

عمل ممتاز

لكن ماهذا الإسم الذي اخترته ؟! لم يعجبني ^__^

لكن عمل ممتاز ومتقن

بالتوفيق لك

اخي منذ فتره اعمل علي flask ، ولكن لا استطيع تنصيبها او تشغيلها علي shared host من godaddy

بحثت طويلاً ولم اجد حل فعال لهذه المشكلة ، هل بإمكانك المساعدة ؟!

لم أستخدم Godaddy من قبل ولا أنوي استخدام الاستضافات المشتركة.

أُفضّلُ استخدام خدمات الاستضافة السّحابيّة Cloud Hosting مثل استضافة Heroku، وذلك لسهولة نشر التّطبيقات فيها، ودعمها لأداة Git.

الخطط المدفوعة من هيروكو جيّدة :)

هناك أيضا خيار الاستضافة على Openshift من شركة Redhat.

أو يُمكنك استخدام VPS من Digital Ocean أو Vultr

 

واجهت مشاكل مع Scalingo ولا أنصح بالتّعامل معهم.

مشاء الله تبارك الله عمل رائع اخي الكريم تحياتي

شكرا اكثر و اكثر لي انه مفتوح المصدر