School App

This is a step by step guide to creating a school app.

Features included in the app:

  1. News Feed
  2. Class Channels
  3. Map Tracking
  4. Class Schedule
  5. Event List
  6. Built-in Messenger
  7. Online Recorded Lectures
  8. Google Ads

Module Installation

1.) In order to install a module, click on one of the module categories, placed on the right, you can choose from 30+ modules that serve different functions.

modulesmodules

2.) Drag one of the modules and drop it into your Home Menu's setup area.

searchmodulesearchmodule

3.) That's it! Your module is now installed.

News Feed

Where updates about school matters could be posted including announcements and events.

Installation

You can install this module in your app in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✕

You can find the posts module in the social category.

Drag and drop the module into your home to install it.

postsandfeedpostsandfeed

Duplicability

This module can only be installed in your home menu.

Click here to check out the features of the feed module.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.

iconicon

2.) Click on the gear icon to configure the settings of the module.

gearicongearicon

3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.

Note that you have to install Google AdMob Module first.

Don't forget to click save once you are done.

enableadsenableads

Don't forget to click save.

4.) You can also choose the layout of the posts to be either wide or on the left side as shown.

layoutlayout

5.) To configure the features, click on features.

featuresfeatures

User Selectable Features

  • Talk to Admin

    For app users to chat directly with the admin, this feature allows your users to share their thoughts and give you instant feedback on your posts.

    talktoadmintalktoadmin

  • Sticky Note

    Add promo points to your posts for users to collect and redeem, it is displayed as a small bubble that is attached to the bottom right side of the post.

stickynotestickynote
  • You can also choose the background and text color.

stickysticky

  • Post Footer

    Scroll at the very end of the features, you'll find a post footer which gives your posts the look and feel of a Facebook page, you can choose to add the like button, the reply button, the number of views, and the share button. You can also customize the heart color with the like button.

footerfooter

  • Post Filter

    To allow specific users (tags) to see your posts. This feature can be used to target a specific segment of your users.

filterfilter

Click here to know how to create a new tag.

  • Context Menu

Displays a set of actions to be done to the selected content.

contextmenucontextmenu Scroll down to the bottom of the list.

contextmenucontextmenu

There is one action (delete) that is shown by default and eight actions that are user-selectable which are:

  • Edit

  • Copy

  • Forward

  • Share

  • Save to Gallery

  • Report Abuse

  • Save to Music

  • Save to Downloads

    Click on the toggle to activate or deactivate the action.

toggletoggle

You can also change the order of the actions, click and hold the move icon and drag up and down to move the action.

rearrangerearrange

You can also disable the feature altogether.

disablefeaturedisablefeature

Don't forget to save after you are done with the configuration.

saveprogresssaveprogress

Must-Have Modules

It's better to add these modules to your App's Side Menu (step 3)

  • Active Channels: It shows the user a list of the recently-posting channels they have joined on your app.
  • User Channels: It shows the users a list of all channels they have joined on your app.

Complementary Modules

  • Channel List: It shows a list of all your app's channels for users to join.
  • Calendar: It enables creating timetables/schedules and publishing them attached to posts.
  • Polls: It enables creating polls and attaching them to posts.

Similar Apps

FacebookLinkedInTwitterInstagram
facebookfacebooklinkedinlinkedintwittertwitterinstagraminstagram

Module Walkthrough

Activating the Posts Module

1.) From the side menu click posts.

2.) Click this icon to create a new post.

newpostnewpost

3.) You have the option to post a text message and change the background color just like Facebook, just choose the color you want and enter the content of your post.

changebackgroundchangebackground

And your post will look like this after editing.

schoolpostschoolpost

4.) You can also post a photo, video, gif, audio, or file.

audiogifaudiogif

5.) You can also publish an instant article, have the nandbox app builder fetch a URL and publish its content, or even publish a calendar that includes a list of events, you can easily do that through these buttons respectively.

6.) You can also attach a poll, (note that you have to create a poll before you are able to attach it to a post).

pollpoll

7.) You can also send this post to multiple destinations, click on the plus icon and choose where you want to send your post.

sendtosendto

8.) Once you selected another destination, it will appear here.

adddestinationadddestination

9.) You can also deliver the notifications quietly.

quietquiet

10.) Once you are ready to send your post, click send!

Create a Scheduled Post

1.) From the side menu, click on scheduled post.

scheduleschedule

2.) Click the icon below to create a new scheduled post.

newschedulenewschedule

3.) Click on the schedule icon at the bottom of the screen.

schedulepostschedulepost

4.) Select the date and time, and click schedule post.

5.) Click send to schedule post.

schedulepostsscheduleposts

6.) Your post is now scheduled!

donedone

Create New Tags

You can label your users by creating tags for them, you can have a tag for each section of the school i.e. students, teachers, and parents.

When you publish a post, you can choose to target a specific tag so that the message is delivered only to the tag specified, for example, you can send a post that there will be a staff meeting at noon to the tag 'Teachers' and only the teachers would be able to see it.

1.) From the side menu, click tags.

tagtag

2.) Click create.

createtagcreatetag

3.) Enter the tag name and description, choose whether you want it to be a private tag or not, and then click save.

tagdetailstagdetails

4.) Then you can add users to this tag, and from the side menu, click users.

usersusers

5.) Choose a user and click edit.

edituseredituser

6.) Click add a tag.

addtagaddtag

7.) Select the tag name and click add.

selecttagselecttag

8.) Then save.

savetagsavetag

9.) Now you can send a post to a specific tag.

choosetagchoosetag

10.) Select the tag and click add.

  • You can also insert emojis in your post.

emojiemoji

Finally, when you are ready to publish your post, click send.

Class Channels

You can create a channel for each class in the school and include all the students and teachers in each class, channels will enable you to publish content for users to view and interact with.

classchannelclasschannel

There are three modules included:

1.) Channel List: Displays the list of all channels that are available on the app.

2.) User Channels: Show the channels that the user is subscribed to.

3.) Active Channels: Show the channels that the user is active on.

These modules are the best to use if you want to build a Community App.

Installation

You can install these modules in your app in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✓

You can find the channel modules in the social category.

Drag and drop the modules into your home or side menu to install them.

channelmoduleschannelmodules

Duplicability

This module can be duplicated in several sections in your app ✓

Click here to check out the features of the channel module.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.

changeiconchangeicon

2.) Click on the gear icon to configure the settings of the module.

gearicongearicon

3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.

Note that you have to install Google AdMob Module first.

Don't forget to click save once you are done.

googleadsgoogleads

4.) To configure the features, click on features.

featuresfeatures

Module Walkthrough

Create a New Channel

1.) From the side menu, click channels.

channelschannels

2.) To create a new channel, click create.

newchannelnewchannel

3.) A window will appear where you can enter your channel name and description.

channeldetailschanneldetails

4.) After you created the channel, you can hover over it and click on the edit button to configure it.

editchanneleditchannel

5.) You can edit the channel image, name, and description in the first section.

editchanneleditchannel

Splash Screen

You can also add a splash screen to your channel, which includes an image, title, and description, you can also change the button text and colors associated with it.

A splash screen is an introductory graphical screen that shows an explanatory message when you first install an app, it can also be displayed when a user first enters a group or a channel.

Which will look something like this:

splashexamplesplashexample

Click setup to configure the splash screen.

Users can also join a channel by scanning the QR for your group.

qrcodeqrcode

You can also assign admins to a specific channel.

adminsadmins

Invite your users to join the group through Twitter, Facebook, or by sending them a link to join.

inviteinvite

Don't forget to save, after you finish the configuration.

savechannel2savechannel2

You can also set a welcome message to your users when they join the channel, click on "set message" and set it up.

setmessagesetmessage

Edit the message and click save.

setwelcomesetwelcome

Map Tracking

Enables the parents to track their children's school bus route.

imgimg

Stay tuned, the feature is currently being finalized!

Class Schedule

List the daily lesson schedule for all the parents and students to view.

imgimg

Creating a New Calendar

Note that any event created in the calendar will be repeated every week.

1.) From the admin menu, click on 'Calendars'.

calendarcalendar

2.) Click create to create a new calendar.

createcalendarcreatecalendar

3.) Edit the details of the calendar event, for example, this could be the details of an upcoming event.

classcalendarclasscalendar

4.) You will be prompted with the following screen.

Screen

Here you can set the holidays.

Open the calendar and select the day.

holiday

Next, you can set the schedule for each day of the week.

So for example here we have 3 classes on Sunday as follows:

  • Math class from 9 am to 10 am.

  • English class from 10 am to 11 am.

  • Science class from 11 am to 12 am.

classscheduleclassschedule

Click the plus icon to add another event on the day.

moreclassesmoreclasses

Event List

To announce school events, school trips, and exams. Note that the event created will be a one-time event.

Introduction

The event list module displays the list of events that the user accepted the invitation to.

Installation

You can install this module in your App in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✓

You can find the event list modules in the Booking & Events category.

bookingsbookings

Drag and drop the module into your home or side menu to install it.

eventslisteventslist

Duplicability

This module can be duplicated in several sections in your app. ✓

Main Features

1.) Sync with System Calendar

A feature that allows the app to access the device's calendar and sync with it so that it displays the events on the corresponding dates.

synceventssyncevents

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.

iconsicons

2.) Click on the gear icon to configure the settings of the module.

geargear

3.) This displays the feature where the events list syncs with the system calendar.

featuresfeatures

The list of events will be displayed as follows once you accept the invitations.

eventlisteventlist

Module Walkthrough

Creating a New Event

1.) From the side menu, click events.

2.) Click on create to create a new event.

3.) Enter the details of the event as follows:

  • The event name.
  • Whether the event is going to be an all-day event or not.
  • Set the start time and the end time of the event.
  • Select the time zone.
  • Select the event location. (Once you type in the location, Google Maps will automatically detect it)
  • Enter the description of the event.

drawingdrawing

You can also assign a filter so that the event can come up in the search results under the filter that you select. You need to set up a search filter first.

searchfiltersearchfilter

So if you select "entertainment", this event will come up when the user searches for sports events on your app.

When you are done, click next.

nextnext

Next, add the event image.

imageimage

Once you're done, click finish.

finishfinish

Editing an Event

After you created the event hover over it.

The first icon will allow you to edit the event details.

editedit

The second icon will let you set up the pricing of the event.

paymentspayments

The third icon will delete the event.

deletedelete

The QR code displayed will allow users to access the event once scanned.

Click edit and scroll down to the bottom of the page, you will have the option to assign admins to this event, you can also share the event via Facebook, Twitter, or share the invitation link of the event.

othersothers

For your users to view events and calendars, you have to install the module 'Events List'.

Publishing an Event

After you're done with creating the event, you can publish it by copying the invite link and publishing it in the feed module, a chat group, or a channel.

othersothers

Setting the Price of the Event

Click on the second icon.

paymentspayments

Enter the price and the currency that you want, then click Save.

priceprice

Built-in Messenger

The text and media messenger module allows your users to text and share multimedia files with each other, who also use your app. It shows the users a list of their recent one-to-one chats as well as the group chats made on your App.

Installation

You can install this module in your app in the following places:

  • App's Home Menu ✓
  • App's Side Menu ✓

You can find the Messenger module in the Communications category.

communicationcommunication

Drag and drop the module into your home or side menu to install it.

messengermessenger

Duplicability

This module can be duplicated in several sections in your app ✓

Click here to check out the features of the messenger module.

Configuration

1.) Once you installed the module, by dragging and dropping it in the home or side menu, you can rename the module and choose an Android and an iOS icon for it.

iconicon

2.) Click on the gear icon to configure the settings of the module.

geargear

3.) From the settings, you have the option to include ads in your app, using Google AdMob Module.

Note that you have to install Google AdMob Module first.

Don't forget to click save once you are done.

enableadsenableads

Don't forget to click save.

4.) You can check the features by clicking features.

featuresfeatures

Module Walkthrough

The module will be installed by dragging and dropping it in the home menu or the side menu.

Online Recorded Lectures

You can upload the recorded lectures on YouTube and display the playlist on the app for your students to view.

From the home menu, click on Pages from the categories section.

Scroll down until you reach YouTube Playlist.

Install it with the same drag-and-drop approach.

Next, enter the playlist, and the app builder will automatically generate the playlist.

Google Ads

This section will enable you to activate Google Ad Mob in your app.

1.) Firstly, create a Google Ad Mob account.

2.) From the navigation menu, click on apps.

3.) Click on add your first app.

addappaddapp

4.) Select the platform of your app.

platformplatform

5.) If your app is published on Google Play Store or App Store, select yes, if not, select no.

applistedapplisted

6.) Next, enter the app name and click add app.

appnameappname

7.) Click on create ad unit to start creating ads.

adunitadunit

8.) Next, select the ad type, currently, nandbox app builder supports the banner and the native advanced format.

adtypeadtype

The banner type will look like this:

googleleadgooglelead The native advanced type will look like this: googlelead2googlelead2

9.) Click on the banner type, enter the ad name and click create ad unit.

createadunitcreateadunit

You will be prompted with two keys.

keyskeys

10.) Open nandbox app builder.

11.) Go to App settings.

appsettingsappsettings

12.) Click on Google ads.

googleadsgoogleads

13.) You will be prompted with the following screen.

androidandroid

14.) Copy the first key (Google ad app ID).

15.) Paste it in the Ad Google Key section in nandbox app builder.

firstfieldfirstfield

16.) Next, copy the second key (banner key).

bannerkeybannerkey

17.) Paste it in the Ad Banner Key section in nandbox app builder.

secondfieldsecondfield

18.) Next, click create another ad unit.

anotheradanotherad

19.) Select Native advanced.

nativenative

20.) Enter the ad name and click create ad unit.

adunitadunit

21.) Copy the second key (native key).

nativekeynativekey

22.) Paste it in the Ad Native Key section in nandbox app builder.

thirdfieldthirdfield

23.) Next, select which ad you wish to activate and click save.

activationactivation

24.) You can repeat the same process with the iOS version of your app.

iosios

25.) Enter the ad frequency, which is the number of posts after which an ad will appear.

frequencyfrequency

26.) Next, you need to activate the ads in the modules that you installed in your app.

27.) Click on the configuration icon on the installed module.

27.) Toggle the button to enable ads.


Did this page help you?