Site oluşturun

ChatGPT veya Codex ile bir web sitesini tarif edin, oluşturun ve geliştirin

ChatGPT veya Codex içinde ne oluşturmak istediğinizi tarif ederek başlayın. Ardından ilk sürümü inceleyin ve ilerledikçe geliştirin.

Sites ile çalışmaya başlayın

ChatGPT uygulamasını web üzerinde veya masaüstünde açın. Sites iş akışını başlatmak için prompt'unuza "website" sözcüğünü ekleyin veya @Sites ifadesini kullanın. Örneğin, bir operasyon ekibi için proje talep panosu isteyebilirsiniz:

Prompt:

Build a project request dashboard website for my operations team. Let team members submit requests, see who owns each one, update the status, and filter the list. Require people to sign in with their workspace account, and keep the request data saved between visits.

Pano yalnızca bir örnektir. Aşağıdaki akışı oluşturmak istediğiniz siteye uyarlayabilirsiniz.

  1. Siteyi tarif edin

    ChatGPT uygulamasına sitenin kimler için olduğunu ve ziyaretçilerin neler yapmasını istediğinizi söyleyin. Gerekli belgeleri veya verileri paylaşın. Bir talep panosu için örnek talepler, sorumlular ve durum etiketleri ekleyebilirsiniz.

  2. Siteyi inceleyin

    İstediğiniz işlemleri deneyin ve içeriği ve sonuçları kaynak materyalinizle karşılaştırın. Pano için bir talep gönderebilir, durumunu değiştirebilir veya sorumluya göre filtreleyebilirsiniz. Sitenin bilgileri nasıl kullandığını ve kaydettiğini doğrulayın.

  3. Siteyi geliştirin

    ChatGPT uygulamasına neleri değiştirmek istediğinizi söyleyin ve yardımcı olacaksa bir ekran görüntüsü veya referans site paylaşın. Pano için şöyle isteyebilirsiniz: “Sorumlu ve durum filtrelerini talep listesinin üstüne yerleştir.”

  4. Siteyi yönetin ve paylaşın

    Siteyi yeniden açmak veya düzenlemek için sites bölümüne dönün. Yayımlamadan önce inceleme ve paylaşım kontrollerini uygulayın. Kimlerin ziyaret edebileceğini seçin ve yayımlanan bağlantıyı hedeflenen bir ziyaretçi olarak kontrol edin.

Siteleri bulun ve önizlemede düzenleyin

ChatGPT masaüstü uygulamasında sites bölümünü açın. Bir prompt'tan veya uyumlu bir yerel projeden site oluşturmaya başlayabilir, ardından yönetmek için sites görünümüne dönebilirsiniz.

Web üzerinde oluşturduğunuz siteleri bulmak için More > sites yolunu seçin veya doğrudan ChatGPT içindeki sites bölümüne gidin. Önizlemede Edit seçeneğini seçin. Describe website edits altında istediğiniz değişiklikleri tarif edin. Daha fazla bağlam yardımcı olacaksa Screenshot veya Add files and more seçeneğini kullanın.

Sites özelliğinin Codex CLI veya IDE uzantısında bağımsız bir yönetim görünümü yoktur. Site oluşturmak, kaydetmek, dağıtmak ve yönetmek için ChatGPT uygulamasını web üzerinde veya masaüstünde kullanın. Yerel bir projeyi yayımlamadan önce düzenlemek ve test etmek için CLI veya IDE uzantısını kullanmaya devam edebilirsiniz.

Kayıtları ve ilerlemeyi kaydedin

Bir site sürümünü kaydetmek, içeriğini, tasarımını ve davranışını korur. Ziyaretçi talepleri, durum güncellemeleri, yüklenen dosyalar ve kişisel ilerleme için ayrıca depolama gerekir. ChatGPT veya Codex uygulamasına nelerin kaydedileceğini ve bunları kimlerin okuyabileceğini ya da değiştirebileceğini söyleyin.

Paylaşılan veya kişisel kayıtlar için sunucuda uygulanan erişim kuralları isteyin. Sayfa yeniden yüklendikten sonra güncellemelerin kayıtlı kaldığını kontrol edin ve her kişinin erişimini doğrulamak için ayrı hesaplar kullanın. Bir düğmeyi gizlemek, ilgili kaydı korumaz.

Sağlanan dosyalar için sitenin bir kopya mı kullanacağını yoksa kaynaktan yenileme mi yapacağını belirtin. Bilgilerin en son ne zaman güncellendiğini kontrol edin.

Depolama ve oturum açma seçenekleri için Veriler ve bağlantılar sayfasına bakın.

Sitenizi oluşturmak için ipuçları

  • Kaynak materyalinizi kullanın. Sitenin kullanması gereken dosyaları, bağlantıları, tanımları ve formülleri ekleyin. ChatGPT veya Codex uygulamasından eksik bilgileri doldurmak yerine belirtmesini isteyin.
  • Boş durumları ve hata durumlarını tarif edin. Aramada eşleşme bulunmadığında, bir form eksik doldurulduğunda veya bağlı bir uygulamaya erişilemediğinde ziyaretçilerin ne görmesi gerektiğini açıklayın. Yeniden denemek veya sorunu düzeltmek için bir yol sunun.
  • Görsel bir referans paylaşın. Bir ekran görüntüsü veya sayfa bağlantısı ekleyin ve kompakt kartlar ya da arama alanının konumu gibi kullanmak istediğiniz ayrıntıları belirtin. Marka renklerini, yazı tiplerini veya yazım kurallarını da ekleyin.
  • Telefonları düşünerek planlayın. Kartların, tabloların ve formların dar bir ekrana nasıl sığması gerektiğini tarif edin. Gezinmenin, filtrelerin ve form denetimlerinin yatay kaydırma olmadan kullanılabildiğini kontrol edin.
  • Örnek verileri etiketleyin. Nihai içerik hazır değilse örnek olarak etiketlenmiş kayıtlar isteyin. Siteyi paylaşmadan önce bunları değiştirin.
  • Odaklı değişiklikler yapın. Her seferinde tek bir değişiklik isteyin ve nelerin korunacağını söyleyin. Örneğin, kayıtlı verileri, erişim kurallarını veya mevcut işlemleri değiştirmeden bir filtreyi taşıyın. Her değişiklikten sonra etkilenen etkileşimi deneyin.

Sites vitrini, Sites ile oluşturabileceğiniz örnek web uygulamalarını sunar.

Örnek prompt'lar

Bir kaynak merkezi için kısa bir prompt ile başlayın:

Prompt:

Build a resource hub website where project leads can search our kickoff resources by task. Use the resource list I attach. Save a version without deploying it so I can review it.

Bu isteği ziyaretçi işlemleri, arama kuralları ve tasarım tercihleriyle genişletebilirsiniz:

Prompt:

Build a resource hub website for project leads preparing a kickoff. Use the resource list I attach, with its titles, descriptions, task labels, and source links.

Visitor actions:

- Choose a task, such as preparing an agenda.
- Search within that task's resources.
- Select a result to open its source link.

Search rules:

- When the search is empty, show all resources for the selected task.
- If no task is selected, show the full list.
- If there are no matches, offer a way to clear the filters and show the help contact from my list.
- Flag entries with missing titles or links for my review.
- Search filters can reset when the visitor returns.

Design preferences:

- Use a white background and dark text. Keep descriptions to one sentence, with a layout that works on a phone.
- If I provide a reference screenshot, use it for the search placement and compact resource cards.
- If I provide a brand guide, use its accent color.

Save a version without deploying it so I can review the layout and try the search.

Mevcut bir proje için ChatGPT uygulamasından uyumluluğu kontrol etmesini ve projeyi yayımlamaya hazırlamasını isteyin:

Prompt:

Deploy this project with sites. Check whether it is compatible, make any required changes, and give me the deployment URL.

Bir sitenin kayıtları veya yüklenen dosyaları saklaması gerekiyorsa bunu isteğinize ekleyin:

Prompt:

Add player scores and avatar uploads to this game. Keep the scores and uploaded avatars between visits.