This repository contains a set of individual projects to help you learn and test Beagle for Android, iOS, Web and Backend. Each sample demonstrates different use cases, complexity levels and more.
For more information, please read the documentation
To try out these sample apps, you can use your preferred IDE and follow the minimal requirements for each of the platforms.
Android iOS Flutter Web Backend
To run any of the sample you are going to need a functioning backend, which is provided in the BackendSample folder. If you have all the requirements installed in your machine you can run it in your own environment.
Alternatively if you have docker installed you can easily use docker compose to build the backend project without the need of any extra local configuration. This is specially helpful if you are interested in running only the frontend samples.
In your terminal navigate to the root of the BeagleSampleBackend folder
cd BeagleSampleBackend
Now run the docker compose file with the command below:
docker-compose up --build
You should be able to access the backend endpoints on port:8080.
| Project | Preview |
|---|---|
| Hello Beagle. A getting started project for you to try out Beagle into your preferred platform, This project contains the basic configuration for each platform and how to load Server Driven Screens into them • Low complexity • Flutter • Web • Android • iOS > Browse |
 |
| Login and Byometric Login. A Beagle implementation of a biometry login flow, using touch id or face id (for iOS). This example was created inspired on the ITI application, just to show what Beagle can do. It does not had any code from ITI itself. In this sample a custom action is created to manage the app's login flow. Also some custom widgets are created to display information on the screen. A listView is also implementend on this sample. You can check its code on the Backend project listed here • Medium complexity • Custom Actions • Custom Widgets • Navigation > Browse |
 |
| Positioning elements Screen. A screen created only to show how elements are positioned in a screen. Learn more about flex and position with Beagle's layout engine Yoga Layout. • Low complexity • Flex • Style > Browse |
 |
| Custom operation example Screen. A custom operation that validates a password using a regular expression (REGEX) and that notifies through a text that changes at the screen between values "Senha Inválida" for invalid values and "Senha válida" for valid values. The text is changed at the screen using context (a resource from Beagle). • Low complexity • Custom Operations • Context > Browse |
 |
| Fallback Screen example. A Fallback screen that could be called when a screen request fails. This screen is called from the backend and most of its configuration are set on the backend, but a few details must be added into a front end design system. • Low complexity • Fallback Screen example • Design System > Browse |
 |
