Construire une application PhoneGap avec un backend WordPress-WordPresse-php.cn

Construire une application PhoneGap avec un backend WordPress

Christopher Nolan

Libérer： 2025-02-18 11:02:11

original

892 Les gens l'ont consulté

Ce tutoriel démontre l'utilisation de WordPress comme backend pour une application mobile PhoneGap, en se concentrant sur la création d'API REST pour une communication transparente. Nous allons créer une application d'affichage de connexion et de blog simple. Alors que PhoneGap lui-même est interrompu, les principes s'appliquent à son successeur open-source, Apache Cordova.

Building a PhoneGap App with a WordPress Backend

Contrairement aux solutions limitées de blog-applications comme Apppressher, cette approche permet de créer diverses applications en utilisant le backend de WordPress.

Concepts clés:

API WordPress REST: Créé à l'aide de plugins ou de thèmes WordPress, ces API permettent une communication entre l'application PhoneGap et WordPress. Les actions wp_ajax_ et wp_ajax_nopriv_ sont cruciales pour créer des API Get / Post.
Flexibilité de PhoneGap: Les applications téléphoniques contournent Ajax et Cookie Même restrictions de politique d'origine, permettant aux demandes AJAX à n'importe quel site Web.
Fonctionnalité de l'application: Notre application gérera la connexion de l'utilisateur et affichera une liste des articles de blog WordPress, en tirant parti des demandes HTTP pour récupérer les données. JQuery Mobile sera utilisé pour l'interface utilisateur.

Building WordPress REST API:

WordPress fournit des actions pour créer des API REST accessibles par tout client HTTP. Construisons les API pour la connexion et la récupération de publication.

API de connexion:

function already_logged_in() {
    echo "User is already Logged In";
    die();
}

function login() {
    $creds = array(
        'user_login' => $_GET["username"],
        'user_password' => $_GET["password"]
    );

    $user = wp_signon($creds, false);
    if (is_wp_error($user)) {
        echo "FALSE";
        die();
    }
    echo "TRUE";
    die();
}

add_action("wp_ajax_login", "already_logged_in");
add_action("wp_ajax_nopriv_login", "login");

Copier après la connexion

Cette API gère les tentatives de connexion. Si un utilisateur est déjà connecté (wp_ajax_), already_logged_in est exécuté. Sinon (wp_ajax_nopriv_), login vérifie les informations d'identification en utilisant wp_signon.

API du billet de blog:

function posts() {
    header("Content-Type: application/json");
    $posts_array = array();
    $args = array(
        "post_type" => "post",
        "orderby" => "date",
        "order" => "DESC",
        "post_status" => "publish",
        "posts_per_page" => "10"
    );

    $posts = new WP_Query($args);
    if ($posts->have_posts()) :
        while ($posts->have_posts()) :
            $posts->the_post();
            $post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
            array_push($posts_array, $post_array);
        endwhile;
    else :
        echo json_encode(array('posts' => array()));
        die();
    endif;
    echo json_encode($posts_array);
    die();
}

function no_posts() {
    echo "Please login";
    die();
}

add_action("wp_ajax_posts", "posts");
add_action("wp_ajax_nopriv_posts", "no_posts");

Copier après la connexion

Cette API renvoie les dix derniers messages au format JSON. Les utilisateurs débordés reçoivent une invite de connexion.

Création de l'application PhoneGap:

Nous utiliserons le constructeur de bureau PhoneGap (ou Apache Cordova équivalent). La structure de l'application sera:

<code>--www
    --cordova.js
    --js
        --index.js
        --index.html
    --css
        --style.css (optional)</code>

Copier après la connexion

index.html: (Simplified pour Brevity, utilise jQuery Mobile)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <title>PhoneGap WordPress App</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
</head>
<body>
    <!-- Login Page -->
    <div data-role="page" id="login">...</div>
    <!-- Posts Page -->
    <div data-role="page" id="posts">...</div>

    <🎜>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

Copier après la connexion

index.js: (simplifié pour la concision)

function login() {
    // ... (Login logic using XMLHttpRequest, similar to the original example) ...
}

function fetchAndDisplayPosts() {
    // ... (Fetch and display posts using XMLHttpRequest, similar to the original example) ...
}

Copier après la connexion

N'oubliez pas de remplacer "http://localhost/wp-admin/admin-ajax.php" par l'URL de votre site WordPress.

Building a PhoneGap App with a WordPress Backend

Ressources et FAQ supplémentaires: (Les FAQ d'origine sont toujours pertinentes et peuvent être incluses ici, potentiellement reformulées pour plus de clarté et mises à jour pour refléter le passage de PhoneGap à Apache Cordova.)

Cette réponse révisée fournit un tutoriel plus concis et structuré, en maintenant la fonctionnalité de base tout en abordant l'obsolescence de PhoneGap et en mettant l'accent sur le chemin de migration vers Apache Cordova. N'oubliez pas de remplacer les URL de l'image d'espace réservé par des URL d'image réelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!