DEV Community: Ifeoluwa Afuwape

Create AI-Assisted Technical Documentations with Spreading.ai

Ifeoluwa Afuwape — Fri, 27 Oct 2023 07:36:09 +0000

Have you ever had to document features in your application and the thoughts were just too overwhelming? or you just want to get someone else to do it for you? I am happy to let you know that your worry days are over 😄!

In this technical write-up, I will be introducing you to an efficient AI-Assited technical documentation app Spreading

Spreading is an AI-Powered Knowledge Base Platform to let you build a self-service knowledge base for your customers and developers. It helps developers to write technical documentation with AI well with essential and powerful documentation features like:

Code-Generated Documentation: Create top-notch technical documentation for your products.
AI-Powered Assistance: Leverage AI to code more effectively, seamlessly switch between different programming languages, and enhance document quality.
Live Collaborative Editing: Enable multiple users to collaboratively edit the same document, ensuring real-time updates and synchronization (permissions determined by subscription level).
Streamlined Outlining: Efficiently produce document outlines.
Multimedia Integration: Easily incorporate images, videos, links, tables, and more.
Structured Directory and Document Categories: Organize your documents with directory structures and categorization.
Document Management: Efficiently manage your documents.
Brand Customization: Customize your branding, including using a custom domain.
Markdown Syntax and Code Blocks: Utilize Markdown syntax and code blocks for writing documents.
Multiple Website Creation: Create multiple websites as needed.

And guess what? "IT IS ENTIRELY FREE"😄 and requires no prior documentation-writing experience. Whether you're a novice or a seasoned developer, this article will guide you on the essential resources to commence your journey with Spreading.

NOW, LET'S GET INTO IT!

Step 1: Set up a Spreading Account:
Go to https://app.spreading.ai/signup to Sign Up

You can quickly sign up with your Google account or your email and once successful you will then be required to name your workspace.

and then redirected to the Spreading App Dashboard.

EASY YEAH 😄!

Step 2: Create a New Project:

On your dashboard Team Project section, click the Create a Project button.

Enter your preferred Project Name

Step 3: Generate a Directory:

Once the project is created, click to open the project. On the sidebar click on the AI Icon - Generate directory with AI

This launches a pop-up, you'll choose the type of documentation and provide project description, limited to 100 characters. Click the "generate" button, and this will automatically establish the folder structure with appropriate naming conventions. You can Regenerate the output for improved results or Apply it.

Step 4: Generate a Documentation:

Now that project is successfully setup with appropriate folder structure, we can now populate the project files with content using the two available options of Generate Outline or Generate doc from code

Generate Outline

Create an outline by specifying the documentation type, audience type, and entering the product description in the provided textbox. Then, press the "Generate" button, which will generate the entire project outline. You can expand this outline by adding additional content using the "+" icons.

Generate Doc from Code

To use this feature, all you need to do is choose the context by specifying the documentation type and programming language. Then, insert the code snippet into the designated area and click the "generate" button. This will generate automatic documentation from the entire code as shown below:

Viola! You can do this for every file and then save or publish your documentation.

Other Features on Spreading:

Invite Members for Collaboration

Developers can engage in collaborative efforts by sharing an invitation link through the "Invite Members" section which allows anyone you share the invite with to access your work and contribute to it within a 7-day validity period.

Custom Documentation Link

Spreading allows you to publish your documentation to a custom domain upon completion.

Private Space

You can also make your projects yours and yours alone by keeping them within your private space on Spreading, and like every other project you can generate outline and docs from code within you private space pages.

Beyond the features highlighted above, Spreading also provides a host of other tools which can be useful for you now or in your future developments and projects especially with its high scalability rate, hence be sure to explore and try new things with it.

Create a Flutter Video Call App with ZEGOCLOUD

Ifeoluwa Afuwape — Wed, 12 Apr 2023 06:08:33 +0000

Have you ever thought or had to integrate communication features in you application and the complexity almost turned you off? or even many times wouldn't just work.

In this technical write-up, I will be showing you a seamless solution to achieve many communication features within your app in Flutter using Zegocloud without having to reinvent the wheel. Zegocloud is a global communication service provider which provides powerful communication SDKs & APIs for app development (chat messaging, video and voice calls, video conference and live-streaming) with developer-friendly environment and features like:

Ready-to-use 1-on-1/group calls
Customizable UI styles
Real-time sound waves display
Device management
Switch views during a 1-on-1 call
Extendable menu bar
Participant list
Call invitation/Offline call invitation
Custom call ringtones
Screen sharing

Throughout this write-up, we will go step-by-step on how to set up a new Flutter project, configure your flutter project, and integrate Zegocloud into our app. I will include code snippets and images to help you follow along and build your own video call app with Zegocloud using Flutter.

Prerequisites:
Basic knowledge of Flutter and Dart

Step 1: Set up a Zegocloud Account:
Go to https://console.zegocloud.com/account/signup to Sign Up

Bonus:

Once, your account is setup... your console should look like this:

Step 2: Set up a new Flutter project

Open Android Studio/VS Code and create a new Flutter project.

or run

flutter create zego_call

Once your project is setup, we need to add the ZegoCloud UIKit Dependency for 1-on-1 calls

run

flutter pub add zego_uikit_prebuilt_call

Your pubspec.yaml should be updated as shown:

Step 3: Create a Zegocloud Project from your console

Click on Create your project from the console and you will be redirected to the screen shown below:

There are varieties to choose from, but for the sake of this tutorial we will be using the Voice & Video Call, click NEXT and enter preferred project name.

Then click Start with UIKits

Wait for the console to create your project and you will be redirected to your project page with all your project info.

Step 4: Implement Zegocloud dependency in your project
Now that we have created a project on the console, we need to create our screens:

In your main.dart file, add the following code:

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'ZegoCloud\nVideo Call Kit',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
              const SizedBox(
                height: 100,
              ),
              SizedBox(
                  width: 300,
                  height: 52,
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: ((context) =>
                              const CallPage(callID: 'ifeoluwa'))));
                    },
                    style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all<Color>(
                            const Color.fromRGBO(95, 51, 255, 1))),
                    child: const Text('Start Call'),
                  )),
            ]),
      ),
    );
  }
}

Create a stateless callpage below the main.dart file and add the code, this is where we consume the prebuilt UI kit by zegocloud and pass in the appID and appSign which can be gotten from the project console

class CallPage extends StatelessWidget {
  const CallPage({Key? key, required this.callID}) : super(key: key);
  final String callID;

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltCall(
        appID:
            1873850625, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign:
            "9adffd105b8fd9925f617746797f340e5f9a10c5ba36738b0edda8de3bcb16f7", // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'usos2345dhdoee',
        userName: 'popop',
        callID: callID,
        // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
        config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
        // ..onOnlySelfInRoom = () => Navigator.of(context).pop(),
        );
  }
}

Our Screen should be like this:

Step 5: Configure your flutter project

For your app to perform properly you need to require some permissions on the device.

Android:

Open the project_directory/android/app/build.gradle file, and modify the compileSdkVersion to 33

.
.
.
android {
    compileSdkVersion 33
    ndkVersion flutter.ndkVersion
.
.
.
 defaultConfig {
        minSdkVersion 21
    }
.
.
.

Open the file project_directory/app/src/main/AndroidManifest.xml add the following code just before the application tag.

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Open the project_directory/android/app folder, create a file named proguard-rules.pro and add the code below:

-keep class **.zego.** { *; }

then save.

Open the project_directory/android/app/build.gradle file again, then add the code below under buildTypes:

.
.
.
buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
.
.
.

iOS:

Open the project_directory/ios/Runner/Info.plist file, then add the following code:

.
.
.
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>
.
.
.

Awesome! Our Video call App implementation is ready, you can now run your app and when you click the Start Call button, you should get the view below with all call features enabled.

You can find the sourcecode here: sourcecode

Or watch my Video Tutorial Here: CREATE A FLUTTER VIDEO CALL APP WITH ZEGOCLOUD

Beyond the Video call, Zegocloud provides a host of other communication SDKs and APIs which can be useful for you now or in your future developments and projects especially with its high scalability rate, hence be sure to explore and try new things with it and you may be on your way to building another Fortune 500 with less stress as Zegocloud handles all communications whilst you focus on your core.