Part 13 - Convert Angular App into Mobile and Windows Applications | Angular, Capacitor, Electron

0:00 Installation and Configuration of Capacitor, Export to Android project
6:12 Launching the Project in Android Studio
14:28 Generation of APK File
17:01 Installation on an Actual Android Device
18:32 Installation and Configuration of Electron, Conversion of Angular App to Windows App
25:23 Utilizing Electron-Packager for App Export to Setup Folder
28:35 Utilizing Inno Setup for Creation of Installer with EXE File
32:10 Installation of App on Personal Laptop

Tech Stack Versions:
Java: 17
Spring Boot: 3.2.5
JWT: 0.11.5
MySQL: 8.0
Angular CLI: 16.2.10
npm: 10.5.0
PrimeNG: 17.15.0
Electron: 30.0.2
Capacitor: 6.0.0

(English below)

*Các tài khoản mình vẫn để trong code, để khi mọi người sửa lại sẽ dễ hơn. Nhưng lưu ý là các tài khoản đó mình đã thay đổi thông tin và không còn khả dụng nữa.

Chào mọi người, mình là Dương.

Trong series lần này, chúng ta sẽ xây dựng PostShare - một nền tảng cho phép người dùng đọc các bài đăng và đăng ký/đăng nhập để có thể thích bài viết. Staff/Admin có thể quản lý các bài đăng và users. Sử dụng Angular cho frontend, Spring Boot cho backend và MySQL cho database. JWT để authentication, PrimeNG cho các component UI, Electron và Capacitor để tạo phiên bản cho Windows và mobile app. Sau cùng là sử dụng Docker để deploy lên Azure.

Sau series này, mình mong mọi người có thể tạo được một app của riêng mình, có thể là những app nhỏ thôi, như là: note, todo,... nhưng nó có thể phục vụ cho cuộc sống hằng ngày của mọi người, chứ không còn đơn thuần là "homework apps"!!!

Series này là để mình chia sẻ hành trình vừa qua mà mình học và tích lũy được. Code của mình còn khá dởm, chưa tối ưu và có cả bug nữa, nên mong mọi người nhẹ tay. Nếu mọi người có đề xuất hay góp ý thì hãy để lại bình luận hoặc gửi email trực tiếp cho mình.

Cảm ơn tất cả mọi người rất nhiều!!!
___

*I have left the account information in the code to make it easier for everyone to modify. However, please note that I have changed the information for these accounts and they are no longer available.

Hello everyone, I'm Duong.

In this series, we will build PostShare - a platform that allows users to read posts and register/login to be able to like posts. Staff/Admin can manage posts and users. Using Angular for frontend, Spring Boot for backend, and MySQL for the database. JWT for authentication, PrimeNG for UI components, Electron and Capacitor for creating versions for Windows and mobile apps. Finally, we will use Docker to deploy to Azure.

After this series, I hope everyone can create an app of their own, it can be small apps, such as: note, todo,... but it can serve people's daily life, not just "homework apps"!!!

This series is for me to share the journey I have learned and accumulated. My code is still quite bad, not optimized and has bugs, so I hope everyone will be gentle. If you have suggestions or comments, please leave a comment or send me an email directly.

Thank you all very much!!!
________________________________

[duong]

Ignore Electron
You can add the electron-pack script to your package.json like this:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"electron": "electron .",
"electron-build": "ng build --base-href ./ && electron .",
"electron-pack": "electron-packager ./ PostShare --platform=win32 --overwrite
}

Then run:
npm run electron-pack

This script will ignore the node_modules, .angular, android, and src directories during packaging.