Interested in Alegria.academy's Nocode training program?
See the syllabus
Are you looking to recruit a work-study student?
Discover our students
Boost your IT agility with Nocode Open Source solutions
Download the ebook

Tuto: create an app for your BDE

Developing a mobile application is not for everyone". FALSE!

That was before. In Nocode, anyone can create a mobile application from an idea.

Here's how to create a free app in 10 steps without knowing how to code and how to put it online.

Recently, a member of our team created a smartphone order-taking app for a community café. ☕️ A fun idea made for free, in less than 24 hours and in Nocode thanks to Airtable / Google Sheets and Glide. 📲

💡 This app format could also be adapted to student association tool needs...

Here is a tutorial to create an order-taking application for a BDE that would like to offer self-service products to students at its school. 

💰 The idea is tofeed the BDE's budget through the sale of all kinds of products: merchandising with the school's logo (sweatshirt, cap, water bottle, etc.), sale of tickets for events (student parties, happy hours, ski week, integration weekend, etc.) or for a cafeteria stand in the school.

To raise a little money every day and have funds to prepare events or to party. 🥳

💡 The principle of the app is simple: via the app, everyone can help themselves to free access to the BDE shop. All orders are listed in an Airtable document, so that everyone can settle the bill later. In this example, we will consider that the products are drinks but you can customize the types of products/services as you wish!

No technical knowledge is required to follow the tutorial. Everyone is welcome. 👋

All the resources used to make this Nocode mobile app creation tutorial are available for free. 😇

Step 1: Create a database on Airtable

To get started, go to Airtable.

After creating an account, we will make a new database by clicking on " Add a base"on the home screen of the platform.

Add a base on Airtable

We will rename our database. Here we will call it " Caisse BDE - Alegria.academy"by clicking on the name of the database.

Rename your base on Airtable

Step 2: Create product categories

Six columns should then be created for the beverage categories. These will be used to present the offers available for sale.

  • A first one called " Product"which will contain the name of our different items (here drinks). 
  • A second one to include the price of each product. Don't forget to click on the little arrow to the right of the column box, and then click on " Customize field type".
Creating categories on Airtable
Creating categories

Then click on the tab " price"tab and add the Euro symbol.

Modifying a category on Airtable
  • A third column will contain the images of each product. 
  • And finally a fourth one, which should be called " Description"to explain the composition of the products. 
Airtable table

Step 3: Fill in the cells of the Airtable database

You can fill in the boxes as you wish. Here we have added 4 randomly chosen products that will be available for sale: soft drinks, beers, pens, a ready meal, the dessert of the day and a printing service.

It is of course possible to add products of one's choice, such as sportswear, goodies, tickets to events or parties etc.

To add new products to the list, once the application has been created, it will be sufficient to add a new entry in this data table.

Don't forget to add images by clicking on the corresponding box in the column and pressing " Drop file".

Adding images to an Airtable database

Once your database is complete, it should look like this.

Base filled on Airtable

Step 4: Create a second table on Airtable

We will create a second table on Airtable. Just click on " Add or Import"and then click on " Create empty table".

Creating a second table on Airtable

Once the table has been created, it must be named as follows: " The new commands".

In this table, three columns of text are required Name", " Address"and " Product ".

Rename the second Airtable table

Step 5: Create an account on Glide

Now you have to go to the Glide website to turn your database into a mobile application.

Step 6: Create the basis for the application

To create an application, go to the home page and click on " New Project 1".

Creating a new project on Glide

Next, we have to choose between mobile application and web page. Since we want to create a mobile application, we have to click on " Glide App"and fill in the field corresponding to the name of your application, here " Alegria.academy Caisse BDE".

Application type selection on Glide

Then click on " Airtable"to select the source of the data that will feed the app.

Data source selection on Glide

And choose your previously created Airtable database.

Selecting the Airtable base on Glide

Step 7: A first preview of your application is available

You can rename the main page of your application by clicking in the " Label ".

You can also choose the style of your application. Here we will keep the default one, namely " List". This means that your products will be arranged, as the name suggests, in a list.

Step 8: Create an order button on each product

To create an automatic e-mail to the BDE cashier's address, click on the small arrow to the right of a product.

Then press the ' + ' in the drop-down menu under the menu bar. And choose ' Form Button ' to bring up a new order taking button.

Then in the settings panel on the right of your screen, you can rename your button as you see fit. Then click on the drop-down panel " Action"and select " Add Row ".

A new window for customising the button appears.

In the field " Sheet"field, you must put the table " The new orders"

Then in the Address box, add " User's email address".

And finally in the product box " Product ".

There is no need to worry about the "Is Favorited?" field in this use case.

Step 9: Create an order button for other products

Once step 8 is complete, simply repeat it on each of the products to finish designing the application.

Step 10: Time to publish your application

Congratulations, you have completed the creation of your application.

To publish it on the media you are interested in, simply click on the " Publish"button and follow the steps suggested by the site.

Each new order will be recorded on Airtable in the " New orders ". All that remains to be done is to automate the sending of an alert email for each new order.

Bonus Step: Be automatically alerted by e-mail of each new order

If you would like to receive an e-mail alert for each new order, please go to Make.

Once logged in, on the home page of the site, click on " Scenario".

Then click on Create a new scenario".


On this new page, a bubble with a huge " + " appears.
You have to press it and look for the Airtable application.

Once Airtable is selected, click on "Watch Records".

In " connection ", you must choose " My Airtable connection "then select the database we are interested in, i.e. " Caisse BDE - Alegria.academy "and finally choose " The new orders "in the field " Table ".

In the settings pop-up, you must now fill in the boxes corresponding to the Trigger part.

In the Trigger field, put " Create Time ".

💡Attention: If Airtable does not automatically build a " Create Time"in your Airtable database, it is imperative that you add one.

Then " Name"in the label field.

Congratulations, you have set up half of the automation.

From now on, Make will perform an action each time a new row is added to the " The new commands "in your database.

Now it's time to add a Gmail event following this trigger on Airtable.

To do this, press the " +" at the bottom right of your screen.

Then select " Send an email" .

Finally, you need to add your email address in the " Connection " field.

Then fill in the ' Subject' and ' Content ' tabs as you see fit.

🙌 Well done, from now on your email address will receive a new message with each new order telling you the user's first name, email address and time.

💡 Going further: this application is not intended to be a professional app for a commercial establishment. However, it is possible to improve it on many points. Starting with the design part which can be modified according to taste. It is also possible toadd a Stripe payment module.

It is also possible to add a dynamic stock management system that allows you to block access to the order of certain products when they are no longer available.

Feel free to use the tool templates provided to create a custom application that meets your needs.

🔥 Resources: you can duplicate our Airtable database if you can't pass a step.

Qrcode to airtable

And here is the QR code to download the app or duplicate it. 📲

Cross Icon

Cross Icon

Cross Icon

Cross Icon

Cross Icon

Interested in Alegria.academy's Nocode training program?
See the syllabus
Boost your team with
a work-study student
Nocode & AI
Discover the profiles of tomorrow's experts
Transform
your ideas in project
Bring your projects to life quickly, switch to Nocode!
Become
Nocode expert
Alegria.academy, Europe's first Nocode school
Turn
your ideas into a project
Bring your projects to life quickly, switch to Nocode!
Join
‍‍
Our community
We let you work with the best professional Nocode Makers
on hard-to-reach missions
Contents :
Boost your IT agility with Nocode Open Source solutions
Download the ebook
Interested in Alegria.academy's Nocode training program?
See the syllabus

Tuto: create an app for your BDE

Published on
29/3/2022

Developing a mobile application is not for everyone". FALSE!

That was before. In Nocode, anyone can create a mobile application from an idea.

Here's how to create a free app in 10 steps without knowing how to code and how to put it online.

Recently, a member of our team created a smartphone order-taking app for a community café. ☕️ A fun idea made for free, in less than 24 hours and in Nocode thanks to Airtable / Google Sheets and Glide. 📲

💡 This app format could also be adapted to student association tool needs...

Here is a tutorial to create an order-taking application for a BDE that would like to offer self-service products to students at its school. 

💰 The idea is tofeed the BDE's budget through the sale of all kinds of products: merchandising with the school's logo (sweatshirt, cap, water bottle, etc.), sale of tickets for events (student parties, happy hours, ski week, integration weekend, etc.) or for a cafeteria stand in the school.

To raise a little money every day and have funds to prepare events or to party. 🥳

💡 The principle of the app is simple: via the app, everyone can help themselves to free access to the BDE shop. All orders are listed in an Airtable document, so that everyone can settle the bill later. In this example, we will consider that the products are drinks but you can customize the types of products/services as you wish!

No technical knowledge is required to follow the tutorial. Everyone is welcome. 👋

All the resources used to make this Nocode mobile app creation tutorial are available for free. 😇

Step 1: Create a database on Airtable

To get started, go to Airtable.

After creating an account, we will make a new database by clicking on " Add a base"on the home screen of the platform.

Add a base on Airtable

We will rename our database. Here we will call it " Caisse BDE - Alegria.academy"by clicking on the name of the database.

Rename your base on Airtable

Step 2: Create product categories

Six columns should then be created for the beverage categories. These will be used to present the offers available for sale.

  • A first one called " Product"which will contain the name of our different items (here drinks). 
  • A second one to include the price of each product. Don't forget to click on the little arrow to the right of the column box, and then click on " Customize field type".
Creating categories on Airtable
Creating categories

Then click on the tab " price"tab and add the Euro symbol.

Modifying a category on Airtable
  • A third column will contain the images of each product. 
  • And finally a fourth one, which should be called " Description"to explain the composition of the products. 
Airtable table

Step 3: Fill in the cells of the Airtable database

You can fill in the boxes as you wish. Here we have added 4 randomly chosen products that will be available for sale: soft drinks, beers, pens, a ready meal, the dessert of the day and a printing service.

It is of course possible to add products of one's choice, such as sportswear, goodies, tickets to events or parties etc.

To add new products to the list, once the application has been created, it will be sufficient to add a new entry in this data table.

Don't forget to add images by clicking on the corresponding box in the column and pressing " Drop file".

Adding images to an Airtable database

Once your database is complete, it should look like this.

Base filled on Airtable

Step 4: Create a second table on Airtable

We will create a second table on Airtable. Just click on " Add or Import"and then click on " Create empty table".

Creating a second table on Airtable

Once the table has been created, it must be named as follows: " The new commands".

In this table, three columns of text are required Name", " Address"and " Product ".

Rename the second Airtable table

Step 5: Create an account on Glide

Now you have to go to the Glide website to turn your database into a mobile application.

Step 6: Create the basis for the application

To create an application, go to the home page and click on " New Project 1".

Creating a new project on Glide

Next, we have to choose between mobile application and web page. Since we want to create a mobile application, we have to click on " Glide App"and fill in the field corresponding to the name of your application, here " Alegria.academy Caisse BDE".

Application type selection on Glide

Then click on " Airtable"to select the source of the data that will feed the app.

Data source selection on Glide

And choose your previously created Airtable database.

Selecting the Airtable base on Glide

Step 7: A first preview of your application is available

You can rename the main page of your application by clicking in the " Label ".

You can also choose the style of your application. Here we will keep the default one, namely " List". This means that your products will be arranged, as the name suggests, in a list.

Step 8: Create an order button on each product

To create an automatic e-mail to the BDE cashier's address, click on the small arrow to the right of a product.

Then press the ' + ' in the drop-down menu under the menu bar. And choose ' Form Button ' to bring up a new order taking button.

Then in the settings panel on the right of your screen, you can rename your button as you see fit. Then click on the drop-down panel " Action"and select " Add Row ".

A new window for customising the button appears.

In the field " Sheet"field, you must put the table " The new orders"

Then in the Address box, add " User's email address".

And finally in the product box " Product ".

There is no need to worry about the "Is Favorited?" field in this use case.

Step 9: Create an order button for other products

Once step 8 is complete, simply repeat it on each of the products to finish designing the application.

Step 10: Time to publish your application

Congratulations, you have completed the creation of your application.

To publish it on the media you are interested in, simply click on the " Publish"button and follow the steps suggested by the site.

Each new order will be recorded on Airtable in the " New orders ". All that remains to be done is to automate the sending of an alert email for each new order.

Bonus Step: Be automatically alerted by e-mail of each new order

If you would like to receive an e-mail alert for each new order, please go to Make.

Once logged in, on the home page of the site, click on " Scenario".

Then click on Create a new scenario".


On this new page, a bubble with a huge " + " appears.
You have to press it and look for the Airtable application.

Once Airtable is selected, click on "Watch Records".

In " connection ", you must choose " My Airtable connection "then select the database we are interested in, i.e. " Caisse BDE - Alegria.academy "and finally choose " The new orders "in the field " Table ".

In the settings pop-up, you must now fill in the boxes corresponding to the Trigger part.

In the Trigger field, put " Create Time ".

💡Attention: If Airtable does not automatically build a " Create Time"in your Airtable database, it is imperative that you add one.

Then " Name"in the label field.

Congratulations, you have set up half of the automation.

From now on, Make will perform an action each time a new row is added to the " The new commands "in your database.

Now it's time to add a Gmail event following this trigger on Airtable.

To do this, press the " +" at the bottom right of your screen.

Then select " Send an email" .

Finally, you need to add your email address in the " Connection " field.

Then fill in the ' Subject' and ' Content ' tabs as you see fit.

🙌 Well done, from now on your email address will receive a new message with each new order telling you the user's first name, email address and time.

💡 Going further: this application is not intended to be a professional app for a commercial establishment. However, it is possible to improve it on many points. Starting with the design part which can be modified according to taste. It is also possible toadd a Stripe payment module.

It is also possible to add a dynamic stock management system that allows you to block access to the order of certain products when they are no longer available.

Feel free to use the tool templates provided to create a custom application that meets your needs.

🔥 Resources: you can duplicate our Airtable database if you can't pass a step.

Qrcode to airtable

And here is the QR code to download the app or duplicate it. 📲

Cross Icon

Cross Icon

Cross Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cross Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cross Icon

Cross Icon

Transform
your ideas in project
Bring your projects to life quickly, switch to Nocode!
Become
Nocode expert
Alegria.academy, Europe's first Nocode school
Turn
your ideas into a project
Bring your projects to life quickly, switch to Nocode!
Join
‍‍
Our community
We let you work with the best professional Nocode Makers
on hard-to-reach missions
Would you like to carry out a digital project?
Working with us