طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

گزاره goto در ++C — به زبان ساده

در زبان برنامه‌نویسی ++C از گزاره goto برای ایجاد تغییر در ترتیب نرمال اجرای برنامه و انتقال کنترل از یک بخش به بخش دیگر برنامه استفاده می‌شود. در این نوشته به توضیح این ساختار می‌پردازیم. همچنین در بخش قبلی این سری مقالات آموزش برنامه‌نویسی ++C با گزاره سوئیچ آشنا شدیم. برای مطالعه بخش قبلی به لینک زیر مراجعه کنید:

گزاره switch..case در ++C — راهنمای کاربردی

ساختار گزاره goto

ساختار کلی این گزاره به صورت زیر است:

goto label;
... .. ...
... .. ...
... .. ...
label:
statement;
... .. ...

در ساختار فوق، abel یک شناسه است. وقتی که برنامه با ;goto label مواجه می‌شود، کنترل برنامه به :label پرش یافته و ادامه کد از آنجا اجرا می‌شود.

goto

مثال برای گزاره goto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// This program calculates the average of numbers entered by user.
// If user enters negative number, it ignores the number and 
// calculates the average of number entered before it.
 
# include <iostream>
using namespace std;
 
int main()
{
    float num, average, sum = 0.0;
    int i, n;
 
    cout << "Maximum number of inputs: ";
    cin >> n;
 
    for(i = 1; i <= n; ++i)
    {
        cout << "Enter n" << i << ": ";
        cin >> num;
        
        if(num < 0.0)
        {
           // Control of the program move to jump:
            goto jump;
        } 
        sum += num;
    }
    
jump:
    average = sum / (i - 1);
    cout << "\nAverage = " << average;
    return 0;
}

خروجی

Maximum number of inputs: 10
Enter n1: 2.3
Enter n2: 5.6
Enter n3: -5.6

Average = 3.95

شما می‌توانید هر برنامه ++C را بدون استفاده از گزاره goto بنویسید و عدم استفاده از این گزاره نیز عموماً ایده خوبی تلقی می‌شود.

چرا نباید از گزاره goto استفاده کنیم؟

گزاره goto قدرت پرش از هر نقطه برنامه به نقاط دیگر را در اختیار ما قرار می‌دهد، اما منطق چنین برنامه‌ای پیچیده و تودرتو خواهد بود. در برنامه‌نویسی مدرن، گزاره goto یک سازه آسیب‌رسان نگریسته می‌شود و رویه برنامه‌نویسی بدی است. به جای گزاره goto می‌توان ازگزاره‌های break و continue در ++C استفاده کرد. برای مطالعه بخش بعدی این سری مقالات به لینک زیر مراجعه کنید:

تابع های ++C — به زبان ساده
منبع: فرادرس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:33

0 نظر

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد — به زبان ساده

انواع گوناگونی از مسائل رنگ‌آمیزی گراف وجود دارد که مساله رنگ کردن راس‌های گراف، یکی از محبوب‌ترین و متداول‌ترین آن‌ها به شمار می‌آید. در این مساله، یک گراف غیر مستقیم و عدد m داده شده است. هدف رنگ کردن راس‌های گراف به صورتی است که هیچ دو راس مجاوری، دارای رنگ مشابه نباشند. m تعداد رنگ‌های داده شده است. باید توجه داشت که در اینجا منظور از رنگ‌آمیزی، تخصیص رنگ به راس‌های گراف است. برای حل مساله رنگ آمیزی گراف، الگوریتم‌های گوناگونی ارائه شده که «الگوریتم پس گرد» (Backtracking) و «حریصانه» (Greedy) از این جمله هستند. در این مطلب، هدف حل مساله رنگ آمیزی گراف با الگوریتم پس گرد است.

تعریف مساله

تعداد m رنگ و یک گراف داده شده است. هدف رنگ کردن راس‌های این گراف به صورتی است که هیچ دو راس مجاوری دارای یک رنگ مشابه نباشند. ورودی و خروجی مساله، به طور دقیق به شرح زیر هستند.

ورودی:

یک آرایه دو بعدی، یعنی گراف [graph[V][V که در آن، V تعداد یال‌ها در گراف را مشخص می‌کند و [graph[V][V نمایش ماتریس همسایگی گراف است. مقدار [graph[i][j در صورتی که یک یال مستقیم از i به j وجود داشته باشد برابر با یک، و در غیر این صورت، مقدار [graph[i][j برابر با ۰ است.
عدد صحیح m، تعداد کل رنگ‌هایی است که می‌توان از آن‌ها استفاده کرد.

خروجی:

آرایه [color[V که باید حاوی اعدادی از ۱ تا m باشد. [color[i باید رنگ تخصیص یافته به i‌اُمین راس را نشان دهد. همچنین، در صورتی که نمی‌توان گراف را با m رنگ طبق شرط موجود رنگ‌آمیزی کرد، کد باید مقدار False را بازگرداند. در ادامه، تصویری از یک گراف داده شده که با m=3 رنگ (سفید، سبز، قرمز) رنگ‌آمیزی شده است.

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

الگوریتم ساده

الگوریتم ساده ارائه شده در زیر، همه پیکربندی‌های ممکن برای رنگ‌آمیزی گراف را که شروط داده شده در آن‌ها رعایت می‌شود، در خروجی چاپ می‌کند.

while there are untried conflagrations
{
generate the next configuration
if no adjacent vertices are colored with same color
{
print this configuration;
}
}

به تعداد Vm پیکربندی مختلف از رنگ‌ها وجود دارد.

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

ایده اساسی آن است که رنگ‌ها یکی یکی به راس‌های مختلف اختصاص پیدا کنند. این کار با شروع از راس صفر (۰) آغاز می‌شود. پیش از تخصیص رنگ، امکان‌پذیری تخصیص رنگ بر اساس شرط داده شده بررسی می‌شود. این کار، با در نظر گرفتن رنگ‌هایی که در حال حاضر به راس‌های همسایه تخصیص پیدا کرده‌اند، صورت می‌پذیرد. اگر الگوریتم تشخیص دهد که تخصیص یک رنگ مشخص در شرط داده شده صدق می‌کند، تخصیص رنگ به عنوان بخشی از راهکار انجام می‌شود. اگر رنگی برای یک راس مشخص پیدا نشود که در شرط مذکور صدق کند، پس‌گرد انجام و پیغام خطای False صادر می‌شود.

کد راه حل مساله رنگ آمیزی گراف در ++C/C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
#include<stdio.h> 
#include<stdbool.h> 
  
// Number of vertices in the graph 
#define V 4 
  
void printSolution(int color[]); 
  
/* A utility function to check if the current color assignment 
is safe for vertex v i.e. checks whether the edge exists or not 
(i.e, graph[v][i]==1). If exist then checks whether the color to  
be filled in the new vertex(c is sent in the parameter) is already 
used by its adjacent vertices(i-->adj vertices) or not (i.e, color[i]==c) */
bool isSafe (int v, bool graph[V][V], int color[], int c) 
{ 
    for (int i = 0; i < V; i++) 
        if (graph[v][i] && c == color[i]) 
            return false; 
    return true; 
} 
  
/* A recursive utility function to solve m coloring problem */
bool graphColoringUtil(bool graph[V][V], int m, int color[], int v) 
{ 
    /* base case: If all vertices are assigned a color then 
       return true */
    if (v == V) 
        return true; 
  
    /* Consider this vertex v and try different colors */
    for (int c = 1; c <= m; c++) 
    { 
        /* Check if assignment of color c to v is fine*/
        if (isSafe(v, graph, color, c)) 
        { 
           color[v] = c; 
  
           /* recur to assign colors to rest of the vertices */
           if (graphColoringUtil (graph, m, color, v+1) == true) 
             return true; 
  
            /* If assigning color c doesn't lead to a solution 
               then remove it */
           color[v] = 0; 
        } 
    } 
  
    /* If no color can be assigned to this vertex then return false */
    return false; 
} 
  
/* This function solves the m Coloring problem using Backtracking. 
  It mainly uses graphColoringUtil() to solve the problem. It returns 
  false if the m colors cannot be assigned, otherwise return true and 
  prints assignments of colors to all vertices. Please note that there 
  may be more than one solutions, this function prints one of the 
  feasible solutions.*/
bool graphColoring(bool graph[V][V], int m) 
{ 
    // Initialize all color values as 0. This initialization is needed 
    // correct functioning of isSafe() 
    int color[V]; 
    for (int i = 0; i < V; i++) 
       color[i] = 0; 
  
    // Call graphColoringUtil() for vertex 0 
    if (graphColoringUtil(graph, m, color, 0) == false) 
    { 
      printf("Solution does not exist"); 
      return false; 
    } 
  
    // Print the solution 
    printSolution(color); 
    return true; 
} 
  
/* A utility function to print solution */
void printSolution(int color[]) 
{ 
    printf("Solution Exists:"
            " Following are the assigned colors \n"); 
    for (int i = 0; i < V; i++) 
      printf(" %d ", color[i]); 
    printf("\n"); 
} 
  
// driver program to test above function 
int main() 
{ 
    /* Create following graph and test whether it is 3 colorable 
      (3)---(2) 
       |   / | 
       |  /  | 
       | /   | 
      (0)---(1) 
    */
    bool graph[V][V] = {{0, 1, 1, 1}, 
        {1, 0, 1, 0}, 
        {1, 1, 0, 1}, 
        {1, 0, 1, 0}, 
    }; 
    int m = 3; // Number of colors 
    graphColoring (graph, m); 
    return 0; 
} 

کد راه حل مساله رنگ آمیزی گراف در جاوا

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* Java program for solution of M Coloring problem 
   using backtracking */
public class mColoringProblem { 
    final int V = 4; 
    int color[]; 
  
    /* A utility function to check if the current 
       color assignment is safe for vertex v */
    boolean isSafe(int v, int graph[][], int color[], 
                   int c) 
    { 
        for (int i = 0; i < V; i++) 
            if (graph[v][i] == 1 && c == color[i]) 
                return false; 
        return true; 
    } 
  
    /* A recursive utility function to solve m 
       coloring  problem */
    boolean graphColoringUtil(int graph[][], int m, 
                              int color[], int v) 
    { 
        /* base case: If all vertices are assigned 
           a color then return true */
        if (v == V) 
            return true; 
  
        /* Consider this vertex v and try different 
           colors */
        for (int c = 1; c <= m; c++) 
        { 
            /* Check if assignment of color c to v 
               is fine*/
            if (isSafe(v, graph, color, c)) 
            { 
                color[v] = c; 
  
                /* recur to assign colors to rest 
                   of the vertices */
                if (graphColoringUtil(graph, m, 
                                      color, v + 1)) 
                    return true; 
  
                /* If assigning color c doesn't lead 
                   to a solution then remove it */
                color[v] = 0; 
            } 
        } 
  
        /* If no color can be assigned to this vertex 
           then return false */
        return false; 
    } 
  
    /* This function solves the m Coloring problem using 
       Backtracking. It mainly uses graphColoringUtil() 
       to solve the problem. It returns false if the m 
       colors cannot be assigned, otherwise return true 
       and  prints assignments of colors to all vertices. 
       Please note that there  may be more than one 
       solutions, this function prints one of the 
       feasible solutions.*/
    boolean graphColoring(int graph[][], int m) 
    { 
        // Initialize all color values as 0. This 
        // initialization is needed correct functioning 
        // of isSafe() 
        color = new int[V]; 
        for (int i = 0; i < V; i++) 
            color[i] = 0; 
  
        // Call graphColoringUtil() for vertex 0 
        if (!graphColoringUtil(graph, m, color, 0)) 
        { 
            System.out.println("Solution does not exist"); 
            return false; 
        } 
  
        // Print the solution 
        printSolution(color); 
        return true; 
    } 
  
    /* A utility function to print solution */
    void printSolution(int color[]) 
    { 
        System.out.println("Solution Exists: Following" + 
                           " are the assigned colors"); 
        for (int i = 0; i < V; i++) 
            System.out.print(" " + color[i] + " "); 
        System.out.println(); 
    } 
  
    // driver program to test above function 
    public static void main(String args[]) 
    { 
        mColoringProblem Coloring = new mColoringProblem(); 
        /* Create following graph and test whether it is 
           3 colorable 
          (3)---(2) 
           |   / | 
           |  /  | 
           | /   | 
          (0)---(1) 
        */
        int graph[][] = {{0, 1, 1, 1}, 
            {1, 0, 1, 0}, 
            {1, 1, 0, 1}, 
            {1, 0, 1, 0}, 
        }; 
        int m = 3; // Number of colors 
        Coloring.graphColoring(graph, m); 
    } 
} 
// This code is contributed by Abhishek Shankhadhar 

کد راه حل مساله رنگ آمیزی گراف در پایتون

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# Python program for solution of M Coloring  
# problem using backtracking 
  
class Graph(): 
  
    def __init__(self, vertices): 
        self.V = vertices 
        self.graph = [[0 for column in range(vertices)]\ 
                              for row in range(vertices)] 
  
    # A utility function to check if the current color assignment 
    # is safe for vertex v 
    def isSafe(self, v, colour, c): 
        for i in range(self.V): 
            if self.graph[v][i] == 1 and colour[i] == c: 
                return False
        return True
      
    # A recursive utility function to solve m 
    # coloring  problem 
    def graphColourUtil(self, m, colour, v): 
        if v == self.V: 
            return True
  
        for c in range(1, m+1): 
            if self.isSafe(v, colour, c) == True: 
                colour[v] = c 
                if self.graphColourUtil(m, colour, v+1) == True: 
                    return True
                colour[v] = 0
  
    def graphColouring(self, m): 
        colour = [0] * self.V 
        if self.graphColourUtil(m, colour, 0) == False: 
            return False
  
        # Print the solution 
        print "Solution exist and Following are the assigned colours:"
        for c in colour: 
            print c, 
        return True
  
# Driver Code 
g  = Graph(4) 
g.graph = [[0,1,1,1], [1,0,1,0], [1,1,0,1], [1,0,1,0]] 
m=3
g.graphColouring(m) 
  
# This code is contributed by Divyanshu Mehta 

خروجی

Solution Exists: Following are the assigned colors
1 2 3 2

منبع: فردارس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:33

0 نظر

ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد

در این مقاله نگاهی به شیوه ساخت انیمیشن‌های اسکرول سفارشی از صفر تا صد با استفاده از SDK فلاتر خواهیم داشت. فلاتر یک ابزار پرقدرت برای ایجاد اپلیکیشن‌های نیتیو موبایل است که به صورتی عالی اجرا می‌شوند و انعطاف‌پذیری خارق‌العاده‌ای در زمینه خلق تجربیات کاربری غنی فراهم می‌سازد.

انیمیشن اسکرول در فلات

اگر به محیط فلاتر دسترسی ندارید به صفحه نصب (+) آن بروید.

شروع

در دمویی که در این مقاله می‌خواهیم بسازیم یک پروژه پیش‌فرض با استفاده از دستور flutter create ایجاد می‌کنیم و تنها از کلاس‌هایی استفاده می‌کنیم که مستقیماً درون فلاتر وجود دارند و لذا نیاز به افزودن هیچ وابستگی به پروژه نداریم. در اغلب موارد، یک وظیفه (مانند انیمیشن سفارشی) می‌تواند مستقیماً و بدون نیاز به کتابخانه‌های اضافی اجرا شود.

ایده اصلی این اپلیکیشن نمونه، ایجاد یک نمای لیستی ساده با چند آیتم است و زمانی که این نما به سمت پایین اسکرول می‌شود، در پس‌زمینه یک چرخ‌دنده در جهت‌های ساعت‌گرد یا پادساعت‌گرد می‌چرخد. این کار با کمک گرفتن از کنترلر اسکرول روی نمای لیستی و ارسال یک پس‌زمینه انیمیشنی به آن صورت می‌گیرد که یک ویجت سفارشی می‌سازد که همگام با موقعیت اسکرول به چرخش درمی‌آید.

نقطه ورود اپلیکیشن

کار خود را با فایل اصلی اپلیکیشن یعنی lib/main.dart آغاز می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import 'package:flutter/material.dart';
import 'demo-card.dart';
import 'items.dart';
import 'animated-bg.dart';
 
void main() => runApp(AnimationDemo());
 
class AnimationDemo extends StatelessWidget {
 
    @override
    Widget build(BuildContext context) {
 
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(primarySwatch: Colors.deepPurple),
            home: MyHomePage(title: 'Flutter Animation Demo'),
        );
    }
}
 
class MyHomePage extends StatefulWidget {
 
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
 
    @override
    _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 
    ScrollController _controller = new ScrollController();
 
    List<DemoCard> get _cards =>
        items.map((Item _item) => DemoCard(_item)).toList();
 
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
 
            backgroundColor: Colors.black,
            appBar: AppBar(title: Text(widget.title)),
            body: Stack(
 
                alignment: AlignmentDirectional.topStart,
                children: <Widget>[
 
                    AnimatedBackground(controller: _controller),
                    Center(
                        child: ListView(
                            controller: _controller,
                            children: _cards
                        )
                    )
                ]
            )
        );
    }
}

در فایل main.dart، برخی دستورهای ایمپورت برای کامپوننت‌های زیر وجود دارند:

demo-card.dart – یک ویجت کارت از یک آیتم می‌سازد.
items.dart – کلاس آیتم را تعریف کرده و محتوایی برای اپلیکیشن دمو ایجاد می‌کند.
animated-bg.dart – ویجت پس‌زمینه انیمیشنی را می‌سازد.

کلاس اپلیکیشن اصلی (AnimationDemo) یک اپلیکیشن ابتدایی می‌سازد که ویجت صفحه اصلی پیش‌فرض (MyHomePage) را پوشش می‌دهد. در کلاس MyHomePage یک مشخصه به نام controller_ وجود دارد که به یک وهله جدید از کلاس ScrollController مقداردهی می‌شود تا در ادامه به هر دو کامپوننت AnimatedBackground و ListView ارسال شود. کامپوننت AnimatedBackground به چرخاندن چرخ رنده در پس‌زمینه می‌پردازد و ListView نیز لیست اسکرول شونده از آیتم‌های دمو را رندر می‌کند. یک مشخصه به نام cards_ نیز وجود دارد که با لیستی از اشیای Item آغاز می‌شود که از items.dart ایمپورت شده‌اند و لیستی از ویجت‌های DemoCard برای رندر شدن در ListView بازگشت می‌دهد.

کلاس Item

نخستین فایل ایمپورت شده که به بررسی آن می‌پردازیم فایل lib/items.dart است:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import 'package:flutter/material.dart';
 
class Item {
 
	String name;
	String description;
	MaterialColor color;
	IconData icon;
	Item(this.name, this.description, this.color, this.icon);
}
 
List<Item> items = [
	Item('A', "Something cool", Colors.amber, Icons.ac_unit),
	Item('B', "Hey, why not?", Colors.cyan, Icons.add_photo_alternate),
	Item('C', "This might be OK", Colors.indigo, Icons.airplay),
	Item('D', "Totally awesome", Colors.green, Icons.crop),
	Item('E', "Rockin out", Colors.pink, Icons.album),
	Item('F', "Take a look", Colors.blue, Icons.adb)
];

کلاس Item ساختمان داده‌ای را ارائه می‌کند که همراه با وهله‌ای از DemoCard ارسال می‌شود تا در ListView رندر شود. در این مورد چیز خاصی زیادی برای تنظیم به جز یک نام، توضیح (که در حال حاضر در دمو بی‌استفاده است)، رنگ و آیکون برای رندر شدن هر آیتم وجود ندارد. لیستی از اشیای آیتم‌ها به عنوان لیستی از محتوای ساده ارائه می‌شود که درون ListView رندر می‌شوند.

کلاس DemoCard

فایل بعدی که بررسی می‌کنیم lib/demo-card.dart نام دارد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import 'package:flutter/material.dart';
import 'items.dart';
 
class DemoCard extends StatelessWidget {
 
    DemoCard(this.item);
    final Item item;
 
    static final Shadow _shadow = Shadow(offset: Offset(2.0, 2.0), color: Colors.black26);
    final TextStyle _style = TextStyle(color: Colors.white70, shadows: [_shadow]); 
 
    @override
    Widget build(BuildContext context) {
 
        return Card(
                
            elevation: 3,
            shape: RoundedRectangleBorder(
                side: BorderSide(width: 1, color: Colors.black26),
                borderRadius: BorderRadius.circular(32)
            ),
            color: item.color.withOpacity(.7),
            child: Container(
 
                constraints: BoxConstraints.expand(height: 256),
                child: RawMaterialButton(
 
                    onPressed: () {  },
                    child: Column(
                        
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                            Row(
                                mainAxisAlignment: MainAxisAlignment.spaceAround,
                                children: <Widget>[
 
                                    Text(item.name, style: _style.copyWith(fontSize: 64)),
                                    Icon(item.icon, color: Colors.white70, size: 72),
                                ]
                            )
                        ],
                    ),
                )
            )
        );
    }
}

کلاس DemoCard در سازنده خود یک آیتم دریافت می‌کند و یک ویجت کارت بازگشت می‌دهد که عناصر Text و Icon را رندر می‌کند که به نمایش نام و آیکون تعریف‌شده برای هر آیتم می‌پردازند. برخی استایل‌بندی‌های ساده نیز با استفاده از Shadow ،TextStyle و RoundedRectangleBorder همراه با ارتفاع کارت (که روی 3 تنظیم‌شده) اعمال می‌شوند. ویجت‌های Column و Row برای گسترش عناصر فرزند روی کارت استفاده می‌شوند.

کلاس AnimatedBackground

ما بهترین بخش کار را برای انتها نگه داشته‌ایم. بنابراین در این بخش به بررسی فایل lib/animated-bg.dart می‌پردازیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import 'package:flutter/material.dart';
import 'dart:math' as math;
 
class AnimatedBackground extends StatefulWidget {
 
    AnimatedBackground({Key key, this.controller}) : super(key: key);
 
    final ScrollController controller;
 
    @override
    _AnimatedBackgroundState createState() => _AnimatedBackgroundState();
}
 
class _AnimatedBackgroundState extends State<AnimatedBackground> {
 
    get offset => widget.controller.hasClients ? widget.controller.offset : 0;
 
    @override
    Widget build(BuildContext context) {
    
        return AnimatedBuilder(
 
            animation: widget.controller,
            builder: (BuildContext context, Widget child) {
 
                return  OverflowBox(
                    
                    maxWidth: double.infinity,
                    alignment: Alignment(4, 3),
                    child: Transform.rotate(
                        angle: ((math.pi * offset) / -1024),
                        child: Icon(Icons.settings, size: 512, color: Colors.white)
                    )
                );
            }
        );
    }
}

در همان ابتدای فایل، کتابخانه dart:math ایمپورت شده تا به ثابت π دسترسی پیدا کنیم که برای اجرای محاسبات تبدیل چرخشی برای گردش چرخ‌دنده مورد نیاز است. سازنده کلاس AnimatedBackground یک مقدار ScrollController می‌گیرد که اقدام به اجرای چرخش می‌کند. مشخصه offset_ در صورتی که کنترلر کلاینت‌هایی داشته باشد یعنی کنترلر به درستی مقداردهی شده باشد و به یک عنصر اسکرول شنونده واقعی مانند ListView قلاب شده باشد یک آفست بازگشت می‌دهد و در غیر این صورت مقدار صفر بازمی‌گرداند. متد build یک AnimatedBuilder بازگشت می‌دهد که کنترلر را می‌گیرد و یک OverflowBox می‌سازد که همراستا با چرخ‌دنده و خارج از صفحه جای می‌گیرد.

مقادیر 4 و 3 موجب می‌شوند که چرخ‌دنده در گوشه پایین-چپ دستگاه تست که یک شبیه‌ساز آیفون XR است، قرار گیرند. در عمل مقادیر Alignment باید از مختصات عرض و ارتفاع صفحه دستگاه محاسبه شوند تا مقادیر دقیقی برای قرار گرفتن چرخ‌دنده در موقعیت مطلوب در هر دستگاه به دست آید. با این حال ما در این مثال تلاش کرده‌ایم همه چیز تا حد امکان ساده باشد.

آخرین بخش جایی است که خود انیمیشن در آن اتفاق می‌افتد و این همان متد استاتیک rotate در کلاس است. این کلاس یک مقدار angle و یک child می‌گیرد و فرزند به وسیله زاویه مورد نظر به چرخش درمی‌آید. در این دمو ما می‌خواهیم که چرخ‌دنده به آرامی حرکت کند و بیشتر به فیزیک واقعی شبیه باشد تا چرخش سریع دیوانه‌وار که در زمان تعیین مقدار چرخش 1:1 به دست می‌آید. همچنین می‌خواهیم چرخ‌دنده در جهت پادساعت‌گرد بچرخد، گرچه از نظر فیزیکی لیست را به حرکت درمی‌آورد بنابراین offset را در math.pi ضرب کرده و سپس حاصل‌ضرب را بر 1024- تقسیم می‌کنیم.

سخن پایانی

این مقاله و پروژه نمونه صرفاً برخی از قابلیت‌هایی که فلاتر برای ایجاد تجربیات کاربری متحرک سفارشی ارائه می‌کنند را نشان دادند. ما با استفاده از تنها چند کلاس ابتدایی و مسیر ساده، یک انیمیشن کامل داریم که یک عنصر کاملاً ملال‌آور مانند صفحه تنظیمات را به چیزی کاملاً جذاب تبدیل می‌کند.

این مفاهیم می‌توانند برای ایجاد «صفحه‌های آغازین» (splash screens)، انیمیشن‌های بارگذاری، گذار صفحه، جلوه‌های نوتیفیکیشن یا هر چیز دیگری مورد استفاده قرار گیرند. تقریباً هر چیزی که یک مقدار Double به عنوان آرگومان می‌گیرد می‌تواند انیمیت شود و در نتیجه پیاده‌سازی سرراستی از جلوه‌های مختلف مانند چرخش در این مثال به دست می‌آید. همچنین میزان شفافیت، موقعیت و بسیاری مشخصه‌های دیگر نیز قابل تنظیم هستند.

منبع: فرادرس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:32

0 نظر

الگوریتم هافمن (Huffman Coding) — به زبان ساده

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:31

0 نظر

ساخت ویجت گفتگوی زنده با پشتیبانی در ری اکت (React) — از صفر تا صد

فتگوی زنده یک روش پشتیبانی از مشتری است که سابقه‌ای طولانی دارد. این روش سریع و کارآمد است چون در آن هر کارمند می‌تواند همزمان به مشتریان زیادی کمک بکند. بهترین نکته این است که می‌توان در طی فرایند خرید به سریع‌ترین روش ممکن به سؤال‌های مشتری پاسخ داد و بدین ترتیب احتمال خرید مشتری بالا‌تر می‌رود.

در این مقاله به روش یکپارچه‌سازی یک گفتگوی زنده در اپلیکیشن‌های React می‌پردازیم. قصد ما این است که شیوه یکپارچه قابلیت گفتگوی زنده در اپلیکیشن ری‌اکت را بدون نگرانی از نگهداری سرور گفتگو و معماری آن پیاده‌سازی کنیم. در ادامه تصویری از آن چه قصد داریم بسازیم را مشاهده می‌کنید.

ما برای راه‌اندازی بخش گفتگوی اپلیکیشن خود از خدمات CometChat Pro استفاده می‌کنیم. CometChat Pro یک API ارتباطی قدرتمند است که امکان افزودن قابلیت‌های گفتگو را به اپلیکیشن فراهم می‌سازد. این API با قابلیت یکپارچه‌سازی آسان و مستندات منظم به شما کمک می‌کند تا ویژگی گفتگوی زنده را با نوشتن چند خط کد به اپلیکیشن خود اضافه کنید. به این منظور ابتدا باید یک حساب رایگان در این وب‌سایت (+) بسازید.

ما در این راهنما علاوه بر CometChat از فناوری‌های زیر نیز استفاده خواهیم کرد:

Create React App
react-chat-widget
Express
Bootstrap
Axios
react-md (spinner component only)

پیشنهاد ما این است که تا انتهای این راهنما همراه باشید تا گام‌به‌گام اپلیکیشن مورد نظر خود را بسازیم، اما اگر بیش از این شتاب دارید، می‌توانید کد کامل این مقاله را در این صفحه گیت‌هاب (+) ملاحظه کنید.

ایجاد اپلیکیشن CometChat

چنان که پیش‌تر گفتیم برای گنجاندن قابلیت گفتگوی زنده در اپلیکیشن از CometChat استفاده می‌کنیم. با این وجود، پیش از یکپارچه‌سازی باید ابتدا اپلیکیشن CometChat را بسازیم.

برای ایجاد یک اپلیکیشن CometChat باید به داشبورد CometChat بروید و روی آیکون + کلیک کنید. ما اپلیکیشن خود را react-chat-widget می‌نامیم، اما شما می‌توانید اپلیکیشن خود را با هر نامی که دوست دارید ایجاد کنید.

ما دو نوع کاربر داریم که به گفتگوی ما اتصال می‌یابند. یک دسته مشتری‌هایی هستند که ویجت گفتگو را باز می‌کنند و دیگری کارمندان بخش پشتیبانی هستند که به گفتگو دسترسی می‌یابند و از طریق داشبورد به پرس‌وجوها پاسخ می‌دهند. به طور کلی «کاربر» مفهومی بنیادی در CometChat محسوب می‌شود.

از آنجا که ما احتمالاً مشتریان زیادی خواهیم داشت، برای هر مشتری که به گفتگو وصل می‌شود، باید به صورت دینامیک یک کاربر CometChat ایجاد کنیم. با این وجود از آنجا که تنها یک کارمند وجود خواهد داشت، می‌توانیم یک Agent را از پیش در داشبورد ایجاد کنیم.

به این منظور در داشبورد به برگه Users بروید و روی Create User کلیک کنید:

برای ID کاربر مقدار ecommerce-agent را وارد کنید و برای نام کارمند نیز مقدار Demo Agent را وارد کنید. اگر قصد دارید از مراحل این راهنما پیروی کنید، از همین نام‌ها استفاده کنید، چون در غیر این صورت در ادامه با مشکل مواجه خواهید شد. ID کاربر را یادداشت کنید، زیرا در ادامه به آن ارجاع خواهیم داد.

پیش از آن که از داشبورد خارج شوید و به کدنویسی بپردازید، باید یک کلید دسترسی کامل CometChat نیز بسازید. در همین صفحه روی برگه API Keys و سپس روی Create API Key کلیک کنید:

ما کلید خود را react-chat-api نامیده‌ایم، اما نام آن اهمیت چندانی ندارد. کلید API و ID اپلیکیشن خود را نیز مانند ID کاربر در جایی یادداشت کنید، چون در ادامه لازم خواهد شد.

راه‌اندازی اکسپرس

در گام قبلی یک کلید دسترسی کامل ساختیم که می‌توانیم از آن برای ایجاد دینامیک CometChat استفاده کنیم. با این که می‌توانیم این کار را در سمت کلاینت نیز اجرا کنیم، اما معنی آن این خواهد بود که کلید دسترسی کامل خصوصی خود را در معرض دسترس عموم قرار می‌دهیم که کار نادرستی است. برای جلوگیری از این مشکل یک سرور اکسپرس می‌سازیم که شرایط زیر را داشته باشد:

کاربر CometChat را با استفاده از کلید دسترسی کامل بسازد.
توکن‌های احراز هویت را بازگشت دهد (در ادامه بیشتر توضیح خواهیم داد)
لیستی از کاربران CometChat برای استفاده بعدی در داشبورد بازگشت دهد.

اینک نوبت آغاز کار است. ابتدا یک دایرکتوری خالی جدید برای اپلیکیشن اکسپرس خود ایجاد می‌کنیم و دستور npm init -y را اجرا می‌کنیم:

mkdir react-express-chat-widgetcd react-express-chat-widgetnpm init –y

سپس اکسپرس و axios را نصب می‌کنیم:

npm install express axios

سپس در فایلی به نام server.js کد زیر را وارد می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const express = require('express');
const axios = require('axios');
const app = express();
 
const appID = '{appID}';
const apiKey = '{apiKey}';
const agentUID = '{agentUID}';
 
const url = 'https://api.cometchat.com/v1';
 
const headers = {
  'Content-Type': 'application/json',
  appid: appID,
  apikey: apiKey,
};

در فایل فوق موارد زیر وجود دارند:

اطلاعات هویتی اپلیکیشن و ID کاربر پاسخگو که قبلاً ایجاد کردیم ذخیره می‌شوند.
UIRL مربوط به API-ی CometChat برای دسترسی راحت‌تر تعریف می‌شود.
یک شیء headers که با استفاده از appID و apiKey ایجاد می‌شود. ما این هدر را به همراه هر درخواست CometChat ارسال می‌کنیم.

در همین فایل اکنون یک مسیر تعریف می‌کنیم تا ایجاد کاربران جدید CometChat را مدیریت کنیم. برای ایجاد یک کاربر جدید باید یک درخواست POST را با UID و نام کاربر ارسال کنیم.

در این راهنما، نام یکسانی را برای همه مشتریان به صورت hard-code می‌نویسیم، یعنی همه مشتری‌ها را «customer» می‌نامیم، اما UID آن‌ها باید یکتا باشد. برای UID می‌توانیم از تابع POST برای ایجاد ID-های یکتا استفاده کنیم.

کد زیر را به فایل server.js اضافه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
app.get('/api/create', (req, res) => {
  const data = {
    uid: new Date().getTime(),
    name: 'customer',
  };
  axios
    .post(`${url}/users`, JSON.stringify(data), {
      headers,
    })
    .then(response => {
      requestAuthToken(response.data.data.uid)
        .then(token => {
          console.log('Success:' + JSON.stringify(token));
          res.json(token);
        })
        .catch(error => console.error('Error:', error));
    })
    .catch(error => console.error('Error:', error));
});
 
app.get('/api/auth', (req, res) => {
  const uid = req.query.uid;
  requestAuthToken(uid)
    .then(token => {
      console.log('Success:' + JSON.stringify(token));
      res.json(token);
    })
    .catch(error => console.error('Error:', error));
});
 
const requestAuthToken = uid => {
  return new Promise((resolve, reject) => {
    axios
      .post(`${url}/users/${uid}/auth_tokens`, null, {
        headers,
      })
      .then(response => {
        console.log('New Auth Token:', response.data);
        resolve(response.data.data);
      })
      .catch(error => reject(error));
  });
};

زمانی که این مسیر فراخوانی شود، اکسپرس کارهای زیر را انجام می‌دهد:

یک درخواست POST به آدرس https://api.cometchat.com/v1/users با headers صحیح و اطلاعاتی در مورد کاربر جدید ارسال می‌کند.
توکن احراز هویت را برای کاربر جدید واکشی می‌کند.
و در نهایت آن را به فراخواننده بازمی‌گرداند.

ما همچنین یک تابع به نام requestAuthToken می‌سازیم تا به واکشی کردن توکن احراز هویت کمک کند. سپس در همان فایل یک مسیر احراز هویت می‌سازیم که آن را برای ایجاد توکن جهت کاربران بازگشتی فراخوانی خواهیم کرد:

1
2
3
4
5
6
7
8
9
app.get('/api/auth', (req, res) => {
  const uid = req.query.uid;
  requestAuthToken(uid)
    .then(token => {
      console.log('Success:' + JSON.stringify(token));
      res.json(token);
    })
    .catch(error => console.error('Error:', error));
});

در نهایت یک تابع برای بازگشت لیستی از کاربران ایجاد کرده و agent یا همان کارمند پشتیبانی را از آن حذف می‌کنیم. ما این endpoint را متعاقباً از داشبورد فراخوانی می‌کنیم تا لیستی از کاربران را که agent می‌تواند با آن‌ها صحبت کند نمایش دهیم. البته کارمند ما نمی‌تواند با خودش صحبت کند و از این رو خودش را از لیست فیلتر می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.get('/api/users', (req, res) => {
  axios
    .get(`${url}/users`, {
      headers,
    })
    .then(response => {
      const { data } = response.data;
      const filterAgentData = data.filter(data => {
        return data.uid !== agentUID;
      });
      res.json(filterAgentData);
    })
    .catch(error => console.error('Error:', error));
});

در انتهای فایل server.js، سرور را اجرا می‌کنیم:

1
2
3
4
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

اگر از ابتدای این مقاله با ما همگام بوده باشید، اینک فایل Server.js باید به صورت زیر در آمده باشد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
const express = require('express');
const axios = require('axios');
const app = express();
 
const appID = '{appID}';
const apiKey = '{apiKey}';
const agentUID = '{agentUID}';
 
const url = 'https://api.cometchat.com/v1';
 
const headers = {
  'Content-Type': 'application/json',
  appid: appID,
  apikey: apiKey,
};
 
app.get('/api/create', (req, res) => {
  const data = {
    uid: new Date().getTime(),
    name: 'customer',
  };
  axios
    .post(`${url}/users`, JSON.stringify(data), {
      headers,
    })
    .then(response => {
      requestAuthToken(response.data.data.uid)
        .then(token => {
          console.log('Success:' + JSON.stringify(token));
          res.json(token);
        })
        .catch(error => console.error('Error:', error));
    })
    .catch(error => console.error('Error:', error));
});
 
app.get('/api/auth', (req, res) => {
  const uid = req.query.uid;
  requestAuthToken(uid)
    .then(token => {
      console.log('Success:' + JSON.stringify(token));
      res.json(token);
    })
    .catch(error => console.error('Error:', error));
});
 
const requestAuthToken = uid => {
  return new Promise((resolve, reject) => {
    axios
      .post(`${url}/users/${uid}/auth_tokens`, null, {
        headers,
      })
      .then(response => {
        console.log('New Auth Token:', response.data);
        resolve(response.data.data);
      })
      .catch(error => reject(error));
  });
};
 
app.get('/api/users', (req, res) => {
  axios
    .get(`${url}/users`, {
      headers,
    })
    .then(response => {
      const { data } = response.data;
      const filterAgentData = data.filter(data => {
        return data.uid !== agentUID;
      });
      res.json(filterAgentData);
    })
    .catch(error => console.error('Error:', error));
});
 
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
});

در یک پنجره ترمینال دستور node server.js را اجرا کنید و منتظر باشید تا پیامی به صورت زیر نمایش یابد:

Listening on port 5000

اکنون باید زمان مناسبی برای تست endpoint-ها به همراه curl یا Postman باشد تا مطمئن شویم که کار می‌کنند و سپس به بخش کدنویسی کلاینت بپردازیم.

راه‌اندازی اپلیکیشن React

درون دایرکتوری خود دستور npx create-react-app را اجرا کنید تا ساختار اولیه یک اپلیکیشن ری‌اکت ایجاد شود:

npx create-react-app client

ساختار پوشه شما اینک باید مانند زیر باشد:

|-- express-react-chat-widget |-- package-lock.json |-- package.json |-- server.js |-- client |--.gitignore |-- package-lock.json |-- package.json |-- public |-- src

زمانی که اپلیکیشن ری‌اکت آماده شد، به دایرکتوری client بروید و ماژول‌های زیر را نصب کنید:

cd clientnpm install @cometchat-pro/chat react-chat-widget react-router-dom bootstrap react-md-spinner

اپلیکیشن Create React برای bootstrap کردن یک اپلیکیشن ری‌اکت کاملاً مفید است، اما فایل‌های زیادی تولید می‌کند که مورد نیاز ما نیستند و این‌ها شامل فایل‌های تست و از این دست هستند. پیش از اقدام به کدنویسی، همه چیز را از دایرکتوری client/src حذف کنید تا از صفر کار خود را شروع کنیم. برای شروع یک فایل config.js با ID اپلیکیشن و UID کارمند در مسیر client/src/config.js با محتوای زیر بسازید:

1
2
3
4
5
6
const config = {
  appID: '{appID}',
  agentUID: '{agentUID}',
}
 
export default config;

این کد مبنایی است که می‌توان برای ارجاع به اطلاعات احراز هویت CometChat از هر کجا مورد استفاده قرار داد. با این که ما آن را کد مبنا می‌نامیم، اما این فرصت را نیز داریم که یک فایل index.css بسازیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
 
 
.message {
  overflow: hidden;
}
 
.balon1 {
  float: right;
  background: #35cce6;
  border-radius: 10px;
}
 
.balon2 {
  float: left;
  background: #f4f7f9;
  border-radius: 10px;
}

ما این فایل را در ادامه از داشبورد مورد ارجاع قرار می‌دهیم. اکنون در فایل با نام index.js کد زیر را درج کنید:

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import { CometChat } from '@cometchat-pro/chat';
import config from './config';
 
CometChat.init(config.appID)
 
ReactDOM.render(<App />, document.getElementById('root'));

در این کد ما Bootstrap ،CometChat و فایل پیکربندی را که پیش از مقداردهی اولیه CometChat و رندر کردن App ساخته‌ایم ایمپورت می‌کنیم. اگر در این راهنما با ما همگام بوده باشید، متوجه شده‌اید که ما هنوز App را تعریف نکرده‌ایم. بنابراین در این مرحله این کار را انجام می‌دهیم. در فایل به نام App.js کد زیر را درج کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
 
import Client from './Client';
import Agent from './Agent';
 
const App = () => {
  return (
    <Router>
      <React.Fragment>
        <ul>
          <li>
            <Link to='/'>Client Home</Link>
          </li>
          <li>
            <Link to='/agent'>Agent Dashboard</Link>
          </li>
        </ul>
        <hr />
        <Route exact path='/' component={Client} />
        <Route path='/agent' component={Agent} />
      </React.Fragment>
    </Router>
  );
}
 
export default App;

در این کد ما دو مسیر را تعریف کردیم:

مسیر / یا Customer home جهت برقراری اتصال با کارمند پشتیبانی است.
و مسیر agent/ یا Agent Dashboard برای دسترسی سریع و راحت به داشبورد تعریف شده است.

در ادامه ابتدا کامپوننت در دید مشتری را بررسی می‌کنیم. ما آن را کامپوننت کلاینت می‌نامیم.

ایجاد کامپوننت کلاینت

کامپوننت کلاینت ما دو مسئولیت عمده خواهد داشت:

ایجاد یک کاربر CometChat جدید از طریق سرور Express در زمانی که نخستین مشتری وصل می‌شود.
ارسال و دریافت پیام‌ها به صورت آنی.

یک فایل به نام Client.js بسازید و کد زیر را در آن درج کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import React, {Component} from 'react';
import {Widget, addResponseMessage, addUserMessage, dropMessages} from 'react-chat-widget';
import {CometChat} from '@cometchat-pro/chat';
 
import config from './config';
import 'react-chat-widget/lib/styles.css';
 
const agentUID = config.agentUID;
const CUSTOMER_MESSAGE_LISTENER_KEY = "client-listener";
const limit = 30;
 
class Client extends Component {
  componentDidMount() {
    addResponseMessage('Welcome to our store!');
    addResponseMessage('Are you looking for anything in particular?');
    
    let uid = localStorage.getItem("cc-uid");
    // check for uid, if exist then get auth token, login, create message listener and fetch previous messages
   if ( uid !== null) {
     this.fetchAuthToken(uid).then(
       result => {
         console.log('auth token fetched', result);
         CometChat.login(result.authToken)
         .then( user => {
           console.log("Login successfully:", { user });
           this.createMessageListener();
           this.fetchPreviousMessages();
           
        })
       },
       error => {
         console.log('Initialization failed with error:', error);
       }
     );
   }
  }
 
  fetchAuthToken = async uid => {
    const response = await fetch(`/api/auth?uid=${uid}`)
    const result = await response.json()
    return result;
  }
 
  createUser = async () => {
    const response = await fetch(`/api/create`)
    const result = await response.json()
    return result;
  }
 
  createMessageListener = () => {
    CometChat.addMessageListener(
      CUSTOMER_MESSAGE_LISTENER_KEY,
      new CometChat.MessageListener({
        onTextMessageReceived: message => {
          console.log("Incoming Message Log", { message });
          addResponseMessage(message.text);
        }
      })
    );
  }
 
  fetchPreviousMessages = () => {
    var messagesRequest = new CometChat.MessagesRequestBuilder()
    .setUID(agentUID)
    .setLimit(limit)
    .build();
 
    messagesRequest.fetchPrevious().then(
      messages => {
        console.log("Message list fetched:", messages);
        messages.forEach( message => {
          if(message.receiver !== agentUID){
            addResponseMessage(message.text);
          } else {
            addUserMessage(message.text)
          }
        });
      },
      error => {
        console.log("Message fetching failed with error:", error);
      }
    );
  }
 
  handleNewUserMessage = newMessage => {
    console.log(`New message incoming! ${newMessage}`);
    var textMessage = new CometChat.TextMessage(
      agentUID,
      newMessage,
      CometChat.MESSAGE_TYPE.TEXT,
      CometChat.RECEIVER_TYPE.USER
    );
    let uid = localStorage.getItem("cc-uid");
 
    if (uid === null) {
      this.createUser().then(
        result => {
          console.log('auth token fetched', result);
          localStorage.setItem("cc-uid",result.uid)
          CometChat.login(result.authToken)
          .then(user => {
            console.log("Login successfully:", { user });
            CometChat.sendMessage(textMessage).then(
              message => {
                console.log('Message sent successfully:', message);
              },
              error => {
                console.log('Message sending failed with error:', error);
              }
            );
            CometChat.addMessageListener(
              CUSTOMER_MESSAGE_LISTENER_KEY,
              new CometChat.MessageListener({
                onTextMessageReceived: message => {
                  console.log("Incoming Message Log", { message });
                  addResponseMessage(message.text);
                }
              })
            );
          })
      },
      error => {
        console.log('Initialization failed with error:', error);
      })
    } else {
      // we have uid, do send
      CometChat.sendMessage(textMessage).then(
        message => {
          console.log('Message sent successfully:', message);
        },
        error => {
          console.log('Message sending failed with error:', error);
        }
      );
    }
  };
 
  componentWillUnmount() {
    CometChat.removeMessageListener(CUSTOMER_MESSAGE_LISTENER_KEY);
    CometChat.logout();
    dropMessages();
  }
 
  render() {
    return (
      <div className='App'>
        <Widget
          handleNewUserMessage={this.handleNewUserMessage}
          title='My E-commerce Live Chat'
          subtitle='Ready to help you'
        />
      </div>
    );
  }
}
 
export default Client;

اگر فکر می‌کنید این کد حجم بالایی دارد جای نگرانی نیست چون در ادامه آن را جزء به جزء توضیح می‌دهیم.

تابع render به قدر کافی ساده است، در واقع وظیفه اصلی آن رندر کردن react-chat-widget است. بخش زیادی از کد اختصاص به مدیریت پیام جدید ارسالی از سوی مشتری در تابعی به نام handleNewUserMessage دارد.

به طور خلاصه، ابتدا باید بررسی کنیم که آیا UID مشتری در localStorage وجود دارد یا نه. اگر چنین باشد، از این UID برای لاگین کردن کاربر و ارسال پیام استفاده می‌کنیم. در غیر این صورت تابع ()createUser را فراخوانی می‌کنیم و از مقدار بازگشتی برای لاگین کردن کاربر استفاده می‌کنیم. این تابع createUser یک endpoint را فراخوانی می‌کند که قبلاً در همین راهنما تعریف کردیم.

در نهایت در یک تابع چرخه عمر ری‌اکت componentWillUnmount را فرا می‌خوانیم و به خاطر می‌سپاریم که شنونده پیام را حذف کنیم. پیش از ادامه باید به یک نکته کوچک اشاره کنیم. در کد فوق، به جای وارد کردن URL سرور و پورت آن (localhost:5000/users) یا چیزی مانند آن در فرانت‌اند، می‌توانیم یک گزینه proxy به فایل package.json اضافه کنیم. بدین ترتیب می‌توانیم به جای localhost:5000/users// صرفاً از /users استفاده کنیم:

"browserslist": [">0.2%"، "not dead"، "not ie <= 11"، "not op_mini all"]،"proxy": http://localhost:5000

در این مرحله اپلیکیشن مانند زیر خواهد بود:

چنان که مشاهده می‌کنید، می‌توان پیام‌ها را ارسال یا دریافت کرد، اما اگر صفحه را رفرش کنیم، پیام‌های گفتگو ناپدید می‌شوند و این خوب نیست.

برای حل این مشکل یک متد componentDidMount تنظیم می‌کنیم که به دنبال UID مشتری در localStorage می‌گردد، به طوری که وقتی مشتریان صفحه را رفرش بکنند، می‌توانند گفتگو را از همان جایی که مانده بود ادامه دهند.

زمانی که UID را پیدا کردیم، می‌توانیم از آن برای مقداردهی اولیه یک زنجیره از متدها جهت login ،fetch کردن پیام‌های قبلی و ایجاد listener برای پیام‌های ورودی استفاده کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  componentDidMount() {
    addResponseMessage('Welcome to our store!');
    addResponseMessage('Are you looking for anything in particular?');
    
    let uid = localStorage.getItem("cc-uid");
    // check for uid, if exist then get auth token, login, create message listener and fetch previous messages
   if ( uid !== null) {
     this.fetchAuthToken(uid).then(
       result => {
         console.log('auth token fetched', result);
         CometChat.login(result.authToken)
         .then( user => {
           console.log("Login successfully:", { user });
           this.createMessageListener();
           this.fetchPreviousMessages();
           
        })
       },
       error => {
         console.log('Initialization failed with error:', error);
       }
     );
   }
  }
 
  fetchAuthToken = async uid => {
    const response = await fetch(`/api/auth?uid=${uid}`)
    const result = await response.json()
    return result;
  }
 
  createUser = async () => {
    const response = await fetch(`/api/create`)
    const result = await response.json()
    return result;
  }
 
  createMessageListener = () => {
    CometChat.addMessageListener(
      CUSTOMER_MESSAGE_LISTENER_KEY,
      new CometChat.MessageListener({
        onTextMessageReceived: message => {
          console.log("Incoming Message Log", { message });
          addResponseMessage(message.text);
        }
      })
    );
  }
 
  fetchPreviousMessages = () => {
    var messagesRequest = new CometChat.MessagesRequestBuilder()
    .setUID(agentUID)
    .setLimit(limit)
    .build();
 
    messagesRequest.fetchPrevious().then(
      messages => {
        console.log("Message list fetched:", messages);
        messages.forEach( message => {
          if(message.receiver !== agentUID){
            addResponseMessage(message.text);
          } else {
            addUserMessage(message.text)
          }
        });
      },
      error => {
        console.log("Message fetching failed with error:", error);
      }
    );
  }

اکنون اگر صفحه را رفرش کنیم، اپلیکیشن تلاش خواهد کرد در CometChat لاگین کند و پیام‌های قبلی را به صورت خودکار با گشتن به دنبال UID مشتری در localStorage بارگذاری کند و این وضعیت مناسبی محسوب می‌شود.

اما همچنان مشکل کوچکی وجود دارد. چنان که مشخص شد، هنوز راهی برای کارمند پشتیبانی وجود ندارد که به پیام مشتری پاسخ دهد. ما این مشکل را از طریق ساختن داشبورد کارمند حل می‌کنیم. در این حالت کارمند می‌تواند به پیام‌های گفتگو که از سوی مشتریان می‌رسند پاسخ دهد. بدن ترتیب کار ما در فایل Client.js به پایان می‌رسد و در ادامه به ساخت فایل Agent.js می‌پردازیم.

ایجاد کامپوننت agent

کارکرد اصلی داشبورد agent دریافت همه مشتریان از CometChat Pro و نمایش تمام پیام‌های ورودی از مشتریان جدید در لیست گفتگوی مشتریان کارمند است تا بتواند روی آن‌ها کلیک کرده و پاسخ دهد. در واقع کارکرد اصلی بسیار شبیه به کلاینت است.

هنگام استفاده از CometChat به‌راحتی می‌توان چندین کارمند ایجاد کرد، اما برای این که همه چیز ساده بماند و درگیر مدیریت کاربر نشویم، در این راهنما از یک کارمند (agent) استفاده می‌کنیم که قبلاً آن را ایجاد کرده‌ایم. یک کامپوننت به نام Agent.js ایجاد کنید و حالت اولیه آن را به صورت زیر تعیین کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, {Component} from 'react';
 
import {CometChat} from '@cometchat-pro/chat';
import MDSpinner from "react-md-spinner";
import config from './config';
 
const agentUID = config.agentUID;
const AGENT_MESSAGE_LISTENER_KEY = 'agent-listener'
const limit = 30;
 
class Agent extends Component {
 
  state = {
    customers: [],
    selectedCustomer: '',
    chat: [],
    chatIsLoading: false,
    customerIsLoading:true
  }

در همان فایل، یک متد به نام componentDidMount ایجاد کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
componentDidMount() {
    this.fetchAuthToken(agentUID).then(authToken => {
        console.log('auth token fetched', authToken);
        CometChat.login(authToken).then(user => {
            console.log("Login successfully:", {
                user
            }); // after login, fetch all users        // put them into customer state        
            this.fetchUsers().then(result => {
                this.setState({
                    customers: result,
                    customerIsLoading: false
                })
            });
            CometChat.addMessageListener(AGENT_MESSAGE_LISTENER_KEY, new CometChat.MessageListener({
                onTextMessageReceived: message => {
                    let {
                        customers,
                        selectedCustomer,
                        chat
                    } = this.state;
                    console.log("Incoming Message Log", {
                        message
                    }); // check incoming message              // if from the same customer agent is currently chatting              // push a new chat item into chat state              
                    if (selectedCustomer === message.sender.uid) {
                        chat.push(message);
                        this.setState({
                            chat
                        })
                    } else { // if new customer, push a new customer into customer state               
                        let aRegisteredCustomer = customers.filter(customer => {
                            return customer.uid === message.sender.uid
                        });
                        if (!aRegisteredCustomer.length) {
                            customers.push(message.sender) this.setState({
                                customers
                            })
                        }
                    }
                }
            }));
        })
    }, error => {
        console.log('Initialization failed with error:', error);
    });
}
fetchUsers = async () => {
    const response = await fetch(`/api/users`) const result = await response.json() return result;
}

در کد فوق کارهای زیادی انجام می‌یابند. در ادامه آن‌ها را به اختصار مرور می‌کنیم.

ابتدا به صورت خودکار agent را لاگین کرده و همه کاربران گفتگوی مربوطه را از سرور واکشی می‌کنیم.
سپس یک شنونده پیام ورودی می‌سازیم. هر بار که یک پیام در گفتگوی منتخب دریافت می‌شود، آن را به «حالت گفتگو» (Chat State) ارسال می‌کنیم که به نوبه خود موجب به‌روزرسانی UI می‌شود.
اگر پیام ورودی از گفتگوی انتخاب شده کنونی نباشد، بررسی می‌کنیم که آیا پیام جدید از مشتری e ثبت نام کرده آمده است یا نه. اگر چنین نبود، مشتری جدید را به «حالت مشتری» ارسال می‌کنیم.

احتمالاً به خاطر دارید که API اکسپرس را قبلاً برای دریافت لیستی از کاربران ثبت نام کرده ساختیم. از این API برای تشکیل لیستی از کاربران در سمت چپ داشبورد استفاده می‌کنیم. این لیست را با استفاده از ترکیب کلاس‌های بوت‌استرپ و فایل index.css که قبلاً تعریف کردیم، در سمت چپ داشبورد قرار می‌دهیم.

سپس یک تابع رندر می‌سازیم. این تابع اینترفیس گفتگو را رندر می‌کند و آن را با استفاده از بوت‌استرپ استایل‌دهی می‌کند. برای این که خواندن کد آسان‌تر شود، CustomerList و ChatBox را در کامپوننت‌های خاص خود قرار می‌دهیم که می‌توانند در فایل یکسانی تعریف شوند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
render() {
        return ( < div className = 'container-fluid' > < div className = 'row' > < div className = 'col-md-2' > < /div>         <
            div className = "col-md-8 h-100pr border rounded" > < div className = 'row' > < div className = 'col-lg-4 col-xs-12 bg-light'
            style = {
                {
                    height: 658
                }
            } > < div className = 'row p-3' > < h2 > Customer List < /h2 > < /div > < div className = 'row ml-0 mr-0 h-75 bg-white border rounded'
            style = {
                {
                    height: '100%',
                    overflow: 'auto'
                }
            } > {
                / * The CustomerList component * /
            } < CustomerList {
                ...this.state
            }
            selectCustomer = {
                this.selectCustomer
            }
            / > < /div > < /div > < div className = 'col-lg-8 col-xs-12 bg-light'
            style = {
                {
                    height: 658
                }
            } > < div className = 'row p-3 bg-white' > < h2 > Who you gonna chat with ? < /h2>              </div >
            <
            div className = 'row pt-5 bg-white'
            style = {
                {
                    height: 530,
                    overflow: 'auto'
                }
            } > {
                /* The ChatBox component */
            } < ChatBox {
                ...this.state
            }
            />              </div > < div className = "row bg-light"
            style = {
                {
                    bottom: 0,
                    width: '100%'
                }
            } > < form className = "row m-0 p-0 w-100"
            onSubmit = {
                this.handleSubmit
            } > < div className = "col-9 m-0 p-1" > < input id = "text"
            className = "mw-100 border rounded form-control"
            type = "text"
            name = "text"
            ref = "message"
            placeholder = "Type a message..." / > < /div>               <
            div className = "col-3 m-0 p-1" > < button className = "btn btn-outline-secondary rounded border w-100"
            title = "Send"
            style = {
                {
                    paddingRight: 16
                }
            } > Send < /button > < /div > < /form > < /div > < /div > < /div > < /div > < /div > < /div > )
        }

کامپوننت Chatbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class ChatBox extends Component {
  render(){
    const {chat, chatIsLoading} = this.props;
    if (chatIsLoading) {
      return (
        <div className='col-xl-12 my-auto text-center'>
          <MDSpinner size='72'/>
        </div>
      )
    }
    else {
      return (
        <div className='col-xl-12'>
          { 
            chat
            .map(chat => 
              <div key={chat.id} className="message">
                <div className={`${chat.receiver !== agentUID ? 'balon1': 'balon2'} p-3 m-1`}>
                  {chat.text}
                </div>
              </div>)
          }  
        </div>
      )
    }
  }
 
}

کامپوننت CustomerList

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class CustomerList extends Component {
  render(){
    const {customers, customerIsLoading, selectedCustomer} = this.props;
    if (customerIsLoading) {
      return (
        <div className='col-xl-12 my-auto text-center'>
          <MDSpinner size='72'/>
        </div>
      )
    }
    else {
      return (
        <ul className="list-group list-group-flush w-100">
          { 
            customers
            .map(customer => 
              <li 
                key={customer.uid} 
                className={`list-group-item ${customer.uid === selectedCustomer ? 'active':''}`} 
                onClick={() => this.props.selectCustomer(customer.uid)}>{customer.name} </li>)
          }                
        </ul>
      )
    }
  }
}

بدین ترتیب مبنایی برای UI ایجاد می‌شود، اما هنوز امکان ارسال پیام وجود ندارد. برای ارسال پیام‌ها باید یک دستگیره برای مواردی که کارمند یک پیام جدید را تحویل می‌دهد داشته باشیم. شیوه ارسال پیام‌ها اینک باید برای شما روشن باشد، زیرا از همان فراخوانی sendMessage که در سمت کلاینت استفاده کردیم بهره بخواهیم گرفت.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  handleSubmit = event => {
    event.preventDefault();
    let message = this.refs.message.value;
 
    var textMessage = new CometChat.TextMessage(
      this.state.selectedCustomer,
      message,
      CometChat.MESSAGE_TYPE.TEXT,
      CometChat.RECEIVER_TYPE.USER
    );
 
    CometChat.sendMessage(textMessage).then(
      message => {
        let {chat} = this.state;
        console.log('Message sent successfully:', message);
        chat.push(message);
        this.setState({
          chat
        })
      },
      error => {
        console.log('Message sending failed with error:', error);
      }
    );
    this.refs.message.value='';
  }

همچنین می‌خواهیم کارمند را قادر سازیم تا سوابق پیام‌ها را مانند حالتی که برای مشتری ایجاد کردیم، ببیند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  selectCustomer = uid => {
    this.setState({
      selectedCustomer: uid
    }, ()=> {this.fetchPreviousMessage(uid)})
  }
 
  fetchPreviousMessage = uid => {
    this.setState({
      chat: [],
      chatIsLoading: true
    }, () => {
      var messagesRequest = new CometChat.MessagesRequestBuilder()
      .setUID(uid)
      .setLimit(limit)
      .build();
 
      messagesRequest.fetchPrevious().then(
        messages => {
          console.log("Message list fetched:", messages);
          this.setState({
            chat: messages,
            chatIsLoading: false
          })
        },
        error => {
          console.log("Message fetching failed with error:", error);
        }
      );
    });
  }

به خاطر داشته باشید که شنونده پیام را در زمان حذف کامپوننت پاک کنید:

1
2
3
4
  componentWillUnmount(){
    CometChat.removeMessageListener(AGENT_MESSAGE_LISTENER_KEY);
    CometChat.logout();
  }

محصول نهایی به صورت زیر خواهد بود:

اگر کنجکاو هستید که کاربران Superhero از کجا می‌آیند باید اشاره کنیم که این کاربران به صورت خودکار از سوی CometChat Pro در زمان ایجاد اپلیکیشن جدید ایجاد می‌شوند. پیش از استفاده عملیاتی از اپلیکیشن حتماً آن‌ها را حذف کنید.

اکنون کارمند پشتیبانی و مشتریان آماده گفتگو با همدیگر هستند. شما می‌توانید Client Home و Agent Dashboard را در پنجره‌های جداگانه‌ای باز کرده و این موضوع را بررسی کنید.

سخن پایانی

بدین ترتیب ما موفق شدیم ویجت گفتگوی زنده کاملاً اختصاصی خود را برای اپلیکیشن React در زمانی بسیار کوتاه بسازیم. در واقع، CometChat Pro به ما امکان می‌دهد که پیام‌ها را با نوشتن تنها چند خط کد ارسال و دریافت کنیم. بدین ترتیب دیگر نیاز به راه‌اندازی سرور گفتگوی شخصی و معماری آن وجود ندارد. البته این سرویس قابلیت‌های بسیار بیشتری از ساخت یک ویجت گفتگو دارد که بررسی همه آن‌ها از حیطه این مقاله خارج است.

منبع: فرادرس

مشاوره سه‌شنبه 25 تیر 1398 ساعت 12:51

0 نظر

332
1
...
51
52
صفحه 53
54
55
...
67

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

گزاره goto در ++C — به زبان ساده

ساختار گزاره goto

مثال برای گزاره goto

خروجی

چرا نباید از گزاره goto استفاده کنیم؟

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد — به زبان ساده

تعریف مساله

الگوریتم ساده

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

کد راه حل مساله رنگ آمیزی گراف در ++C/C

کد راه حل مساله رنگ آمیزی گراف در جاوا

کد راه حل مساله رنگ آمیزی گراف در پایتون

خروجی

ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد

شروع

نقطه ورود اپلیکیشن

کلاس Item

کلاس DemoCard

کلاس AnimatedBackground

سخن پایانی

الگوریتم هافمن (Huffman Coding) — به زبان ساده

ساخت ویجت گفتگوی زنده با پشتیبانی در ری اکت (React) — از صفر تا صد

ایجاد اپلیکیشن CometChat

راه‌اندازی اکسپرس

راه‌اندازی اپلیکیشن React

ایجاد کامپوننت کلاینت

ایجاد کامپوننت agent

کامپوننت Chatbox

کامپوننت CustomerList

سخن پایانی