svelteapp typescript go
1.0.0
هذا تطبيق تجريبي بسيط للتسوق ، استنادًا إلى نفس أمثلة Angular/React/Vue.js في TypeScript الأساسية من تأليف آدم فريمان:
/src )/backend )/db )يأتي المشروع مع dockerfile يمكن أن ينشئ حاوية صغيرة واحدة مع بنيات متعددة المراحل (حجم الصورة ~ 25 ميجابايت) ودعم أيضا ليتم فتحها في DevContainer/CodeSpace.
يتم إنشاء سير عمل GITHub لتشغيل اختبار البناء للرسائل السحب الخاصة بـ DEPORABOT لتحديثات التبعية.
الغرض من Project هو دليل على بناء تطبيق متجانس صغير ومكتفي الكامل مع الأطر الحديثة ، ولكن ليس المقصود منه أن يكون قالبًا عمليًا لأي تطبيقات في العالم الحقيقي. على سبيل المثال ، يتم تجاهل في الغالب تعاملات الخطأ بين الواجهة الأمامية والمصادقة.
يمكن العثور على نسخة مماثلة باستخدام Vue.js و Express و MongoDB و Docker هنا (لم تعد محفوظة).
يحتوي تطبيق Svelte على الطرق التالية:
| طريق | صفحة |
|---|---|
/ | الفهرس (سيتم إعادة توجيه إلى /products ) |
/products | تصفح وإضافة منتجات إلى عربة التسوق |
/order | عرض وينقص |
/summary/{id} | نتيجة الطلب |
/ ، سيتم إعادة توجيه /products على الفور./products تعمل على تحميل قائمة المنتجات من خدمة API وعرض الفئات والعناصر.Add To Cart على أي عناصر ، ستتم إضافتها إلى العربة ( orderLines مجموعة الحالة العالمية).Submit Order /products ، سيعيد تطبيق التطبيق إلى /order ، ويعرض WHCIH تفاصيل الطلب.Submit Order /order ، سيرسل التطبيق الطلب إلى خدمة API والحصول على معرف الطلب./summary/[id] كنتيجة. الواجهة الخلفية تخلق اثنين من واجهات برمجة التطبيقات الشبيهة بالراحة:
| API | وظيفة |
|---|---|
الحصول على /api/products | استعلام DB وإرجاع بيانات المنتج |
ما بعد /api/orders | اكتب بيانات الطلب إلى DB وإرجاع معرف الطلب الجديد |
تستخدم مشاريع آدم فريمان الأصلية json-server على خادم Express كخدمات واجهة برمجة تطبيقات وهمية. أحتفظ بمواصفات الإدخال/الإخراج للخدمات من أجل العرض التوضيحي. في الوقت الحالي ، مثل جميع الأمثلة الأصلية ، يقرأ التطبيق فقط قوائم المنتجات وكتابة بيانات الطلب. يتم أيضًا استبدال حزمة Axios المستخدمة في الأمثلة الأصلية fetch .
لدى Sveltekit أيضًا ميزة لإنشاء "واجهات برمجة التطبيقات الخلفية". ومع ذلك ، فإن خادم Golang هنا يكفي ، لذلك لا نحتاج حقًا إلى إنشاء واجهات برمجة التطبيقات المكررة.
/api/products إرجاع قائمة المنتجات من قاعدة البيانات. سيتم استخدام category لإنشاء أزرار مرشح الفئة على التطبيق.
اطلب من جسم طلب:
(لا أحد)
مثال جسم الاستجابة:
[
{
"id" : 1 ,
"name" : " Kayak " ,
"category" : " Watersports " ,
"description" : " A boat for one person " ,
"price" : 275.0
},
{
"id" : 2 ,
"name" : " Lifejacket " ,
"category" : " Watersports " ,
"description" : " Protective and fashionable " ,
"price" : 48.95
}
]/api/ordersاكتب العنصر والكميات المطلوبة. ستقوم الخدمة بإنشاء معرف طلب جديد وربطه بالمنتجات المطلوبة.
اطلب من جسم طلب:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}مثال جسم الاستجابة:
{
"id" : 42
} تحتوي قاعدة بيانات SQLite ( ./db/data.sqlite3 ) في هذا الريبو بالفعل على products الجدول التي تحتوي على 9 سجلات للمنتجات (والتي يمكن العثور عليها في العديد من كتب آدم فريمان) orders الجدول الفارغة. يمكنك استخدام متصفح DB لـ SQLite لقراءة قاعدة البيانات. يوجد أيضًا ملف نسخ احتياطي في حال كنت بحاجة إلى استعادة قاعدة البيانات.
إليك عبارات SQL لإعادة إنشائها:
CREATE TABLE " products " (
" id " INTEGER NOT NULL UNIQUE, -- product ID
" name " TEXT NOT NULL ,
" category " TEXT NOT NULL ,
" description " TEXT ,
" price " REAL NOT NULL ,
PRIMARY KEY ( " id " AUTOINCREMENT)
);
CREATE TABLE " orders " (
" id " INTEGER NOT NULL , -- order ID
" product_id " INTEGER NOT NULL , -- product ID
" quantity " INTEGER NOT NULL
);
INSERT INTO " main " . " products " (
" id " ,
" name " ,
" category " ,
" description " ,
" price "
)
VALUES
( ' 1 ' , ' Kayak ' , ' Watersports ' , ' A boat for one person ' , ' 275.0 ' ),
( ' 2 ' , ' Lifejacket ' , ' Watersports ' , ' Protective and fashionable ' , ' 48.95 ' ),
( ' 3 ' , ' Soccer Ball ' , ' Soccer ' , ' FIFA-approved size and weight ' , ' 19.5 ' ),
( ' 4 ' , ' Corner Flags ' , ' Soccer ' , ' Give your playing field a professional touch ' , ' 34.95 ' ),
( ' 5 ' , ' Stadium ' , ' Soccer ' , ' Flat-packed 35,000-seat stadium ' , ' 79500.0 ' ),
( ' 6 ' , ' Thinking Cap ' , ' Chess ' , ' Improve brain efficiency by 75% ' , ' 16.0 ' ),
( ' 7 ' , ' Unsteady Chair ' , ' Chess ' , ' Secretly give your opponent a disadvantage ' , ' 29.95 ' ),
( ' 8 ' , ' Human Chess Board ' , ' Chess ' , ' A fun game for the family ' , ' 75.0 ' ),
( ' 9 ' , ' Bling Bling King ' , ' Chess ' , ' Gold-plated, diamond-studded King ' , ' 1200.0 ' );للتنمية المحلية ستحتاجها
ملاحظة: تتطلب حزمة
go-sqlite3أن تجمع GCC مع متغير البيئةCGO_ENABLED=1.بالنسبة لمستخدمي Windows ، يمكن تثبيته باستخدام MINGW (unzip وأضف
mingw64binإلى$PATH، ثم أعد تشغيل الكود مقابل الكود). على Linux يمكن تثبيته باستخدام الحزمةbuild-essential.
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-fullوتثبيت/ترقية خيوط:
npm i -g yarn@latest قم بتشغيل تطبيق Svelte في وضع التطوير. لن يتصل التطبيق بأي واجهات برمجة التطبيقات الخلفية ، وبدلاً من ذلك ، يقوم بإرجاع بيانات المنتج الوهمية ومرسلة الطلب التي تم إرجاعها دائمًا 42 .
yarn dev سيتم فتح التطبيق على http://localhost:3000 .
# download frontend dependencies
yarn
# download backend dependencies
yarn setup-server
# download both dependencies
yarn setup-full
# or
# yarn setup-all # upgrade frontend dependencies
yarn upgrade-app
# upgrade backend dependencies
yarn upgrade-server
# upgrade both dependencies
yarn upgrade-full
# or
# yarn upgrade-allتثبيت التبعيات ، وبناء كل من تطبيقات الواجهة الأمامية والخلفية وتشغيل الخادم المحلي:
# build frontend app
yarn build-app
# build backend server (which will set CGO_ENABLED=1)
yarn build-server
# build both
yarn build-full
# or
# yarn build
# yarn build-all # serve in macOS or Linux
yarn serve
# serve in Windows
yarn serve-win سيفتح التطبيق على http://localhost:8080 .
# build container
yarn docker
# run container
yarn docker-run سيفتح التطبيق على http://localhost:8080 .
