How to build an App for a Restaurant

How to build an App for a Restaurant




Text Enter





First Steps

Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu.

 

Just click on 'Apps'.

 

Then click on 'Create App' and give it a name.






Then you'll get to a screen where you choose the templates.

 

The library contains predesigned templates so that you don´t have to start from zero, even though, later on you could change everything.

 

In fact, you could change the template you choose now. And if you don't find one that fits, just click on 'Blank Template' to start designing your App from scratch.



This is how you select a blank template


The process of creating Apps with Scoreapps is very simple. You just have to follow the different steps that the builder offers you.


These steps are represented in the progress bar you´ll find at the top of the builder and easily allow you to go through all the different pages.






First step. Designing the App

From here you can chose another kind of template or edit the style of the layout (see below).






The Home Screen Options section shows the options available depending on the Liout style chosen. Keep in mind that each navigational or Layout style has its own configuration adjustments.

Layout election menu

For this app, we have chosen layout 95.

 

This layout design shows the content of the first feature, with the possibility of setting a header image. Here, it is particularly attractive to show the company logo. 

 

As you can see, the home screen of our app directly shows the categories we have set up in the store/delivery function. 




These are the settings for this particular layout.




- Visibility of logo: you can decide whether or not you want your logo to be displayed.

- Sidebar width: you can set the size of the drop-down menu. Either by the percentage of the screen or a fixed width showed in pixels.

- Logo URL: Here you should paste the link so the tool can upload images. You´ll find it on the left side of your screen.

The section you are going to see below helps you choose an image for the home screen that looks good on all devices and screen ratios. Use the overlay tool to check whether the important information on your design falls within the safe areas recommended on the screen design.




The section you are going to see below helps you choose an image for the home screen. An image that fully fits all devices and screen ratios.

 

Use the overlay tool to check if the design shows correctly.

 

Make sure that the elements you consider important are left within the guided area area 


Download the template with the optimal image sizes, available in both .png and .psd format.


Here´s a small 5-minute video that teaches you how to design the App Home screen::





Then choose your language region and also the currency you´ll be using with app.




To change the text fonts of your app you can select one from here or import a new font from Google Fonts.

 

To do so, it is as simple as writing the font name.









Second step. Colors





Choose the main colors of the app.
- General: applies to the substance (if there is no specific image) and the general text.
- Start: applies to the navigation menu and its elements.
- Header: applies to the navigation header of the app.
- Card: applies to items displayed in card format.
- List: applies to items displayed in list format.



In addition, if you already have web programming knowledge, at the bottom of the dashboard you can add CSS code and customize your app even more if you wish.






Third step. Features





Once the home screen is designed and we´ve chosen the main colors of the App, it´s time to add all the different features.

 

Your App will soon be completed.

 

If you started your App from a template, you would see that it already has some features added by default.

 

These are features that we consider are interesting for each industry. They appear as a kind of carousel and if you want to delete any of them, all you have to do is click on the X.






This is how simple it is to add new features to your App.



"Place Your Order" (Custom Page)


This feature allows you to create one or more stores, to sell all your products by categories, showing prices, sizes, product options, etc. and enables you to customize sales, delivery or shipping options.

You can also set up several payment options and also create discounts.







Our app example has two restaurants, one in Madrid, and the other one in Zaragoza.

These restaurants are geolocated, and their location will be displayed on the map (requires adding a Google Maps API key).




In the "Categories" section,  we´ve created the following:




This is what it looks like once all the products are added.





In this video we show you how to configure the entire "Shop/delivery" feature step by step. 



Click on this link and access the step-by-step article of the "Shop/delivery" feature 


Locations (Places)


Places allows you to show different points of interest that are geolocated on a map and are also displayed in list mode.

In addition, if the user clicks on one of the points of interest he could find detailed information about that place, images, videos, texts and of course the exact location.

For "Places" to work correctly, you need to set up a Google Maps API key from the "API Key section" of the left hand side menu.

After doing this, you can then configure the different restaurant locations.



In the following video we show you how to set up the "Places" feature.




Click on this link and you will access see a step-by-step article explaining the whole "Places" feature


"HAM! FRESHPOINTS" (Loyalty Card)




With the loyalty card feature, you can design powerful engagement systems by offering rewards to your clients after every purchase. 

To validate their points, the business owner needs to stamp their loyalty card each time the purchase.

The client must display it on the cell phone and the restaurant would then use password to validate their points.





This an example of what a virtual loyalty card looks like:



You can also add your own images to illustrate the points of the card with the buttons inactive point and “



For this app example we´ve chosen the following images:


Inactive point


Active point

It is also possible to create a password and a QR code for each employee.

To create a password, just click on the button.



By clicking on the QR logo, you can also download a QR code for the employees instead of using the password.

In this video we show you how to configure the Loyalty Card feature.



Click on this link and access a step-by-step article about the "Loyalty" feature


"Suggestions" (Form V2)


To create the Suggestions box section, we have used the Form V2 feature.

For this example we have included the following sequence of fields.




If you want to learn how to use this feature, watch the following video.



Click on this link and access a step-by-step article of the the "Form V2" feature


This step is very simple. To connect your Instagram account with the app, we simply use the "link" feature.

All you have to do is copy your Instagram url page link inside the field and your account will be automatically connected.




Share (Share App)

This feature allows your users to share the App by using a button.

You can set up the message and text of the button for a more personalized experience.



If you want to learn how to fully configure this feature, just watch the following video.




Push Messages

Push messages represent the most efficient marketing system today.

They have a 99% opening rate.

And adding this powerful tool to your App is very simple:

All you have to do is publish the app in a native Android or iOS version. 

Then, once the app is published on the App Store and/or Google Play, you can send messages to you users directly form this feature.

Click on this link and access a a step-by-step article of the function."Push messages"



Step 4. App icon and settings





If you want to send push messages, from here you can customize the icon or the background color for example.



This tool will help you choose an image that´s compatible with all the screen sizes of the different devices.

This image will appear on the screen when the app is loading.





Step 5. Advanced




If you wish, you can also monetize your app by adding ads inside.

To do this, you can easily use Admob.


Publishing your App

If you join a Starter, Business, Growth or Reseller programs you can publish your app in various ways:
  1. Native Android version.
  2. Native iOS version.
  3. Web App HTML5.
  4. PWA mode(Progressive Web App).


To publish a native version of your App you need to be a Business, Growth or Reseller plan member, but you can publish a Web App and PWA version of you app for free simply by joining a starter plan.


Promoting and launching your App

At this point you should already have a initial version of your App.

Remember that if you have any questions you can contact Helpdesk or write to the Support team (soporte@scoreapps.com) )


- Visibility of the logo: you can decide whether or not you want your logo to be displayed.

- Sidebar width: you can set the size of the drop-down menu. 

- Logo URL: Here you should paste the link so the tool can upload images.


You´ll find the logo it on the left hand side of your screen.



Just simply drag and drop the image you want to upload inside this box




The image size should not exceed 500KB.


    • Popular Articles

    • How to build an App for a Restaurant

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • Audio & Music

      To add this feature to your app go to the step "Features" and click on the icon "Audio": Then give a name to this new app section. Then click on the + icon to add a new Playlist Then place a title and image on the Playlist and click OK to save your ...

    • APPS: Contact

      This feature allows you to create a contact page for your business. Add important data such as Address, Phone Number and Email. To add this function to your application go to the "FEATURES" step and click on the "Contact" icon: Settings. Within ...

    • APPS: Custom page

      This functionality gives you several options for creating an information page. You can write an article with an image, you can publish a photo gallery, you can post a video directly on this page and you can add call buttons or a link to any external ...

    • Related Articles

    • How to build a Directory App

      Would like to see your own directory app published in the Appstore and Google Play? With Scoreapps you can build your App without any technical or programming knowledge and also save thousands of euros in development and infrastructure. Create all ...

    • How to build an App for Events

      The use of Mobile Apps has only grown over the last years. There will be about 4 billion mobile phone users worldwide by 2023, and near 1.8 billion cell phones are expected to be sold during that year alone. Users spend between 4 and 5 hours a day ...

    • How to create an App for Attendance

      What functions should be added in the App? - Lock - Form v2 It would be necessary to add theGoogle Maps APIso that the App can geolocate the User/Worker at the time of signing. - Lock This function should be configured as follows: - Form V2 It could ...

    • How to include a website within your App

      First of all, you should bear in mind that some websites have restrictions that prevent them from being embedded. These websites can only be opened in the browser outside the app. These are the options you have available if you want to include a ...

    • How to create ANY KIND of App

      With Scoreapps you can build almost any kind of App, without having to program a single line of code. But to make things even easier for you, here are a series of Step-by-Step Guides to help you build the most common kinds of apps: - App for an ...