اريد تطبيق مثل واتساب تواصل خاص وقروبات واضافة حالات وفيديو قصيرة

بصفتي نموذج ذكاء اصطناعي، لا يمكنني إنشاء ملف تطبيق جاهز (APK أو IPA) للتحميل المباشر، ولكن يمكنني تزويدك **بالخارطة التقنية الكاملة (Roadmap)** وكود أساسي لبناء تطبيق مشابه لواتساب مع الميزات التي طلبتها.

لبناء هذا التطبيق بشكل احترافي وآمن، أنصحك باستخدام التقنيات التالية:
1. **Frontend (التطبيق):** Flutter أو React Native (ليعمل على Android و iOS بكود واحد).
2. **Backend (الخادم):** Node.js أو Go.
3. **قاعدة البيانات:** Firebase (لسرعة التطوير) أو PostgreSQL + Redis.
4. **الاتصال المباشر:** WebSockets (Socket.io) للمراسلة الفورية.
5. **تخزين الملفات:** AWS S3 أو Cloudinary للصور والفيديوهات.

إليك هيكل الكود الأساسي باستخدام **Node.js** للخادم ومنطق الاتصال:

### 1. إعداد الخادم (Server - Node.js + Socket.io)

هذا الكود يتعامل مع الدخول للغرف (Grouds) وإرسال الرسائل النصية.

```javascript
const express = require('express');
const http = require('http');
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// تخزين الغرف والحالة (في الذاكرة للتجربة، يفضل استخدام قاعدة بيانات في الإنتاج)
let groups = {};
let users = {};

io.on('connection', (socket) => {
console.log('مستخدم متصل:', socket.id);

// 1. الانضمام إلى مجموعة خاصة (شخصين) أو جماعية
socket.on('join_group', ({ groupId, userId, userName }) => {
socket.join(groupId);
users[socket.id] = { id: userId, name: userName };

if (!groups[groupId]) {
groups[groupId] = [];
}
groups[groupId].push({ id: userId, name: userName });

// إشعار باقي الموجودين في المجموعة
socket.to(groupId).emit('user_joined', { user: { id: userId, name: userName } });
console.log(`المستخدم ${userName} انضم للمجموعة ${groupId}`);
});

// 2. إرسال رسالة نصية
socket.on('send_message', ({ groupId, message, senderId, timestamp }) => {
const msgData = {
id: Date.now(),
senderId,
text: message,
timestamp,
type: 'text'
};

// إرسال الرسالة لكل من في المجموعة بما فيهم المرسل
io.to(groupId).emit('receive_message', msgData);
});

// 3. تحديث الحالة (Status)
socket.on('update_status', ({ userId, statusText, imageUrl }) => {
// حفظ الحالة في قاعدة البيانات
console.log(`تحديث حالة المستخدم ${userId}: ${statusText}`);
// يمكن إرسال إشعار للمستخدمين الآخرين
io.emit('status_updated', { userId, statusText, imageUrl });
});

socket.on('disconnect', () => {
console.log('مستخدم disconnect');
delete users[socket.id];
});
});

server.listen(3000, () => {
console.log('الخادم يعمل على المنفذ 3000');
});
```

### 2. واجهة المستخدم (React Native - جزء بسيط)

هذا مثال لكيفية عرض الدردشة واستخدام المكتبات لعرض الفيديو القصير.

```javascript
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, Image } from 'react-native';
import io from 'socket.io-client';
import Video from 'react-native-video'; // مكتبة لتشغيل الفيديو

const socket = io('http://YOUR_SERVER_IP:3000');

export default function WhatsAppClone() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [currentGroup, setCurrentGroup] = useState('group_1');

useEffect(() => {
socket.emit('join_group', { groupId: currentGroup, userId: 'user_1', userName: 'Ahmed' });

socket.on('receive_message', (data) => {
setMessages(prev => [...prev, data]);
});

socket.on('status_updated', (data) => {
console.log("تم تحديث حالة:", data.statusText);
});
}, []);

const sendMessage = () => {
socket.emit('send_message', {
groupId: currentGroup,
message: input,
senderId: 'user_1',
timestamp: new Date()
});
setInput('');
};

// مكون لعرض الفيديو القصير (مثل ستوري واتساب)
const StatusViewer = ({ videoUri }) => (
<View style={{ height: 200, width: 300, backgroundColor: '#000' }}>
<Video source={{ uri: videoUri }} style={{ width: '100%', height: '100%' }} controls />
</View>
);

return (
<View style={{ flex: 1, padding: 20 }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>المحادثة: {currentGroup}</Text>

{/* عرض الرسائل */}
<FlatList
data={messages}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View style={{ padding: 10, backgroundColor: item.senderId === 'user_1' ? '#dcf8c6' : '#fff', marginVertical: 5, borderRadius: 10 }}>
<Text>{item.text}</Text>
</View>
)}
/>

{/* إضافة فيديو قصير كـ "Status" */}
<Button title="رفع فيديو حالة (Short Video)" onPress={() => alert('سيتم فتح الكاميرا لرفع فيديو')} />

{/* حقل الإدخال */}
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<TextInput
style={{ flex: 1, borderWidth: 1, padding: 10 }}
value={input}
onChangeText={setInput}
placeholder="اكتب رسالة..."
/>
<Button title="إرسال" onPress={sendMessage} />
</View>
</View>
);
}
```

### مميزات إضافية تحتاجها لتكتمل مثل واتساب:

1. **التشفير (End-to-End Encryption):**
* استخدم مكتبات مثل `libsignal-protocol-javascript` لتشفير الرسائل بحيث لا يستطيع حتى السيرفر قراءتها.
2. **مشاركة الفيديو القصير (Shorts/Reels style):**
* بدلاً من رفع الفيديو على السيرفر مباشرة، ارفعه على خدمة تخزين سحابي (S3) واحفظ الرابط فقط.
* في التطبيق، اعرض الفيديوهات في قائمة عمودية قابلة للسحب (Vertical Swipe) مثل "الستوري" أو "رييلز".
3. **إشعارات فورية (Push Notifications):**
* استخدم **Firebase Cloud Messaging (FCM)** لإعلام المستخدم بوجود رسالة جديدة حتى لو كان التطبيق مغلقاً.
4. **مشاركة الموقع والمرفقات:**
* استخدم Maps API لمشاركة الموقع.
* استخدم `react-native-document-picker` لمشاركة الملفات.

### هل تريد المساعدة في جزء محدد؟
* هل تريد كودًا خاصًا بـ **Flutter** بدلاً من React Native؟
* هل تريد شرحًا لكيفية التعامل مع **قاعدة البيانات** لحفظ المحادثات؟
* هل تريد دمج **خدمة البث المباشر (Live Streaming)** داخل التطبيق؟

بصفتي نموذج ذكاء اصطناعي، لا يمكنني بناء تطبيق كامل وتوزيعه على المتاجر مباشرة (مثل APK أو IPA)، ولكن يمكنني **تصميم الهيكل البرمجي الكامل** للتطبيق، كتابة الكود الأساسي، وإرشادك خطوة بخطوة لبنائه باستخدام تقنيات حديثة وسريعة.

لبناء تطبيق مثل واتساب (مessenger) يدعم المحادثات الخاصة، المجموعات، الحالات (Stories)، والفيديو القصير (Reels/Shorts style)، إليك الخطة التقنية والكود المبدئي:

### 1. التقنيات المقترحة (Tech Stack)
لضمان السرعة والتوافق مع الهواتف (Android & iOS):
* **واجهة التطبيق (Frontend):** Flutter (لغة Dart) - لأنها سريعة وتعطي أداءً عالٍ للرسائل الفورية.
* **الخادم وقاعدة البيانات (Backend):** Firebase (من Google) أو Supabase.
* *Firebase Auth:* للمصادقة (رقم الهاتف).
* *Firestore:* لتخزين الرسائل والمعلومات.
* *Firebase Storage:* لتخزين الصور والفيديوهات.
* *Firebase Cloud Messaging (FCM):* للإشعارات الفورية.
* **المزامنة في الوقت الحقيقي:** WebSockets (إذا لم تستخدم Firebase).

---

### 2. هيكل قاعدة البيانات (Database Schema)
ستحتاج إلى الجداول التالية في Firestore:

1. **Users:** (uid, phone_number, name, profile_pic, status_text)
2. **Chats:** (chat_id, participants[], last_message, timestamp)
3. **Messages:** (message_id, chat_id, sender_id, content, type [text/image/video], timestamp, is_read)
4. **Groups:** (group_id, name, admin_id, members[])
5. **Stories:** (story_id, user_id, media_url, created_at, expires_at)
6. **ShortVideos:** (video_id, user_id, video_url, likes_count, views)

---

### 3. كود مبدئي لواجهة المحادثة (Flutter Example)

هذا مثال بسيط لشاشة محادثة خاصة باستخدام `StreamBuilder` لقراءة الرسائل لحظياً:

```dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class ChatScreen extends StatelessWidget {
final String chatId;
final String currentUserId;

const ChatScreen({required this.chatId, required this.currentUserId});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("المحادثة")),
body: Column(
children: [
// عرض الرسائل
Expanded(
child: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('chats')
.doc(chatId)
.collection('messages')
.orderBy('timestamp', descending: true)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return Center(child: CircularProgressIndicator());

var messages = snapshot.data!.docs;
return ListView.builder(
reverse: true, // جعل آخر رسالة في الأعلى
itemCount: messages.length,
itemBuilder: (context, index) {
var msg = messages[index];
bool isMe = msg['senderId'] == currentUserId;

return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
decoration: BoxDecoration(
color: isMe ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.circular(10),
),
child: Text(msg['text']),
),
);
},
);
},
),
),
// مربع إدخال الرسالة
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
key: Key('messageField'),
decoration: InputDecoration(hintText: "اكتب رسالة..."),
controller: TextEditingController(),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
// دالة إرسال الرسالة
sendMessage(chatId, "نص الرسالة", currentUserId);
},
),
],
),
),
],
),
);
}

void sendMessage(String chatId, String text, String senderId) {
FirebaseFirestore.instance
.collection('chats')
.doc(chatId)
.collection('messages')
.add({
'text': text,
'senderId': senderId,
'timestamp': FieldValue.serverTimestamp(),
'isRead': false,
});
}
}
```

---

### 4. كيفية إضافة الميزات المطلوبة

#### أ. الغروبات (Groups)
* أنشئ مجموعة في جدول `Groups`.
* عند إنشاء رسالة، تأكد من أن `senderId` هو عضو في هذه المجموعة.
* استخدم `whereIn` في Firestore لجلب الرسائل لمجموعة من المستخدمين.

#### ب. الحالة (Status / Stories)
* عند رفع صورة/فيديو، احفظ الرابط في جدول `Stories` مع وقت الإنشاء (`createdAt`).
* في الواجهة، قم بعرض الدوائر الملونة للمستخدمين الذين لديهم حالة جديدة.
* **الشرط المهم:** عند عرض الحالة، تحقق مما إذا كان الفرق بين `createdAt` و `الآن` أقل من 24 ساعة. إذا مر الوقت، احذفها من العرض (أو من السيرفر).

#### ج. الفيديو القصير (Shorts/Reels)
* استخدم مكتبة `video_player` أو `shimmer_video_player` في Flutter.
* صمم واجهة بملء الشاشة مع التمرير العمودي (Vertical Scroll) باستخدام `PageView`.
* اطلب الفيديوهات من قاعدة البيانات بترتيب زمني جديد.

---

### 5. خطوات التنفيذ العملية لك

1. **أنشئ مشروع Firebase:** اذهب إلى [console.firebase.google.com](https://console.firebase.google.com/) وأنشئ مشروعاً جديداً.
2. **فعّل الخدمات:** فعّل Authentication (Phone) و Firestore Database و Storage.
3. **ابدأ بالتصميم:** استخدم Figma لتصميم واجهات التطبيق قبل البرمجة.
4. **برمج الـ Backend:** ابدأ بكتابة الكود لإرسال واستقبال الرسائل النصية.
5. **أضف الوسائط:** بعد نجاح النصوص، أضف ميزة رفع الصور والفيديوهات.
6. **الاختبار:** جرب التطبيق على هواتف مختلفة.

هل تريد مني تفصيل كود جزء معين؟ مثلاً:
1. كيفية رفع الصور والفيديوهات وتخزينها؟
2. كيفية برمجة نظام "الحالات" الذي يختفي بعد 24 ساعة؟
3. كيفية تصميم واجهة الروابط (UI) للتطبيق؟