Hivi ndivyo nilivyounda Utiririshaji wa Wavuti Kama Mjenzi wa UI wa Python

Nimekuwa nikifanya kazi kwenye mjenzi wa Buruta na Achia Python kwa wiki chache zilizopita.

Unaweza kuiangalia kwa PyUIBuilder

Msimbo wa chanzo: https://github.com/PaulleDemon/PyUIBuilder

Mjenzi anaweza kufanya nini?

Kwa kifupi, inaweza kukusaidia kuunda haraka UI ya Python na kutoa msimbo wa UI katika maktaba / mifumo mingi, pamoja na Tkinter na customtkinter. unaweza kusoma zaidi kwenye sehemu ya vipengele

Lakini sitaki tu kuzindua mradi, ningependa pia kushiriki uzoefu wangu na wewe. Katika blogu hii, nitakuwa nikipitia mchakato wangu wa mawazo na muhtasari wa hali ya juu wa jinsi nilivyounda programu.

Kuja na wazo.

Kinyume na imani maarufu, Python mara nyingi hutumiwa kuunda programu za haraka, maarufu sana kati ya watengenezaji wanaofanya kazi katika sayansi ya data, otomatiki, kazi za uandishi n.k. Zana nyingi za ndani na GUI, haswa katika mipangilio ya kisayansi na utafiti, hujengwa kwa Python kwa sababu ya muundo wake. unyenyekevu na upatikanaji wa mifumo kama Tkinter, PyQt, na zingine.

Sasa, kulikuwa na wajenzi wengi wa Drag na drop kwa wavuti, lakini wachache sana kwa Python GUIs, haswa kwa tkinter. Niliona chache, lakini shida ni kwamba zilikuwa na idadi ndogo ya vilivyoandikwa au zingetoa nambari katika fomati ya XML, ambayo sio bora ikiwa unatengeneza UI kwenye Python.

Kwa hivyo, mwanzoni, nilitaka tu kujenga kijenzi sahihi cha UI kwa Tkinter tu.

Niliendelea kutafakari wazo la mjenzi bora wa GUI (hakuna pun iliyokusudiwa). Nilitiwa moyo na UI ya Canva, na nikaja na huduma chache ambazo zingefanya GUI yangu kuwa bora.

1. Wijeti zote zinapaswa kufanywa kama programu-jalizi.
2. Inapaswa kutumia wijeti za UI za watu wengine katika mfumo wa programu-jalizi.
3. Inapaswa kuwa na uwezo wa kupakia vipengee kama vile picha, video n.k.
4. Inapaswa kutoa nambari katika Python.

Kwa hivyo, karibu mwisho wa Julai, niliamua kuanza kufanya kazi kwenye mradi huo

Kupanua juu ya wazo

Hapo mwanzo iliitwa tkbuilder, ikionyesha kuwa ni mjenzi wa GUI kwa maktaba ya Tkinter UI.

Lakini, ikiwa umegundua naweza pia kupanua wazo moja la kusaidia mifumo na maktaba nyingi za Python GUI, kwani kila kitu kinafanywa kama programu-jalizi na ndivyo nilipanga kufanya.

Upangaji wa toleo la awali.

Kwa toleo la awali, sikutaka kuongeza vipengele vingi ambavyo vingelemea watumiaji. Nilitaka kuijenga kulingana na maoni kutoka kwa watu wanaoitumia. Kwa njia hii sipotezi muda kujenga vitu ambavyo watu hawataki.

Tangu mwanzo niliamua kutokuwa na backend au yoyote au fomu ya kujisajili. Kwa njia hii ni rahisi zaidi kwangu kukuza na kwa watumiaji wanaoitumia. Nilitaka tu mwelekeo rahisi ambao watu wanaweza kuanza nao.

Kuchagua lugha JS, TS au Python

Ndio, hili lilikuwa jambo ambalo nilikuwa nikitafakari kwa wakati mwingine, wajenzi wengi wa GUI wa Python huko nje walijengwa kwa kutumia Python. Chaguo langu la kwanza kwa Python lilikuwa PySide.

Programu ngumu zaidi ya msingi wa GUI niliyounda kwa kutumia PyQt/Pyside ilikuwa a mhariri wa msingi wa nodi miaka michache nyuma.

Lakini niligundua haraka mapungufu ya kutumia python kuunda toleo la awali.

• Maktaba za Python UI hazina wijeti nyingi za watu wengine ili kunisaidia kuunda toleo la awali haraka.
• Si rahisi kusambaza programu ya Python kama faili za exe, ambapo kwa kutumia JS tunaweza kuisambaza katika mfumo wa programu ya elektroni.
• Watu wengi wanapendelea kutumia wavuti badala ya kupakua inayoweza kutekelezwa kutoka kwa tovuti isiyojulikana.

Typescript pia ilikuwa chaguo, lakini kwa Typescript kila wakati nilihisi kuwa ya kitenzi sana

Hivi ndivyo vitu pekee ambavyo niligundua mara moja, kwa hivyo chaguo langu la kwanza likawa kutumia JS.

PS: Baadaye niliendelea kujuta kutoanza na TS, lakini hiyo itakuwa hadithi kwa wakati mwingine.

Mfumo au hakuna mfumo.

Maktaba kama mfumo ninayopendezwa nayo zaidi ni React.js, lakini kuunda kifupi kutahitaji kutumia madarasa, ambayo haipendekezwi tangu kuanzishwa kwa ndoano.

Shida ya kutotumia mfumo ilinibidi nijenge kila kitu mwenyewe na nisiwe na ufikiaji wa maktaba kubwa za sehemu ambazo hujibu inapaswa kutoa.

Zote mbili zilikuwa na mabadiliko, lakini madarasa ya React bado yanaweza kutumika, kwa hivyo ikawa chaguo dhahiri kwangu.

Kuanza kwa shida

Nilianza kwa kujenga msingi na utepe mwanzoni mwa Agosti, na ilibidi nisimame kwa sababu ya ukosefu wa pesa, kwa hivyo nilichukua kazi ya mteja, ambaye kwa bahati mbaya sikulipa kiasi cha mwisho. Nilijaribu ufadhili wa umati lakini sikubahatika huko pia.

Kwa hiyo, katika mwezi wa Septemba nikiwa na pesa kidogo nilizokuwa nimebakisha, niliamua kujihusisha na mradi huu. Mnamo tarehe 9 Septemba nilianza tena kazi.

Kupanga mbele...

Wakati mwingi uliingia katika kufikiria juu ya uondoaji wa msingi, ambao unaweza kupanuliwa ili kukidhi mahitaji.

1. Nilitaka kuwa na Turubai, ambayo inaweza kukuzwa na kubanwa sawa na Figma.

2. Wijeti ya msingi ambayo wijeti zingine zote zinaweza kutoka.

3. Kipengele cha Buruta na uangushe ili kuburuta na kudondosha vipengele vya UI kwenye turubai.

   
   

Ili kujenga na React, unahitaji kufikiria na kuijenga kwa njia fulani, licha ya mabishano juu ya maktaba au mfumo, daima huhisi kama Mfumo kuliko maktaba.

Usanifu wa UI

Siku zote nilipenda jinsi Canva ilivyounda upau wao wa kando, nilitaka kuwa na kitu kama hicho kwa mjenzi wangu wa kuvuta na kuacha.

Nilichora kile kilichokuwa akilini mwangu kwenye kipande cha karatasi. Sio msanii bora zaidi 🙄

Mchakato wangu wa mawazo kuhusu turubai na mwingiliano wa wijeti.

Kwa hivyo, ni nani anayepaswa kuwa msimamizi wa kuvuta, kurekebisha ukubwa, kuchagua. Turubai au wijeti ya msingi. Je, vilivyoandikwa ndani ya wijeti vitashughulikiwa vipi?

Je, wijeti ya msingi itawajua watoto wao au itadhibitiwa na muundo mmoja wa data na turubai yenyewe. Nitawapaje watoto ndani ya watoto?

Je, kuvuta na kuacha kutafanyaje kazi ndani ya turubai na wijeti zingine?

Je, mipangilio itadhibitiwa vipi?

Haya yalikuwa baadhi ya maswali nilianza kuuliza kabla ya kujenga jambo zima.

Ingawa sasa UI inaonekana rahisi, mawazo mengi yaliwekwa katika kujenga msingi, kwa hivyo inaonekana rahisi zaidi kwa watumiaji.

Mbinu ya msingi ya turubai ya HTML au mbinu isiyo ya turubai.

Mbinu ya msingi wa turubai

Sasa html ina kipengele chaguo-msingi cha Turubai, ambacho hukuruhusu kufanya mambo mengi kama vile kuchora, kuongeza picha na vitu, sasa ilionekana kama kipengele bora cha kutumia kwa programu yangu.

Kwa hivyo, nilianza kulipa ikiwa kulikuwa na utekelezaji uliopo wa kuvuta na kuacha, kurekebisha ukubwa, kuvuta na sufuria. Nimepata VitambaaJs , hii ilionekana kama maktaba nzuri kwa kesi yangu ya utumiaji.

Nilijaribu kujaribu Fabric.Js na kujaribu kutekeleza jambo lote kwenye kitambaa.js kama unavyoona hii. utekelezaji , lakini kulikuwa na kitu kuhusu turubai ambacho sikuona kimbele.

1. Nilianza kujaribu mbinu inayotegemea kulabu wakati wa kuunda turubai, lakini utendakazi wa kutupa kitambaa.js haukuwa sawa, kwa hivyo haungecheza vizuri na Hooks.
2. Turubai haiwezi kuwa na vipengee vya watoto kama vile Div au vitu vingine ambavyo vinaweza kufanya iwe ngumu zaidi kuunda wasimamizi wa mpangilio.
3. Kutatua chochote kwenye turubai ni ngumu sana kwani vipengee vya ndani vya turubai havionekani kwenye kipengee cha ukaguzi cha zana za msanidi.

Mbinu isiyo ya turubai

Sasa baada ya kujaribu, mbinu isiyo ya turubai ilionekana kuwa bora, kwa kuwa nina ufikiaji wa msimamizi wa mpangilio chaguo-msingi uliotolewa, pamoja na kulikuwa na vipengee vingi vya UI vilivyoundwa mapema ambavyo vinaweza kufanya chaguo hili bora wakati wa kuongeza.

Nilipanga kuiga turubai kwa kutumia div mbili tofauti za ndani na div ya chombo cha nje.

Sasa kuunda zoom na pan ilikuwa rahisi kutekeleza, kwani CSS tayari ilikuwa na mabadiliko, kiwango na kutafsiri.

Kwanza, ili kutekeleza hili, ilinibidi kuwa na chombo ambacho kinashikilia turubai. Sasa turubai hii haionekani (bila kufurika iliyofichwa), hapa ndipo vipengele vyote hutupwa, na kuongeza na kutafsiri kunatumika.

Ili kuvuta ndani ilibidi niongeze kiwango na kuipunguza kidogo.

Jaribu mfano huu rahisi. ( + ufunguo wa kukuza na - kuvuta nje)

Panning ilifanya kazi vivyo hivyo

Buruta na uangushe

Wakati wa kuanza nilikuwa nimetafiti kwenye maktaba kadhaa kama vile React-beautiful-Dnd , React Dnd-kit na Jibu Swappy .

Baada ya kutafiti niliona kuwa react-beautiful-dnd haikutunzwa tena na nikaanza na React dnd-kit. Kama jengo lililoanza, nilipata hati za dnd-kit chache kwa kile nilichokuwa nikiunda, Pamoja, toleo jipya lililo na mabadiliko makubwa kwenye maktaba lilikuwa likitoka hivi karibuni, kwa hivyo niliamua kuacha react-dnd-kit hadi toleo kuu.

Niliandika upya sehemu ambazo nilitumia DND-kit na HTML's Buruta na Achia API. Kizuizi pekee na API ya asili ya Buruta na udondoshe ilikuwa kwamba bado haitumiki na vifaa vingine vya kugusa, ambavyo havikuwa na maana kwangu kwa sababu nilikuwa nikiunda vifaa visivyo vya kugusa.

Chanzo kimoja cha ukweli

wakati wa kuunda programu kama hii, inaweza kuwa rahisi kupoteza wimbo wa anuwai na mabadiliko yote. Kwa hivyo, siwezi kuwa na anuwai nyingi za kuweka wimbo wa habari sawa.

Taarifa/hali ya kila wijeti inapaswa kushikiliwa na turubai au wijeti yenyewe, ambayo hupitisha habari hiyo kwa ombi.

Au labda utumie maktaba ya usimamizi wa serikali kama reux

Nilichagua kuwa na taarifa zote kuhusu wijeti zinazodhibitiwa na kipengele cha Canvas baada ya kujaribu mbinu tofauti.

Muundo wa data unaonekana kama hii.

 [ { id: "", // id of the widget widgetType: WidgetClass, // base widget children: [], // children will also have the same datastructure as the parent parent: "", // id of the parent of the current widget initialData: {} // information about the widget's data that's about to be rendered eg: backgroundColor, foregroundColor etc. } ]

Wasimamizi wa Muktadha wa React

Sasa nilitaka vipengee vilivyopakiwa kwenye upau wa pembeni vipatikane na upau wa vidhibiti wa wijeti. Lakini kila wakati ninapobadilisha vichupo vya kando, uwasilishaji upya ulisababisha vipengee vilivyopakiwa kutoweka.

Mojawapo ya mapungufu makubwa na Redux ni kwamba unaweza tu kuhifadhi data inayoweza kutambulika. Data isiyoweza kurekebishwa kama vile picha, video, vipengee vingine haiwezi kuhifadhiwa kwenye redux. Hii inaweza kuifanya iwe ngumu kupitisha data ya kawaida karibu na sehemu tofauti.

Njia moja ya kushinda hii ni kutumia React Context. Kwa kifupi, Muktadha wa React hutoa njia ya kupitisha data kupitia mti wa sehemu bila kulazimika kupitisha vifaa kwa mikono katika kila kiwango.

Ninachohitaji kufanya ili kuwa na data katika sehemu tofauti ilikuwa kuifunga karibu na mtoaji wa muktadha wa React.

Niliunda watoa huduma wangu wa muktadha kwa vitu viwili:

1. Buruta na uangushe - Kuwezesha kuburuta na kudondosha kutoka kwa upau wa kando + kuburuta na kudondosha vipengele vya mtoto.
2. Upakiaji wa faili - Kufanya faili zilizopakiwa kupatikana kwenye upau wa vidhibiti kwa kila wijeti.

Hapa kuna mfano rahisi wa jinsi nilivyotumia muktadha wa React kwa Buruta na udondoshe.

 import React, { createContext, useContext, useState } from 'react' const DragWidgetContext = createContext() export const useDragWidgetContext = () => useContext(DragWidgetContext) // Provider component to wrap around parts that need drag-and-drop functionality export const DragWidgetProvider = ({ children }) => { const [draggedElement, setDraggedElement] = useState(null) const onDragStart = (element) => { setDraggedElement(element) } const onDragEnd = () => { setDraggedElement(null) } return ( <DragWidgetContext.Provider value={{ draggedElement, onDragStart, onDragEnd }}> {children} </DragWidgetContext.Provider> ) }

Ndiyo! ndivyo hivyo. Nilichohitaji kufanya sasa ni kuifunga kuzunguka sehemu ambayo nilihitaji muktadha, ambao kwa upande wangu ulikuwa juu ya Turubai na upau wa pembeni.

Inazalisha msimbo

Kwa kuwa kila wijeti inatenda tofauti na ina sifa zake, niliamua kwamba wijeti lazima ziwajibike katika kutoa msimbo wao wenyewe na injini ya msimbo itashughulikia tu migogoro ya majina tofauti na kuweka msimbo pamoja.

Kwa njia hii, niliweza kupanua kwa urahisi ili kuunga mkono wijeti nyingi zilizoundwa awali na vile vile programu-jalizi za UI za wahusika wengine.

Inakwenda moja kwa moja

Sikuwa na maelezo ya nyuma au kujisajili na kulikuwa na kampuni nyingi zinazotoa upangishaji bila malipo kwa kurasa tuli. Nilikuwa nimeamua kwanza kwenda na Vercel, lakini mara nyingi nimeona tairi ya bure ya Vercel ikipungua ikiwa kulikuwa na maombi mengi.

Hapo ndipo nilipogundua Kurasa za Cloudflares sadaka. Tairi lao la bure lilikuwa na karibu kila kitu kisicho na kikomo. Kwa hivyo, kutumia cloudflare ikawa chaguo langu la msingi.

Hasara pekee zilikuwa nyakati za ujenzi zilikuwa polepole sana na hazikuwa na nyaraka nyingi.

Sehemu ya kukasirisha zaidi ya hatua ya ujenzi ilikuwa kushindwa kwa ujenzi, Ilifanya kazi kwenye Vercel, lakini sio kwenye kurasa za cloudflare ??? Kumbukumbu pia hazikuwa wazi. na tuna matairi ya bure yana ujenzi 500 tu kwa mwezi, kwa hivyo sikutaka kupoteza mengi

Nilijaribu kwa masaa kadhaa kisha niliamua kuweka ujumuishaji unaoendelea kwa kamba tupu

 CI='' npm install

Na hatimaye ilienda moja kwa moja.

Unataka kuona jinsi imeendelea kwa miezi yote?

Nimekuwa nikijenga jambo hili hadharani. Nina nia ya kuiona ikiendelea kutoka kwa upau wa pembeni hadi kwa kijenzi kilichopulizwa kikamilifu cha Drag n drop unaweza kuangalia nzima. ratiba hapa .

#kujenga umma

Lo! usisahau kufuatilia kwa sasisho

Repo ya nyota ⭐️

Ikiwa ulipenda aina hii ya maudhui, nitakuwa nikiandika blogu zaidi nikieleza kwa kina zaidi jinsi ninavyopanga na kuunda mambo, ili kufuata unaweza kujiandikisha kwa jarida langu ndogo :)