Awesome
<p align="center"> <a href="https://flutter.dev" target="_blank"><img height="39" src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" alt="Flutter Logo"></a> <a> </a> <a href="https://appwrite.io" target="_blank"><img width="260" height="39" src="https://appwrite.io/assets/logotype/white.svg" alt="Appwrite Logo"></a> </p>NO Signal
A functional replica of Signal (chatting app) made using Flutter and Appwrite. To know more about it - how it was built and how it works, I have written some detailed blogs on it. Know more about it here: Part 1 | Part 2 | Part 3.
What is Appwrite?
Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.
Features
- Built on RiverPod Architecture Pattern
- Authentication using OAuth and OAuth 2.0
- Users can send text to users
- Users can view other Profiles(See their bio and picture)
Installation
Appwrite
Appwrite backend server is designed to run in a container environment. Running your server is as easy as running one command from your terminal. You can either run Appwrite on your localhost using docker-compose or on any other container orchestration tool like Kubernetes, Docker Swarm or Rancher.
The easiest way to start running your Appwrite server is by running our docker-compose file. Before running the installation command make sure you have Docker installed on your machine:
Unix
docker run -it --rm \
--volume /var/run/docker.sock:/var/run/docker.sock \
--volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
--entrypoint="install" \
appwrite/appwrite:1.1.1
Windows
CMD
docker run -it --rm ^
--volume //var/run/docker.sock:/var/run/docker.sock ^
--volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
--entrypoint="install" ^
appwrite/appwrite:1.1.1
PowerShell
docker run -it --rm ,
--volume /var/run/docker.sock:/var/run/docker.sock ,
--volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
--entrypoint="install" ,
appwrite/appwrite:1.1.1
Once the Docker installation completes, go to http://localhost to access the Appwrite console from your browser. Please note that on non-linux native hosts, the server might take a few minutes to start after installation completes.
For advanced production and custom installation, check out our Docker environment variables docs. You can also use our public docker-compose.yml file to manually set up and environment.
Setting up appwrite project
Flutter
To build and run this project:
- Get Flutter here if you don't already have it
- Clone this repository
cd
into the repo folder- Run
flutter pub get
to get the dependencies - Run
flutter run-android
orflutter run-ios
to build the app
(Please note that a Mac with XCode is required to build for iOS)
Appwrite
To setup your Appwrite project:
- Open your browser and go to your http://localhost
- Create your account and login.
- Click on
Create Project
. - Enter a Name and custom Project ID for your project and click create.
At this moment your Dashboard is ready to use.
Setup Project Dashboard
We need to setup some collections and need to define its attributes so our app will be ready to use.
There are two ways of doing this. First, manually creating a collection from the dashboard and defining the attributes.
Secondly, I have a created a program which does that work for you. All you need is create an API key with all the permissions and replace it in the setup_appwrite.dart
files.
Open your terminal in the project folder and run the following commands to setup the User Collection . Make sure to replace all the neccessary fields left blank.
cd lib/utils
dart setup_appwrite.dart
Also in utils
folder create a file called api.dart
to store all your details in the following way:
class ApiInfo {
ApiInfo._();
static const String url = "http://localhost/v1";
static const String projectId = "[PROJECT_ID]";
static const String secretKey = "[SECRET_KEY]"; // You can get this from your Appwrite dashboard
static const String databaseId = "[YOUR_DATABASE_ID]";
static const String userCollectionId = '[USER_COLLECTION_ID]';
static const String storagebucketId = '[STORAGE_BUCKET_ID]';
}
}
Now your Project is ready to run.
File Structure
.
├── android # android files
├── assets # assets
│ ├── images
│ └── lottieassets
├── ios # android files
└── lib
├── api
│ ├── auth # Client Authentication
│ └── database # Database API
├── models # Custom Models
├── pages
│ ├── chat
│ ├── error
│ ├── home
│ ├── loading
│ ├── login
│ └── settings
├── providers
├── utils # Misc tools and stuffs
└── widgets
App Flow
Chat architecture
Screenshots
<img src = ".github\assets\Screenshot_1645287465.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287474.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287479.png" height = "500"> |
---|---|---|
<img src = ".github\assets\Screenshot_1645287485.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287488.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287604.png" height = "500"> |
<img src = ".github\assets\Screenshot_1645287611.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287619.png" height = "500"> | <img src = ".github\assets\Screenshot_1645287627.png" height = "500"> |
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://github.com/kekavc24"><img src="https://avatars.githubusercontent.com/u/68240897?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kelvin kavisi</b></sub></a><br /><a href="https://github.com/2002Bishwajeet/no_signal/commits?author=kekavc24" title="Code">💻</a> <a href="https://github.com/2002Bishwajeet/no_signal/commits?author=kekavc24" title="Documentation">📖</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!