<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="/img/fav.png">
<!-- Author Meta -->
<meta name="author" content="vitor viana">
<!-- Meta Description -->
<meta name="description" content="vf-os portal">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>vf-OS Developer Portal | vf-OAK Studio</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="/css/linearicons.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<link rel="stylesheet" href="/css/nice-select.css">
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header id="header" id="home">
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="/"><img src="/img/vf-OS_logo_v2.png" style="width: 115px;" alt="vf-OS Logo" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="/">Home</a></li>
<li><a href="/showcases-for-industry/">Showcases for Industry</a></li>
<li><a href="/components-for-industry/">Open Source Components for industry</a></li>
</ul>
</nav><!-- #nav-menu-container -->
</div>
</div>
</header><!-- #header -->
<!-- start banner Area -->
<section class="banner-area relative" id="home">
<div class="overlay overlay-bg"></div>
<div class="container">
<div class="row d-flex align-items-center justify-content-center">
<div class="about-content col-lg-12">
<h1 class="text-white">
vf-OAK Studio
</h1>
<p class="text-white link-nav"><a href="/components-for-industry/application-development/oak-toolkit/">OAK Toolkit</a><span class="lnr lnr-arrow-right"></span><a href="/components-for-industry/application-development/oak-toolkit/oak-studio">vf-OAK Studio</a></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="https://vfos-docs.ascora.eu/#oak-studio" class="genric-btn primary-border circle arrow">Technical Manual<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="https://opensourceprojects.eu/p/vfos/oak/studio/code/ref/master~/" class="genric-btn primary-border circle arrow">Source Code<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
<div class="col-lg-4 col-sm-12 text-center mb-3">
<div class="container">
<a target="_blank" href="http://158.42.105.151/mediawiki/index.php/SDK_%26_Studio" class="genric-btn primary-border circle arrow">Get Help<span class="lnr lnr-arrow-right font-weight-bold"></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- End banner Area -->
<!-- Section highlight topics-->
<section class=" relative">
<div class="container">
<div class="row">
<div class="col-lg-12 align-items-center">
<div class="row no-gutters" style="margin-top: 25px;">
<div class="single-services col">
<span class="lnr lnr-cog" style="font-size:40px; color:#988fff;margin-top: 30px;">
</span>
<h4>Use standardised components</h4>
<p>
Easy use of features and methods provided by vf-OS.
</p>
</div>
<div class="single-services col" style="margin-left: 10px;">
<span class="lnr lnr-layers" style="font-size:40px; color:#988fff;margin-top: 30px;"></span>
<h4>GUI</h4>
<p>
Provides an easy and user-friendly GUI for developers to build and adjust their vf-OS
Assets.
</p>
</div>
</div>
<div class="row no-gutters">
<div class="single-services col">
<span class="lnr lnr-bug" style="font-size:40px; color:#988fff;margin-top: 30px;"></span>
<h4>Test Environment</h4>
<p>
Allows working in a controlled local test environment to enable fast development cycles.
</p>
</div>
<div class="single-services col" style="margin-left: 10px;">
<span class="lnr lnr-link" style="font-size:40px; color:#988fff;margin-top: 30px; "></span>
<h4>Distribution</h4>
<p>
Enables a quick and controlled workflow through the Marketplace to publish vf-OS Assets.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of section highlight topics-->
<!-- Start service Area -->
<section class="service-area" style="padding-bottom: 10px;" id="service">
<div class="container">
<div class="section-top-border">
<div class="row">
<div class="col-md-7 mt-sm-20 left-align-p">
<h2>vf-OAK Studio</h2>
<br>
<p>The vf-OAK Studio, called Studio hereafter, is a holistic GUI supporting vApp developers to easily implement applications by integrating and orchestrating services, APIs, and connectors.
Furthermore, the Studio provides an interface to deploy outcomes to the vf-OS Marketplace.</p>
<p>The Studio is a vf-OS specific IDE that can be used by developers. It accompanies them through the entire vf-OS Asset
development lifecycle and it can be split into the following multiple states</p>
<ul class="fa-ul">
<li><i class="fa-li fa fa-square"></i>Development</span> </li>
<li><i class="fa-li fa fa-square"></i>Packaging and Local Debugging</span></li>
<li><i class="fa-li fa fa-square"></i>Upload to Marketplace</span></li>
</ul>
<div style="margin-top:20px;">
<h4 style="margin-bottom:10px;">Development</h4>
<p>
During the development lifecycle of a vf-OS Asset, the developer has the Process Designer component at its disposal with which
the developer can interactively define the vf-OS Asset processes in order to specify inputs, outputs, etc. The developer can also use the vf-OS Frontend Environment, where several templates are available that can increase the speed of the development of vf-OS Assets.
</p>
</div>
<div style="margin-top:20px;">
<h4 style="margin-bottom:10px;">Packaging and Local Debugging</h4>
<p>
The developer has the option to run vf-OS Assets locally inside the Studio in the context of the vf-OS Platform. To make this possible, the application is packed locally and thus converted into an executable debuggable version.
</p>
</div>
<div style="margin-top:20px;">
<h4 style="margin-bottom:10px;"> Upload to Marketplace </h4>
<p>
Once the vf-OS Asset is ready to be sent to the Marketplace, the Studio uses the previously created vf-OS Asset package and creates a Docker file with this package. This Docker file is then sent to the Marketplace to make it available for customers to be consumed in their vf-OS Platforms.
</p>
</div>
</div>
<div class="col-md-5">
<img src="img/oak-studio-gui.png" alt="" class="img-fluid" style="margin-top: 33%;">
</div>
</div>
</div>
</div>
</section>
<!-- End service Area -->
<!-- Video section here -->
<!-- <section class="section-gap-small relative" style="background: #f9f9ff;">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="row no-gutters">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/P7C1Yw4euz8?rel=0"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- End video section -->
<!-- Video Placeholder section here -->
<!-- <section class="section-gap-small relative" style="background: #f9f9ff;">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<img src="/img/video.png" class="img-fluid">
</div>
</div>
</div>
</section> -->
<!-- End video Placeholder section -->
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>About vf-OS</h6>
<p>
vf-OS offers a manufacturing orientated cloud platform, supporting a multi-sided market
ecosystem that provides a range of services for the connected factory of the future,
allowing manufacturing companies to develop and integrate better manufacturing and
logistics processes
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>Navigation Links</h6>
<div class="row">
<div class="col">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/components-for-industry/environment/">Environment</a></li>
<li><a href="/components-for-industry/application-development/">Application Development</a></li>
<li><a href="/components-for-industry/application-services-and-middleware/">Application
Service & Middleware</a></li>
<li><a href="/components-for-industry/application-deployment/">Application Deployment</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="http://www.vf-os.eu/technologies">Technologies</a></li>
<li><a href="http://www.vf-os.eu/partners">Partners</a></li>
<li><a href="http://www.vf-os.eu/blog">Blog</a></li>
<li><a href="http://www.vf-os.eu/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<div class="col-lg-8 col-sm-12 footer-text m-0">
<img src="/img/europe.png">
<p>This project has received funding from the European Union���s Horizon 2020 research and innovation programme
under grant
agreement No 723710.</p>
</div>
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="https://www.facebook.com/vfoseuropeanproject/"><i class="fa fa-facebook"></i></a>
<a href="http://www.vf-os.eu"><i class="fa fa-globe"></i></a>
<a href="https://www.youtube.com/channel/UCN-5AXqIaXjXItq8jJuoW1w"><i class="fa fa-youtube-play"></i></a>
<a href="https://www.linkedin.com/in/vf-os-project/"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
<script src="/js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="/js/easing.min.js"></script>
<script src="/js/hoverIntent.js"></script>
<script src="/js/superfish.min.js"></script>
<script src="/js/mn-accordion.js"></script>
<script src="/js/jquery.ajaxchimp.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/jquery.circlechart.js"></script>
<script src="/js/mail-script.js"></script>
<script src="/js/main.js"></script>
</body>
</html>