Kusuka kuhlelo lokusebenza lwasendaweni kuya kuwebhusayithi yomphakathi ngemizuzu

0 1 8 minutes read

Kusuka kuhlelo lokusebenza lwasendaweni kuya kuwebhusayithi yomphakathi ngemizuzu

ngizokukhombisa izindlela ezi-3 zamahhala zokuphakela ngokushesha uhlelo lokusebenza olulula lwewebhu ukuze lutholakale esidlangalaleni ku-inthanethi. Ngokuthi “lula,” ngiqonde uhlelo lokusebenza lwewebhu olungaguquki, okungukuthi, olungenaso isiphetho sesizindalwazi, ama-akhawunti omsebenzisi, noma umbono wohlangothi lweseva.

Nakuba lokhu kungase kubonakale kuwumkhawulo kancane, kusekuningi ongakwenza nge-HTML, CSS ne-JavaScript kuphela.

Njengoba kugxilwe ezindleleni ezihlukene zokuthunyelwa, ngeke ngichithe isikhathi esiningi kuhlelo lokusebenza lwewebhu ngokwalo.

Bengifuna iphrojekthi encane eqondile, kodwa esangempela ngokwanele ukuthi ngingayisebenzisa futhi sabelane ngayo. Ngakho-ke ngenze i-Codex yakhe igeyimu yesiphequluli, isidubuli esilula sesitayela se-Space Invaders umenzeli anqume ukusibiza I-Starline Defender.

Umdlalo kulula ukuwudlala. Uhambisa umkhumbi omncane kwesokunxele nakwesokudla ngokhiye bemicibisholo, udubule abafokazi abangenayo usebenzisa i-space-bar, ucashe ngemuva kwezihlangu, ulahlekelwe izimpilo uma ushaywa, futhi uhamba ngamagagasi asheshayo njengoba amaphuzu akhuphuka. Isebenza nezilawuli zekhibhodi kudeskithophu kanye nezilawuli zokuthinta kuselula. Ngizoshiya izixhumanisi kuwo womathathu ama-URL wohlelo lokusebenza engithumele kuwo ekugcineni, ukuze ukwazi ukudlala ngawo ngokwakho.

Nasi isixwayiso engisisebenzisile.

Dala uhlelo lokusebenza lwewebhu olulula oluqukethe i-html, i-css ne-javascript okuwumdlalo olula wohlobo lwabahlaseli besikhala

Ngemva kwemizuzu eyi-16, i-Codex yakukhafula lokhu.

Worked for 16m 45s

I'll build this as a single self-contained HTML file with embedded CSS and 
JavaScript, using canvas so it runs anywhere without a build step. I'll keep 
the existing downloader file untouched and add a new game page.
I'm going to include the whole game in one file: canvas rendering, alien 
waves, shields, scoring, lives, levels, keyboard controls, and on-screen 
controls for touch devices. After that I'll open it locally through the 
existing localhost server and do a quick visual sanity check.
Created 1 file

The game file is in place. I'm checking it through localhost now so we can 
catch blank canvas issues, script errors, or layout problems before I hand it 
over.
Verify game page

The page loads over localhost. The browser's read-only page check couldn't 
inspect canvas pixels directly, so I'm switching to a screenshot and 
console-log check, which is the right kind of sanity test for this 
canvas-heavy page.
Screenshot game

The screenshot found one layout wrinkle: on a short viewport the game board 
shrinks but hugs the left side, leaving dead space to the right. I'm centering 
and constraining the board dimensions so it looks intentional on both 
mobile-sized and desktop-sized panes.
Edited 1 file

I've patched the responsive sizing. I'm reloading the page now and doing 
one interaction pass: start the game, confirm the canvas updates, and check 
that there are no console errors.
Verify updated game
Done. I created the single-file SPA here:
starline-defenders.html
You can play it in the in-app browser at:


I also verified it loads, starts, renders the canvas, and has no browser 
console errors.

Ngihlole igeyimu endaweni, futhi yasebenza kahle. Ngakho-ke, manje ukuyithumela kuwebhu ukuze umhlaba ukwazi ukumangala ngobuhle bayo!

Amasistimu wokusatshalaliswa esizowabheka yilawa:-

1. Amakhasi we-GitHub
2. lapha.manje
3. Izikhala Zobuso Abangana

Ukuze ngigweme ukungabaza, ngaphandle kokuba umsebenzisi walezi zinhlelo, anginabudlelwane, ukuhlanganyela noma ukuxhumana nanoma yiziphi izinkampani ezishiwo ngenhla.

Okujwayelekile Okudingekayo

Abasingathi abaningi abamile balindele ukuthi ikhasi eliyisiqalo liqanjwe ngokuthi index.html, ngakho into yokuqala okufanele yenziwe ukuqamba kabusha ifayela lethu elithi starline-defenders.html. Kule phrojekthi, yilokho kuphela esikudingayo, njengoba zonke izimpahla zethu nekhodi ikuleli fayela elilodwa.

Dala ifolda engenalutho ohlelweni lwakho lwendawo isb starline-defenders/ bese ukopisha ifayela elithi index.html lapho.

Indlela 1: Sebenzisa ngamakhasi we-GitHub

I-GitHub Pages iyinketho yakudala yamasayithi amancane amile nezinhlelo zokusebenza zewebhu ezinjengalezi. Uma ngabe iphrojekthi yakho isivele ihlala e-GitHub, lokhu kuvame ukuthunyelwa okuhlala njalo okulula kakhulu.

I-GitHub Pages inganikeza i-HTML, i-CSS, i-JavaScript, izithombe, nezinye izimpahla ezimile zisuka ngqo endaweni yokugcina. Ngomdlalo wefayela elilodwa, njengalena, yiyo yonke ingqalasizinda oyidingayo.

Okudingayo

Izimfuneko zokufakwa kwe-GitHub yilezi: –

I-akhawunti ye-GitHub
I-Git Bash ifakwe endaweni
Indawo yokugcina ye-GitHub esesidlangalaleni. Lokhu kubalulekile ekusetshenzisweni kwamahhala.

Isinyathelo 1: Dala i-akhawunti ye-GitHub

Iya bese uchofoza inkinobho ethi Bhalisa phezulu kwesokudla kwesikrini.

Isinyathelo sesi-2: Faka uhlelo lokusebenza lwe-git bash

I-Git, ngesixhumi esibonakalayo somugqa womyalo we-Bash, ikuvumela ukuthi uxhumane ne-GitHub, isb, kopisha amafayela kumakhosombe.

Yithole ngokuchofoza:

futhi ulandele imiyalelo yokufaka efanele isistimu yangakini.

Isinyathelo sesi-3: Dala Indawo Entsha

Ngena ngemvume ku-akhawunti yakho ye-GitHub bese udala indawo yokugcina entsha ebizwa, isibonelo:

abavikeli benkanyezi

Qiniseka ukuthi iyinqolobane yomphakathi.

Isinyathelo sesi-4: Faka ifayela lakho elithi index.html endaweni yokugcina abantu

Lokho ukwenza ngokuvula itheminali yomugqa womyalo we-Git Bash, bese ushintsha inkomba ibe ifolda yendawo equkethe ifayela lakho elithi index.html. Manje thayipha imiyalo elandelayo ku-Git Bash.

git init
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
git add index.html
git commit -m "Add space invaders type game"
git branch -M main
git remote add origin /YOUR_USERNAME/starline-defenders.git
git push -u origin main

Shintshanisa okuthi `YOUR_USERNAME`negama lakho lomsebenzisi le-GitHub.

Isinyathelo sesi-5: Nika amandla amakhasi we-GitHub

Vula indawo yokugcina entsha ku-GitHub, bese:

1. Iya kokuthi Izilungiselelo.
2. Vula Amakhasi kubha eseceleni yesokunxele.
3. Ngaphansi kwe-Build and deployment, khetha okuthi Sebenzisa egatsheni.
4. Setha igatsha lomthombo libe `eliyinhloko`.
5. Setha ifolda kokuthi `/impande`.
6. Chofoza Londoloza.

I-GitHub izoqala ukushicilela isayithi. Ngokuvamile kuthatha iminithi noma amabili, futhi i-URL yakho yokugcina izobukeka kanje:

FYI, uma udinga ukwenza izinguquko kuhlelo lwakho lokusebenza lwewebhu ngokuzayo, vele wenze izinguquko ezidingekayo kufayela lakho lendawo index.html, libophe bese uliphusha futhi:

git add index.html
git commit -m "Update game"
git push

Uhlelo lwakho lokusebenza olubuyekeziwe luzosebenza kabusha ngokuzenzakalelayo.

Indlela yesi-2: Sebenzisa lapha.now

here.now isevisi eyakhelwe ukushicilela amasayithi amile namafayela ngokushesha. Ingakwazi ukusingatha i-HTML, i-CSS, i-JavaScript, izithombe, amadokhumenti, namanye amafayela amile bukhoma `*.lapha.manje` I-URL. Nakuba lapha.manje yakhelwe ukufinyelela ejenti, ungakwazi futhi ukuxhumana nayo ngesandla, okuyinto engizokubonisa lapha.

Kunezindlela ezimbili ongashicilela kuzo lapha.manje. Zombili zikhululekile. Indlela yokuqala ibizwa ngokuthi imodi engaziwa futhi ayidingi ukubhalisa noma ukubhaliswa. Kule modi, here.now izobamba uhlelo lwakho lokusebenza ku-URL yesikhashana amahora angu-24.

Ukuze uthole i-URL ehlala lapha.manje, okuyiyona esizoyisebenzisa, udinga ukuyishicilela ngokhiye we-API.

Ukugeleza yilokhu:

Bhalisa/ngena lapha.manje
Thola ukhiye we-API
Ilondoloze endaweni
Qalisa izikripthi zomugqa womyalo ukuze ushicilele uhlelo lokusebenza
I-URL ebuyisiwe ingunaphakade ku-akhawunti yakho

Izimfuneko zokusetshenziswa kwe- here.now yilezi:-

I-akhawunti ethi lapha.manje
A here.now API key

Isinyathelo 1: Bhalisela lapha.manje

Chofoza lapha.now/dashboard bese usebenzisa inkinobho ethi Ngena Ngemvume phezulu kwesokudla kwesikrini.

Uzothola isixhumanisi ku-imeyili yakho ukuze usichofoze, esizokungenisa lapha.manje kahle.

Isinyathelo sesi-2: Thola ukhiye we-API

Uma usungenile, kuzoba nesixhumanisi se-API kubha yemenyu engakwesokunxele. Chofoza lokho, bese ukopisha ukhiye okhiqiziwe ebhodini lakho lokunamathisela.

Isinyathelo sesi-3: Shicilela isayithi lakho

Ku-Windows PC njengale engiyisebenzisayo, ukushicilela uhlelo lwakho lokusebenza kuhlanganisa ukusebenzisa eminye imiyalo ye-PowerShell. Kunenqubo efanayo ye-Linux nabanye abasebenzisi besistimu yokusebenza.

# Create a folder to hold your API key if required
#
New-Item -ItemType Directory -Force "$env:USERPROFILE.herenow" | Out-Null

# Save the API key
#
Set-Content "$env:USERPROFILE.herenowstarlinedefenders-credentials" "YOUR_API_KEY"

# publish the web app
#

cd "$env:USERPROFILEprojectsstarlinedefenders"

$apiKey = Get-Content "$env:USERPROFILE.herenowstarlinedefenders-credentials" -Raw
$file = Get-Item ".index.html"

$body = @{
  files = @(
    @{
      path = "index.html"
      size = $file.Length
      contentType = "text/html; charset=utf-8"
    }
  )
  spaMode = $true
} | ConvertTo-Json -Depth 5

$create = Invoke-RestMethod `
  -Uri " `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
    "X-HereNow-Client" = "manual/powershell"
  } `
  -ContentType "application/json" `
  -Body $body

$upload = $create.upload.uploads[0]

Invoke-WebRequest `
  -Uri $upload.url `
  -Method Put `
  -ContentType $upload.headers."Content-Type" `
  -InFile $file.FullName

$finalBody = @{
  versionId = $create.upload.versionId
} | ConvertTo-Json

$final = Invoke-RestMethod `
  -Uri $create.upload.finalizeUrl `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
  } `
  -ContentType "application/json" `
  -Body $finalBody

"Permanent Site URL: $($create.siteUrl)"

Ngemva kokuba umbhalo ongenhla usuqalile, uzobonisa i-URL ongayisebenzisa ukuze ufinyelele kuhlelo lwakho lokusebenza lwewebhu.

Ukubuyekeza uhlelo lwakho lokusebenza kulula, futhi. Ngemva kokushintsha ikhodi ku-index.html njengoba kudingeka, vele uqalise kabusha iskripthi sokuphakelwa esingenhla futhi.

Indlela yesi-3: Sebenzisa ngezikhala zobuso obungangana

I-Hugging Face (HF) Spaces yaziwa kakhulu ngamademo okufunda komshini, kodwa futhi isekela izinhlelo zokusebenza ze-HTML ezimile.

Okudingayo

I-akhawunti ye-Hugging Face
I-HF Space entsha
Ifayela lakho elithi index.html
Ifayela le-README.md eliqukethe imethadatha yesikhala

Isinyathelo 1: Dala i-akhawunti ye-HF

Chofoza futhi usebenzise inkinobho ethi Bhalisa phezulu kwesokudla sekhasi.

Isinyathelo sesi-2: Dala i-Space esisha

Uma usungenile, chofoza inkinobho ye-Spaces phezulu, bese uchofoza okuthi Dala Isikhala esisha bese ukhetha igama laso, isb, i-starline-defenders-game. Gcwalisa incazelo bese ukhetha noma yiliphi igama lelayisense olifunayo.

Nge-Space SDK, khetha I-Static, bese kokuthi Isifanekiso, khetha okungenalutho. Khetha Okusesidlangalaleni njengokubonakala kohlelo lokusebenza, bese uchofoza inkinobho ethi Dala Isikhala ngezansi.

Isinyathelo sesi-3: Bhala phezu kwefayela elithi index.html elakhiwe ngaphambilini

Ngemva kokuthi Isikhala sesidaliwe, chofoza isixhumanisi esithi Amafayela eduze kwaphezulu kwekhasi; kuphakathi kwe-App nezixhumanisi Zomphakathi. Kufanele ubone isikrini esibukeka kancane njenge-GitHub repo, enamafayela amane i-HF ekudalele yona ngaphambili. Okuwukuphela kwento okudingeka sizikhathaze ngayo yifayela elithi index.html. Udinga ukukopisha ku-index.html yangakini ukuze ubhale phezu kwe-HF ekhona. Yenza lokho usebenzisa i-Git Bash, njengoba senza ngamakhasi e-GitHub.

Qaphela ukuthi ngesikhathi kusetshenziswa umyalo wokugcina we-git push oboniswe ngezansi, kuzovela iwindi le-pop-up lapho kuzodingeka ufake igama lakho lomsebenzisi le-HF kanye nethokheni yokufinyelela ukuze umyalo uphumelele. Uthola ithokheni yakho yokufinyelela ngokuya ekhasini lezilungiselelo elilandelayo.

izilungiselelo/amathokheni

Chofoza inkinobho ethi Dala Ithokheni. Ngaphansi Kohlobo Lwethokheni, chofoza okuthi Bhala. Nikeza ithokheni yakho igama bese udala. Gcina inothi levelu yethokheni. Manje thayipha imiyalo elandelayo ku-Git Bash. Miselela i-YOUR_USERNAME kanye ne-YOUR_SPACE_NAME ngamavelu akho e-HF.

# go the folder where your index.html lives
cd ~/projects/starlinedefenders

git clone spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
cp ~/projects/starlinedefenders/index.html ./index.html
git add index.html
git commit -m "Replace index with a space invaders type game"
# After the following push command, you'll have to enter
# your HF username and the access token you created previously
# before the command will succeed
git push

Ubuso Obugonayo buzokwakha buphinde bushicilele Isikhala ngemuva. Ngemuva kweminithi noma ngaphezulu, uhlelo lwakho lokusebenza luzolungela ukusebenza. Ukuze uyiqalise, sesha igama lakho lomsebenzisi le-HF, futhi zonke izikhala zakho ezitholakalayo kufanele zibuyiswe. Chofoza kusixhumanisi se-Space esihlobene, futhi uhlelo lwakho lokusebenza kufanele lusebenze ngokushesha.

Ukuze ubuyekeze uhlelo lokusebenza kamuva, hlela inkomba.html yangakini, bese ucindezela futhi:

git add index.html
git commit -m "Update game"
git push

Ukuqhathanisa Izindlela Zokutshala

Bobathathu basebenza kahle kulolu hlobo lwephrojekthi. Umehluko umayelana nokuhamba komsebenzi kanye nezethameli.

Amakhasi we-GitHub

I-GitHub Pages iyinketho engcono kakhulu ezenzakalelayo uma iphrojekthi yakho isivele iku-GitHub. Iqinile, ibhalwe kahle, futhi ijwayelekile konjiniyela.

Okuhle:

Kumahhala kumakhosombe omphakathi
I-HTTPS ifakiwe
Kulula kakhulu ukubuyekeza nge-Git
Ilungele amaphothifoliyo namademo ephrojekthi
Akukho ukukhiya kwenkundla okukhethekile ngale kwe-GitHub

Ububi:

Ukushicilela kwamahhala ngokuvamile kusho inqolobane yomphakathi
Akuhlosiwe njengokusingathwa kwezentengiselwano okunzima kakhulu
Izilungiselelo zokusebenzisa zingadida abaqalayo okokuqala ngqa
Ngokushesha okungaphansi kwethuluzi lesitayela sokudonsa nokushicilela

lapha.manje

here.now indlela esheshayo yokuguqula uhlelo lokusebenza lwendawo lube i-URL ebukhoma. Ifaneleka kahle kuzinhlelo zokusebenza ezincane ezimile ezikhiqizwe ngomenzeli noma umsizi wokubhala amakhodi.

Okuhle:

Ukugeleza kokushicilela okusheshayo kakhulu
Ilungele amademo asheshayo nokuhlola kuqala
I-akhawunti yamahhala isekela amasayithi amile angunaphakade
Ingakwazi ukusingatha i-HTML esobala, i-CSS, i-JavaScript, namafa njengezithombe

Ububi:

Udinga i-akhawunti noma ukugeleza kwesimangalo ukuze ube usokhaya unomphela
Okusha futhi okungaziwa kakhulu kunamakhasi we-GitHub
Kufanele uhlole imikhawulo yohlelo lwamanje ngaphambi kokulusebenzisela amaphrojekthi anethrafikhi ephezulu

Izikhala Zobuso Abangana

Izikhala Zobuso Ukugona kuyinketho ekhetheke kakhulu. Kuhle kakhulu uma ufuna uhlelo lwakho lokusebenza luphile eduze kwamademo, ukuhlolwa, noma amaphrojekthi ahlobene ne-AI.

Okuhle:

Isekela Izikhala ze-HTML ezimile
Izikhala zamahhala ezisekelwa yi-CPU ziyatholakala
Ilingana kahle uma usuvele usebenzisa ubuso be-Hugging
Ingakhula kalula ibe i-Gradio, Streamlit, Docker, noma uhlelo lokusebenza olunamandla e-ML kamuva

Ububi:

Izinyathelo zokuthumela ziyinkimbinkimbi kakhulu kunezinye ezimbili.
Idinga README.md imethadatha block kanye nefayela index.html
I-URL esesidlangalaleni yikhasi le-Hugging Face Space kune-URL yesayithi emile yenjongo evamile
Ingxenyekazi eqondene kakhulu namakhasi e-GitHub

Isifinyezo

Ukuthuthukiswa kwekhasi lewebhu noma uhlelo lokusebenza kuvamise ukuba ingxenye yempi. Uma ufuna ukwabelana ngomsebenzi wakho nabanye, ukuthunyelwa kuba isici esibaluleke kakhulu. Impela, kunezinsiza eziningi ezikhokhelwayo ezizokwenza ukuthi uqalise, kodwa ngohlelo lokusebenza olulula ngempela noma idemo, ikhono lokuphakela mahhala liyisibusiso.

Ngibonise izindlela ezi-3 ezihlukene zokuthumela uhlelo lokusebenza olumile kuwebhu mahhala. Uma sikhuluma iqiniso, zonke zinokugeleza komsebenzi ofanayo kanye nemizamo yokusebenzisa, futhi angicabangi ukuthi ungenza iphutha uma ukhetha enye yazo.

Mane ukhumbule ukuthi lezi zindlela aziklanyelwe ukubhekana nohlelo lwakho lokusebenza olunezinkulungwane zabasebenzisi ngesikhathi esisodwa. Bakhululekile phela. Uma ufuna lokho, uzodinga ukubheka kwenye indawo futhi ukhiphe ikhadi lakho lesikweletu.

Ukuze uthole ireferensi, nawa ama-URL amathathu amahhala engiwadalele “Starline Defender”

I-GitHub Starline Defenders

lapha.manje Starline Defenders

Izikhala Zobuso Ezigonelayo Abavikeli be-Starline

Source link

nimda 2 hours ago

0 1 8 minutes read