1. Knowledge Base
  2. Crowdbotics | Builder
  3. Developer Training Part 2: Creating Your First App

How and Where to Get Started

Learn how to begin building your project after creating it on Crowdbotics.

While Crowdbotics has many useful tools to help you build and manage your software, you may be wondering what the best way to actually jump in and get started is. In this article, we'll walk you through a simple but effective pattern for beginning to build your application. 

Our approach here is designed so that you can quickly make progress on your app by using our tools to empower you, going back to finalize and polish things later. 

Part 1: Create Models and Wire up your Backend

In general, if you're building an app that has any kind of backend component, we think it's best to start by building out that backend--or at least starting to. You don't necessarily need to finish building your backend to move on to the rest of your app, but it's a good idea to at least get a working skeleton of what you need before jumping into the other components of your app. 

Step 1: Outline your backend needs

Whether you're building an app for yourself or for a client, you'll want to understand exactly what you need before you start. We recommend outlining all of the backend models you'll need, including any relationships between them, before you begin actually creating these models. Once you have this outline, you're ready to get started!

Step 2: Assess if pre-existing code (modules) will work for you

One great thing about Crowdbotics is the repository of working, pre-built code you have access to. When you're working on your backend, our selection of backend modules will be particularly interesting to you. If you need to implement push-notifications or social-auth, check out our modules repo or install them into your app via the storyboard to access those features. And if your app needs to provide any kind of CRUD (Create Read Update Delete) functionality, you should also consider using the Articles module, which provides a backend capable of doing just that!

Install any of the relevant backend modules you need, and, once you deploy, your models will be updated in the model builder.

*If you do install any modules, be sure to read their individual README.md files. These files contain important configuration instructions for setting up your module properly.

Step 3: Add additional models with the model builder

If you need any additional models besides what you added with modules in step 2, you can add those using the model builder. Go here for more detailed instructions on using the model builder.

Step 4: Check (and run) migrations

After adding models, you'll need to make sure your app's migrations are configured properly. When you add models via the model builder or install modules, migrations are automatically generated for you, though you'll want to make sure these are configured properly. Also, if you are running locally, you'll want to use Github to pull the most recent app changes into your project, and then run your migrations. There are instructions here for running migrations in your project. The commands you'll need to run (if you are running docker) are: 

$ docker-compose exec web python3 manage.py makemigrations
$ docker-compose exec web python3 manage.py migrate

If you're not running docker, they'll look like:

$ python3 manage.py makemigrations
$ python3 manage.py migrate

Make sure your migrations run correctly locally! When you deploy your app next, the migrations should be run. 

If you run into any errors, check out this page on common migration errors and how to solve them.

After running your migrations locally and deploying, your migrations and models should be fully setup!

Step 5: Get familiar with the admin panel and API docs

Now that we've built our backend, let's get to know it a little bit by using the admin panel and taking a look at the API documentation. 

You can easily get to both the admin panel and the automatically generated API documentation from the settings panel of the Crowdbotics dashboard. On the right side, you should see links to both the admin panel and the API documentation. 

You'll also need to generate a superuser for your app. You can also do this on the settings page. For your local setup, you can run: 

$ docker-compose exec web python3 manage.py createsuperuser

or

$ python3 manage.py createsuperuser

if you aren't using Docker.

We recommend trying to use the admin panel to add and delete some of your newly added models. Then head over to the API documentation, and try curling or making a request to your newly created API!

Take a bow, you should have a more or less fully functional backend for your application now!

Part 2: Creating screens and your frontend

Now that your backend is set up, we can turn to visually laying out your frontend. To do this, we'll use the Storyboard page on the Crowdbotics Dashboard. As with the last step, our aim here is to create the backbone of our app's visual appearance and layout, even if we don't finish all of the screens at once. We'll also want to make use of modules and the Figma Import functionality along the way. 

Step 1: Outline the screens your app will need

As above, we'll want to create an outline of all the frontend components we'll need before we start using any of the Crowdbotics tools to flesh out our app's frontend. Your outline, whether it's something you've written yourself or been given by a PM, should tell you all of the different screens in your product, and the flows to get between them. 

Step 2: Assess if modules (pre-built code) will work for your use case

Depending on the types of screens and functionality you need in your app, some of Crowdbotics pre-built modules may help you save time. You can view the list of approved modules on the storyboard, under the "Modules" tab to the right. For example, if you ended up using the Articles Module for Django in the last section, you probably want to use the React Native Articles Module to quickly build out a frontend for your list of articles. Additionally, be sure to take a look at the login module and other useful modules at the Github repo.

 

One module we always recommend installing on the frontend is the app menu module. This simple module will install a basic navigation into your app that lists all available screens, including those installed by modules. It's a super simple way to get to visualize your frontend, and quick to install!

*If you do install any modules, be sure to read their individual README.md files. These files contain important configuration instructions for setting up your module properly.

Step 3: Import designs with Figma Import

Another way you can quickly scale your app's frontend is with our Figma Import feature. This feature allows you to import screens from a Figma file into fully fledged React Native code.

If you have screens you'd like to import, head over to your Storyboard. Then click on "Modules" and select the dropdown arrow. Click on "Import Designs" and then select the page/screen you'd like to import from the dropdowns.

Screen Shot 2021-06-28 at 12.56.03 PM

Screen Shot 2021-06-28 at 1.08.25 PMOn the right side of my Storyboard here, you can see the newly imported Details Screen. The other screens are modules I installed in Step 2.

If you've already installed the app-menu module, you should be able to access your screens directly from that menu within the app. In the example below, "DetailsScreen" is the screen I imported from Figma, while "login" and "SplashScreen" are modules I installed in step 2.

Screen Shot 2021-06-28 at 1.05.44 PM

Step 4: Assess what else your app needs

After you've installed modules and imported designs, you may or may not have enough of a frontend to move on. If you do have your whole frontend done, great! If not, you'll have some more work ahead of you. You may want to mock out some screens in Figma yourself, and then import these to show off a working demo app. Otherwise, you may need to get into React Native yourself and start building some new screens. The next step at this stage largely depends on the needs of your particular project. 

Step 5: Choose your app's entry point. 

By default, your app's initial entry point--the first screen that a user sees when they open the app--is set to be one of your installed modules. If you'd like to customize this, you can modify the code in your `modules/index.js` file. The value you want to change here is called initialRoute. In modules/index.js, it looks like this by default:

export const initialRoute = modules[0].title;

Instead of modules[0].title, you can change this value to the string name of a specific module or Figma screen you would like to set as the entry point of your app.

Part 3: Customization

At this point, you should have something like a working, if not fully functional frontend and backend. You've got a database, an admin panel, API documentation, plus a handful of screens and working modules--depending on what you've installed this far. That's a great start, all with barely any code you've had to write! But now, it's your turn. Depending on the application you're building, it's time to start writing any kind of custom features and business logic that you need. You may want to start with the backend, and finish what you've started there, or your may want to stick with the frontend, and flesh out whatever it is you need to finish from Part 2. In the next parts of this documentation, you'll find some more helpful ideas and features that can further support you as you build on Crowdbotics! For now, check out this article explaining the structure of a Crowdbotics project.