Appitr Documentation

Appitr IDE 1.0.0 version documentation Updated date: 17.06.2020

Become a Patron! Appitr - Online IDE with wizard and Design to CODE for React Native. | Product Hunt Embed

Introduction

Appitr is an online tool that helps you create native iOS and Android projects using Javascript and React Native. Create a native mobile app with an online IDE within a few hours and build it online In a beautiful, simplest and easiest way.

Features

  1. Fast Start
  2. Custom Components
  3. Online IDE
  4. Easy Build
  5. Native Apps
  6. No Install Requirement

How does it work?

This tool uses "React Native for Web" to for run the React Native projects.

"React Native for Web" makes it possible to run React Native components and APIs on the web using React DOM. Check out the projects of the React Native examples running on the web.

click for documentation

Getting Started #back to top

We’ll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you’re coming from a different programming language. We’ll also assume that you’re familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.

Note that we’re also using some features from ES6 — a recent version of JavaScript. In this tutorial, we’re using arrow functions, classes, let, and const statements. You can use the Babel REPL to check what ES6 code compiles to.

Here are what I consider to be prerequisites.

  1. Basic familiarity with HTML & CSS.
  2. Basic knowledge of JavaScript and programming.
  3. Basic understanding of the DOM.
  4. Familiarity with ES6 syntax and features.
  5. React.
  6. React Native.
  7. Basic using of npm packages.

Console #back to top

You can see the list of projects you have in the Appitr console. You can create a new project and delete the projects you have created.

Go to Console

How to create a project? #back to top

When you click the plus button in the top box of the Appitr console, you can create a project by selecting the appropriate template from the window with the template options for your project. Your project will be automatically named by the system. Then you can enter title, description and keywords in your project.

Project Templates #back to top

The first template if you want to work in an empty application from three templates; the second template if you want to make an application that consists of the tab menu; if you want to work in an application with a left or right drawer, you can select the third template. Template examples can be viewed from the links below.

Cinque Terre Cinque Terre Cinque Terre

Privacy#back to top

If you don't want your project to be public, and you don't want it to appear outside appitr, you must change the privacy option to private before you create your project. After creating your project, you can change the privacy in the project settings section.

How to delete a project?#back to top

After you create your project, the project list will be updated automatically and your project will be added to the list with the name created by the system. You can delete the project from the trash can icon on the top of the project box.

Project Settings#back to top

You can enter the titles, descriptions, and keywords of your public project here. You can also change the privacy of your project.

How to create a file? #back to top

You can create a file by typing the folder name and file name that you want to create in the window that is opened by pressing the plus button next to the Files menu. You can also create files by selecting pages and components options. You can only create a javascript file through this panel.

How to add dependency? #back to top

After clicking the plus button next to the Dependency menu, you can add system-supported npm packages to your project from the pop-up window. Find examples of using packages on the discover page.

Custom components #back to top

You can search for components from the Components section and add hundreds of ready components to your project with one click.

How to preview a project? #back to top

You can preview your project by clicking the phone button on the menu. Logs will be reset in the log panel when you run the preview again.

How to see console logs? #back to top

You can see logs by clicking the exclamation button in the menu.

How to share the project? #back to top

After you open the privacy of your project, you can get the iframe share code with the share button that will appear on the top menu.

How to download project? #back to top

You can download your project by clicking the download button in the menu. The download will start automatically. You can start your project in your computer after run npm run setup This command will prepare your project to start.

Designer #back to top

Mockup designer allows to design mobile app page and get components code. This tool uses "YogaLayout" for design the React Native projects. YogaLayout

How to create mockup? #back to top

When you click the plus button in the top box of the Appitr console, you can create a new mockup by selecting the default or empty template. Your project will be automatically named by the system.

Changing phone viewports? #back to top

You can change layout viewport to click the main viewport on the component list. And go to 'Layout' in the side panel. In the panel first, properties will be deviceViewport and you can change the size of the layout.

Usable components #back to top

You can add to layout components to click to add component button. Available components is ActivityIndicator ImageBackground Image KeyboardAvoidingView Picker SafeAreaView ScrollView SectionList Switch TextInput Text TouchableHighlight TouchableOpacity TouchableWithoutFeedback View

We are planing to add other third-party component libraries to designer.

Component properties #back to top

You can find properties and CSS properties for the component in the side panel. features are grouped under four main headings. Properties Flex Alignment Layout

Get code #back to top

After the design you can get the "React Native" code of mockup to click the "Get Code" button. You can paste to code empty file in Appitr IDE.

Explore Projects #back to top

On the Explore page, you can see the source code that can filter out projects that are public on their keywords or dependency packages. Explore Projects

You can see the first "Featured" project and load all projects by scrolling.

How to download a public project? #back to top

You can download public projects by clicking the download button in the menu. The download will start automatically. You can start your project in your computer after run npm run setup This command will prepare your project to start.

How to fork public projects? #back to top

You can fork the public project to your account by clicking the fork button in the menu. The fork will start automatically. You can find the forked project with a new random name on your console.