[JAVA] CodePicnic that can create a [Development | Run | Tutorial | Demo] environment that runs on the browser

codepicnic01.png

demo

Suddenly, please click the URL below. A terminal will open in your browser and you can try the CLI tool ghs that searches the Github repository.

ghs - Trial page You can search the Github repository with ghs the repository you want to find`.

Overview

CodePicnic is a service that allows you to publish the environment created as described above on the Web.

The author can update and save the environment. The user basically cannot save the file, but when the file is created and re-accessed, the file remains. If you access it from another browser, the file does not remain, so it is probable that you are managing the session with cookies etc. and the environment is created for each session.

price

There is a limit of 20 hours a month, but you can use it for free. It also has a bargain price of $ 9.99 with no restrictions.

CodePicnic Price

Use Case

Since this terminal can be embedded in a web page, you can easily create a tutorial like the one below. I think it is also useful for creating a programming learning site. Try Prediction.IO

In addition to simply providing a console environment, it is possible to check the operation with a simple Web server and share one editor with multiple users for remote pair programming. CodePicnic Features

Correspondence environment

How to create an environment

  1. CodePicnic-Go to https://codepicnic.com/.

  2. Log in from Sign up and try us now !. codepicnic2.png

  3. Select the language of the environment you want to create from NEW CONSOLE on the left codepicnic3.png

  4. Create with Create codepicnic4.png

  5. Enter an appropriate name in New Name your console and create the environment where you want to open the Terminal tab below. When you're done, click the save icon in the upper right corner of the terminal. codepicnic5.png

  6. If you want to publish the terminal, change Change mode: at the bottom from Draft to Public codepicnic6.png

  7. Finally, get the public URL with the options icon-> Share in the upper right. codepicnic7.png

codepicnic8.png 8. Setting the UI of the terminal to be published By default, the sidebar and other icons are displayed, but you can hide them by adding `sidebar = close` or` hide = save` to the URL as shown below. https://codepicnic.com/consoles/ghs/embed?sidebar=closed&hide=save,show_result,download,options,run,second_terminal,readme

You can also display the README tab by creating README.md.

See below for details. Embed Documentation - CodePicnic

This is the end.

Similar tools

CodePicnic is a cloud service, but there is a tool called codetainer in OSS. It may be good for the purpose of using your own environment privately from the browser. Security is a concern when it comes to disclosure.

Summary

CodePicnic makes it easy to provide users with a trial environment for published tools. I hope that many tools will be provided with a trial environment by CodePicnic in the future.

Recommended Posts

CodePicnic that can create a [Development | Run | Tutorial | Demo] environment that runs on the browser
I tried to create a server environment that runs on Windows 10
Create a Python virtual development environment on Windows
Create a comfortable Python 3 (Anaconda) development environment on windows
Create a Python development environment on OS X Lion
Create a Python (pyenv / virtualenv) development environment on Mac (Homebrew)
Create a VS Code + Docker development environment on a Linux VM
Set up a browser automated test environment that can run Selenium + Pytest with Docker Compose
Create a Python environment on Mac (2017/4)
Create a Linux environment on Windows 10
Create a python environment on centos
The story of making a tool that runs on Mac and Windows at the game development site
Create a Python development environment locally at the fastest speed (for beginners)
The LXC Web Panel that can operate LXC with a browser was wonderful
Create a Python development environment on Windows (Visual Studio Code remote WSL).
[Development environment] How to create a data set close to the production DB
Create a python environment on your Mac
[Python] Create a LineBot that runs regularly
[pyqtgraph] Understand SignalProxy and create a crosshair that follows the cursor on the graph
How to run a Django application on a Docker container (development and production environment)
Build a Python development environment on your Mac
I made a demo that lets the model learned in the Tensorflow mnist tutorial distinguish the handwritten numbers written on the canvas.
[Venv] Create a python virtual environment on Ubuntu
Build a Kubernetes environment for development on Ubuntu
[Note] How to create a Ruby development environment
Set up a Python development environment on Marvericks
Create a Python execution environment on IBM i
[Note] How to create a Mac development environment
Build a Python development environment on Raspberry Pi
Create a GUI on the terminal using curses
[Django] Hit a command you made from within the process that runs on manage.py.
The Linux emulator "iSH" that runs on the iPad is a hot topic in me
Until you create a machine learning environment with Python on Windows 7 and run it
Build a GVim-based Python development environment on Windows 10 (3) GVim8.0 & Python3.6
Build a Django development environment using pyenv-virtualenv on Mac
[Environment construction] @anaconda that runs keras / tensorflow on GPU
Build a local development environment for Laravel6.X on Mac
Create a QR code for the URL on Linux
Notes on creating a python development environment on macOS Catalina
Create a python development environment with vagrant + ansible + fabric
Building a TensorFlow environment that uses GPU on Windows 10
Build a GVim-based Python development environment on Windows 10 (1) Installation
Build a Python development environment on Mac OS X
Build a Python development environment using pyenv on MacOS
Create a decent shell and python environment on Windows
Create a shape on the trajectory of an object
Create a bot that only returns the result of morphological analysis with MeCab on Discord
A story about PHP that was okay in the development environment but buggy in the production environment LEVEL 1-3 + 1