DesarrolloLibre, Mobile App for Android, Online Courses and Blog

▶

I wanted to introduce my mobile application for Android, which encompasses both the content from DesarrolloLibre and the Academy (online courses). This application was generated with Flutter, which allows us to unify the project for multiple operating systems such as Android, iOS, Windows, macOS, and Linux.

The application integrates three main areas: the Blog, the Academy (courses), and the Users section (for login). The interface features a Dark Mode.

1. Blog Section

The Blog section allows us to consume the website content from the mobile device.

Navigation: We have typical categories to search for posts, a language filter, and a search function (which requires pressing Enter).

Classification: Articles can be viewed ordered by date or classified by Courses or Books.

Post Detail: The article detail (image, title, tags, and categories) is a WebView which, although functional, was a nightmare to implement, as getting a reliable WebView for multiple platforms (like Mac and Windows) remains a challenge.

2. Academy and Full Screen Section

This is the most interesting part, where courses are managed.

Functionality: It maintains the same functionality as the web, including course detail and the purchase option.

Class Viewing: A WebView is used for class playback. As on the web, the user can navigate through sections, view class notes, and check comments.

Full Screen Mode: I highly recommend using the full screen mode for better viewing, especially on small screens.

Free Courses: As a promotion for the application launch, I incorporated a new tab for Free Courses. These are light formats (with some sections) of my most popular courses (Laravel and Django), accessible without commitment, just by registering on the platform.

3. ️ Development for Windows and macOS (Coming Soon)

My idea is to leverage the Flutter ecosystem to bring the application to other platforms.

Windows: I already have the Windows version ready (which I like more than the mobile one). Here you can see the same application with an adaptive design.

Additional Features (Windows Version): In this desktop version, I added a Favorites function to save posts, and a Random Questions section (Duolingo style, but much simpler) for entertaining practice.

DesarrolloLibre, Android App, Online Courses and Blog - V2, questions and answers, multi-language +

▶

New Features: Version 2 (Questions, Multiple Languages, Favorites)
I want to share the new features of Version 2 of the Flutter application for Android (the only platform available for now).

1. Multiple Language Support

Interface: The most important new feature is the support for multiple languages (Spanish and English), which changes the entire interface.

Content: The course content remains in Spanish, but in the Blog, the language filter now takes the profile's language to show only the corresponding translated posts.

2. ❤️ Post Favorites

You can now add posts to the Favorites list and consult them later, an improvement for deferred reading.

3. Questions and Answers (Game)

I implemented a Questions section that is consumed from a proprietary API (developed in Laravel).

Usage: The content is divided by technology (e.g., Django and Flutter). The questions are translated into the user's profile language (Spanish or English).

Mechanics: It's a simple game: you select the correct answer (green) or incorrect answer (red). In this version, the result is stored locally and not saved, serving as an entertainment tool.

4. Improved Responsive Mode

Design improvements were made in the Academy section to optimize space on Android.

Hide Block Button: A button was added to show or hide the side block (sections, notes, comments, and about the course) to give more space for content viewing.

Tree Navigation: The section and class tree is now accessible in a hamburger menu for comfortable navigation.

V5 Update: Book Sales and Downloads

Finally, I wanted to mention the changes in production for Version 5 of the application, focused on book management.

1. Integrated Book Management

The Books section was added to the Academy section (alongside the courses).

Purchase: The authenticated user can see which books they have purchased and which they have not. The purchase is made using the PayPal widget.

Coupons: If the user has already acquired a course or path previously, a coupon is generated that they can apply to obtain the book for free.

2. Book Download

When accessing a purchased book, the PDF Download option is enabled.

The process redirects to an external link to perform the download in the device's default folder (which was easier than managing the download directly in Flutter).

Remember that the application is completely free and I maintain it alone, so updates (which I will document in YouTube videos) are made progressively. If you're interested, you can find the download link in the description.

Extra: Modularization of MY Payment Platform for Course/Book Sales with Stripe/Paypal on Web and Mobile

▶

To avoid a controller for each platform, the trick is to modularize and establish a set of common properties that all payments must fill, regardless of their source.

The key intermediate method is `sendRequestAPI()`, a protected method called from the main controller. This method is responsible for discriminating the payment source and unifying the response.

This intermediate method calls the corresponding API and populates the class properties. Then, the public method (`processTutorial` or `processBook`) uses these unified values for the final registration in the database:

// Método Público que procesa la compra
public function processTutorial(Tutorial $tutorial, string $orderId, string $type = 'paypal-order-id')
{
    // ... Obtener el usuario
    
    // *** 1. Llamada al método intermedio para unificar la respuesta
    $this->sendRequestAPI($orderId, $type);
    
    // *** 2. Registrar el recurso si el status unificado es COMPLETED
    if ($this->status == 'COMPLETED') {
        return $this->registerTutorialToUser(***);
    } 
    // ... Manejo de errores
}

This strategy ensures that, despite the complexities of each API, the internal registration process (`registerTutorialToUser`) only works with clean and unified values, drastically simplifying the flow of our application.

4. Platform Unification and User Authentication

I currently handle four distinct payment scenarios (PayPal and Stripe, each with different implementations for the web and for the mobile application), even though the underlying structure of my backend is the same.

A. The Role of the Intermediate Method
To manage this complexity, the intermediate method that establishes the common properties (`status`, `price`, `idAPI`, etc.) is crucial.

• This method is called from a single controller for the web application and another for the Flutter application. Its objective is to ensure that the final response has the same value, regardless of the payment origin.

B. The Authentication Challenge (`$user = $this->getUser();`)

An additional "novel" is user authentication, as my Laravel application works in two ways:

• Via Tokens: Used for the mobile application (Flutter), where the user is identified with an API token.
• Via Session: Used in the traditional Laravel web application.

The `getUser()` method verifies the source and retrieves the user. If the result is null, the logic fails, as there is no one to register the acquired resource to:

$user = $this->getUser();

Critical Point: This causes problems, especially with PayPal, when the operation is performed entirely on the client-side without mandatory prior authentication. If the PayPal plugin is not blocked for unauthenticated users, a payment is accepted, but the application cannot assign the course to anyone in the database, which causes an error.

I hope this explanation on modularization and user management is useful for your future implementations.