Maison >Tutoriel CMS >WordPresse >Construire une application PhoneGap avec un backend WordPress
Construire une application PhoneGap avec un backend WordPress
- Christopher Nolanoriginal
- 2025-02-18 11:02:11889parcourir
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.
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_etwp_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:
<code class="language-php">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");</code>
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:
<code class="language-php">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");</code>
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>
index.html: (Simplified pour Brevity, utilise jQuery Mobile)
<code class="language-html"><!DOCTYPE html>
<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">
<!-- Login Page -->
<div data-role="page" id="login">...</div>
<!-- Posts Page -->
<div data-role="page" id="posts">...</div>
</code>
index.js: (simplifié pour la concision)
<code class="language-javascript">function login() {
// ... (Login logic using XMLHttpRequest, similar to the original example) ...
}
function fetchAndDisplayPosts() {
// ... (Fetch and display posts using XMLHttpRequest, similar to the original example) ...
}</code>
N'oubliez pas de remplacer "http://localhost/wp-admin/admin-ajax.php" par l'URL de votre site WordPress.
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!