Integrated Development Environment

Portable Web-IDE met Gemini-Integratie

IDE staat voor Integrated Development Environment, of in het Nederlands: een Geïntegreerde Ontwikkelomgeving.
Het is in feite een digitale werkplaats voor programmeurs die alle essentiële tools samenbrengt onder één dak. In plaats van losse programma’s te gebruiken voor het schrijven van code, het bekijken van het resultaat en het oplossen van fouten, doet een IDE dat allemaal in dezelfde omgeving.

In de wereld van webdevelopment zijn zware, logge editors en complexe configuraties vaak de norm. Voor ontwikkelaars die snel, flexibel en met de hulp van kunstmatige intelligentie willen bouwen, is er nu IDE-AI.
Ik kwam op het idee na meerdere IDE omgevingen uitgeprobeerd te hebben en kwam er achter dat er duidelijk een verdienmodel inzit, terwijl het ook anders kan.
Daarom heb ik dit ontworpen: volledig gratis, lichtgewicht en portable ontwikkelomgeving die direct in de webbrowser draait.
Het is geschikt voor beginners en gevorderden.

Met een slimme hybride architectuur omzeilt IDE-AI de strenge beveiligingsrestricties van moderne browsers, waardoor vloeiend lokaal ontwikkelen weer realiteit wordt.

Waarom IDE-AI?

De kracht van IDE-AI zit in de combinatie of onafhankelijkheid en AI-ondersteuning. Grote commerciële IDE’s vereisen vaak installaties, plug-ins en zware resources. IDE-AI is een single-file applicatie: één bestand dat je overal mee naartoe neemt op een USB-stick of direct op je server plaatst.

Het programma integreert naadloos met Google Gemini, beschikt over een real-time preview-venster met procesbeheersing (Stop-knop), een handmatige splitter om je werkscherm in te delen, en een intelligent contrast-systeem voor optimale ergonomie.

Installatie-instructies

De installatie van IDE-AI is binnen 10 seconden voltooid:

  1. Downloaden: Download de IDE op mijn website Fileposting.com door hierop te klikken.
  2. Uitpakken:
    • Zonder eigen lokale server: Unzip het bestand naar een map op je harddisk waar je je workspace hebt staan. Gebruik in dit geval ide-ai.html.
    • Met eigen lokale server: Unzip het bestand in de rootmap waar je je workspace hebt staan. Gebruik in dit geval ide-ai.php.
  3. Starten: Dubbelklik op het ide-ai.html bestand om lokaal te starten, of roep het ide-ai.php bestand aan via je localhost (http://localhost/rootmap/ide-ai.php).

Twee Krachtige Workflows: HTML vs. PHP

IDE-AI past zich automatisch aan op basis van de code die je laadt of de manier waarop je de omgeving opstart.

1. Front-end Modus (HTML, CSS & JavaScript)

Heb je geen eigen lokale server geïnstalleerd? Geen probleem.

  • De Stack: HTML5, CSS3 en JavaScript.
  • Hoe het werkt: Normaal gesproken blokkeren browsers het laden van lokale bestanden (file:///) in een preview-frame vanwege veiligheidsrestricties. IDE-AI lost dit op door de code rechtstreeks uit de editor te lezen en via een geavanceerde srcdoc-methode in de preview te injecteren.
  • Het voordeel: Je previews werken altijd, in elke browser (inclusief Firefox), direct vanaf je harde schijf zonder ingewikkelde netwerkinstellingen.

2. Full-Stack Modus (PHP & MySQL)

Draai je grotere, dynamische projecten met databasekoppelingen? Dan schakelt IDE-AI moeiteloos over naar server-modus.

  • De Stack: HTML, CSS, JavaScript, PHP en MySQL-databases.
  • Hoe het werkt: Zodra je een .php bestand laadt—of een HTML-bestand waarin het script de openings-tag <?php herkent—schakelt de IDE over naar de server-prefix (http://localhost/).

💡 Tip voor een eigen lokale server: EasyPHP Om lokaal met PHP i MySQL aan de slag te gaan zonder ingewikkelde serverconfiguraties, is EasyPHP Server een absolute aanrader. Het installeert in een handomdraai een complete Apache-webserver, PHP-omgeving en MySQL/phpMyAdmin-database op je Windows-systeem. Plaats IDE-AI simpelweg in de root of projectenmap van EasyPHP om direct dynamisch te testen.

Het Menu en de Functionaliteiten

De overzichtelijke menubalk aan de bovenzijde is ontworpen voor maximale efficiëntie:

  • 📄 Load File: Opent de Windows Verkenner om direct bestanden in te laden. (Werkt in Chrome/Edge via native file-pickers en heeft een universele FileReader-fallback voor Firefox).
  • 💾 Save: Slaat je wijzigingen direct op. In Firefox triggert dit een automatische download naar je projectmap om browserblokkades te omzeilen.
  • ▶️ Run Preview: Ververst de live preview aan de rechterkant direct.
  • ⏹️ Stop: Een cruciale knop. Mocht je per ongeluk een oneindige loop (while true) in je PHP- of JavaScript-code hebben geschreven, dan breekt deze knop de actieve frame-aanvraag direct af en voorkomt dat je browser vastloopt.
    • en – Knoppen: Hiermee pas je de achtergrondkleur van de editor handmatig aan. Het loopt van diepzwart tot spierwit met een ergonomische default op #d2d2d2 (lichtgrijs).
  • Slim contrast: De editor past de tekst- en regelkleuren én de hulplijnen (indentation guides) automatisch aan op basis van de gekozen achtergrondwaarde. Wordt de achtergrond erg donker? Dan verschijnt er een dikke, neon-groene terminal-cursor die altijd zichtbaar blijft.
  • ⚪ / 🔘 Wrap: Schakel hiermee de regelterugloop (word wrap) in of uit, zodat lange coderegels netjes binnen de randen van je scherm vallen.
  • In New Tab: Een extra optie indien je het resultaat van de preview in een volledig eigen, nieuw tabblad wilt bekijken.

Dynamische Layout & Gemini-Venster

De interface is standaard opgesplitst in een overzichtelijk tweekoloms-systeem: links de broncode (aangedreven door het professionele Ace Editor-framework) en rechts de live preview.

Flexibele Schermbreedte (Splitter)

Tussen de editor en de preview bevindt zich een interactieve, verticale balk. Door deze balk met de muis vast te pakken en te slepen, kun je de verhouding tussen de editor en het preview-venster live aanpassen. De editor schaalt real-time mee, zodat je altijd de optimale werkruimte hebt.

✨ Open Mijn Gemini

Zodra je op deze knop drukt, splitsbreekt IDE-AI je workflow op een ingenieuze manier:

  1. Het hoofdvenster verplaatst zich automatisch naar de linkerhelft van je monitor.
  2. Er opent zich een speciaal, geoptimaliseerd pop-upvenster met Google Gemini op de rechterhelft van je scherm.

Hierdoor ontstaat een ultieme split-screen opstelling waarbij je codeert, je preview bekijkt en direct met je AI-assistent overlegt zonder te hoeven alt-tabben.

Maximale Controle over je Layout: Windows Snap & Chrome Snap Layouts

Een van de grootste uitdagingen tijdens het webdevelopen is schermruimte. Je wilt je code een, je wilt de live preview testen, en je hebt je AI-assistent of een database-manager (zoals phpMyAdmin) nodig. IDE-AI is zo ontworpen dat de interface maximaal flexibel meeschaalt met de manier waarop jij je vensters organiseert.

Naast de interne splitter kun je de lay-out van je complete werkplek in een fractie van een seconde organiseren met twee krachtige tools:

1. De Turbo-methode: Windows-toets + Pijltoetsen (Windows Snap)

Windows heeft een fantastische ingebouwde functie om vensters razendsnel te organiseren zonder met je muis te hoeven hannesen. Door IDE-AI te selecteren en de volgende combinaties te gebruiken, transformeer je direct je werkruimte:

  • Win + Linkerpijl of Win + Rechterpijl: Snapt IDE-AI direct naar een perfecte, strakke helft van je beeldscherm. Windows toont daarna meteen je andere openstaande programma’s (zoals de Windows Verkenner van je Workspace of je EasyPHP-dashboard) zodat je die op de andere helft kunt plaatsen.
  • Win + Pijl-omhoog: Maximaliseert het venster direct naar volledig scherm voor wanneer je gefocust aan een lange lap code wilt werken.
  • Win + Pijl-omlaag: Herstelt het venster naar zijn oorspronkelijke grootte, of minimaliseert het bij een tweede klik naar de taakbalk.

💡 De ultieme Split-Screen Workflow: Gebruik je de ingebouwde Open Mijn Gemini knop? Dan verkleint IDE-AI zichzelf al automatisch naar de linkerhelft en zet Gemini rechts. Wil je juist een ander programma (zoals je browser of database) naast je code? Gebruik dan Win + Linkerpijl op je IDE-AI venster om direct handmatig de perfecte 50/50 indeling te forceren.

2. Visueel indelen via Google Chrome (Rechtsboven)

Als je IDE-AI in Google Chrome (of Microsoft Edge) draait op Windows 11, heb je nóg een geavanceerde visuele lay-out tool tot je beschikking zonder dat je sneltoetsen hoeft te onthouden.

  1. Beweeg je muis rechtsboven in Chrome en zweef (hover) over de maximaliseer-knop (het vierkantje tussen het minteken en het kruisje).
  2. Er klapt direct een visueel menu uit met verschillende Snap Layouts (venster-indelingen).
  3. Hier kun je kiezen uit diverse handige rasters:
    • 50/50 Split: Twee gelijke kolommen naast elkaar.
    • 60/40 Split (Asymmetrisch): Geeft Chrome (en dus je code) net iets meer ademruimte aan de linkerkant, terwijl je rechts een compacter venster overhoudt voor documentatie.
    • Drie kolommen: Perfect voor breedbeeldmonitors (21:9 of groter). Je zet IDE-AI in het midden, je verkenner links en Gemini rechts.
  4. Klik op het gewenste vakje in het raster en Chrome klikt zichzelf—samen met de andere programma’s die je kiest—volledig automatisch op de millimeter nauwkeurig op zijn plek.

Dankzij deze combinatie van de interne versleepbare splitter, de Windows-sneltoetsen en de Chrome-indelingen, past IDE-AI zich altijd vloeiend aan aan jouw ideale manier van werken.

Veilig Delen & Slimme Settings Opslag (XML)

IDE-AI maakt gebruik van een unieke, dubbellaagse opslagmethode voor je instellingen (zoals je voorkeursmappen, Gemini-link en achtergrondkleur).

  • De Gemini-Link: In het menu bevindt zich een invoerveld voor de AI-link. Standaard staat deze ingesteld op de universele en veilige route https://gemini.google.com/app. Als je al bent aangemeld bij Google, opent hij direct jouw persoonlijke chatomgeving. Ben je niet aangemeld, dan vraagt Google netjes om een Gmail-inlog. Je kunt hier ook je eigen specifieke chat-hash in plakken. Omdat dit veld losstaat van de code, kun je het bestand veilig delen met collega’s zonder je eigen sessie-ID bloot te geven.
  • Hybride XML & LocalStorage: Wanneer je de IDE lokaal als bestand gebruikt, onthoudt de browser je voorkeuren via localStorage (te vinden in de browser via F12 -> Application). Draait de IDE echter op een actieve lokale PHP-webserver, dan schrijft het ingebouwde PHP-script je voorkeuren direct weg naar een fysiek bestand genaamd settings.xml in dezelfde map. Bij een volgende start leest de IDE dit bestand direct uit. Dit garandeert een vloeibare, browser-onafhankelijke workflow over verschillende apparaten heen.