چگونه وب سایت خود را با استفاده از Apple Watch خود راه اندازی کنم

من عاشق یک ترفند مهمانی خوب هستم و یکی از آنها این است که می توانم وب سایت خود را با استفاده از صدای خود و Apple Watch خود گسترش دهم. در اینجا نحوه انجام این کار با استفاده از یک عملکرد بدون سرور و ایجاد هوک در Netlify و یک میانبر اپل است.

TL;DR این است که من می‌توانم وب‌سایت خود را با استفاده از صدایم در هر یک از دستگاه‌های اپل خود با درخواست از سیری برای اجرای میان‌بر اجرا کنم. و من احساس می کنم یک نابغه وقتی آن را انجام می دهم در اینجا یک نسخه نمایشی است که من هنگام پخش زنده در Twitch انجام دادم:

https://www.youtube.com/watch?v=hx24i-fuHek

اما سلما، چرا این کار را می کنی؟

وب‌سایت من یک سایت ثابت است که با Eleventy ساخته شده است، و هر بار که در Twitch آنلاین یا آفلاین می‌شدم، وب‌سایت خود را به صورت دستی ( مدت کوتاهی پس از آن، من با استفاده از یک هوک ساخت در Netlify که توسط ربات توییچ من راه اندازی شده بود، استقرار مجدد را به طور خودکار انجام دادم و فقط برای سرگرمی، دکمه ای را به Elgato Stream Deck خود اضافه کردم تا هر زمان که لازم باشد وب سایت خود را مجدداً مستقر کنم. و وقتی متوجه شدم که شما می توانید هر درخواست GET را از طریق میانبرهای اپل فعال کنید، ترفند مهمانی من متولد شد. در اینجا نحوه انجام آن آمده است.

یک پروژه جدید ایجاد کنید – یا از یک موجود استفاده کنید

برای گام‌های بعدی در این راهنما، به یک پروژه موجود در Netlify نیاز دارید که می‌خواهید از طریق این ✨ جادویی ✨ مجدداً مستقر کنید. این آموزش همچنین فرض می‌کند که با جاوا اسکریپت و کنترل نسخه git راحت هستید (و پروژه خود را در Netlify از طریق git متصل کرده‌اید)، و از یک دستگاه اپل با برنامه Shortcuts استفاده می‌کنید.

اگر تازه وارد Netlify هستید، راهنمای شروع به کار با Netlify را بررسی کنید، که به شما کمک می کند تا نحوه استقرار یک پروژه آزمایشی در Netlify را برای در دسترس قرار دادن آن در وب بیاموزید. همچنین برخی از ویژگی های کلیدی Netlify از جمله عملکردهای بدون سرور و متغیرهای محیطی را معرفی می کند – که در این آموزش از آنها استفاده خواهید کرد.

هنگامی که یک سایت به صورت زنده در Netlify ایجاد کردید، آماده راه اندازی هستید!

یک قلاب ساخت ایجاد کنید

Build hook یک URL منحصر به فرد به شما می دهد که می توانید از آن برای راه اندازی یک سایت جدید در Netlify با درخواست HTTP POST استفاده کنید. سایت خود را در Netlify انتخاب کنید، روی آن کلیک کنید تنظیمات سایت، ساخت و استقرارو به پایین بروید قلاب بسازید. را کلیک کنید قلاب ساخت را اضافه کنید، یک نام برای هوک ساخت خود انتخاب کنید (مانند Function deploy) و کلیک کنید صرفه جویی.

اکنون هوک ساخت خود را در لیست خواهید دید. این مقدار را همانطور که در مرحله بعد به آن نیاز داریم کپی کنید.

برای امنیت متغیرهای محیطی را اضافه کنید

برای جلوگیری از استقرار مجدد غیرمجاز سایت شما توسط ربات‌ها و خزنده‌ها یا هر کسی که ممکن است کد شما را به صورت آنلاین مشاهده کند، ما دو متغیر محیطی را برای سایت شما ذخیره و استفاده می‌کنیم: مقدار قلاب ساخت و یک پارامتر پرس و جو مخفی که بدون سرور است. عملکرد قبل از شروع یک استقرار بررسی می شود.

در قسمت تنظیمات سایت در Netlify بر روی آن کلیک کنید متغیرهای محیطی. روی افزودن متغیر کلیک کنید، یک متغیر واحد اضافه کنید، اضافه کردن BUILD_HOOK_URL به عنوان کلید، و URL قلاب ساخت خود را که به عنوان مقدار ایجاد کردید. کلیک متغیر ایجاد کنید برای ذخیره آن

بعد، یک متغیر محیطی دیگر اضافه کنید. این پارامتر URL مخفی است که در عملکرد بدون سرور بررسی می کنیم. نام ببرید BUILD_HOOK_SECRET و به آن ارزش بدهید. این مقدار می تواند هر چیزی باشد که شما انتخاب می کنید، اما برای غیرقابل حدس زدن باید شبیه یک رمز عبور امن باشد. می توانید از یک مولد رشته تصادفی استفاده کنید یا خودتان یکی بسازید.

یک عملکرد بدون سرور ایجاد کنید

هنگامی که فایل های جاوا اسکریپت را به یک فایل اضافه می کنید، عملکردهای بدون سرور در Netlify به طور خودکار شناسایی و با سایت شما مستقر می شوند. netlify/functions فهرست راهنما. پروژه خود را در IDE انتخابی خود باز کنید. اگر در حال حاضر از توابع بدون سرور استفاده نمی کنید، یک را اضافه کنید netlify دایرکتوری به ریشه پروژه شما، و در داخل آن، a functions فهرست راهنما. داخل آن، یک فایل جدید به نام اضافه کنید deployme.js.

پس از استقرار، این فایل تابع به طور خودکار برای درخواست GET در دسترس خواهد بود https://yoursite.netlify.app/.netlify/functions/deployme. کد زیر را به deployme.js اضافه کنید و اجازه دهید آن را بررسی کنیم.

// /netlify/functions/deployme.js

exports.handler = async function (event, context) {
  if (event.queryStringParameters.secret === process.env.BUILD_HOOK_SECRET) {
    const response = await fetch(process.env.BUILD_HOOK_URL, {
      method: "POST",
    });

    return {
      statusCode: 200,
      body: "Site is deploying!",
    };
  } else {
    return {
      statusCode: 403,
      body: "Access denied! Please include the correct secret URL parameter.",
    };
  }
};

برای استقرار مجدد یک سایت با استفاده از قلاب ساخت که قبلاً راه اندازی کردیم، یک درخواست GET به این URL عملکرد بدون سرور (یعنی باز کردن آن در یک مرورگر وب) که شامل BUILD_HOOK_SECRET به عنوان یک پارامتر مخفی در URL، به عنوان مثال: https://yoursite.netlify.app/.netlify/functions/deployme?secret=make_this_really_secure.

خط اول تابع این راز را در URL بررسی می کند. اگر راز پیدا نشد یا مطابقت نداشت، کد وضعیت HTTP 403 (ممنوع) را برمی گردانیم و کاری انجام نمی دهیم. اگر راز صحیح پیدا شد، یک درخواست POST به آن می دهیم BUILD_HOOK_URL با استفاده از fetch، یک کد وضعیت HTTP 200 (ok) را برگردانید و یک پیام موفقیت آمیز در پاسخ ارسال کنید.

توجه: Node 18 اکنون نسخه پیش‌فرض Node برای همه سایت‌های Netlify است، در صورتی که جایگزینی برای آن مشخص نکرده‌اید. اگر از نسخه Node قبل از 18 استفاده می کنید، باید node-fetch را در پروژه خود نصب کنید و آن را در بالای این فایل وارد کنید. دستورالعمل ها در این پست قبلی آمده است: چگونه سایت Netlify خود را با یک عرشه جریان الگاتو مستقر کنید.

سپس کد جدید را از طریق git به Netlify فشار دهید. سیاهههای مربوط به استقرار خود را مشاهده کنید تا Netlify به طور خودکار عملکرد بدون سرور جدید خود را شناسایی کرده و بسازید!

نقطه پایانی را در مرورگر خود تست کنید

بیایید بررسی کنیم که کار می کند! وقتی استقرار کامل شد، از نقطه پایانی عملکرد بدون سرور جدید در مرورگر خود با پارامتر URL مخفی (مثلاً https://yoursite.netlify.app/.netlify/functions/deployme?secret=make_this_really_secure) و پیام موفقیت خود را خواهید دید. به لیست استقرار سایت Netlify خود برگردید و خواهید دید که یک ساخت جدید شروع شده است! همچنین متوجه خواهید شد که نام قلاب ساختی که قبلاً ایجاد کرده‌اید به‌عنوان ماشه توسعه نمایش داده می‌شود.

شما اکنون آماده راه اندازی میانبر اپل برای راه اندازی مجدد وب سایت خود هستید!

یک میانبر اپل اضافه کنید

برنامه Shortcuts را در دستگاه Apple مورد نظر خود باز کنید و روی دکمه plus کلیک کنید تا میانبر جدیدی اضافه کنید. میانبر را نامی انتخاب کنید و در قسمت جستجو عبارت Expand URL را جستجو کنید. آن عمل را به میانبر اضافه کنید و مقدار URL تابع بدون سرور خود را با پارامتر URL مخفی به آن بدهید.

اکنون می توانید روی این دکمه میانبر کلیک کنید یا از Spotlight برای راه اندازی مجدد وب سایت خود نیز استفاده کنید!

در مرحله بعد، مطمئن شوید که همگام سازی iCloud برای میانبرهای شما روشن است و کمی به آن فرصت دهید تا همگام شود. 🤞🏼

وب سایت خود را با صدای خود راه اندازی کنید!

وقتی میانبرهای شما همگام‌سازی شدند، آماده هستید که همه را با ترفند مهمانی خود شگفت زده کنید! از Apple Watch، iPhone، HomePod خود – یا هر جایی که سیری فعال است – با گفتن «بپرسیدهی سیری! میانبر: استقرار وب سایت،و با حیرت و شگفتی تماشا کنید که سایت شما در Netlify مجدداً مستقر شده است! و شما نیز می توانید احساس کنید که یک نابغه.

توجه: من کلمه «میانبر» را از ویدیوی آزمایشی ویرایش کردم تا وقتی ویدیو را بدون هدفون تماشا می‌کردم، وب‌سایت خود را بارها و بارها راه‌اندازی نکنم!