Getting Started: Creating a todo app with CraneAi using React in under 10 minutes.

This is an adaptation of my Building Apps using Artificial Intelligence series.

This tutorial will use React and demonstrate how to create mobile apps using CraneAi.

It should take you under 10 minutes to see a demo of the final result:

Simple task app created using CraneAi

CraneAi:

CraneAi is a powerful tool to help teams create better, working software faster with the assistance of artificial intelligence. Developed by the CraneAi team it uses a.i. to help teams code, manage, document, debug and ship mobile apps, at a fraction of the time and cost. Developers still write code and contribute in the tools they love, designers still use the tools they are accustom too — fusing it altogether in a more collaborative.

React:

React is one of the most popular front end Javascript frameworks, developed by facebook and used by countless tech companies including Netflix, Airbnb and Github to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its component based architecture.

🏗️ Setup

After signing up, log in to your CraneAi account and click create a new project. A dialog will appear asking for a project name. You can name your project whatever you want, for this tutorial we’ll call our project task app.

Now that we have our new project it’s time to import some ideas. You can upload images of wireframes (png/jpg) or sync from Sketch directly using our plugin transforming your ideas into essential documentation, code, tasks and more. If you don’t have a tasks screen you can download this one.

The same ai-powered technology that self driving cars use to see street signs, roadways and pedestrians — CraneAi uses to see UI elements and design patterns in your uploaded files.

CraneAi is easy to use. Once you’ve uploaded your wireframes successfully, CraneAi will analyze the views extracting colors, fonts, ui elements and text. The result of the analysis populates your project with requirements, tasks, code, documentation and design system assets — the things needed to guide you to complete your project successfully.

(When uploading screens always keep in mind that if it’s hard for humans to make out or understand it will also be hard for the a.i. to understand as well.)

Once your uploaded screen is processed CraneAi will ask you certain questions about what it detects in your view. These questions will simply require you to confirm what is detected. Your responses to these questions trigger activity in your project. Common questions include:

• Data model suggestions
  For example, if CraneAi see’s you are creating an app that requires authentication it will suggest adding a user data model, resulting in documentation, modeling and even code such as APIs.
• Design component confirmations
  If there is a bit of confusion with the design element, CraneAi will crop it out and ask you questions to confirm what the element is supposed to do.
• Cloud/Deployment
  At key milestones you will be asked to deploy your code to our cloud or yours. CraneAi handles setup, provisioning, CI/CD and deployment making your job easier.

The ai-assistant asks questions to confirm it’s findings

Sync’d with github

With your new project a fresh git repo is created. Code, commits, issues/bugs and deployments are synchronized with your project.

After the processing is completed you will see your uploaded screen in the storyboard view. The name of the view will automatically be determined based on the a.i.’s detections. As you can see in the image below the a.i. determined that the view is a tasks view.

We recommend following standard design patterns to get the most value out of CraneAi. The name of the view isn’t solely dependent on text in the view or the placement of the text, it’s based on the total detected elements in the uploaded screen. Avoid using anti-pattern design techniques that go against the Apple Human Interface Guidelines or Material Design Guidelines.

By selecting the view you can explore the details panel which include controls to fine tune your view enabling you to adjust properties. You can rename your view, adjust the agile project management settings, view docs, change scope and more. In most cases the a.i. is just smart and will set these things correctly.

The a.i. that powers CraneAi has seen tens of millions of lines of codes, millions of projects and thousands of git repositories. This knowledge gives CraneAi the ability to assist by making recommendations, saving your team time and helping your team make the best decisions on how to complete your product.

CraneAi makes it easier for you to create apps, seriously.

View inspector

With every new screen added to the project, CraneAi analyzes elements of the screen feeding what it finds into a knowledge graph (we like to call it our Brane). The result is the creation of requirements and detailed tasks giving us a clear understanding of what needs to be done to successfully complete this project. In this tutorial it’s detecting navigation bars, navigation titles, labels, icons, inputs and buttons.

Each of the tasks created by the artificial intelligence system are then scheduled by estimating the time it should take to complete based on data from historic projects. CraneAi is always learning, making the estimations very accurate. Tasks are assigned to team members based on their skill set and availability using artificial intelligence.

Tasks include everything necessary to complete the project including things such as standard administrative tasks, project configurations, creating tests, essential code and connecting APIs.

One of the key members on your team is CraneAi itself. CraneAi helps manage progress and in many cases can even complete tasks — such as writing code.

You can complete tasks to finish the project, CraneAi completes tasks as well. Some of the tasks are created initially when you upload screens. As the project development continues over time, more tasks are created.

If CraneAi detects bugs or issues in your code, it will create tasks to fix the bugs and assign them accordingly.

CraneAi sees beyond the view elements and can identify component patterns, data models, network activity and more. This produces real requirements that creates real code reflecting state changes, network connections, error handling, security provisions, configurations, data bindings, API flow and more.

Now that we’ve processed our screen, let’s launch the project to see our progress.

First clone the project, install the dependencies and start it. These instructions can be found in the documentation panel of your project on CraneAi. As changes are made to the project, new ideas are introduced constantly keeping your project documentation fresh.

New Project Documentation

$ git clone
$ npm i
$ npm start

For this project we’ve set our output to React. Users can set their desired output language resulting in code analysis, debugging and code generation in that language. Exploring one of the files in the project you can see how CraneAi translates the uploaded view in this tutorial to the view code below.

The components are created based on these detections, pulling in the styles from the design system generated based on the detections in the view.

import {    Row, 
            Col , 
            Navbar, 
            NavItem, 
            NavbarBrand, 
            Input, 
            InputGroup, 
            InputGroupText, 
            Button 
        } from 'reactstrap';

Buttons in the view are mapped to events that bubble to actions triggering data events / network events. This follows standard React/Redux patterns.

import {    getTasks, 
            addTask, 
            removeTask 
        }  from '../actions/tasksActions.js';

The style classes are generated automatically based on the component and visual appearance of the detected elements (colors, alignment and size). The styles are tied to the design system so there is always a single source of truth.

<Button 
    className="btn button-light-sky-blue-blue" 
    onClick={() => this.add_task()} >
    Add Task
</Button>

You can always make changes to the code with the tools you use everyday; Git, VScode, Sublime, Sketch and more. CraneAi will update the project with these changes, debug and synchronize across your workflow.

Good job, you successfully created your first app using CraneAi! 🎉

To learn more about CraneAi, meet the team or scheduling a demo please reach out team@crane.ai